An extremely important part of the web design process is wireframing. It involves taking all of the specs, notes, creative briefs, content and so on, and finally putting them into one complete picture. Over the years we've tried all kinds of different tools and techniques, but have more recently settled on a process that works great.

Every project I work on starts with a Sharpie and a piece of paper. It's cheap, low-tech and fast. In a couple of minutes I have some ideas on paper to work with. Once it's full, I start over and try to make a better one. Sometimes we'll go into the design process with 2-3 home page wireframe designs just to see what sticks.

Why a Sharpie (Fine Tip) and not a pen or pencil? They are less specific and they fill the page faster. Sharpie's force you to get creative with space and make room for only what is most important. It's not possible to get too wordy or carried away with a Sharpie.

Another benefit of paper wireframes is that there is no learning curve. Anyone can read or create a wireframe without having to learn anything new. When working with people of all different technical abilities, paper puts everyone on the same level and forces focus on the important stuff.

Here are a few examples from projects we have done:

Response TV Wireframe

Wireframe Example

Response TV Design

Wireframe Example

Rolling Hills Media Wireframe

Wireframe Example

Rolling Hills Media Design

Wireframe Example

Linkpatch Account Wireframe

Wireframe Example

Linkpatch Account Design

Wireframe Example

The Dot Grid Book

Dot grid book

I've done a lot of research trying to find the perfect wireframing sketchbook. Without a doubt it is the Dot Grid Book. This notebook is super-functional, well designed and great quality, making it an ideal geek tool. It's a pleasure to use.

This notebook is double spiral-bound with 80lb, perforated paper. It's easy to scan everything in when finished and keep it on my computer for further reference. It also handles the Sharpie marker bleed through to the other side of the paper pretty well.

Getting More Specific

Although we believe it's best to wait as long as possible to worry about specifics of a design, eventually it comes time to take wireframes further. I recommend a couple of tools for making pretty digital wireframes:

Further Reading