PG.1
JUSTINMIND try your software before it’s built.
PROTOTYPER
FIRST TIME USERS’ GUIDE
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.2
JUSTINMIND try your software before it’s built.
PROTOTYPER INTRODUCTION TO THE KEY ELEMENTS OF PROTOTYPYNG
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
GETTING Prototyper’s main screen
STARTED
This ebook will guide
you through the proc-
ess of planning and Screens
creating a hi-fi wire-
Widget’s panel
frame of a login screen
using Justinmind
Prototyper.
Besides, you’ll learn
some useful tools from
the program:
• personalized
widgets
• drag and drop link
creation
• templates
Masters & Templates
• conditional flow Notes
DOWNLOAD Data Masters Properties, Events, Comments, Requirements
You can download
Justinmind Prototyper
at www.justinmind.com
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.3
JUSTINMIND try your software before it’s built.
PROTOTYPER DRAG AND DROP TO CREATE YOUR WIREFRAME
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Prototyper’s main screen
BASIC
WIREFRAMES
You can drag and
drop the widgets from
the panel to the main Drag these widgets
screen. You can edit
their properties such as
size, color and more on
the properties panel,
down below.
TIP: MyWidgets
You can also create
personalized widgets.
Modify your objects as Drop them here
you wish, group them
and drag and drop to
any group of the My-
Widgest panel.
And edit them here
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.4
JUSTINMIND try your software before it’s built.
PROTOTYPER IMPROVE YOUR SPEED WITH TEMPLATES AND MASTERS
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Create as many templates as you want You can export and share templates
TEMPLATES
AND MASTERS
Manage them here
Templates are back-
ground layers you
can put on the pages
you have, and can be
reused several times
over. You’ll have the
default Template 1,
which is blank. If you
edit it, every page on
your project will be
affected. If you only
want to change a few
pages, you can create TIP: Difference between
another template. You masters & templates
can always change
which template a given Templates stay in the background of any page,
page uses. under every object.
Masters can be placed anywhere in the page, includ-
ing over other objects.
Both are shareable, exportable, importable and
can be used to avoid re-creating constant layouts,
objects or effects.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.5
JUSTINMIND try your software before it’s built.
PROTOTYPER SHOW INTERACTIVITY WITH HI-FI WIREFRAMES
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Login wireframe Edit your event’s properties
HIGH FIDELITY
WIREFRAMES
Let’s create the login
screen. When the event occurs
THE EVENT What event will happen
PANEL
The events panel is
where the magic is.
There you can simu-
late all sorts of com-
TIP: Events mon web effects and
interactions. Select any
Take some time to given object and click
This is for conditional events
study all events. This on create new event.
can help you to under- Then, you’ll decide
stand how to simulate what will happen and
almost everything you when.
need.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.6
JUSTINMIND try your software before it’s built.
PROTOTYPER CONTROL YOUR EVENTS WITH CONDITIONS
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Conditional link Condition
CONDITIONAL
EVENTS?
Those are events that
happen IF some other
thing happens too. For
example, you cannot go
to login page if you type The password is 12345
the wrong password.
This is the event we’ll
create here.
We only want this link to
work if the password typed
is 12345. So we add a There are several functions
condition to this link: if it’s
wrong, it won’t go to the
screen called new.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.7
JUSTINMIND try your software before it’s built.
PROTOTYPER CREATE PATHWAYS FOR YOUR USERS
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Edit your event’s properties
NAVIGATION
SCENARIOS
Go to the Scenarios Navigation widgets Create several scenarios
Screen. There you can
create your naviga- Here’s your flowchart
tion flowchart, and
understand the steps
the users will do while
navigating in your site.
Let’s have a look at it.
TIP: Links
Scenarios and require-
ments can be linked to
pages and objects. Just
drag and drop them
over an object to create Here are your screens
a link.
TIP: Requirements
Manage what must be
Requirements and Comments
done in your projects in
this Panel. These are
very useful for
documentation.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.8
JUSTINMIND try your software before it’s built.
PROTOTYPER HOW TO NAVIGATE THROUGH THE LOGIN SCREEN
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Login screen
SCREENS
WORKING
With templates, we’ve
done the header of the
page.
Using events, we cre-
ated a login that goes
to a failed page if you
don’t type the right
password.
If password is 12345 If password is not12345
Using Scenarios, we
linked each screen
to the specific part in
the flowchart, and can
manage all require-
ments the project
needs.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.9
JUSTINMIND try your software before it’s built.
PROTOTYPER SHARE YOUR WORK WITH COLLEAGES AND CLIENTS
INTRODUCTION HI-FI WIREFRAMES SCENARIOS SHARING WORK
Getting used to the software, Events, widgets, drag and drop Definying navigation flow, Working online, exporting
basic wireframes. links. designing paths. documentation.
Click to generate a HTML prototype
COLLABORATE TIP: Justinmind OnDemand
ONLINE Beta
You can export your Justinmind OnDemand Service allows you
work in HTML, gener- to share your work with clients and col-
ate documentation in leagues without any software installation.
.doc format and also You upload your project, send the invites to
share it online. your colleagues’ mails, and they’ll be able
to see, comment and annotate. You’ll be
able to see their comments and to import to
WHAT CAN I DO your prototype later on.
WITH HTML
PROTOTYPE?
You can generate
documents that can be
viewed in any browser,
by any client, and even
put online. It’s perfect
for usability testing, cli-
ent presentations and to
improve team’s commu-
nication.
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

PG.10
JUSTINMIND try your software before it’s built.
PROTOTYPER
FOR MORE TUTORIALS, VISIT
WWW.JUSTINMIND.COM/BLOG
JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and
PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.