Justinmind Prototyper's First Steps

50 %
50 %
Information about Justinmind Prototyper's First Steps
How-to & DIY

Published on October 8, 2009

Author: justinmind

Source: slideshare.net

Description

Our first how-to on creating wireframes and prototypes with Justinmind Prototyper.

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.

Add a comment

Related presentations

Belief comes through hearing. In order to have belief, we must listen, but we also...

Presentation held at the Etsy Team Captain Summit in Berlin, March 14-16, 2014

Download hack tool @ http://dragoncity.cooldownloadz.com

An how-to build an inexpensive Arduino Board for 5 USD.

step by step guide on how small businesses can start payroll software in -mid-year.

CLC Trendspotting - The Technologies of Makerspaces, presented by Edward Iglesias ...

Related pages

Justinmind Prototyper last edition by windows 10 x86

... m UserTesting Now Integrates With the Incredibly Awesome Justinmind Prototyper fo.Justinmind Prototyper s First Steps Our first how-to ... First, as a ...
Read more

A guide for web and mobile wireframing - JUSTINMIND

Justinmind Prototyper’s First Steps The prototype taught in this pdf can be seen working in this video.
Read more

Tutorial 03: Filtering data and hiding ... - JUSTINMIND

... real data with a datagrid in a JustInMind Prototyper's ... below the first with ... data and hiding elements with JustInMind ...
Read more

Justinmind Prototyper Userguide - scribd.com

Justinmind Prototyper Userguide. ... Justinmind Prototyper®'s main menu is located ... Master action following the steps: 1. If the first parameter ...
Read more

Justinmind Prototyper Tutorials - Documents

Justinmind Prototyper Tutorials ...
Read more

Sambo First Steps - Documents

Share Sambo First Steps. ... Justinmind Prototyper's First Steps Comments. RECOMMENDED. First steps. First steps. First Steps. First Steps for Founders.
Read more

Download Jukebox Jockey Media Player Platinum current ...

For Windows Developers who need to add video audio editing in Adobe Director.Justinmind Prototyper s First Steps Our first how-to on creating wireframes ...
Read more

First Steps - Documents

First Steps for Founders Since the acquisition of her first startup, Mint.com, Poornima Vijayashanker has transitioned from the role of founding ...
Read more

First steps - Engineering

Download First steps. Transcript. 1. Action plan, first steps RESOURCE & MANAGEMENT RESMANPSCE.WORDPRESS.COM . 2. RESMANPSCE.WORDPRESS.COM Where do we go?
Read more

First steps - Education

First steps 1. Action plan, first steps RESOURCE & MANAGEMENT RESMANPSCE.WORDPRESS.COM 2. RESMANPSCE.WORDPRESS.COM Where do we go? We want to define a ...
Read more