The Art of Coordinating Colours in Web Design

First impressions are important, and the most immediate way of creating an impression on the web is colour. Colour is arguably the most important design property if not on a visual level, definitely on a subconscious one. Different colours create different moods so it’s important to think about how you use them.

What happens though when you use photographic images in a layout; they have colours in them too. A connection between the colour of layout and photo elements needs to be found or the design won’t look right. Just like poor use of a colour scheme, failure to consider this balance can leave a bad first impression too.

The Art of Coordinating Colours in Web Design

Coordinating Colours

Colour coordination between layout and photo elements in a design is a way of building unity. This is also a great design tool; high quality photographs will always look more interesting than text. Photo images can give focal points to your layouts, showcasing the subject of the web site. Good photos can make your site standout.

In many cases photographs might have been the design inspiration, so fitting the images in should be relatively simple. Designers are likely to choose a colour scheme to fit around images instead of the other way around. Colours don’t always have to be an exact match. Seeing similar colours in a photograph and the layout will work in the same way. Our eyes are able to recognise a colour relation by instinct. The photo needs to look realistic, so it’s better that the colours are slightly off as opposed to the image not looking right and being noticed for that reason. Remember we have some flexibility with photo images, if the colours don’t look quite right they can always be altered in Photoshop.

Hotel and Holiday websites in particular can make good use of this technique. This is mainly through the large high quality images used to showcase their facilities, but also because they need to create a mood of some sort. Some level of harmony is needed for them to be successful, let’s face it who wants to stay in a hotel where you can’t relax?

Hotels often apply interior design throughout their buildings (individual rooms, lobby area, bar area etc.) Photographs of hotel areas contain these colour elements so it makes sense to incorporate them into a website as visual characteristics. This helps to continue and reflect the brand, the business’s visual identity.

Large Amounts of Colour Coordination

Some websites use images with variations of one or two colours in their layout. It might even be the case a design has been derived from a specific photograph. Generally photographs for hotel sites will represent what they‘re all about, it establishes a mood, presents the subtle details that only an image could.

Coordinating images and layouts around similar colours provides a strong connection for the user, it employs maximum unity. The colour scheme is present throughout all the site elements and the visual branding of both the site and hotel can be conveyed together fully.

Ratelfountein
Ratelfountein

Camp Allen
Camp Allen

Almanara Resort
Almanara Resort

Hotel Vigor
Hotel Vigor

The Five Graces
The Five Graces

Oxford Inns and Suits
Oxford Inns and Suits

Small Amounts of Colour Coordination

Smaller amounts of colour coordination can be used to highlight specific parts of a layout. This can give additional focal points, with surrounding layout colours acting like a frame. Layout elements containing this accent colour such as logos are given much more impact as a result. Emphasis or importance is placed on the colour for communicating the design. Contrasts can be created through the colour differences in an image while still keeping the overall unity.

Using this technique requires much more thought about a colour scheme. It works especially well in monochrome schemes where there is more flexibility to get the balance right. A single colour can then be associated with the site for branding purposes. Lesser amounts of a colour can often have a greater effect.

Alpine Meadows
Alpine Meadows

Tropicana Las Vegas
Tropicana Las Vegas

The Urban Suites
The Urban Suites

Albert Hotel
Albert Hotel

Utah Travel
Utah Travel

Opal Cove
Opal Cove

The Beverly Hill Hotel
The Beverly Hill Hotel

Coordinating Colour with Background Images

Unlike before where layout and photographs were physically separated, using a background image is the exact opposite. Layout elements are built on top of a photograph and as such will have to fit in with the colour scheme established by an image regardless. If used properly, standout sites can be created with this technique. A unique photograph used as layout backdrop can in turn create unique looking websites.

This has two main benefits. First the site’s purpose can usually be communicated clearly through the background image. Secondly the feel of a website can be drastically changed when the interface elements are less visible. Instead of being built around a standard site structure, interface elements are surrounded by more natural and organic visuals.

The choice of a colour scheme needs to be considered carefully in this scenario, achieving a balance between clear communication and design unity.

Strong contrasting colours could be used to make elements noticeable, but too much will make the design look uncomfortable. Background images tend to force more subdued layouts. They’re a focal point also, used incorrectly, they could over-dominate the design. Hotel websites can take advantage of this to showcase both their business and environment.

Costa Navarino
Costa Navarino

Soaky Spa
Soaky Spa

Little Palm Island
Little Palm Island

New York Palace
New York Palace

Hellenic Holidays
Hellenic Holidays

Conclusion

Coordinating the colour between layout elements and photographs is a great way at creating unity. It makes everything look like they belong, comfortable with each other in the layout. Moods and atmospheres created by photo images can be carried out across a whole design. As you can see this technique is used commonly throughout travel industry websites, this is just a demonstration that could be applied to all sorts of website.

What do you think of the examples? Have we missed any? Can you think of other types of sites that use this technique as well? Let us know in the comments below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.