Use of Colours on Websites

The use of colours on a website is one of the most important aspects of website design, because it is one of the first things that you notice when you open a webpage.

Some common mistakes that are made around colours when designing websites are:

  • They pick inconsistent colours
  • They use too many colours
  • They apply colours to the wrong places

(UX Movement, 2011)

If these mistakes are made it can mislead the user and they can distrust the website if the colouring makes it look un-professional. Also from an availability point of view, text needs to be easily visible, so it can be read by the user quickly.

Consistent colours
So to prevent making the common mistakes it is important to decide on a theme of colours, it would be good to incorporate these colours onto your your logo if possible. It also means that your website will look as professional as possible (UX Movement, 2011). Also you should consider the nature of your website when choosing colours because certain colours have different meanings. For example Red is associated with heat and possibly aggression so this needs to be taken into account (Colour Affects, 2014).

How many colours?
I believe that a website should contain very few main colours, this is because a website that has less colours is much more memorable than a website that has a lot (UX Movement, 2011). Although this does not mean that you can only use one or two colours, i believe you can use up to 5 and remain professional.

Where to apply colours
Once you have your colour scheme chosen, this does not mean that you should add these colours everywhere possible. There are some areas where these colours will work best for example logos, menu buttons and links (UX Movement, 2011). You should be very careful when using your brand colour for text, because it should always be a high contrast against the background, so they remain easy to read.

Barclays
Screen Shot 2014-11-04 at 17.21.10
Barclays colours

It is clearly apparent that Barclays has decided upon a clear theme, with three consistent colours which have been incorporated into their logo as well as their menu buttons. The amount of main colours that Barclays have chosen is good because it gives them a clear brand image, anyone who enters this website will definitely associate blue with the brand from now on-wards.

Some psychological associations with the colour blue that Barclays may have considered are:
– Intelligence
– Communication
– Trust
– Efficiency
– Serenity
(Colour Affects, 2014)

Cruise.co.uk
Screen Shot 2014-11-04 at 17.47.26

Cruise colours

With Cruise.co.uk it is not really clear whether they have chosen a colour scheme at all with a total of 8 colours including white. The disadvantages to designing a website like this is that it looks busy and this can mean that it can seem unprofessional. This only becomes a problem when they lose customers because people can find it hard to trust a website like this. As you can see there is a large red advert showing vacancies on cruises.

Some psychological reasons cruise.co.uk may have considered when choosing red for that advert:
– Energy
– Stimulation
– Alarm
– Strong visual impact
(Colour Affects, 2014)

My Webpage (Akeem’s iPhone Accessories)
Screen Shot 2014-11-04 at 18.04.11

Iphone Accessories Colours

While designing my website i made sure that i stuck to a theme, I also tried to repeat colours where suitable. For example the dark green in the colour chart above, was repeated in my logo and on my menu buttons. The colours i’ve used are mainly monochromatic with a dark green to add some interest to the website. I have only used 4 colours to ensure my pages look professional and can be trusted by the users.

Below are my psychological reasons for choosing green:
– Refreshment
– Environmental Awareness
– Harmony
– Balance
– Go
– Growth
(Colour Affects 2014, Pallas Art 2014)

References
Barclays (2014) Homepage. [Online] Available from: http://www.barclays.co.uk/PersonalBanking/P1242557947640 [Accessed 4 November 2014]

Colour Affects (2014) Psychological Properties Of Colours. [Online] Available from: http://www.colour-affects.co.uk/psychological-properties-of-colours [Accessed 4 November 2014]

Cruise UK (2014) Homepage. [Online] Available from: http://www.cruise.co.uk/ [Accessed 4 November 2014]

Pallas Art (2014) Making Effective Use of Colours in Websites. [Online] Available from: http://www.pallasweb.com/color.html [Accessed 4 November 2014]

UX Movement (2011) How to Use Color to Successfully Brand Your Website. [Online] Available from: http://uxmovement.com/content/how-to-use-color-to-brand-your-website/ [Accessed 4 November 2014]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s