The Importance Of A Homepage Design: Colour & Images

Welcome to the third and final article in our series about effectively designing website homepages. In our previous posts, we provided advice on how to make the right first impression and explained the the dos, don'ts and the benefits of providing relevant, personalised experiences.

In this final post, we explain the importance of your colour and image choices.

Pick your palette carefully

Colours are essential to any website; they can make a webpage ‘feel’ like part of your brand through colour association and also attract users’ attention to prominent content and calls to action. However, if used in excess, they can bring the entire website to its knees by distracting users, visually obscuring content and even confusing users if not used in a consistent pattern, site-wide.

The colours which you’re using on your website should be consistent with your brand style guide. Some colours and fonts, however, may have to be adapted for web.

As such, it’s important to have your own digital style guide, which outlines the primary and secondary colours to use throughout the site, as well as rules regarding web fonts, call to actions, image sizes etc.

These rules should provide a framework foundation for where and how colours, buttons, hyperlinks etc. should be styled and used:

style

Colour accessibility

Roughly 1 in 12 men (8%) and 1 in 200 women in the world are affected by colour blindness. This equates to approximately 2.7 million people in the UK are colour blind (about 4.5% of the entire population).

For accessibility reasons alone it’s important to consider how colour blind users view your website. For example, below is a screenshot of Building Blocks' client Celebrity Cruises' homepage.

Notice how we’ve used blue call to actions against paler blue/white backgrounds here; the level of contrast between these two colours ensures that even for colour blind users, the call to action buttons still contain enough contrast to stand out from the page.

cc

Analyse your colour use

There are numerous tools out there, which can be used to test your website for colour contrast.

A useful desktop application (for Mac and PC) can be installed from Colour Contrast Analyser. There are also web versions available from places such as Snook’s Colour Contrast Analyser.

Furthermore, if you’re using applications such as Photoshop to produce your designs, you can simulate colour blindness using the pre-set filters available.

All of these tools provide a contrast rating in the form of an ‘A’ score. In terms of contrast standards, you should aim to pass AA standards as a bare minimum. AAA results are better however, they require a lot of contrast -  too much of which could have a negative impact on your designs.

The tests also differentiate between body sized copy and 'large' text which is 18pt and above (or bold and larger than 14pt).

Think global

Colour semiotics vary across cultures and can impact user expectations. Colour connotations vary greatly depending on culture, for example, green can signify growth and harmony in western cultures, but in China is signifies disgrace and in North Africa, corruption.

It is important to be aware of colour usage on your website, however, do not feel too restricted by the subtle meanings of every colour you wish to use.  Auditing local sites to see common colour combinations will help, as will adhering to the rules of the most important colour conventions, such as those with religious connotations.  

Images

We all know that a picture can paint a thousand words. Well selected images have the ability to communicate an enormous variance of messages. They can be used to convey to users what your site is about, create a sense of belonging, re-affirm your brand, highlight product/service features, and establish credibility.

There are a few golden rules, though...

1. Less is more

Use them sparingly and ensure the images you use can be re-used in the same contrast ratio in multiple places throughout the site. For every new blog article you create, you don't want to have to upload five different images at different aspect ratios, as the process to maintain these moving forwards becomes monotonous.

2. Quality vs. Size

Try to use the best resolution possible for the image as you can, making sure it is clear for the user to see every detail. However please take note that the file size of the image will increase proportionally with resolution. Therefore, try to find a happy medium between file size and resolution as meaty image file sizes can hamper your site load times impacting the overall user experience.

3. Optimise

Optimise your images! It always surprises me how many users forget this crucial step. The compression of images is often the first quick win step to reducing page load speeds.

There are a lot of tools available out there right now which compress your image file sizes for free, saving you those extra KBs off your site’s page weight and load times. If you’re working in Photoshop make sure you save your files out using the ‘save for web’ option and adjusting the compression controls (you’ll be able to see the impact on file size within the window itself). For Internet based tools try Optimizilla.

4. Galleries

If you find yourself in a position where you need to use lots of images (i.e. a recent event/exhibition), use a gallery. If implemented correctly, the larger resolution images can be delayed to load on request, therefore improving the overall site performance.

Building Blocks' Experience Design

Building Blocks' team of highly experienced UX experts and experience designers specialise in creating sites which fully support both user and business goals.  Contact us for further information about our services. 

You may also be interested in...

 The Importance Of Homepage Design: First Impressions

The Importance of Homepage Design: Content

How To Turn Analytics Data Into Actionable Business Insight

Free Web Personalistion eBook: Making Digital Human

Making Digital Human  download your free 70-page eBook that explores how to transform the online experience with web personalisation

Any questions?

If you need more information or have any questions just get in touch and we'd be happy to answer them for you.