Colour plays an important part in web design and ecommerce.

From little UX quirks and best practice, to stylish branding and aesthetics, I've rounded up 23 uses for colour in ecommerce.

1. Virgin America - green for validated fields

Let's start with something simple but beautiful. Upon validating my data entry, Virgin America turns each field green.

Purple is also used to highlight a field that hasn't been completed yet, as I click into it.

virgin america

2. ASOS - flagging up sales in a mega menu

You might say this design touch is almost imperceptible, but using red text to highlight sales and savings in a mega menu will catch the eye.

A great way to encourage increased browsing and basket value.

asos website

3. Nike - showing off product and encouraging add to cart

I've included Nike for its conspicuous lack of colour. The black and white design lets its products impress with their own colour.

nike homepage

The one place where a splash of orange is used? The 'add to cart' button, for obvious reasons.

nike product page 

4. The Trainline - contrast, clarity, fun

The combination of bold colour and smart iconography makes the Trainline's app and website easy and fun to use.

Contrast in the booking engine allows users to methodically follow the booking process, taking one step at a time without fear of making a mistake.

trainline app

5. Pure Cycles - product differentiation

Pure cycles sells bikes online. What the retailer understand very well is the way that colour can be used to differentiate between products or present them in an appealing way.

Lots of these bikes have similar elements (certainly in appearance), so using different colour on the wheels and frames allows Pure to create a diverse looking catalogue that the customer is not bored to browse.

There's something for everyone, rather than an academic exercise of distinguishing between materials and detailed specs.

pure cycle

This approach extends to cheaper products, such as grip sets. Pure Cycles displays all the colours together, to aim for high impact from an ostensibly functional and boring item.

pure cycle products

When it comes to Pure Cycles' glow bikes, it really goes the extra mile to make product imagery stand out.

Sales is all about the product, so making it look great on an ecommerce site should be aesthetic priority number one.

pure cycles

6. Pelican - more contrast and comprehension

A brand with rich heritage in design, it's unsurprising that Pelican's ebook-buying website is bold, simple and uses colour to instantly convey the distinctive clarity of Penguin's non-fiction house.

This clarity helps reassure the customer that reading a book on their personal device (possibly a smartphone) will be an easy and enjoyable process.

Clarity through contrast is something that many subscription and service businesses try to achieve, as these are often interfaces that the customer expects to use frequently, and wants to enjoy using (e.g. Spotify).

pelican library

pelican book

Though you might regard this as a publishing website, it still sells stuff through a checkout - maybe you'd like to emulate its chunky design?

pelican checkout  

Houzz - branding & conversion

Houzz isn't strictly an ecommerce website (and app), it's a marketplace where consumers can find designers, architects and products.

But apart from the lack of a checkout, there's lots of features here that are directly transferable to a 'traditional' ecommerce site.

The site and app's UX revolves around the use of brand colouring (green) to highlight certain elements in the design. It's a very effective way of encouraging or reassuring the user whilst asserting the brand.

Lots of ecommerce sites do this, but Houzz takes it to the nth degree.

7. Highlighting products in UGC

Green is used throughout the very good Houzz app. Of note are the green price tags that signify products that can be clicked on, within photographed interiors.

houzz app

8. Highlighting reviews

This is often done in orange, but Houzz uses brand colouring to pick out reviews, bringing some social proof to the selection of designers and architects.

highlighting reviews

9. Ghost buttons

A feature of modern web design on desktop, in green again.

ghost button

10. Calls to action

'Visit store' call to action  

call to action - houzz

11. Picking out breadcrumb trails and filters

This is a nice way to keep customers oriented.

houzz breadcrumb

12. Product rollovers

Another piece of UX assistance. Here Houzz highlights the save button (for creating a wishlist of sorts) and the email icon (to send the product listing to a friend).

rollovers houzz

13. Wish - discount flashes

Wish is an ecommerce website and app aimed at bargain hunters.

Its heavily discounted and promoted products and highlighted with orange flashes to show percentage discount, number remaining, and time remaining.

wish app  wish app

Wish even uses this tactic in the checkout, again using an orange banner.

wish app

14. Helbak - alternative to white space

Helbak Ceramics uses pastel shades to back product photographs on the hompage.

This helps to delineate space and perk up the overall design, as well as add lustre to the products.

helbak

15. Best Buy - flagging items in your cart

This is standard procedure - a cart that highlights when it has items in it, so the user knows to checkout.

A lot of sites do this - here's Best Buy using its brand yellow, which it also uses for its 'add to cart' buttons.

best buy

16. Crayola - branding & sheer fun

No other menu will give you this much joy in ecommerce. If websites should reflect their brands, Crayola nails it here.

crayola website

And on mobile

crayola on mobile

17. Flipkart - highlighting notifications

Notifications are becoming more common in ecommerce, a messaging feature used to flag up offers to customers, which are often also pushed to app users.

Flipkart uses yellow to make the bell icon stand out.

flipkart

18. Currys - checkout progress indicator

Another bit of practical colouring here. Many ecommerce sites do this.

currys 

19. Lush - product contrast

We love lush (see this article). Like the Nike example above, Lush's copious whitespace allows its colourful products to shine.

lush website 

20. Kayak - making sense of a booking engine 

Booking engines can be dauntingly rich in information. Kayak uses its brand orange to pick out important features or information.

It also uses a secondary colour, green, for persuasive elements such as savings and reviews.

kayak booking page 

21. Odd Pears - product illustrations

I haven't seen many ecommerce sites do this - use illustrations instead of product photographs. Obviously, this will only work for a predictable commodity such as socks, but here it is quite effective.

The patterns are given extra vibrancy in 2D and the uniformity between the images makes users want to collect them all.

Adding colour swatches underneath each image adds to the attraction.

odd pears

22. IKEA - checkout errors

Another standard feature, using red to highlight where a user has missed a field or given incorrect information.

Some checkouts only use red text and have generic messaging - IKEA is much clearer, bordering the field in red and including an intstructive message in red.

ikea checkout

23. AO.com - colour coding products

AO.com uses colour well, with its brand green picking out key features such as delivery information and calls to action.

The site also adds the energy rating flags of each appliance (traditionally coloured green to red depending on efficiency). This allows energy conscious users to quickly pick out the best machines.

ao.com 

Ben Davis

Published 18 July, 2016 by Ben Davis @ Econsultancy

Ben Davis is Deputy Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1109 more posts from this author

You might be interested in

Comments (0)

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.