Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to set up an interactive wireframe with Justinmind

Learn how to set up an interactive wireframe in this tutorial. With Justinmind, you can not only start your wireframe from scratch, but also from an image, another Justinmind prototype (.vp) or a pre-loaded prototype example.

First of all, select the option File > New > Prototype or click “Create a New Prototype” in the Welcome window.

Select a device in the device selector, which lets you define the type of prototype you’re about to build, i.e. a web prototype, a mobile prototype for iPhone, iPad, etc. Some of the features in Justinmind will be configured depending on your selection, and special events and simulation will adapt to the type of prototype. The examples on the following screen will also be different depending on the option selected on this window.

Create an interactive wireframe - Device selector

Now click ‘Next’ and this window will show up:

Create interactive wireframe from empty template

You’ll need to choose one of the following options:

Empty

This option creates an empty prototype for the device chosen in the previous screen.

Create interactive wireframe from images

Images

If you selected iPhone or iPad as a device, the images will be resized inside Justinmind to the correct resolution. Retina resolution images won’t lose quality when displayed in a retina display.

  1. Add image file. Using this option, you will start your prototype with one screen for each image file. This is useful when different web pages have different designs. You also have the option to add additional images inside Justinmind.
  2. You can choose to embed the image in the prototype or make a link to the images you are working on. When linking the image, every modification to the image made outside Justinmind will be updated in your prototype without you doing any extra work. If you decide to link the images now, you still have the option to embed the images later in the prototype.
  3. Delete all. This option clears all the uploaded images.

Create interactive wireframe from examples

Example Prototype

  1. A list of pre-loaded example prototypes will appear for each device.  These sample prototypes are useful to learn how to use Justinmind.
  2. A brief description explains what is included in the selected example.

Another

By selecting this option, you can open a new project using an existing .vp file. This option can be used to convert a prototype from a device to another (for instance, converting a web prototype into a mobile prototype).

Once you have chosen how you want to start building your web or mobile prototype, press Finish. The dialog will close and the workspace with all the tools and palettes will be displayed.

Next tutorial > Your wireframing tool workspace

 

11 Comments

  1. Sailee

    December 6, 2014 at 6:27 am

    How do I publish prototypes online on my own server/host without using usernote?

  2. Han

    December 21, 2014 at 5:21 pm

    very useful, thanks!

  3. jim

    January 14, 2015 at 5:41 am

    installed on 6.3.1 on mac yosemite and found the fonts in UI are very small. How to make them bigger?

    • Lidia Rodriguez

      March 6, 2015 at 10:38 am

      There’s an issue regarding this matter. Hopefully it will be fixed soon!

  4. Yvan Yvder

    February 15, 2015 at 1:04 am

    Hi,
    JustInMind doesn’t support Windows Phone apps prototypes?

  5. Joe

    May 20, 2015 at 6:54 pm

    What is the file extension that JustinMind uses for saving files of the work that you have done?

    • Lidia Rodriguez

      July 2, 2015 at 10:26 am

      The prototypes are saved in .vp format (similar to .rar). Prototypes can be exported as HTML or images.

  6. Fa

    October 15, 2015 at 1:58 pm

    The settings for the prototype do not produce what I would expect for a Samsung Galaxy S5 phone. The specs read that the pixels are 1080 x 1920. What should they be to render properly and not weirdly. The provided Android phone choice is not correct.

    • Danielle Schneider

      October 15, 2015 at 11:04 pm

      Because the Samsung Galaxy S5 has a high resolution and high amount of pixels per inch (PPI), you will have to have the resolution be lower than 1080×1920. To prototype it correctly for that device, you should have the resolution set to 360×640.