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:
- Microsoft Visio
- Omnigraffle
- Axure
- Protoshare
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.