CodeLair scripts and tutorials; click to return to home page

Web Design Hints & Tips

Some dos and don'ts for web sites/web design, including tips on colours and fonts.
Last updated: February 08, 2007

Here are some tips worth remembering when designing a web site. Some of them may seem obvious, but it's amazing how often they are ignored on the web.

 

Colors

Whatever you do, don't use bright, garish colors. The main offenders are the basic bright red, yellow and blue colors. Even worse is a mixture of these (e.g. yellow text on a bright red background). It is wise not to use any of these, as shown below. When using these colors, tone them down a bit - either make them a bit darker or a bit paler - decreasing the saturation helps a lot too.

       

These will give you a headache after a while! Here's some better colors:

       

 

color wheel It is also useful to have a color wheel handy when choosing a color scheme for your web site.

Colors that are next to each other in the color wheel are called complimentary colors. This means that they go well together, e.g. blue/purple, green/yellow.

In practice, the best color combinations are a color and it's lighter counterpart (see below).

Colors opposite each other are called contrasting colors because they stick out like a sore thumb! Avoid using these at every cost.

Also remember that white is also a color and is useful as another lighter color. An example of a color scheme you could use:


         

 

Fonts

When creating a web site, you can choose from any of the fonts installed on your computer. However, if the font is not present on the computer of the person visiting your site, it will be replaced, usually by the standard font of the operating system.

Therefore it is a good idea to stick with the basic, most common fonts such as Arial, Courier New, Verdana and Times New Roman. But try not to use more than two different fonts on one page as too many can look cluttered and messy.

Choosing the right font color is important as well. Similarly to above, do not use font colors which look garish such as yellow text on a red background. And there's no reason why you shouldn't use the traditional 'black on white' approach.

 

Backgrounds

Backgrounds are generally okay, if used properly. There are two types of backgrounds - a plain color or a tiled picture. When using a tiled picture, make sure it does not impair the legibility of the text, and that it does not look messy. Something like this is just a nightmare:

Text is difficult to read on
this type of background

Text is difficult to read on this type of background.

 

Content

Finally, a note on content. The Internet is a fast moving place, and to match this, web sites should be updated regularly. No one wants to read out of date information. Ideally, a web site should be updated weekly or monthly, if not more regularly.