Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Wireframe template styles and fonts

In this tutorial, we’ll explore the default formatting attributes and styles that define your wireframe and prototype templates.

All new projects start with a default template and Justinmind’s UI elements are contained within these default templates. Each element takes on the default style defined in its template. These styles can be edited, but not deleted. You can choose from templates with different styles to easily change the look and feel of your prototype. Below, you’ll find a complete list of the styles that your templates can take on.

Editing default styles

To change the default style of a specific template, right-click on the template in the Templates tab and select the ‘Edit Template Style’ option. A dialog box will appear showing the current formatting attributes for each element within the template.

interactive-wireframes-templates-styles-1

  1. Select the attribute that you want to change the default style of.
  2. The widget that is currently being edited.
  3. The specific attribute being edited.

Default styles for specific elements can also be edited from the Properties tab. If you want to set an element’s current style as default, select the element in the canvas, and select the ‘Set as default style for this widget’ option  in the Properties tab’s hamburger menu (at the top right corner).

Applying template styles

Once the default style of a template has been changed, the UI associated elements can also be modified to take on the changes. To apply the styles, make sure that the relevant widgets are within the template. Then right-click on the template and select ‘Apply Template Style’. The following dialog box will appear:

interactive-wireframes-templates-styles-2

From here, you can apply the template style to all of the elements associated with the template that you select. You can also apply a ‘default stored style’ to one specific widget from the Properties tab. To apply the default style to a widget, select the widget and select ‘Apply default style to this widget’ in the drop down menu that appears in the Properties tab.

Styles Formatting

The appearance and properties of a widget can be altered to match the requirements of any layout, e.g. iOSor Android, through the Properties tab or the style toolbar. Note that each widget has its own styles, depending on its properties (e.g. background, border, etc.).

Reusing template styles

To reuse the style of a widget and apply it to other widgets, select the ‘Copy Style’ tool, that can be found on the Style toolbar. When you copy the style from one widget to another, the target widget will receive all possible styling changes from the source widget. However, there are some formatting attributes that won’t be copied over: position, size and layout. More information on reusing templates can be found in this tutorial.

General properties

Most widgets have some properties in common that you can find in the General section of the Properties tab:

interactive-wireframes-templates-styles-3

  1. ID: The widget’s ID must be unique in each screen so that the widget can be identified correctly.
  2. Value: Value displayed in widget.
  3. Tooltip: Tooptip that will be displayed by widget upon simulation.
  4. Hide/Show: Hide or show a widget by default during simulation.

Note that different widgets have different General settings to choose from, including autofit, hide content and single/multiple lines for text widgets.

Position and size

A set of controls are available for changing the position and size of a widget in the canvas:

interactive-wireframes-templates-styles-4

  1. Position: Use the spinners to change the x and y position of the widget in the canvas in pixels.
  2. Absolute/relative position: Click on these buttons to switch between absolute or relative positions.
  3. Size: Use the spinners to change the width and height of the widget in pixels.
  4. Proportion: Use this button to maintain the proportional size of the widget proportional when modifying the width or height.
  5. Always on top: Select this option to ensure that the widget is always placed always on top of the rest, even within templates.
  6. Rotation angle: Use the spinners to change the rotation angle of the widget in the canvas (in degrees).

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:

interactive-wireframes-templates-styles-5

  1. Layout: Select your content layout preference: free layout, vertical layout, or horizontal layout.
  2. Horizontal alignment: Opt for horizontal alignment of your contents: on the left, center or on the right of the canvas.
  3. Vertical alignment: Opt for vertical alignment of your contents: at the top, center or bottom of the canvas.

Background

Most widgets have a background layer displaying a color or an image that can be defined in their background properties:

interactive-wireframes-templates-styles-6

  1. Color picker: Change the background color using the drop-down or directly typing the hexadecimal code. Select a color or gradient.
  2. Browse: Browse your files and folders and select a background image.
  3. Repeat image: Use the arrows to duplicate the selected image horizontally or vertically.
  4. Delete: Select delete to remove the selected image as the background image.
  5. Transparency: Define the transparency of the whole widget using the slider or spinner control.

Setting a background color

To set the background color, click on the Color picker and select the desired color from the drop-down. If you do not find the color there, click on ‘More Colors’ option for advanced color defining options. Select ‘Capture Color’ to get the color from another widget. You can also indicate the color you want by typing the hexadecimal code directly into the text input next to the capture color option.

Note that if you don’t require a background, you simply need to select the white square that has a red diagonal line indicating ‘co color’.

interactive-wireframes-templates-styles-7

Selecting a gradient

You can also define the gradient of the widget’s background color. To create a gradient, click on the Color picker button and select the ‘Create Gradient’ option:

interactive-wireframes-templates-styles-8

  1. Colors: Define the gradient with one or two colors.
  2. Orientation: Define the gradient’s orientation: vertical or horizontal.
  3. Double gradient: Select ‘Double gradient’ if you want the colors to fade with double the effect.
  4. Reverse colors: Select this option if you want the gradient position to be reversed.
  5. Preview gradient: Preview your gradient changes.

Text

Text widgets have the following font format to edit:

interactive-wireframes-templates-styles-9

  1. Font type: Change the font type from the drop-down.
  2. Font style: Change the font style from the drop-down: choose from a wide selection of thin, regular, bold and italic options.
  3. Size: Change the font size in pt.
  4. Decoration: Make the text bold, italic, underlined or struck through.
  5. Color: Change the font color from the drop-down.
  6. Horizontal alignment: Define the horizontal alignment of your text: left, centered or right.
  7. Vertical alignment: Define the vertical alignment of your text: top, center or bottom.
  8. Bullet points: Add bullet points to your text.
  9. Line height: Adjust the pixel height of every line of text.

Add Google Fonts

The font type drop-down contains the list of fonts currently available on your system and an option to add new fonts from Google’s fonts directory.

Open the Google Fonts dialog and select the fonts you want to download.

interactive-wireframes-templates-styles-11

Padding

Text widgets have padding properties that can be modified:

interactive-wireframes-templates-styles-12

  1. Apply to all: Select to apply top padding to all edges.
  2. Padding value: Indicate the amount of padding for each edge in pixels.

Border

Customize the type, color and width of your widget’s border using the following controls:

interactive-wireframes-templates-styles-13

  1. Apply to all: Select to apply the same line type, color and width to all border edges.
  2. Line type: Select the line type from: none, solid, dotted or dashed.
  3. Line color: Select the color of your border.
  4. Line width: Use the spinner to define the width of the borders.
  5. Round: Define the roundness of the widget from 0-100. 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 widget:

interactive-wireframes-templates-styles-14

  1. Preview: Preview shadow applied to widget.
  2. Edit: Select to modify shadow properties.

Shadow properties dialog

interactive-wireframes-templates-styles-15

  1. Enable/disable box drop shadow: Select to modify box drop shadow. Note that not all widgets have this option available.
  2. Box shadow properties: Modify the direction, distance, blur radius, color and size of the box shadow.
  3. Enable/disable text shadow: Select to modify text shadow. Note that not all widgets have this option available.
  4. Text shadow properties: Modify the direction, distance, blur radius, color and size of the text shadow.
  5. Preview shadow: Preview shadow applied to widget.

Next tutorial > How to create links in your interactive wireframes