Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Now that you’ve got the essentials, you might want to learn how to add animations and events or how to share your 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.

 

12 Comments

  1. Franz

    December 6, 2014 at 8:45 pm

    Hello
    it’s a very nice, useful tool, my compliments :)

    • admin

      December 9, 2014 at 1:35 am

      Wow, thanks!!

  2. Ahamdi

    December 27, 2014 at 5:47 pm

    Hi,
    Good illustration video. After this I guess the prototype is shipped to a developer for coding? I hope my understanding is in order.

  3. DBX12

    January 8, 2015 at 8:53 pm

    Very well done. It’s a very useful tool. :)

  4. Paul

    January 24, 2015 at 8:46 pm

    I just downloaded and it seems quite user friendly I am looking forward to getting my prototype up and funded ;0) Great job.

  5. Edward

    April 29, 2015 at 5:44 am

    Hi,

    I have been wandering weather or not I could insert my own or downloaded program’s into our app to run in a certain way.

    Any help would be appreciated.

    Thank’s
    Edward.

    • Lidia Rodriguez

      July 6, 2015 at 10:13 am

      Hi, it is always difficult to create interaction between justinmind and other softwares as it is a prototyping tool, note that you can send information to another program but Justinmind is not able to recieve information.

  6. Yoland

    October 9, 2015 at 7:42 pm

    Hi,

    Great tool, I’m going to dive deep into it for the next 30days, I’m starting my own project through an accelerator program this is exactly what I was looking for. Thank you for helping the entrepreneurs-to-be out there!

    Love from Paris,
    Y.

  7. Himalaya

    October 13, 2015 at 2:16 am

    Really nice software.
    If i may be so bold, You should give a thought to “prototyping + project collaboration”.
    And the best way of learning is by doing.

    • Danielle Schneider

      October 13, 2015 at 5:56 pm

      Thanks for the feedback and the suggestion!

  8. PATRICE

    November 17, 2015 at 8:50 am

    me also my english is verry basic and i want to know if i can have justmind learning lessons in french please

    • Sonia Duran

      November 17, 2015 at 9:02 am

      Hi Patrice, unfortunately we do not provide support in French. Only in English.
      Sorry for any inconvenience.

      Sonia Durán