UNIT 2 - ⇑ Webpage Design ⇑

← HTML & style sheets Webpage design

Web page design is an art and there is no way of guaranteeing your website will look fantastic, however there are some rules that you can stick to when attempting to make a professional looking website:

The rule of thirds edit

There is an artistic theory that states when you split an image into thirds aligning the main components in this format then it looks better.

This photograph of a sunset taken in the Thousand Islands region demonstrates the principles of the rule of thirds

This theory has been adopted into web design and many websites you use will utilise this rule of thirds, splitting the information into 3 columns, or 1 column and another column taking up two thirds.

Colour schemes edit

Three web page colour schemes you need to know are: monochromatic, analogous, complementary colour

Monochromomatic edit

Monochromatic color schemes are derived from a single base colour, and extended using its shades, tones and tints (that is, a hue modified by the addition of black, grey (black + white) and white. Monochromatic color schemes may be considered boring unless there is diversity within the design

Red monochromatic image

Analogous edit

Analogous colors are colors that are adjacent to each other on a color wheel. Some examples are green, yellow green, and yellow or red, red violet and violet. Analogous color schemes are often found in nature and are pleasing to the eye.

Analogous color scheme on a colour wheel

Complementary edit

In color theory, two colors are called complementary if, when mixed in the proper proportion, they produce a neutral color (grey, white, or black). In the diagram below they are the colours that are opposite each other. Examples of complementary colours include:

  • red and green
  • blue and orange
  • yellow and violet
a Blue-Yellow-Red color wheel. Opposite colors are called complementary
Page Design

Explain the rule of thirds:


Separate the main components of your website into three columns and/or rows

Name the three colour models that could be used on a webpage:


  • Monochromatic
  • Analogous
  • Complementary