Clifton Suspension Bridge, Bristol by Peter Frost 

Website Design

Keyboard shortcuts: Alt or Ctrl Key + 0 to 8, for help see Wikipedia access keys.


Most small web sites use colour themes, position and logo's (or shared images) to generate what's known as a 'look and feel' that is common on all the pages of a site. Larger sites actually often do the same thing but may also have sub themes or variations for each major section of a site.

Getting a Look and Feel for your Site

On a small site a simple way to achieve a 'look and feel' for a site is to dedicate certain areas for certain functions. With the page content in one of those areas.

This mini web site, does that by grouping elements of the page into: -

  • The Common Area: This must be consistent on all pages. In this case, the common area is in two shades of orange. It includes the: -
    • Site Logo/Theme Photo.
    • Navigation areas (pale orange).
    • Page heading.
    • Keyboard navigation help.
    • Right hand bar.
    • Footer bar.
    • Background area, can be images large or small but plain 'Ivory' on this site. Currently, centred websites with background visible on both sides of your material are popular.

    and

  • The Content Area: Which is used for the remainder of the page, in this case in pale yellow.

Giving your site a look and feel should be a major aim. You want any visitor quite literally at a glance to understand the navigation, see the page heading and where to find the content of a site!

Designing the Common Area and Content Area:

  • Site Navigation

    Simple site navigation on a small site consists of each page linking to every other pages on the site. In this case its the pale orange areas on the left hand side.

    Its increasingly common for websites to use bright and bold colours for the navigation text. This mostly makes the page look better but it does lose a useful feature of links with standard colours. That is the colour change that indicates a link to a page already visited: blue indicating an unvisited page and purple a visited page.

    If you have seen the earlier page organise your material. You should be able to split your content into separate web pages.

    After doing that designing the navigation is simple - decide on the order of the pages. Then give short meaningful titles (or even single word titles) to each page, if they are key words even better.

  • Position, Colour and Font Size

    The basics are:-

    • Position of site navigation (top, left, right, bottom or combinations of those. Also if you use them (and you don't have to) - position of any header bars, side bars and footer bars.
    • Background colour in the navigation area and any bars around the content.
    • Text colour in the navigation area and other common areas or bars. I usually prefer to stick to black but its your choice.
    • Text font size in the navigation area, this is typically a little smaller than the content font size.
    • Position of logo(s) or any common graphic(s) used.

  • The Content Area

    Position of the content is already decided, basically its what left after all the other bars are in place. It expands downwards if your page is very long. Content is pale yellow on this page, to remind you.

    Without positional decisions, that leaves:-

    • Background colour for the content.
    • Text colour in for the content. Again I usually prefer to stick to black but its your choice.
    • Text font size in the content area.
    • Position of any image(s) or multimedia used.

Of course very many more factors can be varied but with just those few you can get quite a good web page.

For a tool that can help you see how colours match together or to try and customising a web site template see:-

Next: Creating Web Pages >>