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

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.

Topic: Software Development

Jake Rayson

About Jake Rayson

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, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

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


Log in or register to join the discussion
  • Nice article

    Please, more like this.
    none none
  • Website design packages

    New Web-design wireframes should be wireframes — a way of presenting ideas
    quickly, not a blueprint or the finished article.
    Diesly Franklin
  • Website Designing Company in Delhi, Website Company in Delhi

    nice imagination key
    We are a website designing company in Delhi. We offer Website Designing and Development and SEO services work in very affordable prices. We have been working eight many years.