Last week I was asked to start the initial user interface design of a fairly large web application. I took out my sketch pad to start plotting and planning, I wasn’t drawing buttons or thinking of colour schemes – I was wireframing. It got me thinking about how when I very first got started in design, I was so keen and eager to start designing the graphical elements of the site that I completely overlooked the process and underestimated the importance wireframing. As a result I often found that my designs weren’t as good as they could have been and that I wasted a lot of time “moving things around” further into the project.

What is Wireframing?

Wireframing is the process of organising the visual hierarchy of elements within an interface. It is essentially a blueprint of your Web Interface. After building a sitemap and planning how users will navigate your website, the process of wireframing is the next key stage in any design project.

Wireframes allow you to plan and organise content within your design, elements such as: the header, the navigation, the footer, the text content, any graphical elements, interactive elements etc.

The Wireframing Process

Before even touching my computer I like the plan out a few different layouts on paper. This allows you to quickly experiment with layouts and get your ideas out on paper. It doesn’t have to be neat and tidy; you can scribble away until your heart’s content. You can quickly get multiple concepts planned out without spending too much time worrying about things being neat or the exact size of an element, making sure they are accurately aligned etc.

It’s also less “painful” to dismiss your own layout ideas whilst they are still on paper. Once you have committed a layout or design digitally and taken a lot of time ensuring every element is accurately positioned, it becomes a lot more difficult to dismiss it as an idea that won’t work because of the time you have already put into it.

You don’t need to design wireframes for every page of a website, just the pages that are inherently different from other pages. For example if you were designing a fairly large E-Commerce site that had 100+ product information pages, you would only need to design one wireframe that shows how these pages would work.

Once I have sketched out a few layouts on paper and I have a good idea of how the site should be organised, I then get out the laptop and begin to translate and evolve my sketches on screen.

There are a number of applications or tools that you can use – see a great list of wireframing resources over on Smashing Magazine

Personally I like to use Photoshop for wireframing. Everyone has their own preference, but Photoshop works for me because:

• There is no learning curve – I know how to use Photoshop, I like Photoshop.
• Layers – I can group key elements and organise them, this comes in very useful when wireframing pages with web forms or wireframes that need to organise more than your standard “header – content – footer” layouts.
• I can use a grid template to help me create wireframes at-size, i.e. the same width and height as my final design. You can download PSD grid templates from http://960.gs/
• When wireframing pages with a similar layout I can simply re-save my file under a different name and delete the layers I no longer need for the next wireframe.
• I can save my final wireframes in multiple formats; PSD, PDF, JPEG, GIF, etc.

Wireframes Finished – what now?

Once you are happy with your wireframes you have two choices – show them to your client or begin the process of making them more visually appealing. This choice depends entirely on your client. A technical client will (or should) understand the importance of wireframes and will be able to discuss the structure and layout with you in some detail, either giving approval or useful feedback meaning you have a clear understanding of any revisions that need to be made. A non-technical client may look at your wireframes and say nothing more than “looks good” or “come back when you have something useful to show me”.

For a non-technical client I like to start fleshing out the wireframes into a full PSD mock-up based on the initial design brief. Yes it takes more time should I need to make changes to the layout or structure of the design, but I think an important part of being a designer is communication and if I need to spend more time in communicating my idea with a specific client by providing a full visual mock-up instead of wireframes then I’ll do it. It’s not ideal but sometimes it just has to be done. This doesn’t mean that you should skip the wireframing process completely; it just means that you are merging two stages of the design process before sharing your ideas with your client.

Failing to Plan really is Planning to Fail

There are many who fail to see the benefits of wireframing, many who see it as an unnecessary stage in the design process and ultimately a waste of time. Personally I see wireframing as one of the most important stages of the entire design process. It saves me a massive amount of time further into the project, it gives me a clear idea of how my final design should be structured, it allows me to understand very early on how users will interact with my site and to design the visual aesthetics on this understanding. Wireframing is a key stage in any web design project, from small websites with a just a few pages to larger websites with many many pages.