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.
Open Justinmind, and choose between the Beginner and Expert modes available:
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.
Now click ‘Next’ and this window will show up:
You’ll need to choose one of the following options:
This option creates an empty prototype for the device chosen in the previous screen.
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.
- 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.
- 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.
- Delete all. This option clears all the uploaded images.
- A list of pre-loaded example prototypes will appear for each device. These sample prototypes are useful to learn how to use Justinmind.
- A brief description explains what is included in the selected example.
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.