The art and importance of good wireframes

In his book, Communicating Design, Dan Brown defines wireframes as:

“A simplified view of what content will appear on each screen of the final product, usually devoid of color, typographical styles, and images…”

Wireframes can technically be generated by just about anybody. However it is painfully apparent when someone with little or no experience takes it upon themselves to do so. The classic example is when a client has some ideas they think are great and feels the need to express them. More often than not those ideas could be communicated through words via email or on the phone and it would be best to avoid wireframing on their part. A person without the training and skills required for effective wireframing is liable to produce incomplete or inaccurate documents that can harm the overall process if not fixed later by someone who is more experienced. Sometimes wireframe documents can look quite simple, but that does not mean that their purpose or the information they contain should be taken lightly. The information found (or not found) within has profound implications. Inappropriate page elements documented at early steps can produce results which reverberate throughout a project all the way through to launch.

Wireframes exist, in part, to communicate the various ideas that will make up the page. But they also are tasked with communicating the intended user’s experience (UX). The UX is like a big collective idea made up of all the individual ideas. Whenever the individual ideas are manipulated, the collective idea is affected. While it is desirable for many individuals to contribute to the individual ideas, it takes a trained professional to shape them all into the big idea. A project is delicate early on and I think there should generally be a single Information Architect (IA) to produce wireframes and their subsequent iterations to preserve the integrity of the UX.  The advantage of having a single purveyor of wireframes is that good information tends to get discovered and refined, while bad information is removed more efficiently. If the project is large enough to have additional IAs or the client insists on being directly involved then some standards should be put in place to avoid miscommunication and extra work. It may be a good idea to create a framework template as well as a basic elements library for all parties to share.

Good wireframes should embody an organized aesthetic, which is visually pleasing, yet neutral in emotional expression. This will help to communicate what is truly important: the ideas. Although wireframes are basic it still takes many years for an IA to develop their style. There is a methodology to creating these documents we all develop over time and seldom do we ever do it the same way as our peers. I would be interested to hear about instances from other UX designers who are responsible for producing wireframes  and hear weather or not they prefer to work solo or collaborate with their co-workers to produce final deliverables. Additionally, I would like to hear how other UXers feel about clients being involved as co-creators of wireframes speciffically. Perhaps some organizations have a sophisticated system in place which allows for and encourages this. To date, I have yet to see an organization with such a structure. Much of this article is based on opinions I’ve gathered from my personal experiences and those of my close pewers. Every designer and organization however is going to use a slightly different approach. I hope that there are others out there that can shed light on this topic for everyone to consider as well.

Some examples of  good wireframes with varying styles:

sample wireframe 1

Sample wireframe 2

 sample wireframe 3

Last 5 posts by tyler

This entry was posted on Saturday, January 30th, 2010 at 5:08 pm and is filed under Tutorials, Usability.. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “The art and importance of good wireframes”

  1. Maybelle Corlee  February 28th, 2010

    Thanx thanx thanx

Leave a Reply