The Art of Coordinating Colours in Web Design

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.

Aaron works at Silicon Beach Training. He writes a lot about design (Photoshop, Illustrator, InDesign) and other stuff like Web Design and Responsive Web Design.

Comments

    • Cisco,
    • January 13, 2011
    / Reply

    Amazing Example! Love them. And good post.
    Sometimes i forget this important rule..

    • Marek,
    • January 13, 2011
    / Reply

    Agree. Something that is really worth to remember. The problem is, when client try to change photos by himself after the page is completed :)

    • Kobus,
    • January 13, 2011
    / Reply

    One of my clients have two colours in their corporate indentity: orange and green. I have built quite a number of websites for all their projects and initiatives and at the start of each new website I’m faced with the challenge of finding new ways to combine the colours while not loosing unity and avoid awkwardness.

    One thing I have learned is that using one good colour matching photo as part of the design (like in the examples above) does make a big difference. Thank you for the article!

  1. / Reply

    Great post and such inspiring examples!
    I agree with using your photos and design elemements to bring in that unity.
    Ultimately the site looks more polished – thanks again :)

  2. / Reply

    Great post! This is very useful.

    • David,
    • January 14, 2011
    / Reply

    Unity or Harmony, Contrast, Balance and Distribution are among the top consideration when designing anything. Color coordination is just too important to be ignored. Thanks.

  3. / Reply

    Excellent article and some great examples. Thanks!

  4. / Reply

    Very interesting article and some great examples of colour coordination… I really like the Oxford Inns and Suits site and would love to get one of these tropical Island resort sites with stunning photography. Thanks for sharing.

    • Lobo,
    • January 14, 2011
    / Reply

    Your another good article about colors. I like your approach to subjects(less mac fanboy happy about everytnig and more analytical).

  5. / Reply

    Great, tips. I been doing a lot of SEO/SEM in the past and I was pretty sure I know everything about this field but with your article I realized you can still teach new tricks to old dogs. I’ll be reading your other posts.

  6. / Reply

    A great article. The correct use of colour is probably the most important thing to remember when designing a website. Its what makes the whole website unite and overall look great. I think the use of small amounts of colour works best and definitely emphasises crucial areas of the website you want to promote most. It also looks most professional when the colour of the logo is repeated in these important areas. However this can sometimes be difficult when a clients current logo isn’t so hot. Thanks for sharing.

  7. / Reply

    This is great for portfolio/marketing websites. What about designing web based applications and choosing the right colors for them?

  8. / Reply

    Fantastic websites! I like especially the last one “Hellenic Holidays” Well, seems like I will change theme soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals