Mockups Application Overview

Balsamiq Mockups is made up of three major blocks. From top to bottom: the Application Bar, the UI library, and the Mockup Canvas Each is described below.

The Application Bar

The application bar includes Menus, the Quick Add tool, and the Toolbar. Each is described below.

The Menus

The Mockups menus should be pretty self-explanatory. The only tricky bit is that the Mockup menu contains different items depending on what version of Balsamiq Mockups you are using. In general, that’s where you’ll find the About Box and commands related to your mockup as a whole, like saving, exporting to XML or PNG, etc.

The Quick Add Tool

The Quick Add tool is the fastest way to add UI controls to your mockup. To use quick add, click inside the quick add input box (or use the / or + keyboard shortcut to enter it). Type a few letters from the name of a UI control or icon and Quick Add will show you a list of suggestions. Use your mouse or arrow keys to scroll down the list and click Enter to add the control or icon on the mockup canvas.

For example, typing “bu” shows a list containing “Button”, “Button Bar”, “Help Button”, “Radio Button” and “Round Button”. Typing “hel”, on the other hand, only returns “Help Button”. Pressing the ESCape key makes the list disappear, as one would expect.

Try out Quick Add now! As you become familiar with it, you could even hide the UI Library (through the View menu) and simply use Quick Add to add UI elements to your mockup. This maximizes both your mockup canvas area and your speed!

The Toolbar

The toolbar includes most of the same commands as the Edit menu: undo, redo, duplicate, cut, copy, paste and delete. Not all versions of Balsamiq Mockups support the same keyboard shortcuts, so the Toolbar gives you a handy way to perform common actions. Notice that you’ll find the same commands in the Property Inspector as well.

The UI Library

The UI Library, or UI Controls Library, is the long strip of UI Controls just below the Application Bar. It lists all of the different UI control types that Mockups supports, alphabetically. The main goal of the UI Library is to let you add UI Controls to the mockup canvas, but you can also use it to see what’s possible and to get inspiration for your UI mockup.

To add a new UI control to the canvas, simply select the control type you wish to add, then you can either “drag and drop” it to the mockup canvas below or simply double-click and Balsamiq Mockups will place it on the mockup canvas for you.

The UI Library can be positioned to the top, left, or right of the application window using the menu, View > UI Library Position.

UI LIbrary Position

The Mockup Canvas

The rest of the application is the Mockup Canvas.

This is the main working area of Balsamiq Mockups, where your UI mockup comes to life. Once you add UI controls to it, you can move them, resize them and tweak them to your heart’s content until your UI mockup is ready.

The mockup canvas grows and shrinks with your browser or application window, so you can make room for bigger mockups if you need to.

Edit this page