Update May 2015
I wrote this article when I was using the old version of Balsamiq Mockups, now known as “Balsamiq 2”. In March 2015, Balsamiq released a new version of their software, Balsamiq Mockups 3, which has a load of great new features and is even easier to use. Check it out: http://balsamiq.com
*****
From a personal perspective, the release of Balsamiq 3 was exciting. When I wrote this article, I was just a Balsamiq fan / power-user. Last year, I was invited to be one of the very early beta-testers. I gave a lot of feedback and I subsequently carried out usability testing for the company. Many of the improvement suggestions that I fed back to Peldi, Mike and the Balsamiq team rapidly ended up in the product — it was great to see how they put customers at the centre of everything they do.
What follows is an article on how I used to use Balsamiq. A lot has changed with the version 3 release and, looking back, I use it WAY more efficiently. Quick examples:
- Projects and Font Awesome icons are now integrated as part of the app
- Presentation mode “jumpiness” is no longer an issue
- Icons, symbols and symbols libraries are much more tightly integrated with the app
Anyway, here is the original article…
I first chose to use the wonderful Balsamiq Mockups, the desktop version*, for a client project in January 2011 and it has become my main UX design tool ever since.
Anyone can dive in and figure out how to use Mockups — there’s a rapid beginner-to-intermediate curve. Over the years, I’ve developed some extra tips and tricks that maybe puts me on the intermediate-to-advanced curve.
Here’s how I use Balsamiq Mockups:
1. Setting up a New Balsamiq Mockups Project
I have a system of folders and sub-folders relating to my clients and projects etc, which I synch in Dropbox. When I want to create a new set of wireframes, I create a new sub-folder in the appropriate place e.g. Client X > Project Y > Project Y Wireframes 1.0
I create one project per folder, and add all the .bmml files into that folder, as recommended by Balsamiq.
Assets Folder
Before I start the project, I also copy in a ready-made “assets” sub-folder. I say ready-made because you can simply create a blank sub-folder and name it “assets”. However, my pre-made “assets” folder is stuffed with all sorts of templates and other “goodies” which make my prototyping process easier. Below are some of Balsamiq Mockups UX artefacts contained in my ready made assets folder.
Note: Rather than copying and pasting your assets folder each time, you can simply create a single account assets folder on your computer. This is a great solution — except if you are physically sharing your *.bmml files with someone else in a company, in which case you will need to give them the assets folder or items will be missing from the wireframes.
Twitter Bootstrap Background Grid
Bootstrap has various background grids that you will find on Balsamiq’s Mockups to Go. Download the one you prefer and you save it directly to your assets sub-folder, then drag it on to the wireframe. That’s what I do before I start any project — I drop it onto the background of every wireframe at position 0,0 and lock it there, then hide it using CTRL+K (Windows).
Even if you’re not creating a wireframe for the near-ubiquitous Twitter Bootstrap web framework, this template helps make your wireframe neat and symmetrical. The “rough and ready” look-and-feel of wireframes helps people realise they are concepts, not finished products. I stick mainly to Mockup’s sketch skin for this reason. (You can change to a neater look-and-feel using View > Skin > Wireframe Skin). But a neater hand drawing is more appealing than a misaligned scrawl.
Twitter Bootstrap Components
What I love about this Twitter Bootstrap components add-on for Balsamiq Mockups is that it’s a full symbols library. So, by simply adding this single bmml file to your assets sub-folder, all of these Bootstrap components become available in the Mockups UI library. Start typing “bs-” in the Quick Add box, and you’ll see a list of all available components. For example, type “bs-badge” and you’ll get a Bootstrap badge.
Even if you don’t use Bootstrap, this add-on beefs up Mockups by adding more UI elements to the library.
Font Awesome Icons
Unlike the other add-ons, which are a single file, this custom icon pack is a full set of individual PNG files. However, it’s worth adding, because it is the full set of Font Awesome icons, an open source icon set used in Bootstrap. What I love about these icons is how which they become available in Balsamiq Mockups’ native icon library when added. It just works!
Actually, there’s something I love even more about using these icons. In the past, icons have always been a pain for me. I’ve always had a lot of back-and-forth, sometimes with visual designers, other times with developers, because they are trying to choose an icon based on the crummy low-fi one I’ve put in the wireframe. Now I can specify the exact icon I think will work, right from the outset — and if it’s not right, I can find out during early-stage testing.
2. Adding Files
Now I’m ready to start adding my wireframes. I use a naming scheme. I based this naming convention on a best practice I saw on the Balsamiq website a couple of years ago, which I can no longer find. Anyway, I evolved it a bit and it works for me:
Naming Scheme
I prepend all the file names with numbers and underscores, starting with 10_
This is the key to the scheme. The words that follow should be meaningful to the wireframe, but aren’t as important as the numbers. I use spaces between the words.
When I’m doing the first wireframe for a new user scenario, I will give it a new round number, for example the wireframe names might look something like this
- 10_log in
- 20_open a file
- 30_save a file
These are my “key” wireframes.
I will then add in wireframes as I build out scenarios. I slot them in where they logically fit in the sequence, e.g.
- 10_log in
- 11_forgot password
- 12_what the hell, come on in anyway!
- 20_open a file
- 30_save a file
If I need more than 10 files in a user scenario, or if I create variations of one wireframe, or if I slot in wireframes at a point that I had not expected to, I use this convention: 10a_ , 10b_ , etc.
This keeps my files nice and orderly and in sequence.
Layout
I like to organise my Balsamiq so that the files are lined up on the left, rather than along the bottom. You can do this via the menu: View > File Browser Position > Left
I also like to put the UI library on the right. View > UI Library Position Right
I often hide the UI library a lot using CTRL + L (Windows). Sometimes I drag the window across to a second monitor, so that the UI library is displaying on the second monitor. These are personal preferences I guess, but they work for me.
3. Linking the Wireframes Together
I also link the wireframes extensively, effectively creating light, low-fidelity prototypes.
Balsamiq says it’s product deliberately offers limited interactivity and it is not intended as a rich prototyping tool. I understand this philosophy — complex prototypes become difficult to maintain, and lose their value. Nevertheless, I push Mockups’ linking feature to the max, so that I can utilise it for user testing. I also prefer to physically click a link and then experience how the interaction feels, to me. It helps me do better interaction design.
The link property has also improved greatly over the last few releases. You can link pretty much anything in one wireframe to anything else in another wireframe.
If there is no obvious way of linking, make the control a group (CTRL + G in Windows). Groups always have the link property. In the example shown in the image, I’m converting one of the Bootstrap symbols into a group, so that I can make it link to another wireframe.
I usually run the prototypes in “Presentation” mode and conduct user testing in this mode.
Preventing Jumpiness in Presentation Mode
Tip: To force all the wireframes to all be the same size in presentation mode, and not “jumpy”, there is a weird hack. Again, this was previously on the Balsamiq website, though I can’t find it now. The solution is to add a large rectangle/panel to the background of each wireframe. It has to be largest than your largest wireframe — making it 1000w x 2000h usually works for me. You need to remove the border from this panel, and lock it to the background, as you don’t want it to interfere with your drawing. It’s a bit like a physical panel — think of it as the white wooden frame that’s holding your sketches up.
Other Tips
I have some other minor tips. I may add more in if I do an update. Off the top of my head, here are some:
- I find the Position and Size fields in the property inspector quite useful. Sometimes I find myself copying and pasting values between controls in one wireframe and another, when I want to get an interaction just right. I am aware that too much of this can lead to unnecessary perfectionism though!
- For a long time, I didn’t realise that when you insert an image placeholder. That’s how I got the logo placeholder, above, to say “logo”.
- There are a few shortcuts that I use all the time. Once again, these are Windows shortcuts, sorry Mac users!
- Ctrl + L = Show/hide the UI library
- Ctrl + K = Show/hide the markup (arrows, sticky notes, grids, etc.)
- Ctrl + F = Run presentation mode (a.k.a. demo or testing mode)
- Once in demo mode, these addition shortcuts are really useful
- L = toggle between a big blue arrow (I personally don’t like this one) and a regular arrow, and also show/hide the linking hints (can be useful)
- E = edit the page you’re looking at right now (very useful — often you will want to make a small, rapid change based on a comment in a meeting, or feedback from a user)
Footnotes
*Personally, I prefer the desktop version. I have tried the hosted version, myBalsamiq, but have not found it as useful for my purposes. The wireframes get published as flat images, which took away some of the interactions that I could achieve using the desktop version