The art and importance of good wireframes

January 30th, 2010   Posted by Ted in Usability

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 buy personal narrative essay 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 buy cialis online 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

Format
Font family

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:
Path:

zp8497586rq

Last 5 posts by Ted

3 Responses to “The art and importance of good wireframes”

  1. Maybelle Corlee  February 28th, 2010

    Thanx thanx thanx

  2. mukta  April 20th, 2010

    nice thoughts on wireframing……few examples which i can save or dload will help me great deal…..if u can help on this …pls do

  3. Terry Brustkern  October 15th, 2012

    This blog was… how do you say it? Relevant!! Finally I’ve found something which helped me. Many thanks!