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

You can also start prototyping from a Sketch or Photoshop file, which you can import into Justinmind using a plugin. You can learn more about how to start prototyping from Sketch here and from Photoshop here.

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
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:

  1. Create a prototype from an empty template. You can choose from a selection of predefined dimensions, or customize the height and width as preferred.empty template
  2. Create a prototype from an image file or set of image files. You can embed the image in Justinmind, or link to an image file, which will automatically sync updates made to images from other design tools such as Adobe Photoshop or Illustrator to your Justinmind prototype.Create a prototype from an image
    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.
  3. Create a prototype from a readymade example. The selection of examples includes responsive, adaptive and eCommerce websites.create prototype example
  4. Create a prototype from another Justinmind .vp file. This option is useful for converting a prototype from one device type to another (e.g. converting a web prototype into a mobile prototype)create prototype another

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

When you’ve clicked finish, the “Create a new prototype” dialog will disappear and you’ll be taken to the User Interface.

View the User interface

Let’s explore the palettes in the User interface.Justinmind User Interface

Note: depending on which interface you choose (Beginner or Expert) your user interface may show more or fewer palettes. You can show or hide different palettes by going to the View menu.

Canvas

The Canvas is where you can place the elements on the screen. This is where you will build the prototype or wireframe.

New Canvas in Justinmind

Screens palette

This is where you’ll find the screens in your prototype, which work similarly to artboards in other applications. Each screen contains its own Canvas. An entire prototype can contain many different screens, which you can link together using events.
Screens palette
To add a new screen, click on the ‘+’ icon in the Screens palette.
Create new screen

Widgets palette

Widgets are the elements you will use to build the prototype. Just click and drag an element from the Widgets palette onto the Canvas.
Drag a widget to the Canvas
In the Widgets palette, you’ll find various types of widgets, including shapes, text, input fields, and more. You can search for particular widgets by clicking on the ‘search’ icon in the palette and entering your query in the search box.
Search for a widget
Click on the ‘Add widgets’ text in the palette to add other widget libraries to your widgets palette and add them to your prototype.
Add new widgets
While there are many widget libraries already included in Justinmind, you can download more widget libraries here. You can also create your own custom widgets, which you can learn how to do here.

Outline palette

In the Outline palette, you can view all of the elements on the screen in hierarchical order. Use the arrows or drag an element to reorder an element to be above or below other elements. Click on the ‘eye’ icon to hide/show an element during editing.
Move element in the outline

Properties palette

In the Properties palette, you can view and alter the properties, such as color, size, position, and border of an element. Expand each of the sections of the palette to see more options to customize.
Highlighted properties palette

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

Move and resize 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

Use the indicators that appear to resize an element.
resize
You can enter in more precise positioning and sizing of an element by selecting it on the Canvas, and then entering its position, width, and height, in the “Position” and “Size” sections of the Properties palette.

Add Images

To add an image to the screen, drag an Image widget onto the Canvas. Then, double click on it to open a file browser and select an image file. You can also drag an image from your desktop or file explorer to the Canvas to add it to the prototype.
Add an image to the Canvas
Right-click on an Image to see options to cut, lock, duplicate, crop, flip, choose another image file, or open the image with its default editing application.

Image operations

Order elements

To change the positioning order of an element on the Canvas, right click on it on the Canvas, and hover over the ‘Order’ section in the menu.
Options for ordering

Align and distribute elements

To align elements, select them on the Canvas by dragging the selector around them, or Command/Control-clicking on each. Then, right click and hover over the ‘Align’ section in the menu to see alignment options. Hover over ‘Distribute’ to see distribution options. In Justinmind, alignment and distribution are relative to the last element selected, not the Canvas itself.
Align and distribute options

Change a screen’s properties

To change a screen’s properties, such as its background color and transparency, select it in the Outline palette and look to the Properties palette. Here, for Android and Web prototypes, you’ll also be able to change the size of the screen.

Edit a screen's properties

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

Note: you will need at least two screens to create links between them.

Here are three ways to create links in your prototypes:

Option 1: drag and drop

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: right click

Select the element you wish to link to another screen and right click on it. In the menu that appears, click on ‘Add Link’. You’ll then see a dialog to choose which screen to link to, and whether or not to specify a transition effect between screens.
link on canvas

Option 3: the Events palette

linking event 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.
  2. Go to the Events palette.
  3. Click “Add Event”.

In the dialog that appears, choose the screen you wish to link this element to from the list provided. The “Link To” action is selected by default, so just Click “OK” to finish building the event.
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.

Learn more about Events here.

Clickable images

With Justinmind, you can make sections of 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 ofthe 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 the relevant area of the image.
  4. Then, go to the Properties palette and remove the border of the Input Text Field.

Simulate and export your prototypes

With Justinmind, you can view your prototype’s interactivity by simulating. You can also easily export and share your prototype for others to review.

Simulate your prototype

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

When you simulate, you can see the results of any events and interactivity that you have created in your prototype.

Simulating will open a separate window with a top bar that contains controls to navigate throughout the screens in the prototype. You can close or minimize the simulation window to return to the Justinmind application.

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 and 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 images

To save different components of your prototypes as images:

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

Share and get feedback from reviewers

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 below:

  1. Click on “Share” in the main menu, and then select “Share” from the dropdown.Share to online account
  2. In the dialog that appears, you can decide to place your prototype in an existing project, or create a new one.Share prototype to project
  3. Once you’ve selected/created a project, click “Share” to share your prototype to your online account.
  4. A final dialog will appear confirming that your prototype has been successfully uploaded and published (shared). To view the shared prototype in your online account and start inviting reviewers to your prototype, click “View in my account”.view prototype in my account
  5. You will be taken to your online account. From within the project folder, go to the prototype you want to invite reviewers to.
  6. To invite someone to review a prototype, click the “Invite reviewers” button.Invite Reviewers to your prototype
  7. In the dialog that appears, you can enter the email addresses of the reviewers and write a message or any instructions to them.Invite reviewers to prototype
  8. Click “Send invitations” to invite reviewers. The reviewer(s) will then receive an email containing a link to the prototype ready for review:
    reviewer email

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

Another way of sharing your prototype with collaborators is Teamwork, which allows for multiple users to work on a prototype at the same time. Learn more about Teamwork here.

Additionally, you can share your prototype with your developers, who can view it in a developer-friendly interface in the Justinmind application. Learn more about the developer interface here.

Simulate a prototype on a real device

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

Prototype creators

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 the 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.
  5. 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.download prototype

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

Prototype reviewers

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

  1. In their mobile browser: The reviewer can tap on the link you share with them and they will be taken to their default browser to view the simulation
  2. Via the Justinmind mobile application: The reviewer will need to download and install the Justinmind app (see above). The reviewer should then tap “Introduce token” at the bottom of the screen in the application and enter the Token they received via email.Invite reviewers to check your prototypes on multiple devices