Using Wireframes (Revised)
March 07, 2005

Here is a much needed, much overdue updated version of the original Using Wireframes article. I've included more templates and stencils for OmniGraffle and Visio

What are they?
When are they created?
Who is it for?
Types of wireframes
Developing wireframes
Tools & Software
Tips
Stencils
Templates
Related Resources

Wireframes serve a central function in the development of a web site. It is a key tool in communicating the content and layout of each web page for internal and client reviews as well serving as a blueprint for graphic designers to produce designs and for programmers develop functionality.

What are wireframes?

A wireframe is a stripped-down visual representation of a single web page, devoid of any graphic treatment. As the name suggests, it is a framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc.

They are sometimes referred to as "page schematics", "page architecture" or even "blueprints" (though the term "blueprint" sometimes refers to a more overall site design).

It is sometime helpful to use the architectural blueprint metaphor in understanding wireframes. Architectural blueprints show you the form of the building, define the functionality of the spaces and paths for circulation, while provide the contractor and interior designer specifications from which to build from. Likewise wireframes define areas of content and functionality, navigation strategy while providing a framework from which the programmer and graphic designer can build from.

A full wireframe needs to deliver the following information:

  • Layout: General placement of page elements such as headers, footers, navigation, content area, and often branding; It communicates decisions that as been made as to the navigation strategy of the site; it also shows the prioritization of the content on the page.
  • Content inventory: What content needs to be present on the page
  • Web elements: Headers, links, forms, lists, images etc.
  • Behavior: Notes/annotations may be added as to how elements should be displayed (such as number of elements, default display etc.), or what functional behavior occur when an element is activated (popups, page refresh, link to another page, or external site etc.)

When are wireframes created?

Wireframes as deliverables are developed as a part of Information Architecture phase. It usually follows the "Business Requirements" phase of the project and precedes any graphic design and technical development.

Usually this is the role of the information architect. On smaller projects, this often become the role of the project manager.

Who is it for?

The following table shows the consumers of wireframes and how they are used.

A blueprint with which they can review whether the design meets their needs; a preview to the actual site design; Key deliverable, the signoff of which kicks of design and development phases of the project
ConsumerUsage
Project TeamA communication tool around which aspects of strategy, technology and user experience can be discussed
Client Stakeholders
Graphic DesignerA guide upon which they can develop mockup designs
Web ProgrammerA requirements document that details layout, content display and functional behavior of a web page to certain extent

Types of wireframes

  • Content-only wireframes (aka Powerpoint wireframes): Powerpoint is used to define the key pages of the site. Name of the page, and a list of content items are captured on each page without information about layout or placement. This technique can be used to quickly capture client requirements and sketch out a site without having to go through the labor intensive work or creating detailed wireframes. Tools: Powerpoint
  • Block diagram wireframes: This type of wirefames is one step higher than the Content-only wireframes in that it offers basic layout information through blocks of functionality, and content grouping. These wireframes can be used in conjunction with detailed wireframes to provide a high level strategic overview to the wireframes before diving into the details. Tools: Powerpoint, Visio
  • Detailed wireframes: Fully-loaded wireframes with layout, content, web elements information along with notes and annotations on page behavior. Tools: Visio, OmniGraffle

Developing wireframes

Here are some basic steps an information architect would take when developing wireframes.

Gathering information

  • Business requirements: Ideally you would already have documentation from the the Business Requirements phase. This document will spell out major site functionality, key site pages and what content/functionality would need to be presented on them.
  • Content requirements: If there is no documentation from a previous phase it is important to meet with client and sketch out what needs to be presented on key pages of the site. A content-only wireframe is a good tool to do this.
  • Existing design requirements: Additional information such as need to integrate with existing site guidelines or need for consistency with previous site design, etc. should also be noted.
  • Bandwidth requirements Some clients may have to serve a low-bandwidth user base in which case, the design will have to be more text-reliant and less image heavy.
  • Software requirements Some sites are CMS-driven or software driven (such as blogs). Many software packages have layout and navigation rules the design will have to conform to.

Prioritizing/grouping information

  • Once the information has been gathered, it is important to first group and then prioritize how they need to be displayed on the page.

Navigation strategy

  • Clients may have strong preferences as to how navigation should work and be placed on the page. If there is no strong preference, software requirements and usability should dictate how navigation should be configured.

Drawing wireframes

Wireframes should 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

The question often arises: how many wireframes should I create? The answer is how ever many you need to get the job done. (or in our case how ever many we said we will create). Having said this the follow should be included in any good set of wireframes:

Required:

  • Homepage
  • Major sub-pages and "portal" pages
  • Key template pages
  • Pages with forms

Optional:

  • Search results page
  • 404 Error pages
  • Any other pages that provide clarification to the overall development process

Tools/Software

  • Pen & graphing paper: Best tool to use during sketching and prototyping. Personally I am partial a little partial to the Pentel Sign Pen which have a thicker point than most pens, and the Ampad Evidence Heavyweight Quadrille Pad, 4 sq. per inch which have a good size grid.
  • Powerpoint: Great for creating quick and dirty block diagram wireframes and content-only wireframes. Microsoft
  • Visio: Popular choice of many information architects. Supports stenciles and multiple pages as well as HTML prototyping. Microsoft
  • SmartDraw: Haven't used it myself, but I heard it's a good substitute for Visio. SmartDraw
  • ConceptDraw: Cross-platform business drawing app. ConceptDraw
  • Norpath Elements Studio: Interactive rich-meida authoring application. Cross platform support. Norpath
  • OmniGraffle: For Mac OS X users. Similar to Visio. Can import Visio XML files. OmniGroup
  • HTML: If you are a code monkey, sometimes it's just faster to use HTML/CSS to code the wireframes. A little PHP or Dreamweaver templates action can be used to create header and footer includes, so that you can make global changes without having to fiddle with individual pages. This is helpful if you want to user test the wireframes later.

Other tools are Word, InDesign (or Pagemaker) and even Excel.

Tips

User testing with wireframes

As a general practice, it is useful (and enlightening and often humbling) to try to conduct as many user testing sessions as the project allows during the course of a project. More often than not, it is only when the clients ask for user testing specifically during wireframing that one ends up doing it.

You are somewhat limited by what you can test with a wireframe, but I've found that it still provides valuable input for issues of general organization, navigation and the usability of key terms used on the site.

Always test with a simplified version of the wireframe that features and focuses on the aspects of the design that you wish to test. There are a number of formats you can use for the test:

  • Printouts: By far the easiest method of testing. Print, show, get feedback. What can be easier. Also great for getting ad hoc feedback from co-workers, friends or family members.
  • Hand sketched wireframes: I've sometime found that printout intimidate test subjects and sometime it is helpful to just trace the wireframe again as a hand sketch. This way the subjects see the sketch as a work in progress and will be open to providing more candid feedback. Plus you can simplify the wireframe during tracing to show only select elements you want to focus your testing on.
  • Visio: There is a feature in Visio (and OmniGraffle) that allows you to create actual links within a wireframe then export the whole set as a HTML site. This is useful in testing such elements as navigation across multiple pages.
  • HTML prototypes: Same as Visio above.

Presenting wireframes

Many clients have never seen a wireframe and the most common client reaction to a full wireframe that they are "overwhelming" or "cluttered". This is only natural since it lack many of the visual organization that comes later during graphic design. Some tips for presenting wireframes are:

  • If you are in a presentation meeting with many stakeholders that are seeing the wireframes for the first time, ask around to get a sense of how many people have never seen a wireframe before;
  • Include a couple of presentation slides (or handout) that outline what wireframes are, and how they should be read;
  • Remind the meeting attendees that wireframes show only content and layout (and is missing graphic treatment) and that "it is not what the site is actually going to look like" (see above section: What are wireframes). It is surprising how many people actually do think that this is what the site is going to look like;
  • Provide simplified block diagrams of home page, and sub-page that illustrate general organizational and navigational strategies before showing the detailed wireframes;

Stencils

Visio wireframes stencil
OmniGraffle Stencil
download
Visio Stencil
download

Installation

  • Visio: From Visio go to File > Stenciles > Open Stencil.... From there select the location you have downloaded the stencil to.
  • OmniGraffle: Stencil file needs to be copied to [User directory] > Library > Application Support > OmniGraffle > Stencils. Restart OmniGraffle, and now you can access it from the "Stencils" menu at the top. It should appear at the bottom of the list.

Templates

PowerPoint content-only wireframe
download
PowerPoint wireframe diagram
download
Visio wireframe template
Download
OmniGraffle wireframe template
Download

Related Resources



Comments

Your OmniGraffle stencil looks really handy, but the link you've posted points to the wireframe_template.graffle file instead of a .gstencil file. Could I get the .gstencil file instead?

Thanks,
- j.

Posted by: Jay Gibb on April 26, 2005 12:43 AM

Sorry about that - the links have been updated. _namho

Posted by: namho on April 27, 2005 10:04 AM

Nice summary of the wireframing process! FYI - the Stencil links aren't working (they're both pointing at their respective program's wireframe template).

Posted by: Chris Moritz on July 11, 2005 3:09 PM

This is a smooth intro to wireframes, but I have noted that the Visio stencil download actually opens the Vision template. Don't suppose we can have the link modified please? BTW, the Visio wireframe template link is OK!

Cheers!

Nick

Posted by: Nick Newell on August 10, 2005 12:41 AM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?