The what, when and why of wireframes

wireframe_icon.psd

I recently presented at a conference on the humble wireframe and thought it would be a good idea to run through some key points. I have also noted that some feel the wireframe is dead, though if anything its more alive now than ever. Pay heed to 37 signal’s take on the subject…

If a wireframe document is destined to stop and never directly become the actual design, don’t bother doing it. If the wireframe starts as a wireframe and then morphs into the actual design, go for it.

In the presentation I attempted to answer these questions;

Wireframes

• What are they?

• Why do we use them?

• When should they be used?

• What are the different types?

• How are they used in a project life cycle?

• Why are they important?

What are they?

pixelwireframe They are a visual representation of the content of a web page that is the culmination of user research, business objectives and content.Best brought together in a sequence of pages to illustrate paths of navigation and interactions on the page.

They are working documents that are not finished designs but are likely to change as the design process progresses and functional requirements are clarified.

They are NOT…

• Meant for an external audience without an explanation of context

• Meant to be the design of a page

• To portray any graphic elements

• To convey the brand of a website

Why do we use them?

To help gain understanding
They ensure the business understands that the interface is where the user interacts with their products, where engagement begins and conversations start.

To help project workflow

They allow us to focus on the functionality of a site. They are a fast and cheap way to produce an idea of how a page on a site may work. They can be developed in parallel to creative concepts, and redrawn easily.

255444239_3ba65a26ed
To help stakeholders
They promote debate and conversation around important elements of a site. They are a focal point for collaboration between stakeholders in a team.To help designers and developers
They allow development teams to start developing functional aspects highlighted in the wireframe templates before visual design begins. They render the structure of the site from a concept into a skeleton of the final design, ready for the surface design
image

When should they be used?

Jesse James Garrett very neatly summarised the five phases of website development in this model and you can read more about it here. His concise and accurate analysis of the project development phases is seen in the excellent book – The Elements of User Experience.

image In short, wireframes are the skeleton of a site and precede the surface design and come after the structure. However in the agile process of development a more layered approach enables developers and designers working simultaneously. Wireframes are evolving documents of discussion and this should always be remembered

.

What are the different types?

Hand drawn sketches

Are a very quick and fast way to convey a layout to others that can be changed rapidly. They are the best precursor to computer aided drawing and their low-fidelity format encourages experimentation and honest critique.

Collaborative sketches

The only real difference here is that a team produces the wireframes together. It helps the group to discuss reasoning behind solutions and iteratively sketch solutions. Several solutions helps the team explore different approaches and it provides a framework for participants to articulate their ideas.

0041_005
Annotated wireframes
They are produced to describe the functional elements to development teams. Elements are explained in small paragraphs alongside the diagram and this enables the wireframe to be understood without verbal explanation. They are valuable tools to clarify function and focus on a page.
annotate
High fidelity wireframes
Mainly produced to canvas opinion from users in interviews about a layout or concept. They should always require a usability expert to explain the context and purpose of the diagram. It really is the nearest step before presenting the surface design of the solution. The line between wireframe and functional prototype is a thin one here, it may be better using resources on a working prototype.
hifiwf

How are they used in a project life cycle?

widgetwire1 Even in the Web 2.0 world of development with AJAX interfaces the wireframe has a place. It may struggle to show all interactive elements (though the Yahoo pattern library’s use of wireframe diagrams negates this somewhat) but it still gives a document that can digested by large specialised project teams.

The wireframe can evolve into HTML or Flash prototypes and is a tool that encourages collaboration – this is its most important strength.

The diagram below highlights a typical journey of a wireframe through a product development cycle. It is an iterative cycle and one that moves at different rates to other tasks in the work flow of a team.

wireframe_collaboration

Why are they so important?

• They ensure accurate planning for functional specifications

• They ensure all project team members are well briefed

• They enable developers to start work on new functionality before the visual design begins, helping to minimise development costs

• They track changes in the design process as decisions are made to the interface, this minimizes project creep

In summary, they are critical to the success of a design. If anybody claims not to use them you should be wary of the methods they employ. A wireframe is the compass that will keep a project on course, and a journey without a map is a hazardous one.


Tags: , , , ,

Comments are closed.