Quick tour – Get Started with Justinmind
With this video, we aim to make easy for you to get started in no time. We’ll go over the essentials you need to know to achieve beautiful and functional web and mobile prototypes.
In this tutorial, we’ll provide an overview of Justinmind to detail basic features.
1. Justinmind Basic Features
Let’s start by exploring the user interface. When first opening the application, you’ll be greeted by a welcome menu with commonly executed actions for easy access. In this case, we will create a new prototype and begin by selecting the type of device the prototype will run on.
Next, you’ll notice four options are given to specify the starting point. The content can be based on provided templates, images, or another prototype file. For this example, the empty option will be chosen to demonstrate a clean slate.
Once the main interface has been reached, you’ll see panels that control properties of screen elements, areas for defining data containers, and the available widgets. These widgets, as defined within the panel, are components that can be used to create the aesthetic design and supplement functionality. To ensure access to the necessary widgets is provided, simply select the desired libraries from the add/remove libraries menu option.
In dragging multiple widgets to the screen, the outline panel will become populated with each respective name in a hierarchical view for organization. The outline panel provides several purposes, one of which allows manipulation of widgets positions relative to others. In altering the position, components can be brought into and out of the foreground if necessary. This action may additionally be completed through the positioning dropdown located on the editing toolbar. Adjacent to each widget within the outline view is an eye icon that allows widgets to be temporarily hidden if needed.
Dragging a rectangle widget to the screen, we’ll demonstrate the flexibility of changes possible. With a widget selected, the properties panel will be populated with the editable set of customization options, tailored for each type of widget. Here, properties such as the background and border can be changed to customize appearance.
In expanding the prototype to include more screens, the plus icon can be used within the screens panel to add a new screen with a specified name.
Use the events panel to add interactivity to your prototype by creating actions triggered by the widgets on your screen. The most basic available option is linking between screens, which can be done by selecting the link to action within the events dialog or simply dragging the component that acts as a trigger to the next location in the screens panel.
2. Simulating in your device
Once the screens have been designed, and the events defined accordingly, use the green simulate button to test the interactivity.
If you wish to share the prototype to the linked Justinmind online account, and select either the share button or use the share menu item. For prototypes designed for use on mobile devices, view on device is available when the complementary Justinmind mobile application is installed on the testing device. Just select view on device and follow the given directions to interact using the chosen hardware.
Now that the basics of Justinmind have been discussed, you’re well on your way to creating highly interactive prototype designs.