šŸ‘‹šŸ½ We wrote a book! Order Wireframing for Everyone today ā†’

Balsamiq

Toggle navigation

Creating Your First Wireframe

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

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

Example Wireframe


Basic concepts and terminology

Here are some of the basic components of Balsamiq Wireframes:

  • UI Control - A standard user interface "widget" (e.g., Button, Image, Dialog Window). The building blocks of any wireframe.
  • 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 configuration panel that contains common actions (e.g. alignment, layering) and properties that are specific to each UI Control.


Adding the first few controls

To create the wireframe shown above, let's begin by dragging the Browser UI Control onto the Canvas.

Adding controls from the UI Library

Double-clicking to edit a controlā€™s text properties.

The content of nearly all controls in Balsamiq 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 control, you can specify the title bar and URL text, or just use the default.

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, 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.

Adding Title, Text and Image to wireframe.

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

Property Inspector for a Title control

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

Editing text properties

Text added to control

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

Wireframe after adjusting controls


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.

A Carousel made from an image control and icons

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.

Icon property inspector

Next, click on the "Open Icon Library..." icon next to the "Icon Search" box.

Icon dialog

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

Adding selected carousel indicator below an image to create pagination

Add three more icons to the right of the Circle icon (use the Circle Outlined 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.

Adding more pagination icons

Zooming out, your wireframe should now look something like this:

Wireframe with carousel

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 Toolbar or press CTRL+G (on Windows; CMD + G on Mac).

Creating a group

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 icon in the Property Inspector.

Aligning controls

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.

The wireframe so far, with the pager controls added:

Progress on wireframe after aligning carousel elements


Completing the wireframe

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

Add a Tabs Bar control and place it in the bottom half of the wireframe.

Editing Tab text properties

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

Tab control after editing values

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

Setting the selected tab

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

Tabs in wireframe

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.

Adding style to a Text control

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

The text control after styling is applied


Exporting and next steps

Now that the wireframe is finished, you can export it as an image via the Project > Export > Wireframe to PNG... (shortcut: CTRL/CMD + R) menu. Other export options are described in the Exporting your Wireframes help article.

Exporting the wireframe as a PNG

Congratulations! You have now completed your first wireframe with Balsamiq! For more information on any of the topics covered here, see the full Balsamiq Documentation.

You can now present it to stakeholders or customers, or invite others to review or even collaborate on it.


Learn more about wireframing!

Now that you've taken the first step in your wireframing journey, you can visit our Balsamiq Wireframing Academy for courses, articles, and more.

Here are a few links that we suggest for people who are new to wireframing.

Introduction to User Interface Design Through Wireframes

This easy-to-follow course is intended for Product Managers, Entrepreneurs, and other non-designers who want to feel comfortable in the world of UI design.

How to Start a Wireframe Project

Four techniques to start a wireframe project from scratch and ensure that you dedicate enough time to the ideation phase, where the success of your product begins.

Five Steps to Creating Great Wireframes

Good wireframes solve real problems and lead to strong products. From writing out the scenario to gathering inputs, here is a proven path to a great website or app.


By Leon Barnard
Got questions or feedback? Email support@balsamiq.com.