Balsamiq 101
Smart tricks to help you increase your productivity
As a product owner at a tech startup (Everhour), I need to create mockups a lot. Like really a lot, daily. I’m sure that they represent a much more effective way of communication with the team or clients than talking or emailing.
In the text vs. picture battle, pictures are absolute winners for me as they are easier to perceive and understand and help avoid many misunderstandings.
On the one hand, mockups let me better outline a new idea or product concept for myself to further introduce it to the team, and on the other hand, it’s a good opportunity to follow up any notes or changes and give quick feedback.
With mockups, it’s details, ease of support and adding fixes that matter, like with the concept of a new calendar below
When I need to give feedback on the current UI, I seek for speed and clarity
Though there are lots of tools providing an opportunity to create mockups, for a very long time I’ve been an avid supporter of Balsamiq (namely, its desktop version) as one that combines all the above mentioned features.
Here I’d like to share some tips and observations that will let you take the most of this powerful app.
Helpful settings and quick tips
1) View > Show UI Library = Off,
I’ve got used to mockuping without the UI library. Why? Simply because it saves me the whole 150 pixels of valuable space (laptop in particular) and allows to see more content in a browser-like window without scrolling up & down.
The names of the main control settings are very self-explaining and easy to remember. Besides, there are several alternative titles for each of them so you must try really hard to mix things up. It’s fast and handy to find a necessary option via the “Quick Add” field instead of browsing through the whole list.
Most likely, you’re going to use the same set of options in 99% cases (at least I stick with around 10) so you will instantly pick what you need.
Search is activated by pressing “/” (in OS X) which means you don’t even need to lose time on navigating the cursor.
2) View > Skin = Wireframe
This results in having thinner and more linear lines which, for me, adds a polished touch to mockups.
3) View > Show Graph Paper = Off
Remove the gridlines from the background if you like.
4) View > Show Markup {On/Off}
It’s a very handy option that specifies whether to show annotations or not. These include Arrow / Line, Callout, Sticky Note, Red X, and Curly Braces.
For example, I can remove all the notes from the calendar mockup (mentioned above) and get pure UI without any distractions. Thanks to this setting, there is no need to worry about the number or location of notes since they can be hidden in one click. It’s also cool that you may export mockups without markup into PNG.
Stumbling blocks
In spite of all the good, there is always a fly in the ointment☺ Let me mention a few things that cause inconvenience for me when using the tool.
- The length of mockups is limited to 4056 pixel. It may seem enough but I’ve had issues when working on single-page landing pages (about 12,000 pixels) forcing me to divide them into several parts. It’s often hard to properly perceive and assess the concept when you don’t see the complete picture.
- The horizontal scroll is too slow (or is it me being too quick?). I personally prefer to place objects under one another rather than next to each other sideways.
- The page is automatically cropped on all sides to the size of the screen if there are no items beyond it. If I need to have additional padding, I create a label with a period (.) and drag it up, down or to the side and thus stretch the page. A period won’t be visible after exporting.
Major controls
Arrow: apart from using it for its main purpose, I often pick it to create a thicker line.
Label/Paragraph: Label is preferred for short notes while Paragraph of text is always used for bigger text sections, and here is why:
- you can’t insert a line break into labels;
- if having several labels, it takes longer to edit and align each of them. It’s best to just format a paragraph by adding line breaks and spaces.
Table/Grid: I guess it’s the most powerful control option and the easiest and handiest way of mockuping. Some useful discoveries I’ve made:
- \r starts a new line;
- \, helps to escape comma which is generally used to separate columns.
- {80L,10C,10C} allows to format column ratio in the grid (80% for the first column, 10% for the second one, 10% for the third one) as well as text alignment in each column (left, center, center). These options are saviors when you need to combine several tables.
Check out this video providing a lot of advice for managing tables like a pro.
Shortcuts: these guys will make your life way easier. My favorites are:
- hold “alt” for cloning elements with mouse
- “command” + “up”/”down” for layering
- hold “alt” to select controls ignoring anything below
I recommend taking a look at the video to go in-depth with all the helpful shortcuts.
Symbols and master elements
If you deal with many mockups at a time, you are very likely to use a set of the same elements for each one. If let’s say, you need to change an element common for 10 mockups, you’ll have to edit every single file which is not fun at all.
Symbols are intended to eliminate extra work in such cases.
In short, symbols allow saving a group of controls for further usage. They are saved as a separate file /assets/symbols.bmml and accessed via the controls library. Symbols position in the saved file does not matter.
Note: mockups should be placed in the folder together with assets. It prevents the library from being moved from project to project and taking up space.
When editing a symbol in a mockup, you can change it as a master element (editing the symbol source) meaning that the changes made will be displayed across all the associated pages as well.
Working on the future Everhour iPhone app, we had about 50 mockups that underwent lots of changes. If it wasn’t for Symbols, I would have stuck with editing for hours.
Working with screenshots
I often use images in mockups. It’s a great way of giving feedback: take a screenshot, paste it into Balsamiq and leave notes, arrows, etc. Thus you make a visual to-do list instead of plain text.
Besides, a screenshot may act as a base for further work, especially if you need to make just a tiny change to the current design or UI.
Simply hide a part of the picture by overlaying it with a borderless rectangle of the same color and add what you like on top.
For example, in a few clicks a page like this:
can be quickly transformed into this one:
I’ve used this trick in the mockups below: I’ve taken a screenshot of an iPhone’s upper part and placed it on top. Thus we see a piece of the chart as if after scrolling down.
Finally
I know the tool may seem a bit tricky at first but trust me, as you keep on creating more and more mockups, you’ll notice that it will take you less and less time.
I really love mockuping with Balsamiq as it gives me freedom of expressing my vision and lets me see a close-to-reality picture of future interface design or new functionality.
In my opinion, Balsamiq is a no-brainer for startup, small business owners and pretty much anyone generating ideas and having troubles with properly explaining them on paper.
