Justinmind Prototyper's First Steps

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 background 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 simulate 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 requirements 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 requirements 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, client 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.

http://www.justinmind.com	53
http://blog.justinmind.com	47
http://www.slideshare.net	4
http://translate.googleusercontent.com	1

Justinmind Prototyper's First Steps

by Justinmind on Oct 08, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 105

Statistics

Justinmind Prototyper’s First Steps — Presentation Transcript