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.
Nice post
I’ve added you to my blogroll.
I hope you will do the same
Nice one Ms Toon!
Quote of the day “Powerpoint is fine. Word is useless.”
There seems to be a universal hatred for Visio, mainly due to it’s moronic cut and paste. Quite often you need to paste bits from one page into 35 other ones and viso doesn’t remember the placement when you ctrl-c ctrl-v. Everyone has the preferences, but with wire frames it’s whatever gets the job done. Axure is great, but it’s very hard to get an IA to use it if they don’t know it.
Nice post Toonie, I like to use Lovely Charts or Mind Meister for my sitemaps (depending on whether I’m doing a structured one or a free thinking one in a workshop).
And for wireframes I’ve been using iPlotz and Balsamiq, they’re really quick and easy once you setup a few master docs, plus you can share and collab on all these saas type tools.
Thats my 2 cents, YAY.
Hi Kate, great post on why and when to use wireframes to one’s advantage. As someone who used to be a project manager for a creative agency, I wish we had done more of this with our website projects.
“Visio or Axure often used by professionals but since most of your clients won’t have eitherr package, it can be a pain if they want to make simple tweaks.”
You’re right, Visio and Axure are both common tools to wireframe a website, but clients do not have access to them, unless you save a static PDF and email it to them. We have found that it is important to get client and stakeholder feedback during the wireframing stages to save headaches later on. ProtoShare allows designers and developers to build the wireframes and interactive prototypes in one location and also allows clients to leave comments in the wireframe so nothing gets lost. The product is accessed online so no one has to download software.
As a website professional, I’d be interested in gaining your feedback. Let me know if you’d like to sign up for a free 30-day trial. I look forward to more of your posts!
Thanks,
Andrea
ProtoShare
“Leave the design to the designers”
Dear god, if only everyone would follow this one simple bit of advice my life would be so much happier!
A small but capable tool that lets you quickly create user interface prototypes and wireframes is FlairBuilder.
It has a simple drag’n'drop interface with a bunch of customization options and all components in the palette are fully functional, that is you create real prototypes with FlairBuilder. It runs as an Adobe AIR app but also has an online demo.
Cheers,
Cristian
http://www.ronniesan.com/blog/entry.php?title=visio-wireframe-stencil
Nice stencil
Hi. did a google search and found this. thanks for the good info
Very good information, thank you very much by the article and the quality of your Web site.
When compiling our website brief the first point of best practice I sought was your website and it’s delivered. I will be talking spiders, webs and wireframes with confidence tomorrow. Thanks Toon
Do you recommend Omnigraffle?
Hi Phil
Yep it’s pretty good and obviously a good choice if you’re Mac based.
You can download a 14 day trial here:
http://www.omnigroup.com/products/omnigraffle/download/
The only issue I have with it is that most clients won’t have it.
I like to use Powerpoint, even though it’s a touch rubbish, just because then clients can add to/update wireframes. If they can amend then they seem to own them more. Which is helpful.
Hi Kate,
good article.
Regarding tools to make wireframe, you may try also Mockingbird: http://gomockingbird.com/
It’s online tool, but can export result to PDF, free so far.
Hi Alex
Thanks for this, I’ll check it out. Would be great to use something that doesn’t require software download.
Thanks for commenting.