I’m trying something new on a current project. On past projects, when I was in the thick of the design process, typically I would generate a batch of thumbnail sketches and distill them down to 1-3 refined ideas. Then I would open up Photoshop and create a full-color screenshot for each of the ideas. These screenshots would represent what the site could look like when finished. After obtaining client sign-off I would start coding the templates.

For a current project I decided to try something new. I added a extra step between the sketches and screenshots: wireframes. Wireframes are nothing new in the web design industry, I just never bothered with them. The following wireframe is a genericized version of one I created for that current project. All of the element names have been changed to protect the innocent: me. Often wireframes consist of only line work, but I decided to use different shades of gray for the various block elements. I took it a step further and presented the client with multiple versions with different values of gray in different areas so we could start to get a feel for how the color scheme values should be arranged.

Without the distractions of color, fonts, logos or photographic imagery, it’s easier to concentrate on the layout, flow, information architecture, etc. I can also “see” how the code and markup will be structured and can anticipate problems. This is a great foundation for the rest of the design. In many ways everything else is merely “decorating.” I think the wireframes also help the client visualize the layout of the site. All too often have I been showing a client a screenshot and rather than debate liquid vs. fixed layouts or two vs. three columns, they get distracted by the fact that the color printer didn’t perfectly match their corporate colors.

I’m really sold on this technique and will use it as a regular part of the Solution phase in the future. Here are a couple interesting articles about using wireframes:

• Good Web Design is Not Guesswork
• HTML Wireframes and Prototypes: All Gain and No Pain
• Tangentially related: Page Description Diagrams