24tips: lo-fidelity wireframing

20 Dec: the biggest challenge in a web project is getting everyone’s expectations in roughly the same place. The big boss thinks it will engage thousands (but is actually happy with it looking shiny), the (internal) client says it needs to have functions X, Y and Z (but actually doesn’t mind, as long as it is simple to manage). And you? Well, you’ve got your own ideas, which evolve as you spend time thinking about it and learning exactly what the goals really are.

Low-fidelity prototyping is a big part of the solution. For years now, I’ve carried around a plain paper notebook full of rough sketches of projects and sites I’m planning or working on – the one on the right is from an early iteration of this site.

These kinds of sketches are good to help with your own thinking, but when you’re trying to get other people onto the same page, low-fidelity wireframes are even more important. They take away the concerns about colours, fonts and imagery, and help to focus attention on what’s really important on a given page, and the flow between different pages on the site.

And while sketching on paper is good, there are some great apps to help you come up with tidy, low-fidelity prototypes of common web interfaces:

Balsamiq is a downloadable Air app ($79 one-off) with a whole library of interface elements and icons, to get you started building a wireframe quickly (see example above)

Mockingbird (from $9/month) works in the browser, and has a similar template library, with a bit less of the Comic Sans about it and a slightly cleaner interface, including some neat features like being able to create links between pages and export the linked wireframes as a PDF

Of course, low fidelity wireframes are design discussion documents, and need to be presented carefully. Some (internal) clients don’t really engage until they see a design concept with a bit more polish, especially at senior levels. For those guys, showing them comparative examples of live sites with the kind of style or functionality you think they have in mind, and gauging their reaction, can be a more effective place to start the discussion.