Inspect Element » colour

The Principles of Good Web Design Part 3: Colour

Tom Kenny — Thu, 24 Sep 2009 19:23:48 +0000

This is the third part in this series of The Principles of Good Web Design. The other parts are listed below:

Colour is an often underrated aspect of web design but can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different colour combinations can evoke different emotions and reactions.

Colour design is often very subjective but it is important to keep usability in mind. Changing colour for subjective reasons may ultimately have a negative affect on usability.

Contrast

Readability relies a lot on typography but colour contrast is also key to keeping text readable. Make sure there is enough contrast between the text and the background colour or image.

Jonathan Snook’s colour tool does an excellent job of assessing colour combinations from an accessibility point of view. In real-time it displays accessibility ratings based on WCAG guidelines.

Good Examples

As you can see everything is perfectly readable and all the examples above pass every standard on Snook’s colour contrast tool.

Bad Examples

All of these examples of inadequate levels of contrast between the text colour and the background colour making it much harder to read. This is especially evident as the text gets smaller.

Thankfully this doesn’t seem to be a huge issue on the web these days as most designs at least adhere to some of these rules resulting in comfortable reading conditions. That being said, there are a sites and designers out there that fall foul of this basic concept. Don’t be one of them.

Importance

Colour can be used to guide users to where you want or need them to go. For example, using more noticeable colours such as red or orange for primary links and blue or green for secondary, supplemental links is a good way of increasing the chance of a user to follow the links that are most beneficial. This is often known as a ‘call to action’.

Amazon colour importance

The specialists in this area are Amazon and they use yellow coloured buttons for their ‘call to actions’ and washed out colour for their secondary links as seen on the ‘Add to Wish List’ button.

Colour Examples

One of the main ways to convey the meaning of your brand is through the use of colour. For example, a toy company may use bright and vibrant colours whereas a jewellers will likely use more elegant colours such as something similar to gold.

Toys R Us

Toys R Us, as you would expect, have a very colourful, fun and vibrant colour scheme.

Mail Chimp

Mail Chimp uses nice big orange and green buttons to guide the user to where they want them to go. The orange buttons represent the primary links and the green ‘View a Demo’ button is a secondary and supplementary link.

This is the second part in this series of The Principles of Good Web Design. The other parts are listed below:

A little while ago, we looked at 42 Very Colourful Websites which you may also want to check out.

42 Very Colourful Websites

Tom Kenny — Mon, 31 Aug 2009 19:13:11 +0000

Great use of colour can really make a design stand out but deciding on an effective colour scheme can be a difficult thing to achieve. The following examples all use a number of different colours to create a visual impact which is the first thing a visitor is likely to notice. If the colours blend well together then that initial impact will almost always be a positive one.

Make Photoshop Faster

FeedStitch

Tim Adler

CTL

F91W

N.Design Studio

ilovecolors

Carbonmade

Marcos Xotoko

Work Sucks

Mirasim

Webdesigner Depot

Colourpixel

Aurelien Reaut

Moradito

Cult Foo

Inspiration in a box

Get Me Fast

The Escape

Web Designer Wall

Summertime in Tennessee

Design Moves Me

Cosmive

Neutron Creations

Juan Diego Velasco

Design Slurp

AdaptD

Twenty2Designs

Drew Wilson

Mooty Graphic Design

Captainjansson

Work at Play

Victor Namba

Foehn

Duoh

Beautiful 2.0

Rareview

AeroFX

Casio Labs

Valp.now

Family Vacation Survival Guide

Raduceuca

Web App Colour Tools & Resources

Colour in web design can be a difficult thing to get right. However, there are some great tools to get you started particularly if you’re lacking inspiration.

Kuler

COLOURlovers

ColoRotate

Palette Generator

7 Techniques to Improve Your Web Designs

Tom Kenny — Mon, 29 Jun 2009 08:00:23 +0000

In no particular order (except the first one) here are 7 ways that you can improve your web designs:

1. Learn to Code HTML and CSS

This probably belongs at number one as it’s probably the important thing to consider when designing for the web. Having an understanding of how sites are actually rendered in browsers prevents you from going crazy with a design that just will not work for online use. By keeping up to date with what is possible with CSS allows you to implement techniques into your design that may otherwise have not been possible.

Great Examples of Designs which had CSS in Mind

Here are some great examples of the use of the most up to date CSS3 techniques:

Atebits uses text-shadow on text, negating the need for the use of images. They also use -webkit-transform and -webkit-transition to add some animation to the three icons, which is currently only supported in webkit based browsers such as Chrome and Safari.

Elliot Jay Stocks uses a CSS3 method known as @font-face to allow the browser to download and use a specific font, in this case Graublau. This also negates the need to use an image.

2. Add Detail

Good use of detail in a web design can be the difference between a good design and a great one.

Examples of Detail

Metalab uses a good mix of shading, gradients and shadows to addd extra detail.

We Follow‘s subtle use of gradients and shadows adds effective detail to it’s user interface.

3. Effective Use of Whitespace

There’s nothing worse that trying to read something but the design has cramped the text right next to other elements on the page in order to fit more detail in a small space. It leads to a frustrating experience. Good use of whitespace can give elements such as text room to breathe, reducing the strain on users’ eyes and making for a pleasurable experience.

Examples of Effective Use of Whitespace

Soccernet makes very good use of white space in their articles. As you can seem the text is positioned away from other elements on the page improving readability.

Usability Post uses whitespace similarly to Soccernet.

4. Use of Imagery

It’s no good if you have a killer design but use poor quality images. Images should complement the design to help sell a product or convey a meaning or even just to look attractive.

Examples of Good Imagery

Palm uses a beautiful image as the header of the Palm Pre product page. This does a fantastic job of showing off the product in a bright and vibrant way.

TomÃ¡Å¡ Pojeta uses illustrations to really bring his site to life.

5. Making the Most of Colour

Colour is often an underused property of web design. More attention should be applied to colour as it can help guide a user in the direction you want. For example, links on a page should be a different colour from the main text to help distinguish it as a link. If links are are of little contrast to the text then how can you expect users to notice them and click through to where you want them to go?

Examples that Make the Most of Colour

Sam Brown uses multiple colours on a dark background as well as a coloured background on hover to clearly display links.

MIX Online has colour coded navigation that also changes the appearance of whatever page you are on to the relevant colour.

6. Don’t Forget about the Footer

Footer designs are often neglected due to designer’s perception of the importance of them. They can be more useful than you think as they can contain extra information that doesn’t belong elsewhere on the page. They are also a good way of guiding users to other content on your site.

NOTE: I haven’t forgotten about the footer for Inspect Element! I will be adding to it in the coming weeks.

Great Examples of Footer Design

Jason Santa Maria places plenty extra information in an oversized footer.

Web Designer Wall tries to keep the user on the site by linking to recent posts and recent comments. This can be a particular technique on a blog where the user scrolls to the bottom of the page after reading an article.

7. Clear Navigation

Navigation is one of the most important areas of a site as it is the primary way of getting using the site. By using clear easy to use navigation, you are improving the usability of your site and reducing frustration as users try to find the content they are looking for.

Examples of Clear Navigation

Disambiguity uses a tab system to clearly define what section the user is on.

Dabs uses a tab system too but also uses a sidebar on the left to dive deep down into sub-categories which are colour coded for even more definition.

Always Look for Ways of Improving

Hopefully you already use these techniques in your designs as they can go a long way to improving a design. If you don’t then take not of it all. Do some research and find out who else uses these methods well so you can learn and try to improve on what’s out there.

20 Great Examples of the Use of Brown in Web Design

Tom Kenny — Mon, 15 Jun 2009 08:00:58 +0000

This is an extensive follow up to a post that I wrote on my own personal blog a little while ago before Inspect Element was even a twinkle in my eye. Now time to let the designs to do the talking:

Forest River Timber Homes

Tuts +

Sergio Noviello’s Portfolio

Lesly G’s Portfolio

Typechart

Tea Round