Wireframing tool workspace
Get to know your wireframing tool workspace and speed up your workflow with this detailed description of Justinmind’s UI.
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 menu, to 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.
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. Events/Comments/Requirements tab. In this tab, you will be able to add events/comments/requirements to your UI elements.
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, events 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.
From the Navigator tab, you can navigate through your prototype.
From the CSS palette, you can copy the styles (default or your customized styles) of UI elements, including width, height, font family, size and weight and color, to other design tools or programs. Note that you cannot modify any content here. To edit properties, revisit the Properties tab.
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.
9. 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.
10. 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.