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.
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.
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.
The one place where a splash of orange is used? The ‘add to cart’ button, for obvious reasons.
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.
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.
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.
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.
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).
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?
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.
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.
9. Ghost buttons
A feature of modern web design on desktop, in green again.
10. Calls to action
‘Visit store’ call to action
11. Picking out breadcrumb trails and filters
This is a nice way to keep customers oriented.
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).
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 even uses this tactic in the checkout, again using an orange banner.
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.
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.
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.
And 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.
18. Currys – checkout progress indicator
Another bit of practical colouring here. Many ecommerce sites do this.
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.
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.
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.
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.
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.