Creating Your First Mockup

This tutorial is designed to guide you through creating your first Mockup. It will cover a basic overview of the product as well as some of the features and UI controls.

Here is the Mockup that you will create in this tutorial:

​If you're new to the idea of Mockups (also called wireframes), you may want to check out UX Apprentice to start with an overview of what Mockups are, and where they fit into a UX Design process. 


Basic Concepts and Terminology #

Here are some of the basic components of Balsamiq Mockups:

  • UI Control - A standard user interface "widget" (e.g., Button, Image, Dialog Window). The building blocks of any Mockup.
  • Canvas - The grid-lined area where UI Controls are placed.
  • UI Library - A row of UI Controls that can be dragged onto the Canvas.
  • Property Inspector - A floating toolbar that contains common actions (e.g., copy, group) and actions that are specific to each UI Control.

The Mockups Application Overview has more information about the elements and controls in Balsamiq Mockups.


Adding the First Few Controls #

To create the Mockup shown above, begin by dragging the Browser Window UI Control onto the Canvas.

The content of nearly all controls in Balsamiq Mockups is defined by simple text. When a control is first added to the canvas, it will be shown in edit mode, often with hints about how to use it. For the Browser Window control, you can specify the title bar and URL text, or just use the default.

Tip: To edit a control at any time, double-click on it, or press Enter when it is selected.

Next, resize the control to the desired size using the resize cursor controls at the edges and corners of the control.

Continue by adding the following controls to the canvas: Title/Headline, Paragraph of Text, and Image as shown below. Note that alignment guides appear just inside the edges of the Browser Window control when you move them toward the edges and that the controls "snap" to these guides.

Tip: Controls can also be added using the "Quick Add" box by typing the first few letters of the name of the control and pressing Enter.

To change the size of the text for the product name label, select the Title/Headline control and change the font size using the Property Inspector.

For the product description placeholder text in the Paragraph of Text control, enter your own placeholder text, or begin typing "lorem" and Lorem Ipsum text will automatically be generated.

After resizing the Image control, your Mockup should look something like this:

Tip: If you have trouble selecting a control that is in front of another control, try "locking" the background control to prevent it from being selected.


Creating and Aligning the Image Pager Controls #

The next step is to add the little dots beneath the Image that indicate a rotating content or image control.

In this part of the tutorial you will learn about adding Icons and Grouping and Aligning controls.

Begin by adding the Icon control to the canvas.

Next, click the arrow inside the "Icon Search" box to open the Icon Library.

This window shows the list of all the icons included with Balsamiq Mockups. You can filter them by category or search by name. Once you have chosen an icon you can choose from one of four sizes (XS, S, M, L). For this tutorial, select the Little Black Circle icon and set the size to "XS" and click "Select".

Tip: The "Icon Search" box in the Icon Property Inspector behaves like the "Quick Add" box and displays icons matching the text you enter (try typing "arrow", for example). (More about using icons can be found on the Working with Icons page.)

Add three more icons to the right of the Little Black Circle icon (use the Little Circle this time). You can also copy and paste once you've added the second icon. Using your mouse, position the icons next to each other. You can see that alignment guides appear both horizontally and vertically, helping you place them appropriately.

Tip: Use the Duplicate keyboard shortcut (CTRL + D on Windows; CMD + D on Mac) to quickly replicate items on the canvas.

Zooming out, your mockup should now look something like this.

The next step is to center-align the four icons below the Image control. The procedure for doing this is to first group the icons and then align the icon group with the image control.

To group a set of controls, select them by drawing a boundary around them with your cursor or holding down SHIFT and selecting each one with your mouse. Then click the Group command in the Property Inspector or press CTRL+G (on Windows; CMD + G on Mac).

Tip: Another way to select only controls that are in the foreground (besides "locking" background controls) is to hold down the ALT/OPTION key while dragging the mouse. This will prevent background controls from being selected.

Grouped controls can be identified by a light purple color and will remain grouped until Ungrouped (shortcut: CTRL/CMD + SHIFT + G). To align the grouped icons with the Image control, select them both and use the Align Center command in the Property Inspector.

You can move the pager controls closer to the Image control either by using the keyboard arrow keys or by using the mouse and the alignment guides.

Tip: Holding down SHIFT while moving controls with the arrow keys will move them 20 pixels at a time (instead of the usual 2 pixels).

The Mockup so far, with the pager controls added.


Completing the Mockup #

The remainder of the Mockup consists of a set of tabs, more text, and a chart.

Add a Tabs Bar/Ribbon control and place it in the bottom half of the Mockup.

Tip: If you run out of room in the application window, drag the control to the bottom of the window to enlarge the canvas. A scrollbar will appear so that you can access the entire mockup.

Commas are used to create tabs in this control, so you can create as many tabs as you like simply by entering additional text separated by a comma. Entering the text "Overview, Features, Design, Specs", for example, will create the tabs shown below.

To show the "Overview" tab as selected or highlighted, use the Selection inspector as shown below.

After resizing the Tabs Bar/Ribbon control to match the width of the page, add Label/String of Text and Paragraph of Text controls to create something like this:

You can format text as bold, italic, or hyperlinked in many controls by enclosing the text with special characters. Use *text* for bold, _text_ for italics, or [text] for hyperlinks.

Tip: Learn more formatting tips on the Working with Text page.

Finally, drag a Column Chart control into the empty area inside the Tabs Bar as a finishing touch to complete the Mockup.


Exporting and Next Steps #

Now that the Mockup is finished, you can easily export it by going to File > Export to PNG Image (shortcut: CTRL/CMD + R). A PNG image of the Mockup will be created in the same folder as the Mockup file. Other export options are described on the Importing and Exporting page.


Congratulations! You have now completed your first wireframe with Balsamiq Mockups! You are on your way to become an User Experience (UX) expert! :)

For more information on any of the topics covered here, see the Full Mockups Documentation.

Last Updated: Oct 30, 2014 01:49PM PDT