Warning: include(/_includes/strange_header.php) [function.include]: failed to open stream: No such file or directory in /homepages/13/d376532100/htdocs/strange_net/archives/000005.php on line 78

Warning: include() [function.include]: Failed opening '/_includes/strange_header.php' for inclusion (include_path='.:/usr/lib/php5') in /homepages/13/d376532100/htdocs/strange_net/archives/000005.php on line 78
Using Wireframes
September 20, 2002

PLEASE NOTE

I have since updated this article. Please see Using Wireframes (Revised). Also see Scaled Visio Wireframe Templates, Stencils, a follow-up article which reflects web developers' feedback that wireframes often are misleading and hard to implement.

Finally, I now write at a new blog: strangesystems.com

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.

What are they?
What goes into a wireframe?
Which pages should I create wireframes for?
What level of detail should I represent in a wireframe?
Color or no color?
Conclusion
Resources
Examples


WIREFRAMES: WHAT ARE THEY?

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
- Allow for a quick, iterative testing of designs
- Focuses on how site works and reads, not "look and feel" in early stages of site development
- Gets early client buy-in

WHAT GOES INTO A WIREFRAME?

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
- Grouping: side bar, navigation bar, content area, etc.
- Labeling: page title, navigation links, headings to content objects
- Place holders: dummy text (lorem ipsum dolor...), and image place holders

WHICH PAGES SHOULD I CREATE WIREFRAMES FOR?

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
- Major portal pages to subsites
- Template pages to grouped content
- Discussion forum
- Search results page
- 404 Error page (always overlooked!)

WHAT LEVEL OF DETAIL SHOULD I REPRESENT IN A WIREFRAME?

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
- Lower fidelity view
- Higher fidelity view

Examples of these can be viewed at
http://argus-acia.com/white_papers/evaluating_ia.pdf

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
- Users
- Graphic designers / web developers

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 OR NO COLOR?

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
- Conditional elements: elements that may or may not be included on a page, but be consistent in all your wireframes.

CONCLUSION

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.

RESOURCES

Effective Info Architecture
http://www.webtechnique.com/archives/2001/10/chak
A divided approach to Web site design: Separating content and visuals for rapid results
http://www-106.ibm.com/developerworks/library/wireframe/wireframe.html
Strategy > Wireframes
http://www.beki.com/strategy030901.html
Evaluating Information Architecture
http://argus-acia.com/white_papers/evaluating_ia.pdf
Iawiki: WireFrames
http://www.iawiki.net/WireFrames


EXAMPLES

Fox Sports site wireframe
http://www.noisebetweenstations.com/ia/examples/FoxSports/Foxsports_wireframe.gif
Resulting Fox Sports site mockup
http://www.noisebetweenstations.com/ia/examples/FoxSports/foxsports_design.jpg
WebTechniques.com as a wireframe
http://www.webtechniques.com/archives/2001/10/chak/figures/1.gif
Evaluating Information Architecture
http://argus-acia.com/white_papers/evaluating_ia.pdf
IBM Smeal College of Business @ Penn State (this one is marked confidential)
http://intranet.smeal.psu.edu/webresource/a1.pdf



Comments

i like the design alot, i am trying to write a blog about famous metal buildings and steel structures, thanks

Posted by: steel buildings on January 18, 2005 09:33 AM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?




Warning: include(/_includes/strange_footer.php) [function.include]: failed to open stream: No such file or directory in /homepages/13/d376532100/htdocs/strange_net/archives/000005.php on line 489

Warning: include() [function.include]: Failed opening '/_includes/strange_footer.php' for inclusion (include_path='.:/usr/lib/php5') in /homepages/13/d376532100/htdocs/strange_net/archives/000005.php on line 489