Utilising wireframes as part of the web design process. Wireframes are often missed from the web design process yet, as site complexity increases, they can bring benefits in many areas. Arguably, the first benefit is that basic page structures can be developed, tested and refined independently of the look of the site. Freed from having to re-work Photoshop mock-ups, this process can be rapid. The example shown here is one of a series, for a complex site, that was produced while the information architecture (IA) was being developed. The styling was applied late in the process as an aid to visualising the finished product.

Defining page structure

Page structure

In the early stages of design there is plenty to consider in terms of usability, technical and commercial and so on. Wireframes enable page structures to be developed and evolved quickly without the additional concerns of visual style. In the example shown on the left we first applied the results of the IA development, and branding considerations, to arrive at a page template. At the top of the page, primary and secondary navigation. At the foot of the page, additional navigation by brand and acknowledgement of company sponsors. The brand menu came in to being as a result of the IA development, which lead to the site navigation being focused on the needs of site visitors rather than the many brands the company owned. I hope to write an article covering this at a later date.

Filling out the body of the page

Wireframe

It was in filling in the detail of site pages that the wireframes started to bring big benefits. As marketing, IA, and content ideas evolved, the layouts of key pages often changed drastically. Not only were we able to produce new visuals quickly, we also found that non-designers in the team were soon able to start sketching ideas, so introducing paper based prototypes. These could be produced and discussed very quickly, saving much time. Having layouts that are devoid of style enabled alternative layouts to be developed and appraised both quickly and without styling variations between designs influencing choices.

Refining the design

Grid and wireframe

We used a visual design grid as part of the design process so it seemed natural to incorporate this into the wireframe development, on the left is the grid layered over a rough visual that was developed from one of the wireframes for use in a presentation. Using a layout grid at the wireframe stage itself brought benefits, helping us to consider uniformity of page layout across a large site. The combination of wireframes, grid and CSS framework is one that offers further benefits. Clients with large projects often require HTML prototypes as part of the design process. A design based upon a grid naturally lends itself to HTML based upon a CSS framework, which enables the finished site to be built easily from the wireframe HTML prototype.

Drawbacks

Finished wireframe

The main drawback seems soon to disappear – unfamiliarity. When working on a wireframe, the designer might have a vision of a wonderful end design, the client sees a strange looking diagram. In practice everyone quickly understands, and becomes happy to work with, wireframes.