Topic: documentation

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

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Design Documentation

Alice Toth, Thursday, July 30, 2009 @ 5:31 am

photo credit: theD40kid

A few years ago, I worked on a team that was trying to move the business side away from the waterfall method into more of an agile approach so there wouldn’t be such a disconnect between design and development. Since there was no blueprint on how design could be done in an agile fashion, resistance was very high. One of the major sticking points, however, was in documenting requirements. The business side controlled the process which meant no one could see or review the requirements until they were released by the analyst. In a world view of us vs. them, collaboration was not very high on their list.

Collaboration, however, is high on the list for agile development. So, how to resolve this conundrum and begin to merge the two teams. Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

User Experience Design