Balsamiq Mockups

A colleague/buddy of mine recently introduced me to a great product, Balsamiq Mockups, developed by Balsamiq Studios LLC.  He had recently redesigned his blog site and during our discussion of the new layout he mentioned doing some mockups and when he gave me a brief demo I was hooked.  I had to find out how I could get my hands on a copy of this great tool.

In the past I have used Visual Studio, pen and paper, Visio, Paint, Excel and recently Blend to create screen mockups.  None even come close to comparing to Balsamiq Mockups.  I have bounced around to so many different methods because none have brought together the few things I require in a tool for creating screen mockups.

I have a pretty short list of “must haves” for a mockup tool:

• Lightweight
• Easy to use
• No programming or scripting
• Is not confused with a finished product
• Plenty of controls ready to use

Lightweight

Let’s talk about just how lightweight is Balsamiq Mockop.  It took less than 5 minutes to download and install.  It takes up less than 5 megabytes of hard drive space.  Did you hear that Microsoft?  I vaguely remember someone once saying something about never needing more than 640kb of memory on a computer.  Startup is almost instantaneous.  I would say it passed the Lightweight test with flying colors.

Ease of Use

Balsamiq Mockups starts to a blank slate on first load.  Every time after it loads the mockups that were open during the last session.  This was great because when working on a system with a bunch of mockups I don’t have to keep opening them everytime the tool starts.  Once started I could begin immediately choosing from the many controls (I believe their website mentions 75 ready to use controls) and dragging them onto the workspace.  For every control dropped onto the workspace there are properties that can be set.  The properties window floats on the workspace and can be moved it gets in your way.  And just a little icing on the cake is it goes semi-opaque when not being used so it doesn’t draw your attention.

No programming or scripting

One nice thing to have in a mockup is some content.  Nothing serious, just a little data to polish off the picture.  Balsamiq Mockup does just that.  Every control I used that had the potential for data plopped onto the workspace and asked me what I wanted in it.  My favorite was the ease of entering data for a data grid.  It simply asked for comma delimited records.  It was as simple as typing in a few records then it handled the formatting of the grid.  I didn’t have to create a data source and wire it up.

Is not confused with a finished product

It utilizes a pencil-like interface so it will not be confused as a completed screen.  This is one of my biggest issues with with creating mockups using actual development tools.  I was able to add my own images and to keep with the pencil-like look it gives the option to “squigglify”¹ the image.

Plenty of controls ready to use
When it comes to having the right controls to get the job done Balsamiq Mockups was right on the money.  With 75 ready to use controls and the ability to download more I was not once needing a control.  Everything was there from a simple label control to data grids.  Add to that the ability to assign links to controls to jump to other mockups and the package was complete.

¹ Rob Horton, “Last talk about the new look … OR … How did you do that thing you done did?”, 2009, <http://hortonhollow.blogspot.com/2009/12/last-talk-about-new-look-or-how-did-you.html>