Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to add transition effects to your interactive wireframes

Add transition effects to your interactive wireframes with Justinmind. You can add a transition effect to any link event.

This is especially helpful when you’re prototyping mobile apps, slideshows or image carousels. You can also apply a transition effect when you change from one panel to another in a Dynamic panel.

You just need to select one of the transition effects in the events dialog, when you create a link event or a ‘Set Active panel’ event.

Transition effects and gestures work together seamlessly.

Let’s use transition effects to build a simple photo gallery for a mobile app, which has a page for each photo. To do so, you’ll need to define an interaction for each image so that the user can easily move from one photo to the other.

You can download the example below here.

transition-effects-example

Follow the next steps to build an interactive photo viewer prototype:

1) Create a new prototype for iPhone

2) Add 4 screens and drag an image on each one of them, of the same size as the screen.

3) Select the first image and go to the Events tab.

4) Add a ‘Gesture>On swipe left‘ + ‘Link to‘ event

Interactive wireframe transition effects: swipe left

5) Select the next picture (screen) that has to be displayed

6) Select the transition effect ‘slide left‘ and click OK.

7) Do the same for all the other photos.

8) Once defined all the events, it’s time to test the prototype on a real mobile device.

Interactive wireframe transition effects: events dialog

Next tutorial > Add Effects to your UI prototypes