Colour Theory

Colours are paramount to an effective and successful website design. They influence the mood, the tone and can if used wrongly turn users away from your website. A way to avoid turning users off is to not use too many colours, as it often makes it harder to find information on the page. Too few colours potentially makes a page boring and plain, however it is better to have too few than too many.

A common practise is to have three main colours on a page.

• Primary - This will take up the most area on the page and generally sets the feel of the entire design
• Secondary - Used to back up the primary colour, its usually this is pretty close to the primary but in a different shade or tint.
• Highlight - To be used in moderation, this is used to emphasise parts of your design as it is contrasting to the previous two colours. An example of its usage could be an important button on a website or the logo on a print advert.

 In order to achieve a good colour scheme there are key conventions and tools that are available to help. Firstly a good knowledge of how the spectrum works, this is used with a "Colour Wheel". It shows the Primary Colours in key locations:

Primary Colours are Red, Green and Blue

In addition to this, it has the Secondary Colours which are the adjacent primary colours blended together. These sit in between and are Magenta, Yellow and Cyan.

Finally the Tertiary Colours are a further blend of the adjacent colours to produce even more colours.

Finally producing the full wheel, as shown below.

After we have our full wheel, we can begin to devise colour schemes using a variety of methods to pair up colours with one another. The first one is Analogue, whereby the 2 adjacent colours of a chosen colour are picked. This can in design terms, lead to one that feels harmonious.

The next method is Complimentary. This is where the colour directly opposite a chosen colour. As its a contrasting colour, this is usually how the Highlight colour is picked.

Split-Complimentary combines Analogous and Complimentary together to produce a colourscheme with a degree of contrast, that does not have such a jarring impact as straight complimentary. By having two analogous colours, it allows the design to feel more harmonious.

Finally there is Triadic. This involves selected three hues of equal distance apart to gain your colour scheme. This has the benefit of having a more balanced colour scheme, while staying colourful.

In order to designate a colour scheme for my Website, Ident and Print Advertisement I will be using these techniques and conventions in order to ensure it's both colourful and not irritating to the eye.

Website Structure Conventions

All professional websites will follow the same basic conventions. At their purest form it boils down to:

• A Logo / Header section
• Well defined navigation
• Content, using a mix of text and multimedia
• A footer section

It's important to note that these are not part of good User Interface design, you can have all these elements and still have a very bad user interface. These are the core structures that any website needs to have in order to function fully as a website.

You can see these conventions in place on the BBC news website:

Header Section:
Typically the logo will be situated on the left, in this case BBC News. There may also be a graphic, as you can see on the right in the form of the signifier of the red atlas with the white circles. I feel this works well, as all the most important information and links are placed at the top, along with a Search Form. It makes it easily accessible.

Navigation: 
There are 2 typical types of website navigation. In this case, they have gone for a horizontal format as opposed to a vertical list style element. Horizontal can be used on websites where horizontal space is available, as depending on how many links are required, it can appear cramped if there are too many elements.

Content:
As this is a News website I am using as an example, the content will differ compared to a TV Channel based site. However the principles are the same: Text, graphics and other multimedia must be used in balance with one another. Too much text is daunting and hard to read, especially on a screen, whereas too many images can mean either long load times, poor search engine optimisation and makes it difficult for the ever expanding mobile browsing market. Too many graphics can also mean that explanatory text and meaning is lost in a sensory overload, leaving the user confused or frustrated. 


You can see more intricate conventions on this website here: http://netaccountant.net/website-design-for-accountants/web-design-conventions/ as well as further deconstructions.