Working with Grey Box Wireframes
Have you ever worked using a grey box wireframe methodology? The wireframes, rather than displaying a lot of the detail, simply denote areas as grey boxes that allocate layout space and proportion. For example, header and navigation and top level branding, call to action, syndication and footer. These wireframes are simpler, cheaper to produce (and therefore scrap), and don’t constrain you as much when you go to do the actual design work.
When I pull out my wireframes it can sometimes feel a little intimidating. Hardly anyone works this way, and definately not at the corporate end of town. Horror story: a local government department has paid AUD$30,000 for their detailed wireframes and the work is still in progress. It’s not even a large site – five or six wireframes. At that point we have to admit that a detailed wireframe has lost the plot. True story. Taxpayer dollars. Everyone involved can justify the expense. Something is wrong and nobody is addressing it.
As it turns out in May, 2004 Jason Santa Maria wrote an article titiled Grey Box Methodology. Andy Clarke mentions the article in his book Transcending CSS: the fine art of web design. And when you trace the geneology of my grey box wireframing process it points directly back at that original article. My wireframes look more like the grey box wireframe from Jason’s original article (image re-used here with Jason Santa Maria’s permission).
I’m not a big fan of the more common highly detailed wireframes and never have been. My main beef is that clients and stakeholders who aren’t skilled or trained in this area can arbitrarily govern the push and pull of elements beyond simple layout constructs. They influence fonts, small detail in the design elements themselves, image sizes – the visual designer’s role is diminished.
Had the government department in that ongoing horror story used the grey box methodology they would probably have a website now. A website at far cheaper cost than the wireframe they currently own!
A maxim worth remembering is the more people involved in a design decision, the simpler you need to make the artifact that they’re deciding about (to get consensus). Agree with that or disagree, but it’s a pattern that seems to fit. Humans add complexity, the more so if they’re out of their depth or ill-educated to make the decision wisely.
Next time you get a chance push one of these simpler diagrams onto the table and see how you go. It’s like learning to run, literally. Give it a try. Don’t let your wireframes become a political chess game where everyone gets to piss on a post.
