Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to simulate mobile gestures in your app wireframes

Simulate gestures in your mobile wireframes and make them even more interactive, thanks to the extensive set of options available in Justinmind.

You can download the example below here.

Mobile gestures in mobile app prototypes

mobile-gestures-interactive-prototype

In Justinmind, gestures are different from transition effects. Gestures are those actions that you will perform on your mobile app (tapping with a finger, swiping on one section of the screen, etc.) and transitions are what your mobile app wireframe will do as a result of these user gestures.

If you want to wireframe scrollable sections, you don’t need to define gestures. Simply define a scrolling area and the mobile simulators will handle that for you. Scroll bars also work if the wireframe is being viewed on a real mobile device.

To define an event controlled by a gesture, just select the ‘Add event’ option in the Events tab and select the kind of gesture you want to capture. Then define what you want to do when that gesture happens.

Next tutorial > Customize SVG vectors in your interactive prototypes

8 Comments

  1. jose

    November 9, 2014 at 5:16 pm

    Hi,

    i would like to see a default text of “username” and “pasword” in the “log-in buttoms” on my web prototype. But the actions i would like to see by clicking on those buttoms are the elimination of each texts and to be able to overwrite “the real username” and “real pasword” over those fields.

    Have I explain myself?Sorry but english is no my tongue lenguage

  2. Luca

    July 23, 2015 at 10:25 am

    Hey there,
    I am attempting to put together a tablet app and one of the requirements is that it is able to move fluidly from portrait into landscape view and back again. I understand that when simulating you are able to change the current view however whenever I do so it simply attempts to stretch the current page. Is there a way to either define that when rotate occurs there is a change in the sizing of objects, or alternatively link to a separate page?

    Thank you for your time.

    • Lidia Rodriguez

      July 24, 2015 at 11:00 am

      Hi Luca, in this case, you should create the protoype for both orientations (changing the individual screens propierties and duplicating the content for landscape and portrait). Then, create an ‘on Orientation Portrait’ or ‘on Orientation landscape’ event that will link to the desired screen.

  3. Daniel Lim

    August 3, 2015 at 12:55 pm

    Hi there,

    I am trying to build a tinder style mobile application and I was wondering whether I could simulate the user experience whereby should a user swipe right on the picture, the picture and its details would be saved in a separate page under ‘Favourites’ or ‘Saved’

    Thanks!

    • Danielle Schneider

      August 3, 2015 at 10:26 pm

      Hi Daniel,

      You can definitely do that. You can create an event that sets the value of a variable if the user swipes right. Then, on another page, have an event that detects that variable’s value, and will insert the swiped profile if the variable holds a certain value. If this is unclear, feel free to send us your prototype at jim.support@justinmind.com and we can help implement these features.

  4. Jordan Mather

    August 5, 2015 at 5:37 pm

    How do you define a scrolling area? I cannot seem to find any tools that allow me to create this without creating a gesture. There are lists that have scroll areas but that is only for lists. I am creating a page with multiple cards on it that the user needs to be able to scroll through. Can you help me?

    Jordan

    • Danielle Schneider

      August 5, 2015 at 10:55 pm

      Hi Jordan,

      You can do this using a dynamic panel with scroll, or you can use a dynamic panel and put cards inside it, and restrict scrolling to the parent container.