In my humble opinion, after a decent sitemap, the most important document when building a website is a wireframe (even more important I’d argue than the budget or the time line).
Why build wireframes?
Wireframes help you work out all those niggly bits that you’re just not sure about. They help you decide just how much content you can squeeze on the page and most importantly they save you time and money.
Wireframes help clients, copywriters and designers (and perhaps even you) understand how the site or email will eventually function. You can write a 60 page scope document but a wireframe sums it all up in a snap.
Your copywriter will know that they can’t go crazy with long navigation names or big chunks of copy. Your designer has a checklist for each element they must include in the design. This saves endless revisions to copy decks and PSDs. Sometimes, especially for forms, the wireframe negates the need for a design at all (much to your designers delight!)
When should I create my wireframes?
The short answer is as soon as possible. Generally I sketch a wireframe in the first client meeting. A quick drawing and a few questions can really ensure you understand each other. The wireframe should be created before the copy, design and obviously code. There is some debate about whether wireframes should be done before concept (often creatives feel it is more of a hindrance than a help at this stage) but I’d still do one anyway, just for your own peace of mind.
Which software should I use?
You can use any package you like to do a wireframe. Visio or Axure are often used by professionals but since most of your clients won’t have either package, it can be a pain if they want to make simple tweaks. Powerpoint is fine. Word is useless.
An example of an early wireframe from Special K site
How do I build a wifeframe?
- Left to right, top to bottom: Unless you’re reading Arabic or Chinese, most folk read left to right and top to bottom, so arrange your content with this in mind. Place the most important stuff at the top left (like your logo) and the least important stuff (like a link to the privacy policy) at the bottom.
- Structure not design: Don’t let your secret lust to be a creative get in the way of your wireframe. A simple grid will suffice. (Please no clip art, eave the design to the designers.)
- Multiple ways to reach content: Ensure you have a few options to get to deeper pages: don’t rely on the navigation (or god forbid the browser back button): consider a bread crumb trail for larger sites, and include image and textual links and a search box if appropriate.
- Resolution: Think about the ‘fold’ (where the browser ends). Put all your important bits above it and ideally try not to have a scroll on the home page.
- Be single-minded: Keep chanting in your head, “What is the one thing I want them to do on this page?” If you want them to sign up then have a nice big ‘sign up’ element somewhere prominent; if it’s to ring you, don’t hide the phone number on page 26.
- Sub pages: Generally the layout for the home page won’t work for the sub pages, so don’t be lazy – do another wireframe. Most decent sites end up with around 10 different wireframes to accommodate all the different page types. forms, confirmations, editorial pages, gallery pages and so on
There are of course several more golden rules but I don’t want to give away all my trade secrets. Contact me if you’d like to know more and feel free to comment below.
