HTML Tricks and Tips
Richard Goodwin lets you into some more of the deper secrets of the web designer.
Colour and layout
Some purists believe that any change in the colour of a website from the default grey background, black text, and blue/purple/red links (depending on whether it's been clicked on or not) is an unnecessary complication which makes it harder for visitors to a site to understand how to navigate around your site, and therefore the use of colour is some kind of design heresy. However, I'm sure you'll agree that this would not only make web browsing and site design a pretty dull experience, it'd also make for a very short article, so I'll plough on.
Colour brightens up a website, and careful use of colour can make it look more professional as well; but what constitutes 'careful use'? Well, the first thing is generally not to go overboard. The saying 'less is more' is especially relevant when you're trying to keep one eye on the download time, so it's a good job you can add colour quite cheaply - the attribute
The second area to be careful of is the choice of what actual colours to use, and what they say about your site. If you're designing a site for a company, the job may have already been done for you - just get a hold of some headed notepaper, a business card or suchlike. Chances are they've already put time and money into deciding on their own colours and logo, and they'll want the website to fit in with all their other 'literature', thus saving you several minutes of important drinking time.
If you don't have such an easy-out, you'll just have to do a little thinking. You could just choose your favourite colour, but what goes with it? Generally you'll want to choose at least two, maybe three, colours that go well together so that when you start adding graphics you'll have something to contrast with the background to highlight the logo, links buttons and so on.
What colours say about your site
Each colour has a certain connotation attached to it, which might aid or hinder the message you're trying to get across.
The obvious starting place is red - a bold, exciting colour which is associated with danger (blood, stop signs etc.) and passionate romance (red roses). Possibly not one to over-use on a site about open heart surgery though. A darker red is slightly more old-fashioned, perhaps harking back to the times when books were bound in red leather; a little lighter and you get pink, which is again of course associated with love, perhaps a little too much for the boys.
Yellow is a happy, cheery, sunshine colour, although sometimes a little too bright to be used on its own - it's great as a highlight colour but won't show up well against white. If you tone it down a little you can go for a slightly brownish look - highlighted with yellow you can do all sorts of gold effects - or heat it up with a little red to make orange, which is a bouncy, fun colour.
Moving on through the spectrum we come to green, which is associated with nature - spring's new leaves, a grassy lawn and so on. Along with blue it's a very classy colour, and very calming, but this can mean you might find it a little dull - unless you add a little yellow and make it a zingy lime colour!
Blue is a cool, calming colour, telling of calm seas and the sky on a summer's day. It can also be cool in another way, mixed with a few white areas to make an icy theme. Again it can seem a little dull and conservative, but like a pair of blue jeans it never really goes out of style. Plus 35% of Americans say it's their favourite colour, and that many Americans can't be wrong, can they?
Purple is a hippy, trippy colour which I tend to avoid like the plague because it's used by so many people who want to be different but don't really have the taste to carry it off. This is perhaps a little unfair, as it is a little magical and occult (beloved of both bishops and Goths) and goes well with pink. Try it if you want to be nonconformist, but don't say I didn't warn you.
This just leaves the non-colours - black, white and greys. Black is the most powerful of "colours", and along with white gives the greatest contrast which aids visabilty and readability. It's also stylish - possibly why most consumer electronics has traditionally been black, although we finally seem to be moving away from this - and a little mysterious, with its association with dark nights and the occult. White on the other hand is bright and clean and pure and good. Greys can look a little washed out if not handled properly, but do have the advantage of going with just about every other colour.
You could just mix and match these colours to create a theme - for instance reds, oranges and yellows to make a fiery theme, or blues, turquoises and greens for an ocean-style theme, oranges and browns for a warm, earthy, Mediterranean theme and so on. Or you could apply a little colour science and save yourself the effort...
A colour wheel is just a simple diagram showing colours arranged in a circular arrangement.
The six- and twelve-colour wheels.
Once you've picked a colour you want to use on your website, match it to the closest colour on one of the wheels above - the twelve colour wheel is just a slightly more complex version of the six colour one, so the rules work exactly the same on both. If you chose a colour which doesn't appear to fit - for instance, pink or brown - don't worry, just think of the colours shown as the most extreme examples, you can always add a little white or black into the mix, so for those examples you'd use red - just assume light red is pink, dark red is brown.
Text areasConsider most text-based websites - chances are they'll have a splash of colour down one side or across the top, and the main part of the page will be white with black text. Why? Well, first and foremost is that this is how it's been done for several hundred years with traditional publishing media such as books and magazines. People feel comfortable with this, which instantly makes it easier for them to understand what you're trying to get across. It's fairly easy on the eye; although staring at any colour on a monitor is going to give you a headache eventually, the high contrast of black on white at least gives the viewer a fighting chance. And it's also pretty easy on the printer ink if someone wants to print a page from your site.
Of course, rules are there to be broken, and style can come from knowing exactly when to break the rules - for instance, most games-related websites usually have a black background with white text. This makes it closer to the style of most games, it's also a little easier on the eye (you get the same black/white contrast, but the predominance of black is more restful). You'd also want to do the same dark background, light foreground if your target audience is using a TV as their display device - although NCs didn't take off in quite the way people had hoped, as the Internet continues to gain popularity you'll find more and more consumer devices being web enabled; for instance, the Dreamcast games console. In this as in all things, it pays to know your target audience.
So, for large blocks of text high contrast is good, traditional colours are good, cyan backgrounds with black text are bad. It's also worth pointing out that textures for large text blocks run against most of the points raised above - you lower contrast, make printing harder (and much slower), and generally mess things up. However, a subtle watermark or very pale logo down one side of the page can look quite stylish.
Other rules and how to break them
Another rule is that the eye will start on the left and move right, and from top to bottom; the focal points are to the centre or upper left of the page. You should, therefore, put any navigation toolbars along the left or top edges of your page, with the text on the navigation buttons going left to right. However, this seems way too traditional and Western for me at times, so I'll sometimes switch the navigation to the right hand side; it's different, it's out of the way so people can concentrate on the text, and it's good if it's the sort of page someone might want to print - they're there for the content, not a printout of a load of one-word GIFs. You could also make the navigation buttons go down the page oriental-style instead of left-right if, for instance, the site is about some kind of martial art. I'd advise against right-left text for English words unless you're especially perverse though.
And finally, don't go overboard with trickery - keeping a page simple will mean it loads faster and is easier to navigate and read. Adding huge banner ads, loads of colour and massive images all over the place won't get you a repeat visit. Changes in colour in the main text can make the text harder to read. However, it does make it more fun! People like a bit of colour, it makes the text more interesting so long as you don't overdo it.
I hope that this has given you some food for thought, so get out there and start designing!