So, you’ve been commissioned to create XY’s new website, and you’ve stepped into the project. Your at the stage to begin mocking up your design, but don’t know where to start. Need a hand? Wire-frames could lead the way…

When you create a wire-frame, you’re restricting your mind to focusing on what truly matters – the websites content. That is, we’re taking away all the graphical elements and simply labelling them from number 1, upwards; we’re breaking the site down into key content areas, which allow us to move them about much easier than if you had already started on header graphics and such forth.

To demonstrate this the easiest way, we’re going to pretend that we are a designer currently working on Fisherman’s Delight website – Client A requires a website for his fishing committee to post news & updates of the goings on at his local club. After our discussions at several meetings, we’ve found what he needs to display on his home page, shown in the list below:

1. Site Name/Logo

2. Navigation Bar

3. Introduction to the website

4. Featured Article

5. A more detailed overview of Fisherman’s Delight

6. News Entries

7. Footer containing contact information

What we are going to do now is take each of these areas, and think of them as what they truly are - content blocks of information. Our own methods of wire-framing take either the course of pencil & pad or Photoshop - either is okay. We can now create as many wire-frames as we’d like, moving the content blocks position & also their sizes, to create different design layouts. Here are a couple mock-ups including how they affect the content to the user.

Notice how we’re not touching on any visual elements – simply the website’s content. This allows us to see & decide on a layout which will help Fisherman’s Delight reach their viewers in the way we wish for, not just simply look nice & fancy.

“Speed & Flexibility”

One of the great things about using the wire-frame technique is the speed & flexibility you’re offering yourself as a designer. You can quickly see how different layouts would turn out. It also removes any possible frustration you might create from having to spend the time creating a Photoshop design, only to realise half way through that it isn’t working.

“We can decide where to take our users, instead of simply hoping for the best”

Depending on the order & size of your content blocks, we effect how our users are going to read through or scan our website. Through different wire-frames we can anticipate how this would play out, and thus decide on a design which takes our users where we want them to, instead of simply hoping for the best from our Photoshop design.

The best part of wire-frames – and why we enjoy using them so much, is how once we choose on one or several to work with, we’ve still got the entire design elements to look into: colour schemes, fonts, the lot! But the fact is now we’re already travelling in a direction that is going to work for our website - a layout we’ve tied down to build upon.

From here we can try out many different colours, fonts & design elements, knowing that whichever combination we end up with, our users are going to be able to view and discover our content the way we truly intended.

At the same time, we can easily step it back, and review our wire-frames if we feel something is missing or needs to be added. We know it takes little time to draw out some more :)

Summary

So to wrap up, we think wire-frames are awesome! They allow you the ease of trying out various designs, incrementally changing them and deciding which works in a super-fast environment that is both productive & enjoyable.

Although our example of Fisherman’s Delight is a relativity small & simple website, the use of wire-frames can be seen greater on a larger, wide-spread website (check out Jesse’s article in our further reading). We encourage you to try out wire-frames on your next project, whether personal or commercial – and see where it can take you.

Further Reading

Like what you’ve read so far? Well the story thickens… Check out these two links to find some other articles related to wire-framing.

• Case study: Redesigning the expression engine site
  Jesse Bennett-Chamberlain wrote a great article back in March of last year detailing his experience & journey on the redesign of ExpressionEngine. In the article, Jesse mentions how wire-frames helped him progress his redesign and how they can help the client also.
• Five More Principles Of Effective Web Design
  This article over at Smashing Magazine contains a technique of using an effective marketing principle, which clearly goes hand in hand with the wire-framing technique!