Shape & Colour
warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in /home/bfactory/public_html/themes/bwf/node-flexinode-8.tpl.php on line 147.
How to choose shapes and colours...

Choosing Shapes

Shapes will help to link icons with a particular functionality. This is normally used for buttons, menus and areas with a call-to-action.

Shapes include the choice of photograph: landscape or portrait? Other shape choices include creating borders with square or rounded corners.

Another use of shape could be to allow you to break out of frames (set areas or information islands on your page). This can be achieved by use of acute angles or super-imposing shapes with shadows on top of a frame to give 3D effects.

Review sites that attract you and investigate their use of shape. Experiment with using these ideas for your own website.

Colour Options

Colours can be used to express emotions. Here is a list of typical colours and their associated emotion:

  • White: innocence, purity, cleanliness, simplicity.
  • Grey: neutrality, indifference, reserved.
  • Black: seriousness, darkness, mystery, secrecy.
  • Red: love, passion, danger, warning, excitement, food, impulse, action, adventure.
  • Blue: trustworthiness, success, seriousness, calmness, power, professionalism.
  • Yellow: curiosity, playfulness, cheerfulness, amusement.
  • Purple: royalty, justice, ambiguity, uncertainty, luxury, fantasy, dreams.
  • Green: money, nature, animals, health, healing, life, harmony.
  • Orange: comfort, creativity, celebration, fun, youth, affordability.
  • Pink: softness, sweetness, innocence, youthfulness, tenderness.
  • Brown: earth, nature, tribal, primitive, simplicity.

PrimarySecondaryTertiary
Red

Blue

Yellow
Purple

Green

Orange
Burgundy
Violet
Turquoise
Apple
Sandstone
Terracotta

Colour Temperature

The temperature of the colours corresponds to warmth. This can be seen in the colour wheel with the left hand side showing cool colours and the right hand side showing warm colours. This is useful when you want to create a mood.

Cool Colours Warm Colours
 
Cool colours are shown on the left hand side of the colour wheel. Warm colours are shown on the right hand side of the colour wheel.

Neutrals

Neutrals are one of the easiest groups of colours, or non-colours to work with. They don’t appear on the colour wheel and include Black, Grey, White, and sometimes Brown and Beige. They all go together and can be layered, mixed and matched. No neutral colour will dominate over another.

Colour mixing styles

Clashing or Contrasting colours

Clashing or contrasting colours are directly opposite each other on the colour wheel. Despite the name, colours that clash are not always a bad combination if used carefully. They provide great contrast and high visibility.

Complementary

Complementary colours are separated by another colour on the colour wheel. Complementary colours printed side by side can cause visual vibration making them a less than desirable combination. However, separate them on the page with other colours and they can work together.

Adjacent or harmonising

Adjacent or harmonising colours appear next to each other on the colour wheel. Harmonizing colours often work well together but if too close in value they can appear washed out or not have enough contrast.

Using gradations

It recommended that only simple, or parallel gradation is used for websites. Other methods may result in aliasing problems due to the resolution and pixelation of your PC screen.

For simple gradation, consider the range or rate of change of gradation, and direction of movement. When using gradation throughout the site, ensure that the range and direction remain consistent.

How to Choose Your Colours

Using the colour ranges based on your existing logo and corporate style guides will help with consistency. Even if you are constrained by choice of colours, you still have control over the volume of colour and where you place complementary and contrasting colours.

Start by breaking down the layers of your website into background, framing, navigation and text. The background layer contains the base canvas colours onto which the layers are added. The framing layer contains the borders, separators, spacers and lines that split your website into sections. The navigation and text layer contains the colours for any text. This includes headlines, body text, menus and navigation links.

The style of your website will determine the volume of colour you use. If you want a heavy frame style website with lots of borders then the colour of your frames will control the overall mood. A good example is use of dark blue for framing of the website for corporate or engineering websites. Alternatively, a contemporary website will have very light framing and use lots of white-space and have thin grey lines as separators.

Your colour choices will affect the mood of your design. If you have some flexibility over the choice of colours, analyse a colour wheel and choose colours based on the following:

Choose whether you want a warm or a cool colour range to predominate:

- warm colours are: red-purple, red, red-orange, orange, yellow-orange, yellow

- cool colours are: purple, blue-purple, blue, blue-green, green, yellow-green

Use neutral colours to balance the site. These will work with any colour range:

  • creams and beige
  • black and white
  • grey tones

By selecting colours from one side of the colour wheel, you’ll get a consistent look and you can then choose an accent colour from the opposite side of the wheel for highlights, offers or navigation.

For each layer, choose a major colour, a minor colour and an accent colour. Experiment with using neutral colours and varying the intensity and gradation of the colours to determine the best combination when putting the layers together.