September 20, 2002
Wireframes serve a central function in communicating the content and layout of each web page for internal discussion and client review as well as a blueprint from which graphic designers and web developers will derive final designs. It's importance, roles and implementations are discussed in this article.
* NOTE: I have updated this article. Please see Using Wireframes (Revised)
* NOTE: Also see Scaled Visio Wireframe Templates, Stencils
To state the obvious - they are "frames made of wire". They are also referred to as "schematics", "page architecture" or even "blueprints" (though the term "blueprint" sometimes refers to a more overall site design).
To be more explicit, a wireframe is a visualization tool for presenting the layout of a web page element inventory: the content; navigation; header & footer; branding etc.
Wireframes are effective because they:
- Requires minimal skills to create prototypes
When presented with site design prototypes (or mockups), users, clients and designers alike tend to focus more on visual elements of a prototype rather than the proposed function, structure or content of the page. A wireframe attempts to separate the look and feel of the site from the way it works and reads by presenting a stripped down, simplified version of the page devoid of all distractions.
There is still a lot of debate about what a wireframe should or shouldn't include. The answer to this may be: who are you showing this to and at what stage of the project is it? Having said this there are still some elements that a wireframe must include:
- Key page elements & location: header, footer, navigation, content objects, branding elements
Short answer to that is: Homepage and templates.
Long answer: any page that requires client approval or represent major subsection of the site and require a distinct layout and functionality. These pages may include but not limited to:
- Home page
This depends again on whom you are showing it to and what stage of the design process you are in.
There may actually be a need to generate a number of wireframes of differing levels of detail for a single page depending on where you are in the development of the site. I like Steve Toub of Argus Associate's description of three levels of wireframes:
- Abstract view
Examples of these can be viewed at
The Abstract View only communicates bullet-pointed laundry list of what needs to appear on the site without any reference to layout.
Lower-fidelity View shows content layout of major elements such as header, footer, navigation, content objects all in boxes with only headings represented in the boxes.
Higher-fidelity View shows detailed content layout, navigation scheme (tabs, bread-crumb trail etc), labeling, linked elements, placeholders, some dummy text as well as form-elements (buttons, text input boxes etc).
In any case, the wireframes also need to customized with the viewer in mind. You would have to create slightly different wireframes for the following viewers:
Clients are interested in seeing if their content is being delivered effectively, and whether it meets their cooperate goals. Users, during user testing, want to see what they can do on the site, and how it functions. Graphic designers and web developers need to use the wireframe as a blueprint for further design and scripting and needs to be very detailed and specific.
Color should be used sparingly indeed. The reason is clear - the eye is instantly attracted to colored elements and want to understand the logic behind the color scheme.
In the past I have been guilty of using color to denote different functional areas of the page. In retrospect I think this caused confusion for the client. Are those the actual colors you are going to use? They look awful, was one reaction. Bad impressions are hard to recover from. You have to waste time trying to make them overcome those initial impressions and understand what the wireframe is actually trying to convey.
In general, don't use color that will make the viewer think about what they represent, no matter how innocent it may be. Use of color should be limited to:
- Links: this is a no-brainer for the viewer
It is important to keep in mind that there is no single wireframe scheme that fits all viewers and occasions. Tailor wireframes to the audience. Explain carefully the purpose of the wireframe - that it is only trying to convey layout and basic functionality.
Get client sign-off.
Invariably you will get the client that says: "You have to show me more than that! Add some color and graphics or something." Next meeting you have they will undoubtedly comment on your choice of color and forget about the layout.
Effective Info Architecture
Fox Sports site wireframe
© 2002 copyright strange systems