Contact  |  Login  Volunteer

Search

Home » Topics » Design » Platform and domain-specific design issues » Web

Wireframe

A wireframe is an architectural representation of a user interface object like a screen, window, dialog box, or Web page.

Wireframes provide a sense of the general layout of controls, text, and graphics on a user interface object and often provide some description of the task flow in the object. Typically visual design and precise layout are not addressed.

Related Links

Nielsen, J. (1995). Scenarios in discount usability engineering. In J. M Carroll (Ed.) Scenario-based design: Envisioning work and technology in system development. p. 59-84.

Turbek, S. (2006). Real Wireframes Get Real Results<. This article discusses the impact of visual fidelity on wireframe usability testing.

Detailed description

Benefits, Advantages and Disadvantages

Benefits

  • Wireframes provide guidance for more detailed visual design.
  • Wireframes support a shared understanding of design and other requirements.

Advantages

  • Wireframes are a cheap and easy way to communicate a design.
  • Wireframes can be created quickly.
  • You don't need sophisticated tools to create wireframes. You can generate wireframes using basic office software like PowerPoint and Visio.

Disadvantages

  • Wireframes can be time-consuming to create and modify. Many projects require dozens of wireframes and major changes to a design will require significant upgrades to wireframes.

Cost-Effectiveness

Wireframes can be very cheap to create because they don't require special tools.

How To

Appropriate Uses

Wireframes are good for communicating the basic structure of a screen, but aren't as good at communicating complex interactions, such as dragging and dropping, or anything that will be impacted heavily by visual style.

How to Do It

Procedure

  1. Appoint a person who will serve as the wireframe &quot;librarian&quot; or &quot;owner&quot;.
  2. Gather existing data that will serve as input to the wireframe. This data can include workflow diagrams, sketches, existing templates, style guides, and competitive information.
  3. Determine what major user interface components (pages, windows, dialog boxes) you want to represent in your wireframe. Wireframes often include only a subset of components that are important for showing key aspects of the design. For example, if you were creating wireframes for a new web site, you might want to create wireframes of important pages like the home page, content pages, purchasing pages, the support page, and the search page.
  4. List the user interface controls that will be represented on each of the major interface components. You might want to include the main navigation bar, a search area, and the login area.
  5. Decide how the wireframes will be used. You might start with very rough wireframes that are rendered as sketches and then create more detailed wireframes with annotation that will serve as product documentation.
  6. Choose a tool for creating the wireframe. The tools may change as the design evolves.
  7. Sketch out your wireframes by using a basic box to represent the screen and blocking out sections on the screen. #Place user interface controls in each box to show where they would go. Consider using Greeked text as a placeholder so that it is clear that the wireframe is not representing the final state of the design.

Materials Needed

  • A program that has basic layout capabilities, such as tables, text editing, and boxes.
  • A piece of paper to sketch layouts on.

Common Problems

  • The people who will be using the wireframes need to understand that they communicate basic structure and shouldn't be considered final as far as the visual design is concerned. They are not pixel perfect.

Next Steps

  • Wireframes can be used by developers to create screens or they can be refined into more detailed design comps before they go to development.

Facts

Lifecycle: 
See also: Information architecture, Interaction Design
© 2010 Usability Professionals Association