Why wireframe

By Micah Slavens on June 29, 2011

One of the hurdles we face in the web industry is communicating about the process for the work we do. To be honest the ‘speak’ isn’t overly natural or intuitive at first.

What the heck is a Wireframe? – we often hear from people that they don’t know what a wireframe is or what they are supposed to learn from looking at one (which is understandable). So lets take a few minutes to talk about wireframing – hopefully to clarify for some what it’s function and value is.

A wireframe is design, but it’s not THE design.

Before thinking about visual aesthetics (colours, images, fonts etc.) it’s important to think about the functionality for a website. Some call this focus User Experience (UX). If you haven’t heard this term, UX considers how a user is going to interact with a site.

A wireframe should account for some fairly major aspects of a website:

  • Content Priority – What are the main messages and media a website is trying to communicate?
  • User Flow – Can a user easily understand what they need to do to complete certain tasks?
  • Layout – Will a user understand what they are looking at?

These questions should be answered early in the the design of a project to work out any major kinks.

Lots of times we’ll jump right into a prototype of website (which is kind of like a clickable wireframe) so that we can actually test our layout and structure ideas with real interactions. A prototype also has the benefit allow us to iterate quickly on ideas early in the project where changes in direction aren’t so costly.

So what does it look like?

Wireframes can be anything from quick pencil sketches to polished illustrated documents and can communicate high level concepts or very minute details. Whatever the fidelity, the important thing to remember is the value of the wireframe isn’t the look, but rather it’s the ideas that are communicated.

The other thing to note about wireframes is that it isn’t THE big ‘D’ Design.

We use wireframes to discuss content and ideas so that when it comes to creating visual design we have already tackled major functional issue and can focus on the look and feel of the site.

Of course there is a lot more that could be said about the different aspects of wireframing. We’d be happy to chat more with you about it if you’d like to dig deeper.

Micah Slavens

Principal

Want to grow with digital?