Principles of good web design

One way of representing the full gamut of colours is in the form of a colour wheel.

Whether two colours work together can be seen from their positions: opposite colours are “complementary”, so they create maximum contrast and balance when used together, while colours close to each other are “analogous”, giving a more laid-back feel.

You can use Adobe’s free online tool, kuler, to generate a colour scheme, as seen below.

All you need to use this is an Adobe account, which is free to create if you don’t already have one. Once you’ve signed in, select Mykuler and create a new scheme.

The middle colour in the row is defined as the Base Color. Below, the numbers represent colour values described in various ways. If you have a colour in mind, enter its values into one of the spaces provided, then click Set as Base.

Kuler allows you to apply any one of a series of rules to generate a fresh colour palette. If you’re following along in Kuler right now, the range you’re probably seeing is Analogous, which picks a series of colours all next to each other on the wheel.

Experiment by switching rules until you get a palette you like

The effect is of a subtle change from left to right. Experiment by switching rules until you get a palette you like: it saves you the hassle of working out which colours go together.

While these are called “rules”, they’re just a guide. If you’re a non-designer, I suggest you base your design on a “monochromatic” or “shades” colour scheme, then add a complementary colour to brighten it up.

One rule of thumb is that the more photographs (or other colourful images) you use, the fewer colours you should have in your design.

Most sites use white for their main content area and black for their body text, so the colours you’ve chosen will most often be used for the space outside the content area (the canvas or background) and for graphical elements.

Some sites swap this and use black for content with white text (like kuler) and that’s fine: the key is to get legible contrast between the content and the background.

Fonts

Rule number one: don’t use Comic Sans. Ever. No, really. Back when desktop publishing began, suddenly the local vicar had access to, oh, tens of fonts, and felt the need to use them all. On every page.

Far too many websites adopt the same approach and end up as an amateurish mess. Things can only get worse if you choose fonts such as Comic Sans that aren’t designed according to any conventional principles, and therefore convey no sense of authority or professionalism and, in large amounts, are painful to read.

So, rule number two: limit the number of fonts you use. I suggest between no more than three per page. You can get away with one, but most well-designed sites use two or three.

Generally speaking, you’ll use one font for all your headings and one for your body copy (paragraphs). Any additional fonts will be for specific purposes.

Fonts – or, strictly speaking, the typefaces that they embody – come in three kinds: serif, sans serif and decorative.

Decorative fonts should be used very sparingly, if at all.

Serifs are the little hooks on the ends of letters; The Daily Telegraph uses serif fonts in its headlines, for example, to give it a classy feel.

Serif faces include Times New Roman and Georgia, the latter being rightly popular on the web because it’s easy to read and looks good at a range of sizes.

Print designers can choose from thousands of typefaces, but when a user visits your web page they’ll only see the fonts you’ve specified if those fonts are already installed on their computer.

A list of the ones you can rely on is at Ampsoft.net.

A few of these are decorative, one is Comic Sans (no!) and some are unusable system fonts, leaving a small number that are safe and either good or at least tolerable.