Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Wireframing tool workspace

 

Get to know your wireframing tool workspace and speed up your workflow with this detailed description of Justinmind’s UI.

 

Justinmind Wireframing tool User Interface

1. The Menu Bar. The menus are organized by task. Next to the usual File and Edit menus, you can find the View menu, to customize the workspace. You’ll also find the Simulate menu, to simulate your wireframes and prototypes on the web simulator or on the actual device, along with the Share menu, to publish your wireframes and prototypes online. Under the File menu, you’ll find the option Report to generate technical documentation (HTML, documents or images) from your prototypes. Then you’ll find the Widgets menuto manage and share UI element, and Teamwork, to collaborate with your team on shared prototypes. Finally, you’ll find the Plugins menu, to import any plugins in the Justinmind editor, and the Help menu, which will guide you through the program. Please note that some of these menus are not available in the Free edition.

2. The Toolbar. This contains quick editing options for the selected component. It gives access to the most common options, and it shows a selection of the most frequently used editing tools. Note the “Copy Events” option will let you copy an event and paste it on a different element.

prototyping-tool-toolbar-UI

a) Create a new prototype
b) Open an existing prototype
c) Save your prototype
d) Copy widget
e) Cut widget
f) Paste widget
g) Undo last change
h) Redo last change
i) Select with mouse (default)
j) Zoom in/out
k) Delete selected widget

3. The Tab Selector. This displays a tab for every section and allows the user to change the current one by clicking on the desired tab. A section is the main part of the application and allows the user to define or get information involving a specific part of the prototype. There are five different main tabs: User Interface, Comments, Site Map, Scenarios and Requirements. The Comments tab lists all the comments associated with the selected component in the canvas. A comment can be dragged to another component to change that association.

Note that when you resize the editor’s window, the five different tabs will be displayed in a drop-down menu (as you can see in the above image). When the editor is maximized, the tabs will be displayed one after the other horizontally.

4. Widgets Palette. In this tab you will find all the pre-made UI elements you can add to the screens of your prototype. Simply drag them to the canvas, or click the item and then click again on the desired position on the canvas. On the top left corner, you’ll see a book icon with a + symbol next to it. From there, you can access all the UI kits, also the ones created by you, and add them to the palette.

5. Canvas or work area displays the content of the active screen (or template or master) and allows you to add or change its components. In order to change the screen properties (size, background, etc.), you can click on the Screen element in the Outline tab and then change its size on the Properties tab. You can also go in the View Menu and select “Resolution guides” (only in Web templates). You have Screen tabs to move through the last opened screens. At the top of the canvas you can find the canvas tool bar. There you’ll find a drop down menu to control the zoom level you want to work with. Note that when you are editing text, the zoom is not applied until you finish editing.

Rulers are displayed around the canvas to display the height and width in pixels. You can create guides clicking on the rulers and drag them to the desired place. Check out more information about design tools in your prototyping software here.

The canvas is attached to the workspace by default; nevertheless it can be detached by selecting the detach/attach button next to the ‘Share’ button in the top right-hand corner of the workspace. The detached canvas can be moved freely around the screen by dragging the title bar of the frame. To resize the frame, drag any of its sides.

6. Contents tab lists all the screens, templates and masters in your prototype. Access its content by double-clicking on any part of the tree. The toolbar can be used to create screens or folders, and to organize the hierarchy of your screens. You can switch between tree and preview list. On preview list, the screens are displayed one below the other, and a preview of the contents of that screen is placed above its name. On tree list, the screens are organized in folders and only the names are listed.

In the screen list you will see the current screens in your prototype. Each screen has an icon that indicate if that screen is the initial screen and if it can be reached from the initial screen using links or not. If you right-click on the screen name, you will open an option menu.

If you leave the mouse on a screen name a couple of seconds, a preview of that screen’s content will be displayed.

The Templates panel lists all the templates included in the prototype. By default, a prototype has one template but you can create as many as you need. The panel has one button to create templates, and if you click on one of them in the list, the contents of that template are displayed in the canvas. Check out the tutorial about Templates for further information.

The Masters panel is very similar to the Templates panel. In both, an options menu is displayed when either a master or a template is selected using the right mouse button. The masters can be dragged to the screens. Check out the tutorial about Masters for further information.

7. Properties tab/Navigator. Here you can edit the properties of the selected component (e.g. color, border, font, position) and change the default name of the elements (in General – ID). It also includes a section where you can add comments, interactions and requirements related to the element. The properties are different for different types of widget. From the top right corner of the Properties tab, you can access the Default Styles Menu. If you click on “Restore Default Style”, you can change all the style properties by the ones defined by default for the selected component. If you select “Save as default style”, you will set the current style properties as the default for the selected type of widget. The new widgets added to the canvas will automatically have those properties.

In the Navigator tab, you can navigate through your prototype.

8. Outline tab (Data Masters Tab/Variables Tab). Content of current screen. The components of the active screen on the canvas appear here as a list. You can select them individually and change them from here. Note that distribution of the tabs can be customized by drag and drop. You can define the order of that components by drag and drop or using the arrow buttons at the top. Click the eye icon next to a component to hide its corresponding widget in the canvas. Click again to re-display the widget. Changing the widgets visibility allows you to simplify the view of your prototype while you are designing it, but does not have an effect when you simulate it. Drag through the eye column to change the visibility of multiple items.

You can switch from the outline tab to the Data Masters tab or the Variables tab.

9. Notes tab allows you to write your own notes about the screen visualized in the canvas. These notes will appear in the exported document too.

10. Opened screens tabs. These are extremely useful for jumping quickly between the most recently opened screens. The selected tab is the active one in the canvas. Simulation button. By clicking the Simulate button, you can test the navigation of the prototype and experience it as if you were the final user, without having to export it.

The panel organization is customizable by the user by drag and drop. A dragged panel tab can be dropped into:

  • A panel group, to add it to the group.
  • Between panel groups in a dock, to add it to the dock. A new group panel will be created.
  • An empty dock, to add a new panel group to this dock.
  • A free area (any area excluding the previously mentioned), to create a floating dock.

Note that the target dropping areas are highlighted in turquoise.

Panel groups are also draggable by dragging the empty area on the right side of the group tabs. Groups can be dropped in the same areas mentioned previously.

Next tutorial > Design tools for your prototypes: Rulers, Guides, and Grids

8 Comments

  1. lesar

    January 23, 2015 at 12:02 am

    How can i change the canvas size after I have created one? Let’s say from 1024×780 to 1024×1600…

    • Lidia Rodriguez

      March 6, 2015 at 10:39 am

      Go to view – Resolution guides.

  2. Viraj

    June 7, 2015 at 4:38 am

    It does not allow me to reduce the screen heigth. My screen size is 1024*1500.
    Now I need to set it as 1024*768
    But it does not change the height after setting resolution guides.
    Why?

    • Lidia Rodriguez

      July 3, 2015 at 10:12 am

      Hi Viraj, you can change the screen properties by clicking on the Screen element of the outline panel and then change its size on the properties tab.

  3. samia Says :

    August 19, 2015 at 10:58 pm

    Hi,
    I am trying to add home screen menu icons at the bottom of the phone which stays there even if you scroll up and down. i have created a template but when i add dynamic panel for scrolling its over lays the icon bars.
    hope i am clear in my question.
    Looking for help asap.

    • Danielle Schneider

      August 19, 2015 at 11:01 pm

      Hi there,

      Try using parallax widgets to pin the icon to the bottom.

  4. Daniela

    October 6, 2015 at 1:53 am

    how i could rotated the screen if i started the prototype in a vertical position?

    • Danielle Schneider

      October 6, 2015 at 2:05 am

      Select the base page in the outline, then look at the properties panel. You should see an option to change the orientation to landscape.