Exactly What are Wireframes?

Alice Toth, Thursday, August 13, 2009 @ 11:12 am

Wireframes are the bare-bones schematic of the presentation layer for an application or web site. They are the visual interpretation of the user and business needs for any given feature. At a basic level, they show the page layout and placement of various elements on the page. At a more detailed level, they identify user interactions and the expected behavior.

Why use them?

Wireframes are a great communication tool for all members of a project team. Instead of an abstract list of requirements or a verbal description of a concept, the visual nature of a wireframe allows everyone to see exactly what it is they’re discussing. They are usually black and white (sometimes with shades of gray) schematics because we want to get feedback on the page structure and behavior, not the visual design. However, wireframes created for mature applications can readily incorporate existing visual design since that language is already defined and shouldn’t divert focus from the reason we’re looking at wireframes.

Annotated Wireframe

Although a picture is worth a thousand words, adding annotations to a wireframe lets the viewer immediately know the expected user behavior of various elements on the page. While a more detailed explanation of the behavior is generally contained in the design specs, adding a shorter version here is extremely helpful.

Here's an example of what an annotated wireframe can look like:

Who uses them?

All team members. Because they are a visual artifact of what is proposed to be built, they are an easy and cost-effective way to get the stakeholders to sign-off on how their business requirements will be translated to software, before any code is written. They also give development a heads up on what the page will look like and how it’s expected to behave; which means they also let QA know what to expect once the feature is ready for testing.

While I sometimes have to educate clients new to software development on the benefits of wireframes, once they see them within the context of a project, they're sold on the benefits and understand their usefulness.

Related Services: User Experience Design, Custom Software Development

Related posts:

1. Wireframes: Much More Effective than Interpretive Dance
2. Developing Good Wireframes Ahead of Visual Design
3. Wireframes in Omnigraffle 5
4. Wireframing with incomplete requirements
5. Ajax and Design

Comments (2)

Software Development

Comments: 2 so far

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

1. 

   Hi Alice,

   I think you might love the ease of use my little tool http://www.Simulify.com/ provides in make & sharing interactive wireframes. You can annotate and gather feedback online.

   It can be a real help for software development company like yours.

   Comment by vikas, Friday, August 14, 2009 @ 1:15 am

2. 

   Alice,

   Not only have you given a great explanation of what wireframes are, but you have clearly explained why they are so important – to all team members and the client.

   It is not just another step in the development process, it is a solution to unnecessary rework at the end of a project. Clear requirements and team collaboration result in a better product with a better user experience.

   Thanks for the share!

   Andrea
   @ProtoShare

   Comment by Andrea, Tuesday, August 18, 2009 @ 10:13 am

Leave a comment