justinmind prototyper's first steps

JUSTINMINDPROTOTYPER

PG.1

JUSTINMIND PROTOTYPER is an authoring tool to create HIGH FIDELITY WIREFRAMES and PROTOTYPES for WEBSITES and SOFTWARE. For more information, visit WWW.JUSTINMIND.COM.

try your software before it’s built.

FIRST TIME USERS’ GUIDE

http://www.justinmind.com



PG.2



INTRODUCTION TO THE KEY ELEMENTS OF PROTOTYPYNG

HI-FI WIREFRAMES

Events, widgets, drag and drop links.

INTRODUCTION

Getting used to the software, basic wireframes.

SCENARIOS

Definying navigation flow, designing paths.

SHARING WORK

Working online, exporting documentation.

GETTING STARTEDThis ebook will guide you through the proc-ess of planning and creating a hi-fi wire-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• conditional flow

Prototyper’s main screen

DOWNLOAD

You can download Justinmind Prototyper at www.justinmind.com

Widget’s panel

Masters & Templates

Data Masters

Screens

Notes

Properties, Events, Comments, Requirements



www.justinmind.com


PG.3



Prototyper’s main screen

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


BASIC WIREFRAMESYou can drag and drop the widgets from the panel to the main screen. You can edit their properties such as size, color and more on the properties panel, down below.

Drag these widgets

Drop them here

And edit them here

TIP: MyWidgets

You can also create personalized widgets. Modify your objects as you wish, group them and drag and drop to any group of the My-Widgest panel.

DRAG AND DROP TO CREATE YOUR WIREFRAME




PG.4



HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


IMPROVE YOUR SPEED WITH TEMPLATES AND MASTERS

TEMPLATES AND MASTERSTemplates 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 another template. You can always change which template a given page uses.

Create as many templates as you want You can export and share templates

Manage them here

TIP: Difference between masters & templates

Templates stay in the background of any page, 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.




PG.5



SHOW INTERACTIVITY WITH HI-FI WIREFRAMES

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


HIGH FIDELITY WIREFRAMESLet’s create the login screen.

Login wireframe Edit your event’s properties

THE EVENT PANELThe events panel is where the magic is. There you can simu-late all sorts of com-mon web effects and interactions. Select any given object and click on create new event. Then, you’ll decide what will happen and when.

TIP: Events

Take some time to study all events. This can help you to under-stand how to simulate almost everything you need.

When the event occurs

What event will happen

This is for conditional events




PG.6



CONTROL YOUR EVENTS WITH CONDITIONS

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


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 wrong password. This is the event we’ll create here.

Conditional link

We only want this link to work if the password typed is 12345. So we add a condition to this link: if it’s wrong, it won’t go to the screen called new.

Condition

The password is 12345

There are several functions




PG.7



CREATE PATHWAYS FOR YOUR USERS

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


NAVIGATION SCENARIOSGo to the Scenarios Screen. There you can create your naviga-tion flowchart, and understand the steps the users will do while navigating in your site. Let’s have a look at it.

Edit your event’s properties

Create several scenarios

Here’s your flowchart

Requirements and Comments

Here are your screens

Navigation widgets

TIP: Requirements

Manage what must be done in your projects in this Panel. These are very useful for documentation.

TIP: LinksScenarios and require-ments can be linked to pages and objects. Just drag and drop them over an object to create a link.




PG.8



HOW TO NAVIGATE THROUGH THE LOGIN SCREEN

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


SCREENSWORKINGWith 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.

Using Scenarios, we linked each screen to the specific part in the flowchart, and can manage all require-ments the project needs.

Login screen

If password is 12345 If password is not12345




PG.9



SHARE YOUR WORK WITH COLLEAGES AND CLIENTS

HI-FI WIREFRAMES


INTRODUCTION


SCENARIOS


SHARING WORK


COLLABORATE ONLINEYou can export your work in HTML, gener-ate documentation in .doc format and also share it online.

Click to generate a HTML prototype

WHAT CAN I DO 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.

TIP: Justinmind OnDemand BetaJustinmind OnDemand Service allows you to share your work with clients and col-leagues without any software installation. You upload your project, send the invites to 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 your prototype later on.




PG.10



FOR MORE TUTORIALS, VISIT WWW.JUSTINMIND.COM/BLOG



http://www.justinmind.com/blog

justinmind prototyper's first steps

Self Improvement

templates templates

widgets screen

personalized widgets

exportingbasic wireframes

high fidelity wireframes

prototyper introduction

herejustinmind prototyper

dropdefinying navigation