Balsamiq Mockups

Published on 1^st March 2009 in Software, tagged Balsamiq Mockups, Moleskine, wireframes.

When it comes to designing a new website, there’s nothing better than pen and paper to get you started. You can scribble away and draw postage stamp-sized sketches at almost the same speed that ideas appear in your head. Looking back through my Moleskine, almost half of it is covered in small doodles of various websites and magazine pages I’ve designed. When it came to buying a new notebook, I even got one with squared lines specifically because it would be easier to sketch layouts in.

But what next? When I’ve been designing for myself, I can jump straight to coding HTML and CSS, but you can’t do that with a client. You need some way of communicating the content of those sketches to someone else without having to spend hours doing it. Wireframes are the common solution; they provide an outline of a website’s features and layout without going into too much detail. However, creating these in many programs like Photoshop and Illustrator can take longer than you anticipate because they provide too much and the temptation to fill in the details is too strong.

My blog redesign wireframe in Mockups.

This is where Balsamiq Mockups comes in. It provides you with a canvas onto which you can drag various shapes and pieces of text, allowing you to build your wireframes. At a first glance, it looks almost too simple, but this is part of its beauty. All of the objects you can use have a rough, hand drawn look to them, which is a brilliant touch. It stops you adding more detail than is necessary and when you show wireframes to clients, they won’t read too much into them.

The best thing about Mockups is the speed at which you can build interfaces. Once you’re familiar with the objects you can use, it takes surprisingly little time to produce wireframes. The Balsamiq website boasts that Mockups is “just like on paper, but digital”, and it really is true.

Although Mockups has only been around for a little over eight months, it has a ton of features for an app which has been made by essentially a one man company. There are things like the ability to import images from Flickr to use as placeholders, a neat full-screen presentation mode and you can export multiple mockups to PNG at the same time. There’s a definite feeling that Balsamiq have paid attention to the detail and thought through the possible use cases for Mockups.

The only major criticism that can be levelled at it is that the interface takes some getting used to. Being an Adobe AIR app, Mockups naturally looks a little different from native Mac apps, but it also strays away from conventions. For instance, there’s no File menu or Preferences window. Instead, all of the functions like Open and Save are placed under the application’s own menu, which can be confusing.

Quirks aside, Mockups is a superb program and one that helps to bridge the gap between sketches and the final product. Once you get used to its interface, creating wireframes is a quick and easy process which should fit in well with anyone’s workflow. Mockups is an app that I’m very pleased to have discovered and one that I would highly recommend to anyone else who designs websites.