Design Delight 8 - Colour Stories
Tell a colourful story.
You know when you browse a web page and it flows so well that you find yourself captivated and pleased at the same time? Things pop. Other things blend in perfectly. The whole viewing experience is just so pleasant to the eye. You feel delight as you scroll down to explore more. There’s a good chance the colours and pictures in this experience were chosen systematically to help you feel this way.
In the last insight, we looked at using the colour wheel to create colour schemes for your brand, logo and icon designs. Now let’s add another tool to your inventory for designing captivating and flowing colour schemes: photographs.
There are two ways of leveraging photographs/pictures. We can either start with them, or add them in.
Option 1: Start with the photo
With enough practice creating colour schemes with the colour wheel, you’ll have developed a sense for which colours go well together. You’ll want to combine this with the knowledge of which colours are known to illicit which emotions.
Now you can use this combined knowhow to create colour schemes from actual photographs, and then use those same photographs in the design of your customer’s visual experience. That will help create the immersive, flowing visual effect we’re after.
First you want to find an image that resonates with the theme of your message. Let’s say you’re designing a web page to compel people to live more naturally. After you find your image, you upload it into an editing software. We like to use the Adobe suite but there are many options available.
Once your image is ready, you can use the eyedropper tool and hover it over various areas of your image. When you hover over a colour that you like, select it and add it to your colour palette. This is where your newly developed sense of harmonious colour schemes comes into play. You’ll want to choose between 2-6 colours.
Let’s look at the example below. We’ve selected a picture whose theme and colours exude nature, happiness, freedom, energy, trust and even some curiosity (based on post 6). These are all feelings we want our audience to feel.
Next we’ve used our eyedropper tool to pick out five colours from the image. You’ll notice that this colour scheme is quite similar to something we can pick out from the colour wheel.
Now that we have our colour palette, we can apply these colours as primary, secondary and accent colours to the other visual elements of the experience we’re designing for our audience. Again, this method takes a bit of practice and requires a developed sense of colour harmony.
Option 2: Add the photo
Let’s say you’ve already chosen your colour palette, and now you need to find fitting images. We’ll use a professional client as an example. They specialize in government relations. Here’s their colour scheme:
Here we have a more serious colour palette that exudes trust, reliability and professionalism. Our client specializes in helping entire industries increase their growth potential by influencing government policies. We found a perfect picture that gave us that ‘big picture’ feeling of industry growth. Our aim was to use it on the header of the home page, but the colours were off. They were too far on the warm spectrum, and didn’t match our colour palette.
With just a few clicks of a mouse, we were able to optimize the colour scheme of the photo to better match our colour palette:
To achieve this effect, we uploaded the image into Adobe Photoshop. Next we added a photo layer.In the layer we selected one of the colours from our colour palette and adjusted the density to around 80%. This removed a lot of the reds, oranges and yellows and replaced them with the colder more serious tones and hues of blue and gray.
Last, we needed to place our heading text over the image. We used an image overlay: a semi trasnparent layer of colour between the image and the text overtop. This creates enough contrast for the text to be legible. By using one of the colours in our colour palette for the image overlay, we further reinforced the flow of colours in the visual experience.
Notice how the overlay becomes darker and more opaque as you look down the page. This creates three effects. First, it reinforces the colour palette more. Second, if creates balance between the simplicity of the opaqueness, and the intricacy of the detailed background picture. Lastly, it suggests that there is something below this large header image, prompting website visitors to scroll down.
When they do scroll down the page, they’ll see a continuation of visual elements infused to some degree with the colour palette above.
Using photos to create and extend the colour theme on consumers’ viewing experiences has powerful effects. It creates a sense of harmony and flow. It makes the viewing experience more consistent yet immersive. As a bonus, if your colour palette is similar to that of your logo and brand, you’re further enforcing both.