The Zen of Wireframes

Last year we hired Trevor Van Gorp, a graphic/industrial designer and some-time actor, as a user experience consultant. Trevor's a great guy--he brings many valuable skills to the company and has been a big asset to us. One thing he had to learn his first week on the job was creating wireframes. Or rather, he had to unlearn some his graphic design training to produce the kind of wireframes I wanted.

In our practice, wireframes are the bridge between rough sketches and simple prototypes. They evolve toward paper prototypes for usability testing, to comps that show final visual design, and to wireflows that act as a design and interaction spec. So it's important for our wireframes to have enough fidelity to act as good paper prototypes, but not so much that they prevent iteration and exploration as they move toward comps and wireflows.

Like a lot of graphic designers, Trevor's is really good at arranging details like a color and type to create a pleasing affect. Which is great... but it's not wireframes. As those details creep into wireframes they make iteration harder and paper prototypes more expensive.

To make sure our wireframes landed in that sweet spot I introduced the Zen of Wireframes approach. It's a pretty good guideline for getting the right details in wireframes and deferring the design-oriented details until later (or to other deliverables, like moodboards).

The Zen of Wireframes approach is simple: you go for maximum simplicity by using only one shape, one font and one colour.

One Shape

The Zen of Wireframes says that you can only use one shape, a rectangle. You can use it in all its permutations--oblong, square, line--but it must remain pure. Rounded corners, for example, are out.

One Font

Arial. The Zen of Wireframes says that only one font can be used in a wireframe, and it will be Arial. You can adjust type size and weight, and add underlines to indicate links. But you can't dig into your type library while thinking "Frutiger 65 would work really well here..."

One Colour

Forget fades and gradients and colour palettes for now. In the zen approach you only use one colour, and it's black. Don't think about screens or grayscale, either. (You'll know you've achieved wireframe enlightenment when you ask youself "am I adding black or just removing white?")

And if all this seems excessively constrained... I say constraints are good [1]. The best thing about the Zen approach is that it forces you to start simply, and move toward complexity.

[1] The Zen of Wireframes was inspired, in part, by a documentary I watched on the American painter Chuck Close. Close developed his own distinctive style by relentless introduction of constraints--he would only use black paint on a white canvas, he would never underpaint, he would never remove paint from the canvas, and he would never overpaint. Those constraints helped him move away from abstract expressionism--he called himself a Kandinsky clone--to the portraits he's known for today.