UX Magazine posted a short note about Web Without Words, a site that strips down popular websites like Yahoo.com and CNN.com to its wireframes. Everyone in the IxD community knows what wireframes are used for, and this approach is sort of the reverse-engineering attempt of that.
My question is – does anyone really rely on wireframing to determine the quality of information architecture? When I compare CNN and its wireframe, I get the sense that typography makes a lot of difference here, as well as text colour.
While wireframes are useful in providing structure to an initial layout, but is hardly ever used again to evaluate the quality/usefulness of a site unless there’s something really wrong with it.
In terms of human perception, color tends to dominate shape. And in this case, I feel that wireframes should only be represented in grayscale instead of having multiple colors to influence a design decision.
Take for example the following experiment, which I grabbed from this site:
The “Stroop Test” is a good example of how color dominates shape. The test works by taking a color term, such as “Blue,” and showing it printed in either blue or red ink:
Blue BlueWhen asked to read the word, people take longer to read the word “Blue” in red ink than in blue ink. Color perception is fast and automatic.
This is a good example of how color can greatly influence a decision, and while wireframing seeks to inform how users evaluate priorities of information according to shape, the dominant influencer here is not shape but color.
Hence, I feel that you can probably treat wireframes in various levels:
1. layout areas
Have separate containers marked completely in grayscale, with specific parts in color if they are indeed going to be in that color (for the purpose of prioritizing that area).
2. layout areas with blocked out text
Blocked out text should be indicated with its intended colors, to communicate how specific colors are used for communication (blue for links? red for errors?).
3. layout areas with subtle design trims (with or without text)
This is based on another human perception observation that shape dominates texture. Design cues such as color gradients, drop shadows, tiled backgrounds, and the like – can be present in a wireframe to observe the balance of shape vs color vs texture.
Obviously you don’t want to overdo this. The whole purpose of color vs shape and shape vs texture is to use it as a design tool to help users navigate your content or to communicate your content effectively.
Design is a holistic process. Which is why I feel sometimes a part of it gets a lot of attention while others doesn’t. But that’s what design is all about – making something clear, specific, focussed, articulate. In this sense, it’s hard to realize that design elements that are unpronounced in a particular subject could be there for a very good reason.