Working with Wireframes for the Web

A website wireframe is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface.

Let me start of with saying that wireframes save time, effort and money. By spending time making wireframes at the start of development we can make things easier, faster and more enjoyable for ourselves in the long run. Consider building a house without any architects drawings and you’ll get the idea.

When we started on our latest project at Makito Labs we wanted to make sure we had everything planned out to the nth degree to make our development process as smooth as possible. One of the things we decided upon very early in the project was that we were going to use wireframing for laying out the interface. Usually we would find ourselves jumping in, sketching out very rough ideas on paper, constructing them in Photoshop, and then iterating through a few different revisions. That can get seriously draining and time consuming. I now know that there is a better way.

This time we’re producing the wireframes before even thinking about the site design. Wireframes allow us to quickly come up and play around with possible UI layouts while being free from not having to care about the final design, instead we can focus on achieving the optimum layout of elements for our users.

Before you get started

It’s easier to start producing your wireframes if you have an idea of your how your site’s or app’s is going to be structured so I’d advise making a site map before you move into the wireframing otherwise you may end up wasting more time by wireframing things you don’t need or missing things that you do.

Producing Wireframes

As with most things there are quite a few ways of generating wireframes. Of course there is the good old pencil and paper but there are some other options which are easier to manipulate, not to mention easier on the environment.

HTML Wireframes

Some people suggest using HTML but I belive it takes too much time to produce and can be a lot of hassle. Paul Boag summed it up nicely:

…the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work.

Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality

Software for Wireframing

So if we’re not going to use pencils or HTML, what else is there? Welll there are a few pieces for Windows users such as Microsoft Visio or the full featured Axure RP. Both of them looked pretty good to me but I’m a Mac man so I needed something OS X friendly.

I finally narrowed my choices down to two products – the lovely OmniGraffle and a funky little piece of cross-platform software – a Mac and Windows friendly app called Balsamiq Mockups.

I already use OmniGraffle for quite a lot things like producing site maps, database schemas and domain models and there are quite a lot of UI stencils available to download for free but after taking a look at Balsamiq Mockups I was hooked. Unlike OmniGraffle it’s made for one thing and one thing only – wireframing. Mockups gives you exactly what you want to create wireframes including possibly every UI element you can think of (I havent found any missing yet) and a nice sketchy feel which stops you from thinking about design and allows you to focus solely on laying out the UI.

Life with wireframes