MA Project GDE750 20/21

MA Project Week 11: Idea generation, preliminary and developmental work, iterative design solutions

The Role of Colour in UX Design

Before starting to design my site, I would like to think carefully about the colour palette. Understanding colour psychology is a really key part of developing a coherent digital platform. Some designers only think about colour in a completely aesthetic way, when actually the psychological impact that colour has on users is key to user experience and for people to return to your platform.

Colour theory is a huge and complex subject and one that I will not have time to fully research for this project, but in this blog post, I would like to highlight the different areas that I believe are really important when designing my digital platform.

Colour in UX design is much more than just creating a colour palette that looks nice. I want to learn how to incorporate unexpected colours into my UX design to aide the engagement and interactivity of my platform for my users.

Different Sectors

Many colours are associated with different sectors, for example, the classic blue / white / grey colour scheme goes well with the finance sector and has become familiar and trustworthy to people. This is because these colours are often associated with trust and loyalty in colour psychology.

Barclays uses a very specific website color scheme

The Psychology of Colour

As I mentioned before, colour theory and the psychological effects of different colours are often a subject of topic, but there are many aspects that are universal, and these are the ones that I would like to look into.

Cultural variations, main colours (primary, secondary, tertiary) and traditional variations of colour and the areas that will be most relevant for this project and if I am able to learn these basics, I will be able to experiment more freely when it comes to designing for my platform.

Here is a UX Designers colour wheel that can be used as a guide for basic colour meanings that can be easy to learn and remember. One should be really careful to pick out the subtleties within each colour way and these too can have a very different emotional impact for interface colours.

Color psychology is a complex aspect of color theory

Colour can also create a really dramatic impact on how it is perceived. for example, a bright blue used on a very modern and clean website can act as a statement colour and can really stand out, however, that same blue used on a busier, more corporate website design as an accent colour, will have a totally different effect.

Colour and Cultural Differences

This is an issue that is crucial to my project and one that many designers tend to overlook. Cultural differences that exist around colour are very important when designing for a multicultural audience. For example, the colour white in most Western cultures means innocence, purity and hope. In Aisa, the colour white is associated with death, bad luck and morning.

There are many colours that have the same connotations regardless of which culture your user is from. A good example of these colours is orange. I think that it is important to look into how your user will perceive the colours you use on your website before you start designing. As I would like my digital platform to de adaptable for an international market and do not know exactly all of the different cultures that could potentially use the platform, I need to make sure that I balance the colours and imagery to avoid negative cultural connotations.

Color psychology varies around the world, based largely on cultural associations

Basic Colour Meanings

  • Red — Red is the colour of danger and passion, as well as excitement. It’s a very strong colour and can elicit strong reactions in people. Lightening it to pink makes it more feminine and romantic while darkening the hue to maroon makes it more subdued and traditional.
  • Orange — Orange is a very creative colour that’s also associated with adventure and youth. It’s very energetic, too. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling.
  • Yellow — Yellow is happy, optimistic, and cheerful. It’s popular in designs for children and adults alike. More pastel hues are often used as a gender-neutral baby colour, while brighter yellows are popular in creative designs. Darker shades of yellow become gold, which is associated with wealth and success.
  • Green — Green has varied associations. On one hand, it provokes feelings of wealth and tradition (particularly darker hues), while on the other it’s strongly associated with environmentalism and nature. Lime greens are often associated with renewal and growth.
  • Blue — Blue is most often associated with loyalty and trust. Brighter blues can be affiliated with communication, while duller and darker blues can be associated with sadness and depression. Blue is the most universally liked colour in the world, which may explain why so many companies opt for blue shades for their branding.
  • Purple — Purple is another hue with varied meanings. It’s long been associated with royalty and wealth (since the purple dye was rare in many ancient civilizations, it was reserved for royalty). But it’s also associated with mystery and spirituality. Purple can also evoke creativity.
  • Black — Black implies sophistication and luxury. It can also be tied to sorrow and negativity, however. Depending on the other UX colours being used alongside black, it can feel modern or traditional, formal or casual.
  • White — White is tied to purity, innocence, and positivity. White is also very popular in minimalist designs, due to its neutrality and simplicity. Like black, white easily takes on the characteristics of other colours it’s used with.
  • Gray — Gray has varied meanings, depending on the context. It can be conservative and sophisticated or dingy and dull. It can be emotionless or moody. It can also be associated with sorrow and sadness.
  • Brown — Brown (which is actually a dark shade of orange) is associated with being down to earth and grounded. It’s also associated with nature and even cosiness. And, of course, it can be affiliated with being dirty or dingy.” – https://www.toptal.com/designers/ux/color-in-ux

Standing out from the crowd

Using unconventional colour can make your UX design stand out from the crowd. Use colours that stay within the correct connotations but are unusual for your sector. This can make your site look really fresh and modern.

The 60-30-10 Rule

This is simple theory for creating colour palettes that are balanced and visually captivating. Your choose one colour that is fairly neutral (literally or psychologically), this colour should make up 60% of the palette. Choose another contemporary colour for 30% for the palette and a third colour used to accent the remaining 10% of the design. If designers stick to these rules and experiment within them, then they can start trying out unconventional colours in a balanced and visually interesting way.

Testing out what I have learnt

I had the idea, through my research, to use game design current colour trends for my colour palette. Through my research, these are the colour palettes that I think would work well taking into account what I have learnt through my UX colour design research.

I like this selection of colours as they are bright, joyful and attractive. Through what I know about certain colours being perceived in different ways within different cultures, I can quite easily eliminate some of these colours. All of the reds could send the wrong message. I want to use a colour that sends the signals of being safe, secure and neutral. I would like the colour to also be gender neural and appealing to teenagers. Here are some colours that I feel fits the criteria.

Narrowing Down

I created my own colour palettes using the website colours.com. I used the Adobe Colour Wheel to make sure that the colours I chose harmonised together.

Resources

https://uxplanet.org/essential-color-tools-for-ux-designers-530036eaf9ae

Author

alice@aliceneve.com