The skeleton in the website: wireframes get an airing

Posted by Lesley Hays

What are wireframes and why does my project need them?

If you’ve ever done a website project with us, you’ll know all about wireframes! They’re the black & white skeletons of a website that show where all the content and features will go before we delve into colours and images. They help us make decisions about functionality and positioning without getting caught up in how dark that gradient is or whether red is the right colour for this button.

We also use them to finalise how much copy is required, what areas of a page are featured, how many images we’ll need and whether they should be landscape or portrait, for starters! This can be very helpful for our clients to start organising content and photography without having to wait for a final design.

Let’s see ’em!

To see some examples, check out “Wireframe Showcase“, which has the interesting task of comparing completed websites with their wireframes.

It’s really interesting to see the similarities and differences between wireframes and resultant designs, and also to see how different people create wireframes. Some are full of detail, others are simple; some use clean lines and text, others go for a ‘hand drawn’ aesthetic.

How do you make them?

There’s a lot more to making a good wireframe than having the right tool – user interface design knowledge, a thorough understanding of the project requirements and lots of experience helps, too! Having said that, the tools can be fun, so let’s talk about them…

Wireframe Showcase is supported by a popular wireframing tool, Balsamiq, but the examples (like real life) seem to use a variety of tools. Wireframing doesn’t have to be (and shouldn’t, at the beginning) a pretty, technical endeavour. Sketches are the best way to start and some people don’t need anything else.

For those who like pretty mock up tool, there are lots to choose from! We’ve tried Axure, FlairBuilder and Mockingbird. I know other popular ones also include Balsamiq, Hot Gloo, Omnigraffle and MockFlow.

What’s your favourite wireframing tool you think we should try out?