The User Interface module

Get to know your prototyping tool workspace.

The User Interface module is where you will build the visual and interactive components of your prototypes. In it you’ll find:

user-interface-face-module-1

Toolbar

The toolbar contains quick editing options for the selected screen UI element. You’ll find the most common and frequently-used tools and commands.

module-toolbar-1

  1. Create a new prototype
  2. Open an existing prototype
  3. Save your prototype
  4. Copy UI element
  5. Cut UI element
  6. Paste UI element
  7. Undo last change
  8. Redo last change
  9. Select with mouse (default)
  10. Zoom in/out
  11. Delete selected UI element
  12. Copy Style
  13. Copy Events
  14. Remove device shell

The User Interface module

switch-between-modules-1

Here you can switch between different modules (such as User Interface, Comments and Scenarios) depending on what you want to do with your prototype.

There are five different main modules: User Interface, Comments, Site Map, Scenarios and Requirements (the Requirements module is only available for Justinmind Enterprise users).

main modules

When the editor display is maximized, the modules are displayed horizontally at the top of the editor. If the editor display has been reduced, the modules will be displayed in a drop-down menu.

Here’s an overview of each palette within the User Interface module:

user-interface-palette-overview-1

  1. Screens palette – the Screens palette lists all the screens in your prototype.
  2. Templates palette – the Templates palette lists all the templates included in your prototype. To learn more about prototyping with templates, click here. 
  3. Widget library palette -the Widgets palette contains pre-built widgets that you can use to create your prototype’s content. Simply drag and drop them to the canvas, or click on a widget and then click on the position in the canvas where you want to place it.
  4. Masters palette – the Masters palette lists all the Masters included in your prototype. To learn more about prototyping with Masters, click here
  5. Screens on the canvas – at the top of the canvas, you’ll see a tab for each screen within your prototype. These are useful for jumping between screens quickly. The selected tab is the active one in the canvas.
  6. Canvas – the canvas is where you will design your prototype’s screens, templates and masters by dragging widgets onto them. It displays the active screen, template or master.
  7. Properties palette – You can edit the properties of the selected UI element (e.g. name, color, border, font, position) in the Properties palette.
  8. Events palette – the Events palette is where you can add functionality to your UI elements and screens. Learn more about creating events in your Justinmind prototypes here
  9. CSS palette – from the CSS palette, you can copy the styles of UI elements (default or customized styles), including width, height, font family, size, weight and color to other design tools or programs. You cannot modify any content from the CSS palette. To edit properties, revisit the Properties palette (7).
  10. Outline palette – the Outline palette displays all UI elements in the selected screen.
  11. Data Masters palette – a list of your prototype’s Data Masters can be found here. Learn more about working with Data Masters and data-driven prototyping here
  12. Variables palette – a list of your prototype’s Variables can be found here. Learn more about working with Variables here
  13. Comments palette – the Comments palette lists all comments for your prototype. Learn more here. 
  14. Requirements palette – the Requirements palette lists all requirements for your prototype. Learn more about working with Requirements here.

Customizing the workspace

You can arrange your Justinmind editor as preferred by moving the floating palettes into different docks around the workspace. The target dock is highlighted in blue.

You can also drag a palette to a space unoccupied by a dock.

Expand and collapse floating palettes with the arrows in the top right-hand corner of each palette. Collapsed palettes will leave you more room to work in.

floating palettes

Your customized workspace will remain intact the next time you open Justinmind. To reset your workspace, choose the “Reset workspace” from the “View” main menu option. 

Show and hide palettes

You can also show and hide any of your floating palettes from the “View” main menu option. 

show-hide-palettes-1

Using the Screens palette

The Screens palette lists all the screens in your prototype.

You can add, delete and manage screens in the Screens palette.

screens palette

  1. Click to add a new screen to your prototpye
  2. Click to add a background image to a screen
  3. Click to create a folder for a screen
  4. Click to change how you view your screens (list view)
  5. Click to change how you view your screens (grid view)
  6. Click to unlink current screen from Home screen
  7. Click to link current screen to Home screen
  8. Click to move screen one position up in the screen hierarchy
  9. Click to move screen one position down in the screen hierarchy

Right click on a screen to manage an individual screen’s options:

manage-screens-options-2

  1. Click to add a new comment to the screen
  2. Click to add a new requirement to the screen
  3. Click to edit the name, template, description, position and scrolling properties of the screen
  4. Click to delete screen
  5. Click to set the current screen’s template as the default template for new screens
  6. Click to set the current screen as the Home screen of the prototype
  7. Click to apply template style of the applied template to your screen. Learn more here. 
  8. Click to duplicate the screen
  9. Click to categorize the screen. Choose from the following: Completed, To change, Discarded, None.

In the screen list, you will see your prototype’s screens, listed one below the other. The initial or Home screen will show this icon:

initial-home-screen-2

In one of the other screens contains a link to the Home screen, it will be displayed as a sub-page of the Home page, like so:

sub-page-2

Using the Widget library palette

Basic widgets library

Basic widgets are widgets that are commonly found in all devices, and are pre-loaded in the Widget library palette. They include: Lines and shapes, Forms and inputs, Navigation, Dynamic content, Special components widgets.

The widgets found in the group at the very top of the Basic widget library are the most commonly used basic widgets in user interface design:

basic-widgets-image-1

Text – a simple text box widget that holds a single line of text. You can only apply a single style to the text within this text box.

Paragraph – an advanced text box that allows you to enter multiple lines of text. You can apply different styles to the text within this text box.

Note that when a widget is placed on the canvas, it will be referred to as a “UI element” (or simply “Element”) going forward.

To edit the text in either UI element:

  1. Double click on the element on the canvas and enter the desired text.
  2. Then, enter “Enter” on your keyboard or click outside the element to save your changes.
  3. To cancel changes, enter “Escape”. You can also select the element and change its default text in the Properties palette.

Image – displays the image file that you have selected from your folders. Justinmind supports the following image file formats: BMP, JPEG, GIF, PNG and SVG.

Drag the Image widget to the canvas, double click it and select the desired image from your computer.

There are 3 alternative ways to place an image on the canvas:

  • Select your Image element on the canvas, go to the “Edit” main-menu option. Select “Image” and then “Browse” from the contextual menu and select an image from your folders
  • Select the screen from the Outline palette, click “Add Image” in the Properties palette and select an image from your folders
  • Simply drag image files directly from your file system to the canvas (no need to have an Image element on the canvas)

When you place an image on the canvas, you will be prompted to choose from the following options:

image-widget-on-canvas-1

  • Include image in prototype – click to include this image in your prototype
  • Link to image file – to ensure your prototype’s images take on any updates for when you’re working across different design tools

Learn more about working with images in your prototypes here

Operations with images

When you have an image in your prototype, you can perform multiple operations with it. If you view the context menu from an image component, you can find some image-only commands.

Those commands are also available in the image toolbar and the image menu bar:

operations-with-images-1

  1. Browse – click to select an image from your folders
  2. Open with default application – click to open the image with your system’s default application
  3. Open container folder – click to open the folder containing the image file
  4. Crop – click to adjust the bounds of the image file. Note that a linked images will need to be re-linked upon cropping.
  5. Flip horizontal – click to invert the image over the X axis. Note that a linked images will need to be re-linked upon inverting.
  6. Flip vertical – click to invert the image over the Y axis Note that a linked images will need to be re-linked upon inverting.
  7. Set original size – click to restore the image to its original size
  8. Embed in prototype – click to embed the image in your prototype
  9. Clear – click to remove the image file displayed. The image placeholder (that appears by default when you place an Image widget on the canvas) will replace your image file until you select another.
  10. Create a separate copy – click to duplicate image

Notes for Image elements:

  • If you have a linked image from a network drive or an external device, and you lose the connection, or if you delete the image file from your file system, Justinmind won’t be able to refresh your image. The last update will remain. A warning symbol in the top left-hand corner of your image will alert you to a broken link. Once the connection is restored, or the image has been put back into its original folder, the icon will disappear and the image will be updated.
  • When an image is added to Justinmind, it won’t lose quality, even when resized. Retina images will maintain retina quality on a retina display.
  • You can save any image added to Justinmind in your local folders. Save SVGs as PNG files if you want the images to retain their color properties.

Button – a button/label widget that holds a single line of text. Modify it in the same way as Text and Paragraph elements.

Input Text Field – see Forms and inputs

Text Table – organizes text in rows and columns. It is made up of cells, each behaving like the Paragraph element. When a Text Table is dragged to the canvas, it has three rows and three columns by default.

Notes for Text Table elements:

  • To select a row or column, click on the left edge of the row/top edge of the column when the cursor displays a right-pointing arrow or a down-pointing arrow. 
  • To edit a cell’s text, double-click on the cell to start editing. Make the desired changes and click outside the element to apply the changes. Or, enter “TAB” to start editing the next cell.
  • To cancel changes, enter “Escape”. You can also select the cell and change its default text in the Properties palette.
  • To edit the style of text within a cell, double-click on the cell to start editing. Highlight the text range you want to edit using the cursor, make the desired changes in the Properties palette or from the toolbar. Apply the changes clicking outside the cell or cancel them, entering “Escape”.
  • To insert new rows or columns, select the Text Table element in the Outline palette and select “New Row” or “New Column” from the menu. Alternatively, you can change the number of rows and columns in the Properties palette.
  • New rows will be added under the last row and new columns on the right of the last column.
  • New rows and columns can also be inserted between other rows or columns. 
  • To insert a new row between two other rows, select and right click on a row on the canvas and select “New Row”, and then either “Insert Row Below” or “Insert Row Above” from the menu.
  • To insert a new column between two other columns, select and right click on a column on the canvas and select “New Column”, and then either “Insert Column Left” or “Insert Column Right” from the menu.
  • To remove cell content, delete the text within a cell or group of cells, select the cell(s) and enter the “Delete”.
  • To remove rows and columns, select them and right click on the selection them. Then, select “Delete” from the menu.
  • To resize rows and columns, simply drag their borders.
  • To resize a row, drag its lower border when the cursor displays a vertical double-headed arrow. 
  • To resize a column, drag its right border when the cursor displays a horizontal double-headed arrow.
  • To resize an individual cell, select it, drag its sizing handles located at the bottom right-hand corner, right edge or bottom edge. Alternatively, select the cell and change its measurements in the Properties palette.
  • You can split cells into two parts of equal size, either horizontally or vertically. If a cell is split vertically, the cell is divided into different cells, half the width but same height. If a cell is split horizontally, the cell is divided in two different cells, half the height but same width.
  • To split a cell, right-click on it and select the “Split Cell Horizontally” or “Split Cell Vertically” from the menu. Then select a table cell and select Split Horizontally or Split Vertically in the Table menu.
  • A set of contiguous cells can be mergedinto one cell. When a group of cells is merged, their content is also merged in the new cell.
  • To merge cells, select them and make sure they all share at least one edge, then right-click on any of the selected cells and select “Merge Cells” from the menu.
  • You can copy content from a row, column or individual cell(s) to another section of your Text Table element using the standard copy/paste operations.
  • To copy a set of cells, first select them using the “⌘” or “Ctrl”.
  • Alternatively, you can copy and paste cells to a location outside the Text Table. A new table will be created using the copied cells, with identical content and properties.

Lines and shapes

Lines and shapes widgets help you create simple shapes and forms in your prototypes:

lines-shapes-1

Line – displays a simple line and can be used to build different shapes

Arrow – displays an arrow. The arrowhead can be rotated as needed

Rectangle – displays a rectangle

Ellipse – displays an ellipse

Triangle – displays a triangle

Callout – displays a callout

Forms and inputs

Forms and inputs widgets allow the user to insert data into the prototype. They are mainly used to create input forms:

lines shapes

Input Text Field – text box that allows the user to enter a value during simulation

There are six types of values you can assign to the Input Text Field: Text, Text Area, Password, Number, Email and URL. Once dragged to the canvas, you can change the type of value in the Properties palette:

  • Text – a text box that holds a single line
  • Text Area – a text box that can hold several lines of text with automatic vertical and horizontal scroll bars
  • Password – a text box that holds a single line that will hide the text during simulation
  • Number – a text box that holds a single line that will only accept numbers during simulation on a mobile device
  • Email – a text box that holds a single line that will only accept text in email format during simulation on a mobile device
  • URL – a text box that holds a single line that includes “.com” during simulation on a mobile device

Check Box – displays one of two states (checked/unchecked) in response to a binary choice that the user has made (e.g Boolean True or False statements)

To change the default state of the Check Box, either double click on it in the canvas or change it in the Properties palette.

To change the state of the Check Box during simulation, simply click it once.

Radio Button – displays one option from a set of mutually exclusive items

Change the Radio Button’s default state in the same way as with the Check Box.

Unlike the Check Box, you can’t change the state of a Radio Button during simulation once checked. Events must be used to change a Radio Button’s state, as they usually work together with other Radio Buttons.

Date – represents a date and/or time within an input text field. You can set one of three value types for this widget from the Properties palette:

  • Date – prompts the user to enter a date in MM/DD/YYYY format
  • Time – prompts the user to enter a time in HH:mm format
  • Date and Time – prompts the user to enter a date and time in MM/DD/YYYY HH:mm format

To edit the default value of this widget, double-click inside the input text field. A dialog with a calendar/digital watch page/both will appear (depending on which value type you have selected). Enter the desired date/time/ date and time and click “OK”.

During simulation, click on the element to edit it.

File Upload – allows the user to select and upload a file from their folders. It is displayed by an input text field with a Browse button on the right-hand side. The text held within this widget cannot be changed directly.

To add a file to the File Upload element during simulation, click on Browse button and select the desired file from your folders. Select “Open” to use the path to the selected file.

List Box – displays a list of values. Only one value can be selected at a time. 

You can edit the values of the Select List element in the Properties palette, by clicking the “Edit values” option.

To set the default selected value, double-click on the desired value from within the element on the canvas. You can also change the default value in the Properties palette under “Value”.

To select a value from the List Box widget during simulation, click on the desired value from within the element.

Select List – a basic drop-down widget that contains a list of values

You can edit the values of the Select List element in the Properties palette, by clicking the “Edit values” option.

To set one of its values as default, double-click on the desired value from within the element on the canvas. You can also change the default value in the Properties palette under “Value”.

To select one of its value during simulation, simply click once on the element and select a value from the drop-down.

Note: the properties of the Select List cannot be customized. How this element is displayed during simulation depends on the device. For instance, devices that operated with Android will display drop-down menus.

Custom Select List – this widget is similar to the select list, but with customizable properties and displayed in the same way across devices

You can edit the values of this element in the Properties palette, by clicking the “Edit values” option.

To set one of its values as default, click on the element in the canvas and select a value from the drop-down. You can also change the default value in the Properties palette under “Value”.

To select one of its value during simulation, simply click once on the element and select a value from the drop-down.

Multi-select – a multi text line widget that displays a list of values. More than one value can be selected at a time.

You can edit the values of this element in the Properties palette, by clicking the “Edit values” option.

To set the default value(s), double-click on the desired value(s) from within the element on the canvas. You can also change the default value in the Properties palette under “Value”.

To select/de-select a value during simulation, simply click on the value(s). Remember that you can select as many values as you like.

Radio List – a single selection widget that displays a list of values, each with its own radio button. Only one value can be selected at a time.

Radio Button Lists have two different value display styles:

  • Vertical – displays values in a drop-down
  • Horizontal – display values along a horizontal line

Change the orientation in the Properties palette under “Orientation”.

To set the default value(s), double-click on the desired value from within the element on the canvas. You can also change the default value in the Properties palette under “Value”.

To select/de-select a value during simulation, simply click on the value from within the element.

Navigation

Navigation widgets provide the most common forms of web and app navigation. These widgets are fully customizable and adaptable:

navigation widgets

Button – a Button that holds a single line of text

Once on the canvas, double-click on the Button to start editing its text.

Alternatively, you can select the Button and change its default text in the Properties palette.

Hotspot – acts as a clickable area and is used to define events. The Hotspot is placed on top of other UI elements in the canvas and allows you to add events to specific spots within a screen.

It appears as a faintly-green rectangle on the canvas and is transparent during simulation.

Tree – displays a vertical arrangement of Tree Node widgets organized in a hierarchical structure

Once on the canvas, two root Tree Nodes and one sub-node inside the first will appear by default.

Customize the nodes in the Properties palette with the “Expand” and “Collapse” options.           

Tree Node – nodes that can be added to a Tree UI element on the canvas.

Notes about Tree Node elements:

  • To add a Tree Node to a Tree, drag and drop it on top of the Tree in the canvas. Give the node a name in the dialog that appears dialog and click “OK”.
  • To add a subnode, drag and drop a Tree Node widget on top of another Tree Node within the Tree element on the canvas. A green line will guide you when placing the new node. Give the node a name in the dialog that appears dialog and click “OK”.
  • To remove a node, select the node you want to delete on the canvas. Enter “Delete” on your keyboard or right click on the node and select “Delete” from the menu.
  • The order and hierarchy of nodes can be changed once they’ve been created. To change a Tree Node position within a Tree, drag and drop them into place. A green line will guide you when placing the new node.
  • To edit a Tree Node’s text, select the node you want to modify and go to the Properties palette. Select “Value” to make the desired changes.
  • To change a Tree Node’s icons, each tree node can display a different icon to help the user determine when they have been expanded or collapsed. These icons can be assigned through the Properties palette.

To do so, select the Tree Node on the canvas and go to the Properties palette. Click the ‘+’ icon next to the “Expand”/ “Collapse” option to choose an icon from your folders respectively.

Menu – used to create basic fly-out menus. Like the Tree widget, Menu widgets are made of items (Menu Item widgets) also organized in a hierarchical structure.

Menus have two different display styles:

  • Horizontal: Like a main menu of a desktop application.
  • Vertical: Like a sidebar menu.

Change the orientation in the Properties palette under “Orientation”.

Menu Item – a Menu Item widget can only be created inside an existing menu widget.

Notes about Menu Item elements:

  • To add a new Menu Item to a Menu, drag and drop a Menu Item widget on top of a Menu element on the canvas and place it as desired. A green line will guide you when placing the new node. Give the item a name in the dialog that appears dialog and click “OK”.
    • You can also add items within a Menu Item by right clicking on the Menu Item in the canvas and selecting either the “Add Menu Item After” or the “Add Menu Item Before” from the menu.
  • To add a new item as a sub menu of a Menu Item, drag and drop a Menu Item widget on top of another item element on the canvas and place it as desired. A green line will guide you when placing the new node. Give the item a name in the dialog that appears dialog and click “OK”.
    • You can also add sub menus to a Menu Item by right clicking on the Menu Item in the canvas and selecting “Add Submenu” from the menu.
  • To remove items, select the item you want to delete on the canvas. Enter “Delete” on your keyboard or right click on the node and select “Delete” from the menu.
  • To move items, the order and hierarchy of items can be changed once they’ve been created. To change a Menu Item position within a Menu, drag and drop them into place. A green line will guide you when placing the new node.
  • To edit an item’s text, to change the text displayed by a menu item, first select the item you want to change and then edit its text in the “Value” field in the Properties palette.
  • To change a Menu’s orientation, change the orientation in the Properties palette under “Orientation”.
  • To change an item’s icon, each item can display an icon. These icons can be assigned through the Properties palette. To do so, select the Menu Item on the canvas and go to the Properties palette. Click the ‘+’ icon on the left of the “Add Image” option to choose an icon from your folders.

Dynamic Content

Dynamic Content widgets are container widgets. This means that they can contain other widgets within them and behave as a single widget:

dynamic content widgets

Dynamic Panel – an advanced container widget. In a prototype’s screen it holds other UI elements.

Learn more about the Dynamic Panel widget here.

Data List – displays Data Master Records in list form

Learn more about the Dynamic List widget here

Data Grid – displays Data Master Records within a grid or table cells

Learn more about the Dynamic Grid widget here

Summary – a label widget that displays the number of results available in all listed pages of data and what values are being displayed at a given time

This widget cannot be directly edited as its content is associated with Records from a Data List or Data Grid.

To change its associated Data List/Grid, drag it to the canvas, go to the Properties palette and select the desired Data List/Grid from the “Data Grid” option.

Index – a label widget that displays the number of indexed pages of data based on the number of rows per page established

Like the Summary widget, the Index widget cannot be directly edited as its content is associated with Records from a Data List or Data Grid.

Once dragged to the canvas, the Index element will display the number of indexed pages of Records in a Data List/Grid. The current page index will be highlighted in bold.

To change its associated Data List/Grid, drag it to the canvas, go to the Properties palette and select the desired Data List/Grid from the “Data Grid” option.

Learn more about using Summary and Index widgets in Data-driven prototyping here

Special components

Special components widgets help you to bridge the gap between your prototypes and other design tools, such as Adobe, Microsoft Word and YouTube. These widgets are container UI elements that can hold other components such as eDocs, links to sites or flash files:

special components

Table – organize content in rows and columns

The Table widget forms a grid or table that can hold other UI elements such as text boxes, paragraphs and images.

When dragged to the canvas, the Table element has two rows and two columns by default, though these can be modified in the Properties palette.

Notes about Table elements:

  • To select a row, click on the left edge of the row when the cursor displays a right pointing arrow. 
  • You can also right-click on a cell in the desired row and select the “Select Row” option from the menu, or select a cell in the desired row and select the “Select Row”
  • To select a column, click on the top edge of the column when the cursor displays a down pointing arrow.
  • You can also right-click on a cell in the desired column and select the “Select Column” option from the menu, or select a cell in the desired column and select the “Select Column” option in the Table menu.
  • Rows or columns can be added to existing ones. New rows will be added beneath the last row and new columns on the right of the last column.
  • To add a row or a column, right-click on the Table element in the canvas and click the “New Row” or “New Column” option from the menu.
  • To insert new rows between other rows, right-click on a row in the Table
  • Click the “Insert Row Below” or “Insert Row Above” option from the menu.
  • To insert a new column between two other columns, right-click on a column in the Table element and click the “Insert Column Right” or “Insert Column Left” option from the menu.
  • You can also select the Table element and change the number of rows/columns in the Properties palette.
  • Delete a column or row by selecting it and entering “Delete” on the keyboard, or right-clicking on the selection and selecting “Delete” from the menu.
  • Column width and row height can be changed by dragging their borders.
  • To resize a row, drag its lower border when the cursor displays a double-headed arrow.
  • To resize a column, drag its right border when the cursor displays the double-headed arrow.
  • Individual cells can also be resized. Changing the size of a cell will automatically modify the size of the corresponding column and row to fit the new cell size.
  • To resize a cell, select the table cell, and drag its sizing handles. These are located at the bottom right-hand corner, right edge or bottom edge.
  • You can also select the table cell and specify its size in the Properties palette.
  • You can split cells into two parts of equal size, either horizontally or vertically. If a cell is split vertically, the cell is divided into different cells, half the width but same height. If a cell is split horizontally, the cell is divided in two different cells, half the height but same width.
  • To split a cell, right-click on it and select the “Split Cell Horizontally” or “Split Cell Vertically” from the menu. Then select a table cell and select Split Horizontally or Split Vertically in the Table menu.
  • A set of contiguous cells can be mergedinto one cell. When a group of cells is merged, their content is also merged in the new cell.
  • To merge cells, select them and make sure they all share at least one edge, then right-click on any of the selected cells and select “Merge Cells” from the menu.
  • You can copy content from a row, column or individual cell(s) to another section of your Text Table element using the standard copy/paste operations.
  • To copy a set of cells, first select them using the “⌘” or “Ctrl”.
  • Alternatively, you can copy and paste cells to a location outside the Text Table. A new table will be created using the copied cells, with identical content and properties.

HTML – displays HTML code by embedding a webpage within it

When dragged to the canvas, the HTML element displays the following text by default: “The content of the body element is displayed in your browser”. 

To add HTML code to your wireframe, follow the below steps:

  1. Copy the HTML code from the source.
  2. Drag an HTML widget to the canvas.
  3. Go to the Properties palette and paste the HTML code into the HTML field.
  4. Click outside the Properties palette to apply the changes.

URL – displays a web page by embedding the webpage’s URL When dragged to the canvas, the URL element displays Justinmind’s homepage by default.

To change the web page displayed, follow the below steps:

  1. Copy the URL from the source.
  2. Drag a URL widget to the canvas.
  3. Go to the Properties tab and paste the URL into the URL field.
  4. Click outside the Properties tab to apply the changes.

Document – displays external text documents. It supports PDF, TXT and XML files. When dragged to the canvas, the Document element displays a PDF file as an example by default.

To change the document displayed, follow the below steps:

Flash – displays Flash files When dragged to the canvas, the Flash element displays a flash file as an example by default.

To change the flash file displayed, follow the below steps:

  1. Drag the Flash widget to the canvas.
  2. Click on the Browse button in the “File” option of the Properties palette and select the desired flash file.
  3. Change the input parameters, the quality, scale and wmode, using the parameters table under the “File” option.

HTML Website – displays an entire HTML website sorted locally on your computer by embedding a web page embedded within it To add an entire HTML website to your wireframes, follow the below steps:

  1. Click on the HTML Website widget in the Widgets library. A dialog will appear.
  2. From the “Select a directory” field, select the website folder (the folder where all the site files e.g. HTML, images, CSS, etc. are contained).
  3. From the “Choose an entry file” field, select an initial HTML file, usually the index.html. We recommend that this file be located inside the folder selected in the previous step.
  4. Click “OK” and click within the canvas to create the widget.

Add and manage Widget libraries

To add and manage your Widget libraries, go to the Widgets library palette. From the top left-hand corner, click the “Book” icon to be taken to the “Manage Widget Libraries” dialog. This dialog contains all your available libraries, including the ones you’ve created. From this dialog, you can add Widget libraries to and remove Widget libraries from Justinmind’s editor.

add-manage-widget-libraries-1

Learn more about managing your Widget libraries here

How to group UI elements on the canvas

You can group two or more UI elements together on the canvas and treat them as a single UI element.

To do so, drag and drop two or more widgets onto the canvas.

Select all UI elements (either by dragging your mouse over all elements, or by entering “⌘” or “Ctrl” + “A”)

Then, right-click within the selection and select “Group” from the menu, or enter “⌘” or “Ctrl” + “G”.

group

You can add additional UI elements to a group at any time. There are two ways to do this:

  • By creating a group within the original group
  • By adding this UI element to the original group

To create a group within the original group, select your group and the additional UI element(s).

Right click on within the selection and select “Group” from the menu.

Go to the Outline palette. You should now have an additional group within your original group.

group in a group

To add this UI element to the original group, go to the Outline palette.

Select the element you want to add to the group and drag it into the group.

add emenent group

To remove a UI element from a group, go to the Outline palette.

Select the element you want to remove from the group and drag it out of the group.

drag element out group

Using the Canvas

The canvas is where you will design your prototype’s screens, templates and masters by dragging widgets onto them. It displays the active screen, template or master.

You can zoom in and out of the canvas using the drop-down in Justinmind’s toolbar.

using the canvas

Rulers, guides and grids for the elements of the canvas

To help you adjust your prototype design to the pixel and arrange and align widgets on the page easily, you can use the following features:

rulers guides grids

  1. Rulers – help you position UI elements on the canvas. They are displayed around on the top and left of the canvas show the height and width of the canvas in pixels.
    • Rulers are displayed by default, but you can deactivate them in the main menu (“Preferences” > “View”). You can also choose how to measure the rulers: in Inches, Centimeters or Pixels (pixels is the default option).
  2. Guides – make it easier to position and line up elements in the canvas.
    • To create a guide, click anywhere within the horizontal or vertical rulers. A new guide will be created. You can then drag the guise to the desired position on the canvas.
    • To delete a guide, simply select it and enter “Delete” on your keyboard or right click on one of the guide’s handlers and select the “Delete guide” option.
  3. Grid – helps you structure and shape your design. When the grid is activated, a set of vertical and horizontal dots are displayed on the canvas background. The grid isn’t displayed during simulation.
    • Select the “Snap to grid” option from the “View” option in the main menu, to enable UI elements automatically align with the nearest grid line.
  4. Snap to geometry – helps position UI elements on the canvas, in relation to surrounding elements. These green highlights appear when:
    • You hover over a UI element
    • You drag an element vertically horizontally. Blue vertical/horizontal lines appear on the edge of nearby elements
    • Hold the “Alt” key while dragging the widget to avoid snapping. Configure smart guides in the “View” main menu option.
  5. Smart Guides – pink guides that appear when you change the size of an element or drag it to a new location. They will show the element’s position on the canvas in pixels. Configure smart guides in the “View” main menu option.

Using the Properties palette

You can edit the properties of the selected UI element (e.g. name, color, border, font, position) in the Properties palette.

Click on the menu in the top right-hand corner of the palette to access the following options:

  • Apply default style to this widget
  • Set as default style for this widget

using properties palette

These are styles that you define for elements associated to prototype templates. Learn more about these options here

Here’s an overview each sub-section of the Properties palette. To start modifying a UI element, select it on the canvas and go to the Properties palette.

Note: properties may vary depending on the selected UI element.

General properties

General

general properties

  1. ID – the UI element’s ID. Each individual element must have a unique ID
  2. Value – the value displayed within an input UI element
  3. Tooltip – the tooltip that displayed by within the widget upon simulation 
  4. Type – choose a type (single or multiple line)
  5. Hide component – click to hide UI element by default during simulation

Note that different UI element will have different General settings, including Autofit, Data Field and Add Image.

Position

properties palette position

  1. X/Y – define the X and/or Y position of the element on the canvas with the spinners provided
  2. Display pin position options – tick to define whether your element will be pinned to the canvas. See more in the “Display pin position options” section below. (anchor to “Display pin position options” below)
  3. Rotation – define the rotation of the element
  4. Lock position – click to lock the position of the element
  5. Always on top – click to always keep this element on top of other elements, even within templates

Display pin position options:

For the X position, you can choose from the following options: Fixed, Pin to left, Pin to center and Pin to right.

pin position options

For the Y position, you can choose from the following options: Fixed, Pin to top, Pin to center and Pin to bottom.

pin y position

Size

size palette

  1. Width – define the width of the element
  2. Height – define the height of the element
  3. AutoFit text – automatically adjust width and height of text elements depending on the amount of text entered

Layout

Container widgets (widgets that contain other widgets such as Dynamic Panels) have a layout property that lets you define how the contents of that widget are distributed:

palette layout

  1. Layout – select the layout of your content layout: free layout, vertical layout, or horizontal layout
  2. Alignment – change the alignment of the contents of the container element: left, center right, top, middle or bottom
  3. Spacing – change the vertical and/or horizontal spacing of the container element with the spinners provided
  4. Container padding – change the padding within the container element with the spinners provided
  5. Apply to All – click to apply these settings to all container elements

Background

palette background

  1. Color – click to change the background color using the drop-down or directly entering in the HEX code. You can select a color or gradient. See more in the “Creating a gradient” section below.
  2. Browse – select a background image by browsing your folders
  3. Transparency – define the transparency of the element with the spinners provided or entering a %

Creating a gradient

In the dialog that appears, click “More colors” to define other colors or click “Create gradient” to define a gradient:

creating gradient

  1. Colors – define the gradient with one or two colors
  2. Orientation – define the gradient’s orientation: vertical or horizontal
  3. Double gradient – click to make colors fade with double the effect
  4. Reverse colors – click to reverse the gradient position
  5. A preview of your gradient will be shown in this window

Text

Text UI elements have the following text properties:

palette text

  1. Font type – select a font from the drop-down. You can also brose Google Fonts from this drop-down
  2. Font style – select the font style from the drop-down: regular, italic, bold, bold italic, underlined, strikethrough
  3. Size – select a font size (in points) from the drop-down
  4. Color – change the font color from the drop-down
  5. Font effect – make the text in the element bold, italic, underlined or struck through
  6. Horizontal alignment – define the horizontal alignment of the text: left, centered or right 
    • Vertical alignment – define the vertical alignment of the text: top, center or bottom
    • Bullet points – add bullet points to the text
  7. Line height – adjust height of the lines of text (in pixels) with the spinners provided

Padding

Text UI elements have the following padding properties:

palette padding

  1. Padding value – indicate the amount of padding you wish to add to each edge of the element (in pixels) with the spinners provided
  2. Apply to all – tick to apply top defined padding to all edges

Border

palette border

  1. Border color – select the color of your border. Tick the check box above to apply the same style to all border edges.
  2. Border width – define the width of the borders with the spinners provided. Tick the check box above to apply the same style to all border edges.
  3. Border type – select the line type from: none, solid, dotted or dashed. Tick the check box above to apply the same style to all border edges.
  4. Round – define the roundness of the element from 0-100 with the spinners provided. 0 will display sharp borders and 100 will display fully rounded borders.

Shadow

The shadow of text widgets will be displayed when you Simulate, Publish Online or Export your prototype to HTML. You can customize the drop shadow of a UI element like so:

palette shadow

Click “Edit shadow” to modify shadow properties. In the dialog that appears, you can change the following shadow properties:

edit shadow

  1. Enable box drop shadow – tick to enable box drop shadow
  2. Box shadow properties – modify the angle, distance, color, blur radius and spread of the box shadow. Check “Use Global Light” to ensure shadows are cast in the same direction.
  3. Enable/disable text shadow – tick to modify text shadow
  4. Text shadow properties – modify the angle, distance, color, and blur radius. Check “Use Global Light” to ensure shadows are cast in the same direction.
  5. A preview of your gradient will be shown in this window

Using the Outline palette

From the Outline palette, you can modify the names of UI elements in the selected screen, template or master, change their order and group them together from the Outline palette.

Click the “Eye” icon next to a UI element to hide it on the canvas. Click it again to make it reappear. Drag the “Eye” icon across multiple elements in the Outline palette to make them disappear or appear.

outline palette

Click the “Lock” icon to lock or unlock each UI element in the Outline palette. When locked, UI elements cannot be moved around the canvas or resized.

outline-palette-lock

Simulating your prototypes

With Justinmind, you can visualize how your website or mobile app is going to look on different devices directly from your browser.

If you click on the “Simulate” button in the top right-hand corner of the User Interface module, the simulation window will appear. The current screen in the canvas will be displayed in the simulation window.

simulate button

To change the simulation settings, click the “Gear” icon on the right of the “Simulate” button. The following dialog will appear:

gear icon

  1. Device – select a device skin to simulate your prototype on from the drop-down. These device skins are as realistic as possible (e.g. the mobile skins will simulate scroll bars, Input Text Fields, Select lists and Data Fields as on a real device).
  2. Scale – define how you want your prototype to be simulated: Fit to screen size – fit your prototype to the selected device’s screen resolution Custom – choose a custom scale %
  3. Include top bar – click to include top bar in simulation mode. The top bar includes options related to comments and allows you to navigate between different screens.
  4. Highlight interactive elements – click to highlight interactive elements within your prototype
  5. Include scenarios – click to include scenarios in simulation
  6. Include requirements – click to include requirements in simulation