Start prototyping web and mobile apps

Justinmind is a prototyping tool that allows you to create interactive, realistic simulations of your web and mobile apps. Use it to create code-free wireframes and prototypes.

Creating a new prototype

Before you start creating your wireframe or prototype, you’ll need to choose a device template to design with. Our templates come in a selection of sizes and types to accommodate both web and mobile interfaces (e.g. Web, iPhone, iPhone Plus, iPad and Android).

Selecting a device template

To create a wireframe or prototype using a device template, start by opening Justinmind. From the “Welcome to Justinmind” dialog that appears, click the “Create a New Prototype” option.

start prototyping

A “Create a new prototype” dialog will appear prompting you to choose from a carousel selection of web and mobile templates. Select from the following templates:

  • Web
  • iPhone X
  • iPhone
  • iPhone Plus
  • iPad
  • Android
  • Android tablet
  • iPhone 5
  • iPhone 4
  • Custom (select if no pre-defined template applies)

create new prototype

Note: some of Justinmind’s features will automatically adapt to the template you select. Some changes may only take effect in simulation mode.

With your preferred device template selected, click “Next”. in the next dialog window, you can specify how you want your prototype template to be set up. Select from the following options:

  • Create a prototype from an empty template
  • Create a prototype from an image file or set of image files
  • Create a prototype from a readymade example
  • Create a prototype from another Justinmind .vp file

open new prototype

Click “Back” to return to the list of available device templates or “Finish” to complete the set up of your wireframe or prototype.

Create a prototype from an empty template

Select this option if you want to design your prototype from a blank canvas. Below, you can customize the dimensions of your template:

empty template

  1. Choose from a selection of predefined dimensions and then click “Finish”
  2. Or customize the height and width as preferred and then click “Finish”
Note: if you don’t want to change the dimensions, simply click “Finish”.

Once you’ve completed the set up, simply drag and drop UI elements to the canvas to get started.

Create a prototype from an image file

Select this option to create a prototype from an image or set of images, and choose from the following sub-categories:

create prototype images

  1. Select an image file from your folders
  2. Link to image files – select this option if you’re working on images across multiple design tools, such as Adobe Photoshop or Illustrator. Updates made to images from other design tools will automatically sync to your Justinmind prototype .
  3. Include images in prototype – select this option to embed images in your prototypes
Note: If you have selected an iPhone or iPad template, the images will be automatically resized to fit the size of the canvas. Retina images won’t lose quality when displayed in a retina display.

Create a prototype from a readymade example

Select this option to create a prototype from a pre-built example. The selection of examples includes responsive, adaptive and eCommerce wireframes. To select an example, simply click on one and then click “Finish”.

create prototype example

Create a prototype from another Justinmind .vp file

Select this option to create a prototype using an existing Justinmind prototype as a template.

This option is useful for converting a prototype from one type of device type to another (e.g. converting a web prototype into a mobile prototype).

Choose a prototype from your folders and then click “Finish”.

create prototype another

When you’ve clicked “Finish”, the “Create a new prototype” dialog will disappear and you’ll be taken to the canvas. The canvas will display the first screen of your prototype (created automatically upon completing the setup of your prototype).

It’s time to get prototyping.

Designing the first screen of your prototype

From the Widgets palette, drag and drop the widgets you want to include in your prototype to the canvas.

Note: once a widget is placed on the canvas, it is referred to as an element, or UI element.

How to work with UI elements in the canvas

You can move, copy and paste, cut, lock, delete, duplicate, order, group and re-size UI elements on and around the canvas to fit your design:

Move an element

To move an element around the canvas, select it with the mouse on the canvas and drag and drop it to the desired position. You can also move elements using the arrow keys on your keyboard. Holding down the “Shift” key will move the element faster.

add element

Copy and paste an element

To copy and paste an element within the same screen or onto other screens, right click on the element (from within the canvas or Outline palette) and select “Copy” from the menu that appears.

Then right click on the area you want to paste the copied element to on the canvas. Select “Paste” from the menu.

gif-3

Alternatively, enter “⌘” or “Ctrl” + “C” on your keyboard to copy and “⌘” or “Ctrl” + “V” to paste the copied element on top of the original.

Cut an element

To cut and paste an element within the same screen or onto other screens, right click on the element and select “Cut” from the menu, or enter “⌘” or “Ctrl” + “C” on your keyboard.

Then right click on the area you want to paste the element to on the canvas. Select “Paste” from the menu.

cut-element

Lock/Unlock an element

To lock an element (so that its position and size is fixed), right click on the element and select “Lock” from the menu.

To unlock an element, select “Unlock”.

delete element

Delete an element

To delete an element from the canvas, right click on the element and select “Delete” from the menu, or press the “Backspace” or “Delete” key on your keyboard.

duplicate element

Duplicate an element

To duplicate an element, right click on the element and select “Duplicate” from the menu.

stacked elements

Alternatively, to quickly and easily duplicate an element, drag it to where you want the duplicate pasted on the canvas, whilst holding down the “⌘” or “Ctrl” key. Let go of the element and the duplicate element will be placed in that spot on the canvas.

Change the order of stacked elements

To change the order of stacked elements on the canvas right click on one of the stacked elements and select “Order” from the menu.

change-order

Choose an option from the contextual menu that appears:

contextual menu

  1. Bring to front (this brings the selected element to the front the stack)
  2. Send to back (this sends the selected element to the back the stack)
  3. Move forwards (this brings the selected element one step closer to the front of the stack)
  4. Send backwards (this sends the selected element one step toward the back of the stack)

Group elements together

Grouping two or more UI elements together will allow you to move, copy, resize and reorder (in relation to other groups) multiple elements at the same time.

To create a group, select all the elements you want to group together on the canvas or from the Outline palette (either enter “⌘” or “Ctrl” + “A” on your keyboard, or use your mouse to select them), right click on the selection and select “Group” from the menu.

group together

Resize an element

To resize an element, select it and hover your mouse over one of the resizing handles (located on each corner of the element, as well as on the top, bottom, left and right borders). Click and drag your mouse once the pointer changes to a resize handle.

To keep the object’s shape proportional, press the “⌘” or “Ctrl” and the “Shift” keys while dragging.

resize

Managing your prototype’s screens

To perform the following operations for your prototype’s screens, go to the Screens palette.

Selecting a screen

To select a screen, simply select it from the list within the Screen palette. It will automatically appear in the canvas.

selecting screen

Adding a new screen

To add a new screen to your prototype, click the ‘+’ button, give your new screen a name and click “OK”.

adding new screen

Renaming a screen

To rename a screen, right click on it and select “Edit” from the context menu.

rename screen

From this menu, you can also:

  • Set this screen as the initial screen
  • Center the screen’s content
  • Lock vertical scroll
  • Lock horizontal scroll

Deleting a screen

To delete a screen, right click on it and select “Delete” from the context menu.

delete screen

Duplicating a screen

To duplicate a screen, right click on it and select “Duplicate” from the context menu. The entire screen, including any UI elements and events, will be duplicated.

duplicate screen

Editing the properties and style of a screen

Changing a screen’s properties

To change a screen’s properties, such as its background color and transparency, select it in the Outline palette and go to the Properties palette. Here you will be able to make your changes.

changing screen properties

Resizing a screen (only for web and custom prototypes)

To change the dimensions of screen in a web prototype, go to the “View” option in the main menu and select the “Resolution guides…” option.

Here you can change the dimensions of your screen, by selecting a pre-defined height and width or by customizing them yourself.

resolution guides

You can also change the dimensions of a screen in the Properties palette. Make sure you have the screen selected in the Outline palette.

change dimensions outline

If you would like more information about your prototype’s screens, click here.

Links and clickable elements

Enable users to navigate from screen to screen quickly and easily by creating links between different screens. If an element is linked to a screen, the user can click on the element and be taken to the linked screen.

There are four ways to create a link in your prototypes:

  • Drag and drop a UI element to a screen
  • Drag and drop a screen to UI element
  • The “Add link” for elements on the canvas
  • Creating a linking event in the Events palette
Note: you will need at least two screens to create links between them.

Option 1: creating a link with drag and drop (element to screen)

Select the element from the screen you wish to link to another screen. Drag it to the screen you wish to link it to in the Screens palette.

creating link

An “On Click” + “Link To” event will be created automatically.

When the user clicks on this element, they will be taken to the linked screen during simulation.

Option 2: creating a link with drag and drop (screen to element)

Go to the Screens palette and drag another screen to an element in the screen currently displayed on the canvas.

link screen element

An “On Click” + “Link To” event will be created automatically.

Note: don’t click on the screen you want to link to an element in the Screens palette – simply drag the screen to the element. The screen containing the element you’re linking to must be in view on the canvas.

You might create events for elements from the same screen that direct the user to more than one other screen.

Option 3: creating a link for elements on the canvas

Select the element from the screen you wish to link to another screen. Right click on it and select the “Add Link” option from the menu.

From the drop-down list in the dialog that appears, choose the screen you wish to link the element to and click “OK”.

link on canvas

This creates an “On Click” + “Link To” event.

Option 4: creating a linking event in the Events palette

To create a linking event from the events palette:

  1. Select the element from the screen you wish to link to another screen.
    • Go to the Events palette.
    • Click “Add Event”.
    • linking event events palette
  2. In the dialog that appears, choose the screen you wish to link this element to from the list provided. You don’t need to add the event manually because the “Link To” action is selected by default.
    • Click “OK”.
    • link to action
    • By creating a link in this way, you can also link to the previous screen in your prototype or an external URL.

Clickable images

With Justinmind, you can make your prototype’s images interactive using the Hotspot widget.

Use the Hotspot widget when you want different areas of an image (or other UI element) to link to different screens.

To make your images interactive using the Hotspot widget:

  1. Drag the Hotspot widget over the area of the image you want to make interactive.
    • hotspot widget
  2. Select the Hotspot and create a linking event (using one the above methods). In our example below, we create a link by dragging the Hotspot to the target screen.
    • hotspot linking event
  3. Click “Simulate” and click on the area where you’ve placed your hotspot. You’ll be taken to the screen you linked it to.
    • simulate hotspot

Making your images’ input areas interactive

Make input areas within your images (such as input text fields and buttons) interactive with Justinmind’s Input elements.

You can make most of Justinmind’s UI elements transparent from within the Properties palette. This is really helpful when you want to make a static portion of an Image editable or clickable.

For instance, allow the user to write text in an input field displayed within an image by adding an ‘invisible’ editable element on top. Follow the steps to learn how to do so:

  1. Open a prototype that contains an Image representing a sign in form.
  2. From Justinmind’s Basic Widget Library, drag an Input Text Field widget and place it over the Username input area within the Image.
  3. Select the Input Text Field and resize it so it covers to relevant area of the image.
  4. Then, go to the Properties palette and remove the border.

Simulate, export and share your prototypes

Simulate, export and share your prototypes easily with Justinmind.

Simulate your prototype

This option lets you visualize and interact with your prototype in real-time by simulating it. To do so, click the “Simulate” button or enter “F5” on your keyboard.

simulate prototype

To enter the full screen mode, click the screen’s maximize button, or enter “F11” or “Ctrl” + “⌘” + “F” on your keyboard.

To remove the device’s frame from view in Simulation mode, click the arrow at the top of the window:

simulation mode

Export your prototype to document

This option lets you export all of your prototype’s specifications and generate a specification document. To do so:

  1. Select the “File” option from the main menu.
  2. Hover over the “Export to Document” option from the drop-down.
    • export to document
  3. From the contextual menu that appears, either choose “Export to DOCX” or “Customized document…”.
  4. Select “Export to DOCX” to save your prototype in a Microsoft Word document with all the default settings in place – you’ll need to choose where you want to save it from within your folders and then click “OK”.
    • Select “Customized document…”. In the “File + configuration” tab, you can customize how your specification document will look (e.g. whether or not you want to include numeric markers in screen captures, whether you want to include Data Masters, whose comments etc.):
    • customized document
  5. In the “Contents” tab, you can choose which screens, templates, scenarios, and data masters you wish to include in your specifications document:
    • customised document specs
  6. In the “Filters” tab, you can choose whether to include the prototype’s comment, and whose comments (user or collaborator comments). You can also choose whether to include requirements and from which category (accepted, revised, discarded etc.):
    • filters tab

Make your selection and click “Generate Report”.

Export your prototype to HTML

This option lets you export your prototype to HTML. To do so:

  1. Select the “File” option from the main menu.
    • Select “Export to HTML” from the drop-down. You can also enter “F7” on your keyboard.
    • export html
  2. From the dialog that appears, choose where you want to export to from within your folders.
  3. Click “OK”.

Save your prototype as an image

This option lets you to save different components of your prototype as an image. To do so:

  1. Select the “File” option from the main menu.
  2. Select “Save as images” from the drop-down. You can also enter “F8” on your keyboard.
    • save as image
  3. From the dialog that appears, choose which of the prototype’s components you wish to save (Site Map, screen(s), template(s) and scenario(s).
    • save image dialog
  4. Choose where you want to save the images from within your folders and click “OK”.

Export your prototype or prototype components

With Justinmind’s export and import features, you can export elements from one prototype and import them into another prototype.

Note: exported prototypes have the “.vp” file type extension.

This is an easy way to share different parts of your design with your team, without having to share the entire prototype. However, the best way to work on prototypes with your team is through Team Prototyping.

To export a prototype:

  1. Hover over the “Export” option from the File main menu drop-down.
    • export option
  2. Select the “Prototype…” option from the contextual menu that appears.
  3. The following dialog will appear:
    • export dialog
      1. Here, choose where to export your prototype to
      2. Select which prototype components you want to export
      3. On the right in the dialog you’ll find two buttons.

Select “Add Direct Dependencies” to automatically add all the elements that are direct dependencies of the elements currently ticked.

Select “Add All Dependencies” to include all dependencies.

Click “OK” to export.

Import your prototypes or prototype components

To import a prototype:

  1. Hover over the “Import” option from the File main menu drop-down.
  2. Select the “Prototype…” option from the contextual menu that appears.
    • import prototypes
  3. The following dialog will appear:
    • import dialog
      1. Select a Justinmind prototype you wish to import from within your folder
      2. Once selected, the bottom area displays a list of conflicts. A conflict occurs when there are elements in the imported prototype with the same name and type as other elements in the open prototype.

For each conflict detected, the system offers three possible actions to choose from: 

  • Copy: Copies the element under a new name (the original name with a number suffix)
  • Update: Discards the original element and updates it with the imported
  • Discard: Discards the imported element and keeps the original one. This the default action

Once you have dealt with the conflicts, click “OK” to import.

Share and get feedback from reviewers: the basics

With Justinmind, you can invite your colleagues to review a simulation of your web and mobile prototypes. Reviewers will be able to view and interact with your prototypes and leave comments on screens and UI elements.

To have your prototype reviewed, you will need to share your prototype to your online account. Learn how to do so with this video:

If you would like more information about sharing your prototype to your online account, click here.

Adding comments to your prototype

You can add comments to your prototype’s screens and UI elements whilst in Justinmind’s editor.

To add a comment to a UI element, right click on the element in the canvas or Outline palette and select “New comment” from the menu.

add comment

To add a comment to a screen: right click on the screen in the Screens palette and select “New comment” from the menu.

new comment

Manage your prototypes comments

There are two ways to manage your prototype’s comments in Justinmind:

  • From the canvas – at the bottom of the editor, you’ll find the Comments palette. Here you’ll see the comments related to the screen you’re currently working on
  • From the Comments module you can organize, search and filter all of your prototype’s comments

manage comments

The comments module

This is what you’ll find in the Comments module:

comments module

  1. The toolbar: create a new comment or refresh comments
  2. Choose which comments to display by filtering comment references, related components, authors, dates etc.
  3. A list of all the prototype’s comments or those displayed upon filtering the comments

You can modify comments in the following ways:

modify comments

  1. Reply: creates a comment as a reply to the selected comment
  2. Modify: edits information (e.g. author) of the selected comment
  3. Create Requirement: creates a new requirement and associates this comment to it (only available to Justinmind Enterprise users)
  4. Category: changes the color of the selected comment
    • Edit legend: configures the categories colors and their labels
  5. Delete: deletes the selected comment. You can delete more than one comment at once.

Learn more about the Comments module here.

Retrieve reviewer comments (for shared prototypes)

To retrieve reviewer comments related to your shared prototype:

  1. Select the “Share” option from the main menu and choose the “Refresh comments” option.
    • This will upload any new comments and allow you to view them in Justinmind’s editor.
    • retrieve reviewer comments
  2. In the dialog that appears, you’ll need to decide whether you want to replace or copy new comments that have the same ID. Once you’ve made your choice, click “OK”.
    • import comments

How to test mobile prototypes on a real device

Simulating a mobile prototype on your device

Justinmind allows you to simulate your iPhone and Android mobile app prototypes on real mobile devices.

You’ll need to download and install the Justinmind app, from the App Store or Google Play. Follow these steps to set up your Justinmind mobile app:

  1. Go to the Google Play store or App store and search for “Justinmind”.
    • justinmind app playstore
  2. Install and download the app.
  3. Once your app has been installed, open it. You will be prompted to sign in to start using your Justinmind account.
    • install app
  4. Once signed in, you will see a list of your shared prototypes stored in your Justinmind online account.

Tap on a prototype to download it and view it on your device. Prototypes with a red dot next to them have not been downloaded to the mobile device yet. To download them and run the simulation, just tap on them.

You will then be able to interact with your prototype on your mobile screen.

download prototype

Viewing a mobile app prototype on a device

There are two ways reviewers can view your mobile prototype on their mobile device:

  • In their mobile browser: The reviewer taps on the link you share with them and they will be taken to their default browser to view the simulation
  • Via the Justinmind mobile viewer “View on device”: The reviewer will need to download and install the Justinmind app (see above). Upon opening and signing in to the app, they will be able to simulate the prototype you have shared with them by selecting the option “View on device”.

Reviewers trying to access a password protected mobile prototype via the Justinmind mobile viewer will need to introduce the password (Token) they received via email.

password protected prototype