Friday, December 01, 2006

Wireframes & Gorillas

At the beginning of a new website project, I like to build a "wireframe site". Often clients misunderstand the intent of the wireframe and want to jump right into what it looks like instead of how it's put together. Recently I sent this explanation of the wireframe concept to a client, and it appears to have done the trick.
A wireframe is like a woman's skeleton--it shows how the parts will fit together, but tells you very little about how pretty she is. We want to check the wireframe carefully to make sure we haven't given her a gorilla skeleton by mistake, before we get distracted by thinking about what color dress she should wear. Colors, shapes, fonts, images etc. are all to be ignored at this stage.

Once approved, the wireframe will serve as the functional template we'll use to clearly communicate what's to be done to designers and coders. We can show them how each page type needs to work without building out every single page.
Wireframes are a critical tool to help site owners to focus on structure, navigation and flow without being distracted by colors and images. They save a lot of expensive re-work later in the design & development process. Why do this? Here's what Richard Saul Wurman said in "Information Anxiety 2":
There are two parts to solving any problem: What you want to accomplish, and how you want to do it. Even the most creative people attack issues by leaping over what they want to do and going on to how they will do it. There are many "hows" but only one "what".... You must always ask the question, "What is?" before you ask the question, "How to?"

No comments: