Website Design Ideas - Colour

Colour plays an important role in the design of any website. Colour schemes are often created using a colour wheel, of which there are three main kinds - Monochromatic, Analogous and Complementary.

  • Monochromatic
  • Analogous
  • Complementary

Monochromatic colour schemesMonochromatic colour schemes use variations in the lightness and saturation of a single colour, to produce a clean and elegant look.

Analagous colour schemesAnalogous colour schemes use adjacent colours from the color wheel. Typically one colour is used as a dominant colour and two others are used to enrich the scheme.

Complimentary colour schemesComplementary colour schemes are made of two opposite colours from the colour wheel. These tend to look best when a warm colour is matched with a cool one, for example yellow and blue.

However, a more interesting way to create an effective colour scheme is to look at examples from nature. Colours can be selected from photos of plants or wildlife for example, and this will usually result in a great looking colour scheme.

Natural Colours

As you can see they work really well. If you have any photos of colour schemes similarly pleasing to the eye, then feel free to include those with the content you provide for any website.

Website Design Ideas - Layouts

A key consideration for any website is its layout. The main two decisions will be where to put the navigation, and how many columns to include for the main content.

  • Example 1
  • Example 2
  • Example 3
  • Example 4

Layout 1

(i) Top navigation, single column

Layout 2

(ii) Top navigation, two columns

Layout 3

(iii) Left hand navigation, single column

Layout 4

(iv) Left hand navigation, two columns

There is no real right or wrong here, and it largely depends on how much content, and how many pages you plan to have. Navigation along the top typically supports six to seven primary links, whereas navigation down the side provides room for more if necessary. It is quite common however to provide drop down menus for secondary links, which tend to work best in navigation along the top.

How many columns is entirely up to you - side columns are useful for navigation, or for small business sites can be used to hold common content for every page, such as prominent contact details, or special promotions.

Website Design Ideas - Fonts

Although people sometimes like the idea of a more interesting font for the main text of a website, this isn't really an option. This is because the font displayed is dependent on the fonts installed on the computer of the person visiting the site rather than any font chosen by the site owner or designer. As a result, it is common practise to use one of a handful of safe fonts that are in common usage. Three of the most common serif and sans serif fonts are shown below.

Sans Serif Fonts Serif Fonts

Arial font ARIAL
This is Arial...
Georgia font GEORGIA
This is Georgia...
Tahoma font TAHOMA
This is Tahoma...
Times New Roman font TIMES NEW ROMAN
This is Times New Roman...
Verdana font VERDANA
This is Verdana...
Courier font COURIER
This is Courier...

Of these, the sans serif fonts are more common, and what we would recommend, primarily due to their clarity and legibility.

Other Fonts

However, there is scope for more interesting fonts to be used in banner images, site navigation, logos or section headings. This is because they can more easily be used within images, that don't have the issue mentioned above. And don't worry - to keep them accessible and search engine friendly, there will be text only alternatives working behind the scenes.

To give you some examples, here are a few of our favourites :

Sample fonts

Website Font Links

We have many more fonts available, and there are more still available online (although some do come at a price). Here are a few links if you are looking for more inspiration...

Free fonts

Urban fonts