Balsamiq Mockups: Wireframing For the Rest of Us

There are several different ways to design a website or a software application. Some people like to start with Photoshop or Illustrator and create the complete design. Others like to start with code, and build up the look at the same time they are creating functionality. Another technique is wireframing, where you mockup just enough of a page or screen’s layout to understand the functionality, then turn it over to a designer to create a finished look.

For a couple of weeks, I’d been using OmniGraffle to do just that. Then I had a chance to try Balsamiq Mockups. If OmniGraffle is a complete painter’s workshop, then Balsamiq Mockups would be a box of 64 crayons. And that’s a good thing.

The UI is very simple. You have your workbook area, where you create mockups, and your available elements at the top. Drag or double-click one to add it to your mockup. There’s also a UI library search at the top, so if the element you want isn’t visible, you can quickly find it. All the elements have a hand-drawn look, which gives the whole process a feeling of sketching out an idea. Balsamiq Mockups is very easy to use, but it is not an OS X native app (it’s built on Adobe Air, so it runs on all platforms) so it lacks the standard Mac look. It also lacks some standard functionality, like hiding the window.

Any element that has text can be double-clicked to change the text. For an element with multiple items, like a list, you can type in a comma-separated string to generate as many items as you want. There’s also a tool window that pops up when you select an element that gives you context-sensitive tools for editing the element.

I particularly liked the full-screen view, which displays your mockup with a big blue arrow you control with the mouse. It’s great for presentations and pointing out specific elements.

Balsamiq Mockups can print your creation, save it as a PNG, save it to the native Mockups format, or export it as an XML file. Having an export option is nice, but since the output will only work with Balsamiq Mockups, it’s not particularly useful.

Professionals that do wireframing all day, every day, will probably be better served by OmniGraffle, with all its tools and options. For developers that just want to get their ideas down with minimum fuss, Balsamiq Mockups is a great tool. At $79 it’s a little pricey, but it is cheaper — and easier to use — than a lot of the alternatives.

share permalink ping 3 Comments