Wireframes: Much More Effective than Interpretive Dance

Alice Toth, Wednesday, May 23, 2007 @ 11:54 am

Wireframes are a valuable tool in designing a site or application. They enable us to communicate both the layout and page content to fellow team members and business stakeholders and get their signoff. They’re essential because they force viewers to focus on the content, not the visual design, which means preliminary design meetings won’t get sidetracked into discussions on colors and fonts.

Basically, wireframes are a sketch of the business and user requirements. Since they are a drawing, they allow us to demonstrate how these requirements, nicely bulleted in a list format, are translated to a visual medium. In addition to showing that the requirements are met, wireframes can generate discussions uncovering what may have been overlooked. As the project progresses, we use them to begin explorations on how the user will interact with the screens and which data is affected.

Depending on the project, wireframes can start out at a very abstract
view of the screen, blocking out areas of the screen for different
types of information, e.g., header here, footer there, etc.. Iterating
into a lower-fidelity wireframe begins to introduce data elements into
the designated layout areas. I like to have this level of wireframes
sketched out in black and white because it allows the preliminary
discussions to focus on layout and data elements without getting
sidetracked into fonts and colors. Eventually, wireframes evolve into a
higher fidelity view from which the visual designers and web developers
derive their final designs and QA writes their test scripts.

As to how many wireframes you should produce, the short answer is: it
depends (which, as any IA knows, is our stock answer for everything). I recommend wireframing all the unique screens in the
project. Unique screens can be identified as any page that requires
client approval and/or requires a distinct layout and functionality;
for example, a search results page is distinctly different in layout,
content and functionality from a text-only page or a search page or a
home page. And, as I recently redesigned a site with many dead links,
it’s always a good idea to wireframe a well-thought out 404 Error page. Exploring these unique screens through wireframes allows you to nail the requirements, layout and user interactions plus uncover any potential problems before development begins.

user experience design

Comments: 3 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   There’s a good wireframe example at 31three:

   http://www.31three.com/projects/epc

   Comment by Brett Munro, Sunday, June 10, 2007 @ 7:47 am

2. 

   Interesting mix of design and wireframes.

   Comment by Alice Toth, Monday, June 11, 2007 @ 10:57 pm

3. 

   [...] Alice’s post about wireframes, and Noel’s post about how you can allow a designer to write the HTML within a [...]

   Pingback by Pathfinder Development » What makes a good requirement document for an agile project, Thursday, November 6, 2008 @ 12:26 pm

Leave a comment