Start prototyping web and mobile apps
Welcome to Justinmind, the most powerful prototyping and design tool. With Justinmind, you can easily create interactive, realistic, and code free wireframes and prototypes of websites and mobile apps.
After following this guide, you’ll be well on your way to becoming a prototyping pro.
Let’s create your first prototype. After opening and signing into Justinmind, you’ll see a few options to create a new prototype. You can choose from these options:
- Create a brand new prototype
- Import from Sketch, Adobe XD, or Photoshop. Learn more about importing from other design tools.
- Open a previously created prototype
After choosing to create a new prototype, you’ll see a few devices to pick from, including Web, iPhone, and Android. The Justinmind editor will adapt according to the device you select.
Next, choose a template to start with. The template options you see will differ depending on which device you’ve chosen. Pick from these templates:
- Start with an empty Canvas. Depending on the device you chose, you’ll see options to specify the device dimensions, or to define the device orientation
- Start 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
- Start from a readymade example, like a responsive website, or some common use cases. Depending on the device you chose, these examples will be different
- Create a prototype from another Justinmind .vp file. This option is useful for converting a prototype from one device type to another (e.g. changing 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.
Justinmind’s User Interface is made of Palettes, which you’ll use to create and customize your prototype.
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 or frames 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 select other widget libraries and add them to your prototype.
While there are many widget libraries already included in Justinmind, you can download more widget libraries or create your own.
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 it above or below other elements.
Toggle 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.
Drag Widgets onto the Canvas
From the Widgets palette, drag and drop the widgets you want to include in your prototype to the Canvas, using the indicators that appear to resize the element. Use the Properties palette to style and customize elements.
Add an image to the screen by dragging 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 interactive Inputs
Justinmind’s Inputs are automatically interactive. Drag any element from the “Forms and Inputs” section of the Basic Widget library to the Canvas, and you’ll be able to interact with it during simulation.
Add another screen
Look to the Screens palette and click the ‘+’ icon to add a new screen. You’ll see a list of all the screens in your prototype in the Screens palette. You can double click on a Screen in the Screens palette to rename it.
Click on a screen in the Outline palette to see options to change the Canvas size, device type, and screen background color in the Properties palette.
Using links, you can navigate from screen to screen quickly and easily. With a link, a user can click on an element in simulation and switch to the screen it’s linked to.
Here are three ways to create links in your prototypes:
- 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.
- 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.
- The Events palette: Select the element from the screen you wish to link to another screen. Go to the Events palette and 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.
View your prototype’s interactivity by simulating. When simulating, you can 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 manually navigate throughout the screens in the prototype. You can close or minimize the simulation window to return to the Justinmind application.
Invite your colleagues to leave feedback on your prototypes by sharing them with reviewers. Reviewers will be able to view, interact with, and leave comments on screens and UI elements for free – no Justinmind account needed.
To have your prototype reviewed, you’ll need to share your prototype to your online account. Here’s how:
- 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:
After clicking on the prototype link, reviewers can view, interact, and leave comments on the prototype.
Depending on your notification settings, you’ll receive an email when a reviewer has left a comment on your prototype.
View your prototype on a real device using Justinmind’s mobile app.
First, 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:
- 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 device.
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 can download and install the Justinmind app, tap “Introduce token” at the bottom of the screen in the application, and enter the Token they received via email.