Learn how to prototype web and mobile apps

Introduction to Justinmind Prototyping tool

Justinmind is a prototyping tool that allows you to create unique, interactive and life-like simulations of your web and mobile apps.

With Justinmind, you can easily include your corporate image in your prototypes, export them to HTML for online presentation, and automatically generate specification documentation in a Microsoft Word document.

Do all of this without needing any programming knowledge or creating a single line of code.

Instantaneous Simulations

By clicking on the ‘Simulate’ button, you can see your prototype in action, and interact with it as if it were the real application or website.

No Code Required 

Justinmind is an intuitive tool, and you can drag the components you need from the floating palettes to the work area.

Automatically generated documentation

Generate all the documentation you needin just a few clicks.

Exportable in HTML format

You can export your web or app wireframes or prototypes in a variety of different formats, (HTML, .csv and MS Word docs), so that your customers and users can see how they look, interact with them online and give informed feedback. Avoid rework and improve usability in your apps by incorporating Justinmind from the very beginning of you project.

If you publish your prototypes to your Justinmind online account, your customers can comment directly on your designs, in a collaborative effort. Follow their comments as if they were conversation threads in a forum, and take advantage of their feedback; and remember, if you include this step at the prototyping stage, you can save time in the later development stages.

Here a few tips to help you get started on your Justinmind prototypes

A prototype is a preliminary version, or visual rendering, of a software program, application or website. The purpose of a prototype is to illustrate how the program or application is going to look and behave when development is complete, in order to get a better insight into its capabilities and limitations early on. It may also be referred to as mock-up or wireframe, depending on its level of fidelity.

Read more about the difference between a mockup, a wireframe and a prototype here.

The User Interface is a collection of all the graphical or visual components, commands and behavior within a platform or tool, and is essentially the space where interactions between the user and the prototyping tool occur.

A Screen is a group of visual components gathered into an editing area. It may also be referred to as a Page.

A Functional Scenario is a graph of application components that represent the application’s general behavior, such as navigation and processes.

A Comment is a user’s written remark that relates to the prototypes that they are viewing.

Getting started with Justinmind

To start using Justinmind, you need to go to the installation folder (or any shortcut you may have chosen to create in the operating system menu/desktop) and double click on the icon.

A start-up image with a loading progress bar displays for a short time, right before the actual application interface is displayed.

If this is the first time you’re starting up the application, or if you have not disabled the functionality in the File > Preferences menu, a welcome window displaying shortcuts for common task will appear. This window offers a few options to help you get started with the program:

Introduction to Justinmind Prototyping Tool

  1. Click on the ‘x’ to close the window and start creating a new prototype
  2. Launches the process to create a new prototype
  3. Opens an existing prototype
  4. Opens a recent prototype. This list contains all the projects that have been recently opened with Justinmind
  5. A quick tour of the main features of Justinmind
  6. Opens the Support section with the list of tutorials to learn how to use Justinmind
  7. Takes you to Justinmind’s website

Next tutorial > How to set up an interactive wireframe