- Introduction to Balsamiq Wireframes for Confluence Server
- Adding and Arranging UI Controls
The toolbar contains a series of icons for performing actions on other areas of the user interface.
The first set of icons is described below.
- Show/Hide the left panel
- View your wireframes as a thumbnail grid
- Create a new wireframe
- Wireframe actions (rename, etc.) and navigate between wireframes (shown when left panel is hidden)
- Go to next or previous wireframe (shown when left panel is hidden)
The group of icons in the center of the toolbar is for commonly-performed canvas functions. These are actions that you are probably used to from text editors or other drawing tools, such as copy, paste, group, align and zoom. The last icon is for toggling markup (read about markup here).
The final section of the toolbar on the far right contains the Quick Add tool, toggle icons for the UI Library, Comments Panel, Property Inspector and Project Info Panel, and an icon to enter Full Screen Presentation Mode.
The top of the toolbar shows the name of the project, which you can double-click to rename (or go to Project > Rename Project... in the menu).
The Quick Add Tool
The Quick Add tool is the fastest way to add UI controls to your wireframes. To use quick add, click inside the quick add input box (or press / or + 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 or press ENTER to add the control or icon on the canvas. You can also use SHIFT+ENTER to place the control where your mouse cursor is on the 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 ESC key makes the list disappear.
Tip: As you become familiar with quick add, you can hide the UI Library and only use quick add to add UI elements to your wireframes. This maximizes both your canvas area and your speed.
The UI Library
The UI Library, or User Interface controls Library, is the long strip of user interface controls just below the toolbar. It lists all of the UI control types that are included as well as Assets, Icons, and Symbols. The main goal of the UI Library is to let you add UI controls to the canvas, but you can also use it to see what's possible and to get inspiration for your wireframes.
To add a new UI control to the canvas, select the control type you wish to add then either drag it to the canvas below or simply double-click and it will be placed on the canvas for you.
The UI Library can be toggled on and off in several ways: clicking the icon to the right of the Quick Add box, using the keyboard shortcut CTRL/⌘+L, or by selecting View > UI Library from the application menu.
This is the main working area of the editor, where your UI wireframe comes to life. Once you add UI controls to it, you can move them, resize them and tweak them until your UI wireframe is ready. See Adding and Arranging UI Controls to learn more.
The canvas grows and shrinks with your application window, so you can make room for bigger wireframes if you need to. The maximum size of the canvas is 10000x10000 pixels.
Note: If you are working on a small screen or have very large wireframes you might want to read this article on hiding the panels to make more room for the canvas.
The Navigator Panel
The navigator panel on the left shows the list of wireframes, assets or Symbols in your project. The currently selected object is highlighted.
You can select multiple objects in the navigator panel by holding down CTRL or SHIFT and clicking on them. Wireframes and assets can be viewed as a text-only list or as thumbnail previews.
You can hide the navigator panel by clicking the navigator toggle icon above the panel (keyboard shortcut: CTRL/⌘+J). Hiding it will show additional icons in the toolbar (shown above) for navigating between wireframes or assets (depending on which one is selected). The panel can be resized by placing your mouse cursor over the line separating the navigator panel from the canvas and dragging left or right. You can double-click on the separator line to reset it to the default width.
You can jump between wireframes or assets using your keyboard via CTRL+TAB or by clicking on one in the navigator and using ↑ and ↓.
Wireframes can be reordered by dragging them up and down in the navigator panel. This can be useful when exporting to PDF, for example. The order of your wireframes will be remembered when you close and reopen your project, even if opened on a different computer.
Using a Hierarchy
The navigator panel also offers a hierarchical structure to better organize your wireframes.
To use it, select the wireframe you wish to be the child and press TAB. The child wireframe will be placed in a tree hierarchy below the wireframe above it.
You can then use the arrows to the left of the parent wireframe to show and hide the wireframes under it.
To restore it to the top level, use SHIFT+TAB. The video below shows nesting wireframes in action.
Context Menu Actions
A context menu is also available for the objects that are open in the navigator panel. You can either right-click on the selected object or click the small arrow that appears when you hover over it to open the menu.
The contents of this menu vary depending on which type of object is selected (wireframe, asset, symbol, or trash) but it generally contains options such as rename, move to trash, and duplicate. In the Wireframes view it also contains actions for working with alternates.
Renaming wireframes can be done via the context menu or by double-clicking on the name of the wireframe in the navigator panel. Wireframes with links will automatically be updated when a linked wireframe name changes.
The Properties Panel
The panel on the right side of the application (when shown) displays properties for the selected control or object. Depending on which icon is selected it shows either the Property Inspector, the Project Info Panel, or the Comments Panel. It can be hidden by de-selecting the panel icons in the toolbar or in the View menu.
The Property Inspector
The Property Inspector allows you to set some common properties for controls, such as alignment, position and size as well as specific settings for certain controls (selection state, text properties, color, etc.). It is available when viewing wireframes, assets, and Symbols.
You can show and hide the Property Inspector by clicking the toggle icon above it (keyboard shortcut CTRL/⌘+; or ALT/OPTION+ENTER). When hidden you can also show it by right-clicking a control and selecting "Properties...".
If you have multiple controls selected it will show properties that are common to all selected controls as well as options for aligning and distributing.
When no controls are selected the Property Inspector shows notes for the selected wireframes, asset, or Symbol. In the wireframes view the panel also shows wireframe alternates.
Note: You can format notes text using the syntax described here to make text bold, underlined, etc.
For assets and Symbols it also shows the count and name of wireframes where the selected object is used.
The Project Info Panel
The Project Info Panel allows you to define project-wide settings for skin, font, and link and selection color. It also contains an area to add notes about the project. Click the icon to the right of the Property Inspector icon to toggle the Project Info panel (keyboard shortcut: CTRL/⌘+,).
These settings will be applied to all wireframes in the project and will be saved with the project (i.e., they persist when the project is closed and reopened or shared with others).
The default font is Balsamiq Sans, just as in previous versions (not Comic Sans as you might think; although you can set it to that, all you Comic Sans lovers out there!).
Note: If you want to use a specific project font we recommend that you set it before you start creating your wireframes. Changing the project font may adversely affect existing wireframes in your project. Each font has different dimensions and proportions so switching fonts may cause controls to overlap or line up unevenly. Also, setting your project font to a variant such as "thin", "light", or "extrabold" may override font style settings on individual controls.
Sketch vs Wireframe Skin
The two skins provided are intended to allow you to work on early ideas using a rough, sketchy look (Sketch Skin), and then later update it to a crisper, more polished look when it is ready for presentation (Wireframe Skin).
The screenshots below show a comparison of a sample design in the default "sketch" and "wireframe" skins, respectively. Click to view larger images.
The Comments Panel allows you to collaborate on your designs by sharing feedback asynchronously or, if you prefer, making notes for yourself as you work.
Comments can be marked as resolved after they are reviewed and addressed. You can add Callout markers to indicate specific places in the wireframe where the comments applies or add a link to an alternate version.
You can learn more about comments in Sharing and Reviewing.
Thumbnail Grid View
Clicking the icon to the right of the navigator panel toggle will switch to thumbnail grid view, shown here.
This view shows thumbnails of all of your wireframes and is useful for getting an overview of your project. It allows you to see more of your wireframes at once and is a good view to use for reordering and tidying up (e.g., renaming and moving to the trash). You can trash multiple wireframes at once by selecting them (using CTRL/SHIFT+ click) and bringing up the context menu.
Thumbnail grid view is available when viewing wireframes and assets, and is the only view available for trash.
Trash is available for wireframes, assets, and Symbols you have deleted. This makes it easy to keep your project tidy as you make progress, but still allows you to browse or recover earlier concepts.
To recover a trashed object from the Trash panel click the context menu arrow and select "Restore." You also have the option to delete permanently.
Working on Small Screens
When working on a small laptop screen, you might want to maximize the amount of Canvas you see.
The keyboard shortcuts for toggling them are listed here:
- UI Library: CTRL+L
- Navigator: CTRL+J
- Properties Panel: CTRL+;
- Project Info Panel: CTRL+,
Note that you can still add controls to the canvas when the UI Library is hidden using Quick Add. And you can navigate between your mockups using the additional toolbar icons that appear when the Navigator Panel is hidden.
- Introduction to Balsamiq Wireframes for Confluence Server
- Adding and Arranging UI Controls