Experiencing design is a very emotional thing; when you look at a piece of design, whether it be physical (poster, booklet) or digital (website, app), it evokes an emotional response. It might be more or less obvious depending on what it is we are experiencing, but the reaction is there. Designers will use specific methods to target these responses in an effort to form a reaction from that emotion. And there is no better way to do so than the strategic use of colour. Let's explore the very basics of colour theory on the web, and how we can use it to create better experiences for our site visitors.

Colours Aren't Universal

Before we get too deep in colour theory, we must remember that there are many of reasons why a certain hue might convey something. Cultural or historical distinctions can be very different between people, and we need to do our research and check to make sure our colour application is appropriate. Emotional responses are inherently tricky. One cannot possibly truly know how it will affect another. We can, however, take educated guesses, and by combining colour with type, texture, layout, and the other elements of design, we can aim our emotional canon quite precisely within the audience.

Understanding the Basics

As stated, having an understanding on how certain colours work is crucial to forming great user experiences. Where we can really see this shine is in the long-form text, call-to-actions, and area distinction through contrast, palettes/schemes, and appropriate selection. Let's explore.

Contrast

Contrast doesn't only apply to white and black, but to all hues, shades, and saturations that oppose one another. When combining colours, especially text, there are aspects to take into consideration. A dark text on a light background is optimal for long readings as it reduces eye strain. Avoid similar colours at all costs; it only leads to frustration. Avoid two brightly saturated colours (such as red on yellow) as the two will appear to meld together, and text becomes blurry.

You can also use contrast to create emphasis. A reversed element or text block is great for pulling the eye to it. By strategically placing elements within our layout to a location that the eye falls naturally, and by using a bright, contrasting, colour, you can create an effective call-to-action.

Colour Schemes

Just like how you can create beautiful hierarchy with just one or two typefaces and font sizes, you can do the same with colour. Stick to a colour scheme with just a few colours, and work with them strategically. Maybe you only use white, a dark grey, and a sprinkling of orange every now and then for your call-to-action buttons. Less is more.

Colour schemes can be tricky. How do you know if your colours work together? We've known since grade school art class that you can't just pick seven random colours and call it a day; the colours just don't work together, they clash. Why?

Individual colours form relationships with one another. For example, a monochromatic relationship consists of two colours next to each other on the colour wheel (think red and orange, or blue and green). These colours share a similar chroma-the hue in relation to grey- and similar emotion. They will always play nice with one another in the overall design, but not overlaid on each other because they lack contrast. A complementary relationship, however, consists of two colours opposite each other on the wheel (blue and orange, red and green). You can find more relationships in the wheel split complementary, double complementary, analogous, triadic, etc.-and in theory, these relationships make for automatic wins, but we do find exceptions. Starting to build out your colour scheme with relationships is a great start, but not complete.

Bonus Tip

One little trick I have come across while building colour palettes to the overlay technique. Begin by selecting several colours you would like to go together (use the relationships!). You then overlay a single colour (if you'd like a warmer scheme, maybe an orange, or a purple or blue for a cooler effect) over top your selected colours. The slight colour overlay will tie all your colours together in a cohesive palette.

Choose Appropriately

We've gone full circle; we now know how colours will form relationships and play nicely with one another, but where do we start? The answer is with research. We need to start with a colour that will act as a base. Your primary colour selection will act as a jumping off point for the other colours you want to add to your palette. Is it blue? Well, blue reminds people of the sky, the ocean, the earth. It invokes feelings of depth and trust. It is masculine, tranquil, stable. So perhaps not an appropriate colour for your handmade jewellery and trinkets shop. What about red? Red is an intense colour, the colour of fire and blood. It means Danger! and Stop! but also passion and love. Maybe not the best choice for your daycare centre.

Once we have picked our base colours, the others should come fairly naturally. Use one or several of the colour relationships to start adding additional colours. Let's take a look at the Pemberton Valley Lodge website (website design by Custom Fit Online). Our base colour is the bright blue/cyan colour, picked out of their original logo. It is an excellent choice, as it creates a similar feel to the Pemberton area mountains and lakes and enormous open skies. From there we add a monochromatic colour, the dark navy/indigo. We use a complementary colour, orange, only in small bursts for emphasis and eye-grabbing. Note how these orange areas lead to hotel specials. From our two blues, we can add greens via our analogous relationship. The result is a cool, casual, yet trustworthy colour palette.

Now It's Your Turn

By strategically using colour, we are able to invoke certain emotions in users and guide them through the web product. Don't underestimate the power of colour. But now it's your turn. With your understanding of basic colour theory, go out and observe websites and apps in the wild. Hey, why is the Facebook sign-up button green? And Pinterest uses big, bright red buttons. Soon you'll begin noticing colour patterns everywhere: movie posters with orange and blue, sports team jerseys in green and yellow, fast food menus in red… colour theory is everywhere!

Filed in // Websites, Brand Identity, Design