What is a Wireframe and Why Are They Useful?

A wireframe is a visual guide that portrays how a page or screen of a website or system may look. Wireframes can range from very unfinished and ‘sketchy’ in appearance, to very polished looking and reflective of how the system will look at 100% completion. Using wireframes can help determine:

• The structure of a page or screen
• The layout of content
• The functionality available
• Calls to action
• Blocks of text
• User interface elements
• Graphic design touches

The beauty, and power, of a wireframe is that almost every single one is different. Some are used for broadly outlining the structure of a page, and nothing more. Others might consist of a piece of paper with rectangles on it. At the other end of the scale, a very polished wireframe could indicate structure, content, functionality, and even elements of graphic design.

When Are They Useful?

Wireframes are extremely useful in the following situations:

• To quickly get ideas down on paper for soliciting feedback. This is the real ‘back of a napkin’ use of a wireframe, and can it can be useful in a workshop to document ideas (Use a whiteboard or computer screen, and draw up something rough). The very act of creating this image, this basic wireframe, will prompt people in all kinds of useful ways.

This type of wireframe is often referred to as ‘lo-fidelity’. It can be a few boxes drawn in felt tip, a pencil approximation of a full page, or a computer drawn illustration. The idea though is it doesn’t look finished, because invariably, it isn’t.

• To communicate the specification of a system or website. This is the ‘a picture paints a thousand words’ concept. Communicating how a proposed system, website, or even simple page of content, should work and look is never as easy as it seems at first. Drawing a wireframe, with the various states outline and suitable annotations, can save a lot of time writing complex paragraphs.

This type of wireframe is often referred to as ‘hi-fidelity’. It normally looks like a recognizable page and can often be very ‘designed’, but still sticks to the core of idea of being an approximation.

Introducing Clients to Wireframes

One area to be careful of is when introducing the concept of wireframes to clients. As we have discussed this is one of the key uses of a wireframe, however, depending on the client, a bit of an introduction might be required first in order to avoid confusion. This is often realized by first explaining what a wireframe isn’t, rather than what it is. Overall, a wireframe isn’t:

• A finished concept
• A graphic design
• An indication of content (text, images, etc..)
• Necessarily indicative of final layout

A designer friend often likes to amuse his colleagues with the story of a client who, after being presented with the wireframes for a new website, said:

“It looks great but does it have to be grey?”

It’s a funny tale, but a serious point. Wireframes are fantastic, but not everyone understands how and why they can be used. So be sure to introduce the concept, as well as the wireframe itself, so that your client is not left scratching their head.