Web-design wireframes: Use your imagination and these key rules

Summary:Web-design wireframes should be wireframes — a way of presenting ideas quickly, not a blueprint or the finished article.

My latest job is at a start-up, translating PowerPoint wireframes into a visual design and thence to create an HTML prototype.

It has been tough, not only because my pixel-pushing powers are a tad rusty, but also because the primary stakeholder has been immensely busy and consequently often unavailable.

Wireframes, visuals and prototypes are only tools for the job, the actual process demands the involvement of the interested parties.

I read Eric Ries' book The Lean Startup on product design, and I was mightily impressed. Build > Test > Feedback > Refine. All in the smallest iterations possible. Not Sit on a pile of bitmaps for a couple of weeks waiting for sign-off > Build > Oops, they don't like it > Start again.

It is tricky though, as Ries rightly points out, there's an awful lot of other stuff to be thinking about. Which is why creating a lean process is so important, so that you can focus on what is important at that time.

So many ideas can be knocked on the head at the wireframe stage. This is the essence of wireframes: sketch it out, hoist it up and see if it flies. If it gets shot down in flames, no worries, it took relatively little time to build.

The problem is when ideas get polished, when people see the wireframe and say, "Shouldn't that button be in the corporate green?" Rather than looking at the idea and thinking about it. Which is why, the Guild of International Wireframers* has decreed a few things:

  • Comic Sans must be the default font for all wireframes.
  • The element set must be sketchy, if not indeed hand-drawn.
  • No colour allowed unless it's red, magenta or yellow.
  • You are not allowed to spend more than five minutes on any screen.

* Such a guild only exists, alas, in a demonstrative capacity

Evolus Pencil admirably demonstrating the principles of wireframing.

On a related note, Evolus' Pencil is Free Software for wireframing, and is now at version 2. It is fairly rudimentary though much improved, and definitely worth a look if you can't bear the horror that is PowerPoint or if you want to shell out $300-plus for Axure.

As Sergio Nouvel implores, please ditch traditional wireframes, and let's make them look a bit more wirey and framey, with less of the bells and whistles.

Topics: Software Development


A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text. As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, an... Full Bio

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Related Stories

The best of ZDNet, delivered

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
Subscription failed.