Wireframes – The blueprint of good web design

It is important before any website development or design begins, that wireframes are drawn up. Think first, then code. This is considered as best practice for designing websites. After the wireframes are finished and signed off, then designs and backend functionality are added.

What are wireframes?

So to my non-technical audience, I’m sure you are thinking, “what is a wireframe?”. My definition is that it is the layout of the fundamental elements of the website. It is the visual representation without the graphics.

Think about a new property development. You wouldn’t just build straight away. You would consult an architect, draw up a blueprint, thinking about the structure and where to put certain things like walls, windows, etc… I consider a wireframe as something similar. It is the skeleton of the website. Wireframes are also used for product design (i.e. real world products).

In an optimal process, we would produce one wireframe for each template. Some people like to also produce wireframes to show interactions on the page as well.

The developer will typically work off this “blueprint” along with documentation known as a functional specification (func spec). The func spec will describe in detail how the functions work on every page of the wireframe. E.g. How the interaction of a button on the website works.

Learning by doing

I’ve usually been involved with high level reviews of wireframes for websites in my role as an account manager. I believe that to be able to review wireframes properly and design a website, you need to have the skillset of being able to build a wireframe and understand what is good wireframing.

So I have decided to learn how to wireframe and to seek to learn what is good wireframing, interaction design, and user experience.

As someone that is non-technical (not a developer, designer or BA), I believe that the best way for me to learn is by doing.

Why you should wireframe

Here are the key reasons that you should start with wireframes:

  • It saves time and money. As it is less costly to update a wireframe than a design
  • Fairly easy to build a wireframe. There is software out there where you can easily drag in shapes, move boxes and fields around, add icons for function, construct a simple form, etc..
  • As it is the bare bones, people don’t get caught up in things like “this is the wrong colour”, which can easily be added later.
  • Can use this to build a clickable prototype to test.

Wireframing Software

At the most basic level, you could start by sketching it on a blank piece of paper or a whiteboard. It is about visualising the layout and the interaction. I would start with this (and I love sketching my ideas). I need to draw and it helps communicate my ideas.

There is also a lot of software products out there that you can use. Options include:

We use Visio at work and I’ve had a quick look at the other tools on this list. I’ve decided to try Omnigraffle, using the 14 day trial for the standard version. It looked fairly easy to use and had a large 3rd party community called Graffletopia which provides stencils. The stencils are wireframes you can build on top of.

As I’m interested in mobile and tablet apps, I downloaded a bunch of stencils for iPhone and iPad. It includes the Apple hardware elements, outline of the devices, keyboard, the UI (user interface), buttons. The examples I found look like this:

If you have any thoughts about wireframing, tips or good resources I should check out, please put them in the comments section.

I’m like sketching on paper,

Matt Ho.

5 thoughts on “Wireframes – The blueprint of good web design

  1. To be honest I find all of those tools a little “corporate”. I think there are much more lightweight ways to get your wireframes together and with added functionality.

    I’ve used Omnigraffle for a while but found that it wasn’t an easy to use interface. Then I started using Balsamiq which is not only super easy to use but it lets you create clickable prototypes so that you can start user testing before you leave the wireframe stage.

    My most recent app was designed using Keynote Kung Fu and Keynote. Super easy to use to create something a little more visual than a wireframe – sometimes you need that if you’re selling in an idea before the tech has been fully built out.

    Ned

  2. thanks for the tip! I’ve seen Balsamiq as well. There was just so many options out there.

    I agree with you that its not that easy to use straight away. I had to watch a few tutorial videos as it was a lil imposing. I will give Kungfu and Keynote a go.

    I wanted to mention Steve Blank’s Customer Development theory as well – market validation and testing before even wireframing, but that is for another post!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.