My Wireframing Tool of Choice: Balsamiq Mockups

by Clint on July 31, 2011

An example of a wireframe made with Balsamiq Mockups

I’ve been using Balsamiq Mockups to make wireframes for my current project and it’s been great. There are a lot of tools for doing this kind of thing, and I’ve tried several of them (OmniGraffle, Visio, plain old Illustrator, etc.). It’s not perfect, but I’ve had a better experience with Mockups than anything else I’ve tried so far. Some perks:

  • at USD$80, it’s pretty affordable.
  • all the drawings have a deliberately “lo-fi” look. this helps keep you (and your client) focused on wireframing the ideas and not getting bogged down in nitty-gritty design stuff
  • the library of pre-built widgets is fantastic and pretty easy to configure. there’s also a website where you can download additional widgets that people have made.
  • the quick-search bar is fantastic for adding widgets quickly; hit the “/” key, type a few letters to select a widget, hit enter, and ZAP! the widget you want is added. much faster than using a mouse to find the widget you want and drag it on screen.
  • you can insert drawings from other files into your current mockup; changes to those drawings will show up in your mockup, too.
  • if you need to “override” a drawing that you’ve linked to, no problem. you can make one-off changes to that symbol without affecting the original.
  • you can make a collection of your own widgets that show up in a library for your current project, or across all projects.

Those last three points are huge. For example, I’ve downloaded a few standard widgets that I want available all the time (Mockups calls these “Account Assets”). But I also have the ability to see a library of widgets just for one client or project (Mockups calls these “Project Assets”). I can re-use any of those widgets and if I change the original file those changes are reflected everywhere else–this is a boon to anyone who has copy-pasted widgets around only to find themselves re-copy-pasting changes to that widget later. Lastly, if you reuse a widget somewhere but need to tweak it a bit for that one usage, you can do so without affecting the original. Awesome.

There is a small learning curve when it comes to figuring out how to work with groups, assets, and editing an original widget that you’ve linked to vs overriding it, but after a couple of hours of poking around and watching some of the video tutorials you’re pretty much ready to go. Also, it runs on Adobe Air which might explain while it’s a little less-than-snappy with some operations like switching between files. But on the upside, you can run it on almost every platform. And although there may be times when you crave a more traditional “drawing” app if you need to mock up a really complicated/custom widget, you can usually find a way to get the job done in Mockups.

In summary, it’s not perfect but it’s probably the best wireframing tool I’ve used so far.

Clint Harris is an independent software consultant living in Brooklyn, New York. He can be contacted directly at ten.sirrahtnilc@tnilc.