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.
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.
A “Create a new prototype” dialog will appear prompting you to choose from a carousel selection of web and mobile templates
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. You can choose from a selection of predefined dimensions, or customize the height and width as preferred.
- 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.
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. The selection of examples includes responsive, adaptive and eCommerce websites.
- 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)
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.
Let’s explore the palettes in the User interface.
The Canvas is where you can place the elements on the screen. This is where you will build the prototype or wireframe.
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.
To add a new screen, click on the ‘+’ icon in the Screens 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.
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.
Click on the ‘Add widgets’ text in the palette to add other widget libraries to your widgets palette and add them to your prototype.
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.
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.
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.
From the Widgets palette, drag and drop the widgets you want to include in your prototype to the Canvas.
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.
Use the indicators that appear to resize an element.
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.
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.
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.
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.
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.
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.
>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.
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.
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.
Option 3: the Events palette
To create a linking event from the Events palette:
- Select the element from the screen you wish to link to another screen.
- Go to the Events palette.
- 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.
By creating a link in this way, you can also link to the previous screen in your prototype or an external URL.
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:
- Drag the Hotspot widget over the area of the image you want to make interactive.
- 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.
- Click “Simulate” and click on the area where you’ve placed your hotspot. You’ll be taken to the screen you linked it to.
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:
- Open a prototype that contains an Image representing a sign in form.
- From Justinmind’s Basic Widget Library, drag an Input Text Field widget and place it over the Username input area within the Image.
- Select the Input Text Field and resize it so it covers the relevant area of the image.
- Then, go to the Properties palette and remove the border of the Input Text Field.
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.
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:
- 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.
- From the dialog that appears, choose where you want to export to from within your folders.
- Click “OK”.
Save your prototype as images
To save different components of your prototypes as images:
- Select the “File” option from the main menu.
- Select “Save as images” from the drop-down. You can also enter “F8” on your keyboard.
- 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)).
- Choose where you want to save the images from within your folders and click “OK”.
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:
- Click on “Share” in the main menu, and then select “Share” from the dropdown.
- In the dialog that appears, you can decide to place your prototype in an existing project, or create a new one.
- Once you’ve selected/created a project, click “Share” to share your prototype to your online account.
- 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”.
- You will be taken to your online account. From within the project folder, go to the prototype you want to invite reviewers to.
- To invite someone to review a prototype, click the “Invite reviewers” button.
- In the dialog that appears, you can enter the email addresses of the reviewers and write a message or any instructions to them.
- Click “Send invitations” to invite reviewers. The reviewer(s) will then receive an email containing a link to the prototype ready for review:
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.
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:
- Go to the Google Play store or App store and search for “Justinmind”.
- Install and download the app.
- Once the app has been installed, open it. You will be prompted to sign in to start using your Justinmind account.
- 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.
There are two ways reviewers can view your mobile prototype on their mobile device:
- 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
- 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.