Learn how to prototype web and mobile apps

How to create interactive events and simulate your prototypes

This video explains the best way to make your wireframes interactive and bring them to life by adding events. We’ll go over the steps you need to follow to achieve a fully functional web or mobile prototype.

You’re all set! Now you might want to learn how to share your prototypes or take a look at the list of tutorials available.

Justinmind provides rich interactive events that add functionality to any web or mobile prototype

1. Adding events to your web or mobile prototype

To add events, begin by selecting a widget on the screen and choose the add event button in the events panel. The events dialog can also be reached by right clicking the widget to show the add event menu item. Once the dialog has appeared, use the drop down box to select the trigger that will prompt the event to commence. After the trigger has been specified, choose an action from the left menu to determine the behavior of the event. Depending of the type of widget used, event triggers and possible actions may vary.

Let’s create some events to demonstrate the capability of the event builder. Start by dragging both a button and rectangle widget to the screen. Selecting the button and opening the event builder, create an on click event with an action of change style. Within the change style preview window, select the rectangle widget to specify this element as the target of the action and change the border property to another color. Then, choose ok to exit the dialog.

Multiple events can be added to a single widget, whether of the same type or another. To create another event, select the button widget and open the event dialog once again. Use an on mouse enter event type with an action of set value. Since the set value event will effect the text displayed on the button, ensure the preview screen has the button widget selected before entering a fixed value.

Navigating to the events panel will show all events associated when a given widget is selected.

2. Simulating your interactive wireframe

To view the events in action, simulate the prototype and use the previously defined event triggers to view the results. When the mouse cursor enters the bounds of the button, the text will change according to the value previously specified. In the event the button is clicked, the border of the rectangle will change color. These events depict a small subset of available events definable within Justinmind. Now that the generalities of events have been presented, it’s just a matter of customizing actions to meet the needs of web or mobile prototype.


One Comment

  1. faysal

    September 16, 2015 at 10:40 am

    Very Nice, i appreciate your efforts, i am completely new to wireframing, JustInMind saved my life. very easy to use and huge features, i am loving it.