Why we’re indulging in duotone images
Duotone images have hit the mainstream in 2016 and it’s a web design trend we see carrying on well into next year. Deriving from the world of screen printing, the ‘duotone effect’ is a greyscale image over-laid (or printed) with a block colour, to create a clean, vibrant effect which is perfect for hero images.
Why do we love them so much?
Duotone images combine all that’s great about a hero image, without distracting from the text or key messages that you want to display over the top. They give context and add interest to a webpage, but prevent any legibility issues. We’ve used a duotone image on our homepage, so that browsers can enjoy the historic façade of our office, whilst reading our welcome message. Without them even realising, we have welcomed the reader, delivered a key message and given them an insight into the sort of company we are through a clever combination of colour, image and words ~ that’s the real power of duotones.
As a design technique, using the duotone effect can really bring a website to life. The combination of visual image and colour can set the tone of a page and convey the personality of the brand. Especially effective when you have a number of images to display next to each other, or want to guide the users attention towards the foreground information , duotone images are becoming a staple design tool for many big name brands.
From Adidas to MailChimp, Tumblr, Spotify and many more besides, brands renowned for their online presence and brand identity are using duotone images to captivate their audiences.
Here are four places we think duotone images can really bring a website to life:
- Homepage heroes: Don’t choose between images or text, duotones allow you both
- Long scroll websites: Break up content and give CTAs more stand out with bold colours
- Service tiles: Displaying several services in a way which is clear and visually appealing
- About us: Brighten up a page of mugshots by playing with colour