I used to use OmniGraffle Pro for all of my diagramming needs, including for wireframes. When I needed to do some wireframing for a client, I decided it was about time I found some better stencils (pre-built shapes) for OmniGraffle so that I could get these things done more easily and consistently. That turned into a wild goose chase, which ended with OmniGraffle no longer loading properly and an approaching deadline to have my diagrams done. But then I found Balsamiq Mockups, and all was well.Balsamiq is an interesting company in itself, being run by the sole developer, Giacomo ‘Peldi’ Guilizzoni from his home office in Italy. His wife handles the “business” side of things, and he handles development and customer support. I’ll get to the customer support side of things later, but first let’s look at the actual product.

Balsamiq Mockups

Mockups is the first product from Balsamiq and is their flagship release. It’s a relatively simple wireframing tool that does one thing, and does it well. It’s built in Flash and is available online (via your browser), as a plugin for Confluence, JIRA and XWiki, or as a desktop product, powered by Adobe AIR. It produces hand-drawn-looking documents that are true to the “rough” nature of wireframes, while providing a consistent feel and the ability to easily edit your wireframes as you refine them.

Sample wireframe - a wiki layout

First of all, let’s have a quick break-down of some of the good and not-so-good features of Mockups:

What’s Cool

• Minimalist UI allows you to just Get Things Done.
• Keyboard shortcuts (especially “/” to add a new element to your canvas) speed up your workflow
• Consistent elements mean consistent wireframes (no more mish-mash of elements from different stencil sets)
• Smart elements resize where they should and not where they shouldn’t!
• Simple syntax for providing realistic placeholder data on certain elements (including a magic Lorem Ipsum generator for paragraph text)
• Export as PNG for sharing (where’s the export as PDF?)
• Built in Adobe AIR, so it’s cross-platform
• XML-based file saving means there’s potential to build out tools based on these files (automatically-generated HTML output?)
• Incredibly attentive and passionate support from Peldi via GetSatisfaction
• Ability to lock elements in place (e.g. Browser Window) so that you don’t keep dragging it around by mistake

What’s Not As Cool

• Sometimes the focus doesn’t go to the Quick Add field when you hit “/” (because it’s on something else?)
• Printing support is a little kludgy, and doesn’t allow printing over multiple pages (always resizes to fit on a single page)
• Occasionally, adding something will turn the background dark gray, and won’t add the element properly (Edit > Undo and then File > Save will get around this)
• No font choices, and it uses Comic Sans by default (see extended discussion about this)
• Built in Adobe AIR, so you need to have that installed to run it
• No ability to create linked wireframes (yet, but they’re coming)
• Occasional freeze-ups (switching to another app and then back to Mockups often seems to fix this)

My Experience

As I mentioned at the start of the post, I came across Balsamiq Mockups while I was searching desperately for a replacement wireframing tool that I could use on a project with a looming deadline. One of the things that really sold me was the ability to try the software out right there and then – literally – without even downloading and installing it. Because Mockups is written in Flash, it’s deployable online, and Peldi offers you the ability to try it out (without the ability to save your files) right there on his site. I tried it out and fell in love, so I immediately bought a license.

Once I’d downloaded the “Desktop” version (which as I mentioned runs under Adobe AIR, so it’s cross-platform), I installed it and was up and running very quickly (I already had AIR installed so things went even faster). Everything went along well and I got my wireframes done with plenty of time to spare when disaster struck. For some reason, I couldn’t export PNGs to send to my client!

I jumped on the Mockups support forum at GetSatisfaction and checked, but couldn’t find anyone else having similar problems, so I posted my cry for help. Within a few hours, Peldi had contacted me, identified and fixed my problem, and refunded my license fee for the trouble. WOW. I mean WOW! When was the last time any other company did that for you? I think that’s a perfect example of amazing customer service, and it’s things like that which will keep customers loyal. Maybe I’m no longer a paying customer (although I was for a while there!), but here I am writing a blog post, telling you that if you need to do some wireframing, Balsamiq Mockups is something you should check out.