GETTING STARTED

Get the basics to start prototyping

Tutorial Beginners

Getting Started

01
To create a new prototype,
you will need to select the
type of device the prototype
will run on.
Some of the features
in Justinmind will be
configured depending on
your selection. Special
events and simulation will
adapt to the type of
prototype.

Getting Started

02

After pressing next, this

window will show up. Youll
need to choose one of the 4
options.

The content can be based on

provided templates, images,
or another prototype file.

Getting Started

Empty:
this option creates an empty prototype of the
prototype device chosen from the previous screen.

Another:
Open new project using an existing .vp file. This option
can be used to convert a prototype from one device to
another ( for instance, from web to iPhone).

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

Example:
A list of example prototypes will appear for each device.
These sample prototypes are useful to learn how to use
Justinmind.
A brief description demonstrates what is included in the
selected example.

Getting Started

03
2
9
Once you have chosen
how you want to start
your prototype,
press Finish.
The dialog will close and
the workspace with all
the tools and palettes will
be displayed

3
10

6
5

Getting Started

1. The Menu Bar:

The menus for the different tasks are organized by topic.
For example, the File menu has commands to generate
HTML, documents or images.

2. The Toolbar:
It contains quick editing options for the selected
component. It gives access to the most common options
and a selection of the most frequently used editing tools.

2
1

Getting Started

3. User Interface Tab:

It covers everything related to screen editing and
interaction in the prototype.

4. Widget Palettes:
This feature provides you with all the elements you can
add to a screen. Simply drag them to the canvas or click
the item and then click again on the desired position of
the canvas.

3
4

Getting Started

5. Canvas or Work Area

It displays the content of the active screen and allows you
to add or change its components.

6. Screen Tree
It lists the screens in your prototype. Access its content
by double-clicking on any part of the tree

5
6

Getting Started

7. Properties of the Selected Element:

Here you can edit the properties of the graphic style of the
selected component (color, border, font). It also includes
a section where you can add comments, interactions and
requirements related to the element.

8. Content of Current Screen:

The components in the active screen on the canvas
appear as a list. You can also select them individually
and change them from here.

Getting Started

9. Opened screens tabs:

They are extremely useful for jumping quickly between the
most recently opened screens. The selected tab is the
active one in the canvas.

10. Simulation Button:

Test the navigation of the prototype as if you were the
end user by clicking the simulation button.

10

Getting Started

04

Widgets are components

that can be used to
create the aesthetic
design and supplement
functionality.

Select the desired

libraries from the
add/remove libraries
menu option

Getting Started

05
From the widgets tab, drag
and drop the widget you
want to the canvas.
Once inside the canvas,
you can re-size and move it
to fit in your design.
To move it, select it
and drag it to the desired
destination;
you can also move it using
the arrow keys

Getting Started

To help you on your design,

you can use also these other options:
1. The automatic alignment system
(blue guidelines)
2. The Grid
3. The Rulers
4. The Guides

If you want to create a guide, click on the rulers

and a new guide will be created. Then drag it to the desired place.
To delete it, simply select it and press the delete key.

Getting Started

06
In dragging multiple
widgets to the screen, the
outline panel will become
populated with each
respective name
in a hierarchical view
for organization.

Getting Started

07
To change the order of
depth, right click the item
(or select it
in the Outline), select
Order and then
the option you want from
the submenu.
This action may
additionally be completed
through the Edit
dropdown located on the
editing toolbar.

Adjacent to each
widget within the
outline view is an
eye icon that allows
widgets to be
temporarily hidden
if needed.

Getting Started

09
In order to expand the
prototype to include more
screens, you can create
screens by clicking
the + button on top of
the Screen tab.
A new screen will be
created and you can
assign a name to it.

You can rename a

screen by right clicking
it. Then select edit from
the context menu.
If you want to delete a
screen, right click it and
select delete.

Getting Started

Browsing through your wireframe

As you add more screens to your prototype, you will need to navigate between
them. There are several options to do this.
Navigator Utilities. They are on the left side of the
Simulate button and include:
- View Home Page: It is the starting point to your
prototype; it will be the first screen the users will see
when you publish the prototype online or you export it
to HTML. It is marked with an arrow in the Screens
tab. If you want to replace it by another screen, right
click on the screen you want to be the new home
screen and select Set as initial screen.
- Previous: Opens the latest edited screen.
- Next: Opens the screen you were in before pressing
the Previous button.

Site Map: click the Site Map tab located at the top part
of the canvas.
From here you will see which screens you can
navigate to from the active screen. When you go from
one screen to another, the application shows you all
the available routes. This site map is updated
automatically each time a new link is added to the
prototype.

Getting Started

Justinmind allows you to copy and paste widgets within the same screen or onto
other screens.
You can use the options in the Edit menu or the usual keyboard
shortcuts of Ctrl+C (copy) and Ctrl+V (paste).
To duplicate elements, drag them to the desired position by holding
down the Ctrl key or with Ctrl+D.
Remember: Whatever action you do, you can undo it or redo it from the Edit menu.

Getting Started

10

Most of the components in

widgets palette
are interactive.
Drop them into
the canvas and click the
Simulate button.
For example, if you move
the Input Text component
into the canvas and activate
the simulation mode, you
can enter text in it as if it
was a real application.

Getting Started

The select list are also interactive components:

you can set their values from the Properties tab.
The Menu and Navigation Tree components are special cases.
Menu. Drag it into the canvas and indicate the size of the bar.
Drag the menu items it should contain inside it and put them in the desired position.
Navigation Tree. It works just like the Menu: drag it to the canvas and drag
the tree nodes you need inside it.

In both cases you can customize the style of the tree or menu
and its components from the Properties tab.

Getting Started

11

Use the events panel to add

interactivity to your prototype
by creating actions triggered
by the widgets on your
screen.

Getting Started

The most basic available option is linking between screens,

which can be done in several ways:
1. Selecting the link to action within the events dialog
2. Using the right-click option Add link
3. Dragging the widget you have in the canvas to the screen
you want to link it to, in the screen panel
4. Dragging a screen to a widget in the canvas

Getting Started

12
1

Once the screens have been

designed, and the events
defined accordingly, use the
green simulate button
to test the interactivity.
If you wish to share
the prototype to the linked
Justinmind online account,
select either
the share button or use the
share menu item.

For prototypes
designed for use on
mobile devices,
view on device is
available when the
justinmind mobile
application is
installed on the
testing device.

TRY IT NOW FOR FREE!

Get the Justinmind editor and start prototyping

DOW NLOAD NOW

Justinmind Inc
225 Bush St. Fl. 12
San Francisco, CA 94104
jim.sales@justinmind.com
www.justinmind.com