Web design colour guide | Creative Freedom

Colours are fascinating. As children, we all loved to play with colours, whether paint or crayons. I still use apps that feature adult colouring books.

With colour, you can breathe life into any vector diagram, add substance to a non-descript design or enhance the beauty of a layout. You can also build a winning website with amazing combinations of colour. Some businesses have reported improvement in their engagement rate with the addition of a new colour palette. Similarly, the right colour contrasts can make a CTA button more effective than before.

Web designers should recognise the flexibility of colour and its impact in designing high-performing websites. In this article, we will be looking at how to engineer a various mix of colours to make your website irresistible. We will also explore everything from photography to repetition, and how even whitespace can be used creatively.

Using photography to draw attention

Many brands use colour in strategic ways to enhance their website. The beauty of colour is that it’s so adaptable, and can be applied to elements of various sizes and shapes. Most people think of colours in terms of buttons and text. While those terms are relevant, colours can also be applied through photos. The results are usually very effective in design.

Some Ecommerce websites don’t use many colours for their design. However, when it comes to the sales pages, they feature colours to grab attention. While this can be chalked up to the use of massive product photos, the main factor can be attributed to the fact that the photos are the only elements on the webpage that contain colour.

These photos contain a contrast of both dark and similar shades to emphasise the details of the product. Websites like John Lewis use photography that matches the entire web design. Unlike other websites I have seen, they don’t feature over-the-top or drab colours in the photos to grab attention. It can reduce the quality of the web design, not to mention distract users from the main goal.

Contrary to popular opinion, there are more responsive ways to lure visitors to your website than neon and dark contrasts.

Colourful text works like a charm

You can alter the colour of certain texts on your website such as the titles and subheadings. People are inadvertently drawn to areas of a website with coloured texts. If you have a feature such as a product or announcement you want to emphasise, using a coloured text can draw the visitor’s attention to it.

Coloured text designs work by leveraging hierarchy. This is an amazing design tool used to emphasise elements on a site from the most significant to the least. In application, the text alerts the observer that the message is important. In some cases, it is usually the darkest colour on the page.

Other subsequent text could use the same colour but with a smaller font size. People can tell from the difference that the larger size copy is more relevant. Where colour is the same with text below, it serves as the unifying feature. Simultaneously, colour can be used to take attention away from less important elements on the page like figures on the left-side of the title.

Creating a focal point with colourful décor

Interior designers know the focal point of any room is the first place visitors’ eyes are drawn to when they enter. In a living room, it could be the fireplace or a centrally located window. For a website, your focal point is where people look first when they land on your page.

“You can leverage patterns, colour and shape to create a focal point on your website,” says Brendan Wilde, Marketing Manager at Freeparking NZ domain names. “Shapes can be decorative. As, decorations, they can create a focal point in a design, or a definite segment without adding more dramatic elements to the design.”

When designing a website with a photography as the focal point, you can add decorative shapes with complementary colours behind the image to add intensity to the design. This works for designs where whitespace would leave an empty feeling for the focal point.

Colour + shapes + repetition = astute visual language

A visual language is the communication system that utilises visual elements like headings, shapes and colours. It is not uncommon for web designers to create a style manual (think brand bible), but a visual language is a bit more than that.

Each element in a visual language has a deep-rooted relationship with the other. It dictates the best use of the elements to provide great visual style.

Naturally, colour is a major part of any visual language. Some companies rely heavily on repetitive leaf-like shapes to brand their logo. This can be evident in their web design from the home page to other sub-pages. To add a touch of classicism, various shades of the same primary colour can be used for each leaf design.

You may choose to combine the shape with a certain colour like the common Call-To-Action on the landing page. Using the leaf shape as the CTA button can draw a user’s attention to act on the site’s expectation.

Whitespace and lack of colour as a boon in web design

When designers talk about whitespace, they are referring to negative space. One of the common errors designers make is to overlook this effective feature. Most of the time, it is seen as waste of screen space and populated with unnecessary elements.

If used well however, whitespace can transform a design and increase the benefits of your website. For instance, many luxury brands love to use it to add a minimalist quality to their branding. The layouts are easy on the eyes and they enhance the product as the centrepiece. Lack of colour also increases content legibility and highlights CTA buttons.

As you explore various uses of colour in design, try implementing these tips. From photography to colourful texts, decorative focal points, good use of visual language and whitespace; you will notice how irresistible your web design can become.