The importance of colour in UX design

Colour is such an important aspect of life, but one that many of us take for granted. Imagine not being able to experience a clear blue sky in summer, a beautiful pink sunset, or field of bright yellow linseed. Colour is one of the most powerful tools a designer can draw upon: it plays a big role in how we interpret the world around us, and can have a significant impact on how we feel. Conversations around the importance of colour often drive me back to this well-known quote by The Body Shop founder, Anita Roddick: “We painted the shop green – it was the only colour that covered the damp patches! Now it’s the colour of the environment.” It seems incredible that the choosing of The Body Shop’s core brand colour was purely incidental. Today if you look at any designer’s colour palette, green is always synonymous with eco or environmental messaging.

Cultural and social connotations

Colour often brings with it cultural or social meaning, which evolve over time. For example, in Chinese culture, red symbolises good fortune and joy. When a baby is born, a Chinese friend or relative will often give the gift of a small red envelope containing money, said to bring good luck. In Western culture, the colour pink has come to symbolise femininity, hence its association in the UK with breast cancer awareness initiatives include Race for Life and the Pink Ribbon Foundation. Blue is said to be the safest colour to use worldwide, symbolising trust and authority in the Western world. It often comes out on top as the world’s favourite colour in surveys. In the tech world particularly, there has been a proliferation of brands using blue tones in their logo or app icon…think Facebook, Skype, Dropbox, LinkedIn, Twitter, Shazam and Safari, among many others.

Accessibility

Accessibility considerations should be high up the priority list when designing with colour. Colour blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 2.7 million colour blind people (about 4.5% of the entire population), most of whom are male. So a certain percentage of the population will see a design very differently to how the designer perceives it. It’s important to carefully check contrasts to ensure that background and foreground colours appear with enough contrast to a colour blind person, or someone with low vision. A simple way to do this is to look at your work in grayscale. It will highlight whether there is enough contrast, and check that colour alone is not being used to communicate key messaging. Many design tools have features that allow checks for colour blindness.

Colour palettes

Many well established brands and businesses will have their design colour palettes already dictated. Very often these exist from a print era, and may not have digital design necessarily in mind. It’s important to be working with a web accessible colour palette, whatever the guidelines dictate. Alternatively, if a new brand identity is being created, this Western colour chart (courtesy of Toucan Design) offers a good starting point: colourassociations

Knowing when enough colour is enough

There’s no doubt colour is important, but it shouldn’t be the only means of communication. People interpret design in different ways and so it’s important there are a range of visual calls to action in digital design, in addition to colour. Text, icons and patterns are important extras to consider. Button shapes, for example, can be important in creating a clear CTA. A button with rounded corners can help it to stand out, and the text should be large enough to read easily, but not so big that it intimidates.

Understanding impact

Designers will have differing opinions on the colours that consistently deliver good performance and conversation rates in digital. There is no single magic colour! But if you are interested in finding out more about colour, check out this cool infographic by Kissmetrics on colour psychology and how it influences purchase behaviour… Colour IG Source: https://blog.kissmetrics.com/color-psychology/?wide=1

Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestShare on LinkedInEmail this to someone

Related Posts:

0 Comments

Leave a Comment