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:
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.
Analyse your colour use
There are numerous tools out there, which can be used to test your website for colour contrast.
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).
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.
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.
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.
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.