Why wire framing is so important to the design process

In The Complete Website Planning Guide I outline what a wireframe is and the confusion that many people get, particularly on the client side, with wireframes.

A wireframe isn’t a prototype or a design; typically it doesn’t use colour or images, and mostly will only use some actual content.

When you see a drawing/image, which looks like the outline below you know you are talking about wireframes.

A good website plan needs the written needs, such as goals, audience and business absolutes. On top of these it needs to have page-by-page requirements, or specifications that outline how each page should function.

Importantly I wrote `how each page should function` not `how each page should be designed`.

When talking of design typically people are referring to the visual design process that happens when your web design team provide you designs to review and approve.

With our planning process, we are actually designing your site, in a broader context. By planning to the level we discuss in the book we are doing more than just visual design, we are designing the result we want and how we want to achieve it.

Wireframes become an incredibly important part of the design process.

Wireframes help you in the following ways:

• Get you to focus on pages individually
• Force you to consider how you will use media on the pages
• Make you think about how you will achieve the goals of this page, what calls to actions, how to present the content
• Get you thinking about the uniqueness of each page
• Make you consider both mobile and desktop forms before any visual design work is completed

Sitting down with a piece of paper and drawing out a page without colour or imagery, is still one of the best ways to think clearly about functionality.

• What did we want the user to do on this page?
• How will they do that?
• Where on the page will that action sit? Will it be a button, a link, a form or something else?
• Will there be other elements around it, how will it sit in relation to other content or media?
• What happens when they take that action?
• How much of the screen will they be seeing?

When you look at most sites that have used an off-the-shelf theme you can see that the layouts are typically generic apart from several key pages. Home pages and top level service or product pages get design treatment, but inner pages are all fairly standard.

Even the better pages in these designs were designed by someone to meet their purpose not necessarily yours.

This results in people shoe-horning content into existing objects and page layouts, to suit the visual design.

In our method, you bring to any visual design process a well thought out, pre-debated set of guidelines and requirements on how you want each page to behave and function.

Yes it is slower, and requires much more input. Like anything good though, that’s just what you need to do to get a better result.

On all the developments where budget or client demands have cut out key steps in a project, the one that hurts the project the most is the wire framing step.

If you don’t wireframe your site before it’s being designed or built then you’re going to either spend a lot more time paying your designer to change things or you are going to get a site that misses the mark for what you need.

You don’t need software to do it, although there are great tools like Balsamiq and others that make it easy to wireframe. You can use pencil and paper

Most wireframe projects I do start on paper and migrate to Balsamiq later.

Make sure you use wire frames in your planning and designing process!