A website site map drawn on paperYour Website: Make a Site Plan

Your planning sheet now represents all the key elements for your website. The next step is to interpret it and turn it into a paper version of your site.


Making a paper version of every page on your site saves you time and money. You've got to put together the text and images for the real site anyway, and it's much cheaper to make mistakes on paper than it is to pay a designer to get it wrong! Don't worry about making your site look pretty - that's your designer's job - but do worry about making it clear, easy to understand and well laid out.


You'll need time, your filled-in planning sheet, and lots of paper, pencils, eraser and pens (preferably different colours), because you'll literally be 'sketching' your pages.


Clarity starts at home

Planning starts with your home page. Because a visitor to your site should be able to instantly access any information they want from this first page, once you've designed the home page you'll have a structure, all the elements of your site and a plan for making the other pages.


Remember that any good advertisement should Display (attractively lay out your wares) as well as Reassure, Motivate and Capture. For now, just concentrate on Display. You want the best possible presentation: it's hard enough getting visitors to your site, once they are there you want them to be able to instantly see what you have to offer. Research shows you've got approximately 15 - 30 seconds to capture your visitor's attention. You need a clear layout, instantly understood menus and an uncluttered design so they can see straight away what you have to offer.


Start with a really simple structure:

  • get a blank piece of paper and turn it to landscape
  • put a long rectangle across the top (your top banner)
  • put another one down the left-hand side (your menu)

It looks like this:

Simple web page structure

This is a very straightforward layout, you can always change it later if you wish. Browse the internet and look at lots of different sites. What are their layouts? Do they work?

 

Tip: Whatever layout and structure you pick, keep it simple. Flashy, unusual layouts used to be favoured when the internet first became popular, as businesses strove to distinguish themselves from their competitors. These quickly died away as businesses realised that users don't have the patience or attention span to work their way around complicated, gimmicky sites, and that it isn't your website that distinguishes you from your competitors, it's your offering.


Nevertheless, people will judge you on the quality of your site, and treat it as an indication of the quality of your business. They'll look for:

  • clarity
  • immediacy of the information
  • ease of navigation
  • attractiveness - especially how well aligned everything is, good use of white space so everything is evenly spaced out, good use of colours, great photos, professionally designed logo etc

Home page layout plan

 

Top banner

The top banner is your 'identifier'. It instantly tells your site visitor who you are. If you have a logo, company colours or style, use them here because this is how you 'brand' your site - make it recognisable as you.


However, this banner is on every single page of your site, and is far too prime property to just carry your colours and logo. Put on it the information that every customer wants to know about every business: About Us, How to Find Us, Prices and Booking, Opening Times and any other 'generic' menu options (ones you get on all sites) like Useful Links.

Plan for top banner of a website

Above all put your address, phone number and email on the banner. Why hide these under a button? Whatever page your customer is on when they decide they really want to contact you, they should be able to just glance at the top, pick up the phone and go - not have to click to another page, where they lose the thread of what they were looking at.


You don't have to present your top banner exactly like this, but these are the main elements you want on it. The other advantage of taking this tack is that users have got used to items like these on the top bar - they take them in at a glance and don't waste any of the precious 15 - 30 seconds getting to grips with what's up there. Browse the internet and see what other people are using their top banners for.


Menus

Menus are arguably the single most important feature of your website: they are how customers get into the information you're presenting.


With your top banner carrying your generic menu options, your main menu is the bit that really gets customers into your business and what you offer.


Get your planning sheet. The entries under "What we do" and "Our assets" are the critical bits of information you want to present about your business: your products/services and your key selling points. These, with a bit of organising, should become your main menu.


Rather than having a menu option for every single thing you do, try to put your products, services and assets into logical categories and have a main menu option for each of these. Some things may stand on their own, because they are so important or because they don't naturally fall under an obvious title, others will easily combine together.

Our imaginary watersports school entries have come together like this:

Creating a main menu

Not all the entries have become options, but all will feature heavily in the text of the pages.

 

 

How many menu options?

Don't have too few choices - it looks like there's nothing going on in your business - or too many, it's too confusing.

 

The 7 + or - 2 rule
The seven, plus or minus two rule comes from psychology. Apparently, as human beings, when we are faced with a choice, we work best when we have between 5 (7-2) and 9 (7+2) options. Too few alternatives and we feel denied choice, too many and we get confused. It's a good rule to apply to how many main menu options you have.


Sub-menus

Sub-menu options are choices beneath a main menu. In our example we have sub-menu options under "Wet and Wild". As another example, if you were an attraction with, say, a café, a restaurant and a juice bar you might decide on a main menu option of Food and Drink and beneath that three sub-menu options, eg: The Orangery Café, The Great Hall Restaurant and The Kitchen Garden Juice Bar.


Menu titles

It's okay to inject a bit of creativity into your menu titles but remember the 15 - 30 second limitation. Users should be able to read down your whole menu in just a few seconds and immediately take in the headlines of what you offer. So the odd quirky menu title might peak their interest, but, broadly speaking, it's better to follow the "It does exactly what is says on the tin" approach.


Keep working it

Keep refining your home page and menus until you think you've got it cracked. You should be able to describe your home page as: simple, clear, says it all. Don't forget you're not looking for beauty at this stage - that's your designer's job - but you are looking for clarity, content and navigation. Have you got the menu options you need to provide pages that will Display, Reassure, Motivate and Capture your customers?


Be prepared to make a number of revisions - it can take a lot of attempts to get it right. Get friends, family and staff involved and keep going back to the internet to find out how other people are solving the same problems.


At this point, it's worth rough drafting the text for your home page. Remember the home page should sum up all that you do and offer. If you don't have a menu option for all the important things you put in your home page text, you may not have your menu choices right yet. Bullet points or rough sentences are enough - you'll refine it when you move on to Text, images and copy.

Our home page has come together like this:

Picture showing how to build a home page

Paper versions of other pages

Once you are happy with your home page, and you feel that every bit of information you wish to convey has a 'place' that can be reached from your main or top-banner menus, or from a link in the text, then move on to drafting the other sections. You'll need to create a page for every option on your menu, sub-menu and top-banner menu, plus one for any extra links you've created from within text.


Sketch out each page and bullet point the content, referring to your planning sheet constantly to make sure you're covering the main points. Remember that your website should:

  • Display - attractively lay out your wares (achieved through your menu and pages)
  • Reassure - show you're good to do business with (achieved through your text, images and any third party endorsements, eg: association membership logos, citations, awards or customer comments)
  • Motivate - get customers excited about buying and imagining their break or visit in their head (achieved through inspiring words and pictures
  • Capture - make it easy for them to buy [achieved through having lots of 'calls to action' , eg: links to your booking form, urges to call your number, bits of text saying "book now," "click here for our booking form," "give us a call - we're always happy to answer questions" etc.

Work through the menu options, sketching each page on a separate piece of paper, until you're convinced you've got the right pages to allow you to do all this. When you think you've finalised your site plan, the next step is to provide the content in more detail. Move on to Text, images and copy.

Next steps:

More from the Toolkit