A web site is like everything else in life – there are good ones and not-so-good ones! Professional web designers have a check-list of elements that make up those in the first category. Here are the nine main elements to be considered – each contributes to the impact and success of your site.
Your home page is your billboard or store front – it creates an immediate impression on visitors to your site, so it’s got to create the right impression … right?
It should look:
Aim to “underwhelm” rather than overwhelm! Too many flashing lights, colours, drop-down boxes, graphics etc will be distracting. It’s a bit like those stores that play loud, frenetic music – your heart rate rises, your stress levels go up and you just want to get out – fast!
Whether you have a business site or a personal page, you have to give people a reason to stay on your site – we’re mercenary little critters, we humans, our first question is always, “what’s in it for me?”
That doesn’t mean that you have to give away free programs, books, tickets or holidays – it does mean that you have to offer something. That “something” could be:
- Help with a problem
- Opportunities to contact similar minded people
- Links to useful sites
If you do have a business site, you need to give information about your product or service that is:
- easy to follow
- easy to find
- easy to order
We all know that speed is the key to keeping visitors. I often catch myself getting impatient because it’s taking me 20 or 30 seconds to connect to some site or other. Then I stop and think about the fact that here I am, sitting in my office on the east coast of Australia, connecting to a site in the north of England, on the west coast of the US, in Canada, South Africa, India or one of the dozens of other places I regularly contact, and I shake my head in wonder. How quickly we become accustomed to technology.
However, we DO get impatient if it takes us too long to make contact – so you must ensure that your home page at least, loads as quickly as possible. That means no big, flash graphics.
Keep reminding yourself that your first page is like a billboard. When driving your car, you don’t have time to read detailed descriptions, or admire intricate pictures on billboards. The signs flash past you and have to make an immediate impression.
Your web visitors are ‘flashing past’ as well, so keep your front page simple and fast.
There are numerous articles on the net about how to improve speed – take the time to check them out and then discard anything that slows down your home page too much.
Colour, Lay-out and Graphics
The graphics and lay-out of your home page contribute to that first impression – think about what image your site is trying to convey and make sure everything on your site contributes something towards that overall image.
If you have a serious business site, you don’t want garish cartoons on your front page – but if you have a games site, then cartoons can be an integral part of the image.
Graphics are what eat up the loading time of your site. A rough rule of thumb to determine good loading time for a page is to keep the entire page around 30k.
Images should be between 6 – 8 k. Each additional 2k adds approximately one second to loading time.
If in doubt, right click the image and then click on Properties to get the size of the image.
Colour is also an important part of your site; colours have different effects on our emotions:
- Red and orange excite the senses and increase heart beat
- Blues and greens are more restful
- Yellow reminds us of sunshine and is a happy colour
Consider the effect you want to create and choose a colour that is appropriate.
When reading Western texts, the eye travels from the top left of the page, across and then down to the bottom right. Remember this when you’re placing graphics on your page.
Any graphic which has a directional aspect should be placed to point the eye towards the most important section of the page. If you have a picture of a bird on the top left corner of your page, make sure it is facing inward and that its beak is leading the eye to the centre of the page, not away from it.
The same applies to all graphics:
- Faces should ‘look’ to the centre of the page
- Cars should be ‘parked’ facing towards the centre of the page
- Roads, neck ties etc should all be placed to lead the eye across from left to right, or down from top to bottom
This is also why you should place your navigation bars down the left side of your page – it keeps them constantly in the visitor’s field of vision.
This doesn’t refer to the words you use (we’ll look at them in detail later) – but to the way the words look on the page.
Going back to the concept of the billboard, your words need to stand out on your page – you need to surround them with plenty of white space.
Think over some of the sites you’ve visited – some make you feel as if you have to duck your head to read them! Dark backgrounds make you feel as if you’re in a small space and also have a depressing effect on your mood.
Certain coloured backgrounds make it very difficult to read the text; purples, orange tonings and reds dazzle the eyes.
The colour of your text is just as important – bear in mind that different browsers read colours differently – what looks great on your browser, could well be invisible on another!
Take a lesson from the newspapers and divide your text into columns for easier (and quicker) reading – even two columns are better than one slab of text that covers the entire width of the page.
Another element that contributes to text readability is the font you choose. Plain fonts (Arial, Times New Roman, Garamond and Courier) are the easiest to read. Fancy fonts are fine for headings, but not for full pages (imagine trying to read a whole page in Gothic, Script, Westminster, or Cloister). Your eyes would soon tire of the effort involved and you’d be reaching for the back button!
See what I mean?
Segmenting and Sign-Posting
You have to make your page as easy for your visitors to read as is humanly possible and this means breaking it up into little ‘chunks’ for them. We’ve already looked at the need for columns, (which divide the page vertically) – you also need to divide your page horizontally, by the use of headings and sub-headings.
When you were at school, your teachers told you to use headings in your notes – apply the same principles to your web pages. Look for the key points on each page and write a short statement that summarises each point – this is your heading.
Read through each section and see if it can be further divided into smaller points; write a summary of these sub-sections and these are your sub-headings.
Select a font for all your headings and sub-headings (and stick to it). It’s not necessary to have a different font for headings (just go up one size for headings, and then use bold on all headings and sub-headings).
This way it’s easy to recognise which is a heading (large and bold) and which is a sub-heading (same size but bold).
The point of this is to make it easy for your visitors to glance at your page and to take in all the key points. If what they see interests them, they’ll stay and keep reading – so it goes without saying, that your headings should be written with care!
To draw attention to other important points, you can also highlight them – by putting a whole sentence in bold or a different colour (or both). However, take care with the colours you select – some are quite difficult to read – even against a white background.
Your main navigation bar should run down the left side of your page, for two reasons:
- We’re accustomed to reading from left to right and from top to bottom
- We’re accustomed to finding navigation bars on the left of web pages – why buck the system (especially when it works)?
On a long page. It’s also a good idea to have a brief nav bar along the bottom of the page (just home | top of page will suffice).
When you’ve found a system you’re happy with – use it on every page, so that your visitors know where to look for the information.
Make a blank page which has your page layout (columns), any logos or standardised graphics, alt tags and navigation bar already built in. Call this ‘blank” and then when you make a new page, you have everything already set up and just have to enter the content, html tags and then save it as “whatever.htm”.
If your site is a business site, then one of the most important things you have to do is to ensure that your potential customers feel confident dealing with you. On the web, you do this by telling people exactly what you’re doing to safeguard their interests – in particular, how you’re protecting their privacy. It’s worth having a separate page which sets out – in detail – your policy towards their email addresses; how you accept orders; how you gather information; who has access to this information; how you use information gathered from children and so on.
Visitors also like to know that real people have used your products or services, so it’s worth asking your satisfied customers if you can quote any positive comments they’ve made about you. Don’t be afraid to ask for testimonials – we all like to know that our opinions are valued.
Set up a separate page for your testimonials and offer to include links to your customers’ pages in return for using their comments. This is one of those “win-win” situations!
Words, words, words
Now we come to the most important element – if this part is wrong, the rest of your efforts are largely wasted. How many times have you been impressed by a site’s initial appearance, only to be disappointed by poor spelling, careless grammar and punctuation?
It reflects badly on the site owner and indicates that whoever is responsible for this page, is sloppy, careless, lazy, unprofessional or all of the above! Would you entrust any of your hard-earned money to someone who doesn’t even care enough to check the expression of his/her own site?
- You can take steps to improve your own writing skills
- You can employ someone to proof read and edit your work
- You can employ someone to write your pages for you.
There are places that will assist you with any or all of these steps. Don’t spoil all your hard work by skipping this one, vital step!