Skip and go to main content

Design & Technology October 12, 2015

The Importance Of A Homepage Design: Color & Images

Image

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 dos, don’ts and the benefits of providing relevant, personalized experiences.

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

Pick your palette carefully

Colors are essential to any website; they can make a webpage ‘feel’ like part of your brand through color 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 colors which you’re using on your website should be consistent with your brand style guide. Some colors 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 colors 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 colors, buttons, hyperlinks, etc. should be styled and used:

Image

 

Color accessibility

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

For accessibility reasons alone, it’s important to consider how color-blind users view your website. For example, below is a screenshot of Dept 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 colors ensures that even for color-blind users, the call to action buttons still contain enough contrast to stand out from the page.

Analyze your color use

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

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

Furthermore, if you’re using applications such as Photoshop to produce your designs, you can simulate color 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

Color semiotics vary across cultures and can impact user expectations. Color 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 color usage on your website, however, do not feel too restricted by the subtle meanings of every color you wish to use.  Auditing local sites to see common color combinations will help, as will adhering to the rules of the most important color 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. Optimize

Optimize 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.

Dept’s  Experience Design

Dept Design & Technology’s team of highly experienced UX experts and experience designers specialize in creating sites which fully support both user and business goals.  Contact us for further information about our services.

Questions? We are here to help!

Whoops!

If you’re reading this, you unfortunately can’t see the form that’s supposed to be here. You probably have an ad blocker installed. Switch the ad blocker off in order to see the form. Still encounter problems? Open this page in a different browser or get in contact with us: [email protected]