Duotone in Web Design

A look at the colour trend taking the world by storm

The modern web is full of colour-from subtle to bright ‘in your face’ tones. I’ll be taking a look at the latter. Meet duotone-the hottest colour style of 2016.

Pure duotone & other tonal groupings

Love it or loathe it-duotone is everywhere right now. As the name suggests, duotone is an image made up of two colours, usually vibrant shades are used but you can select more subdued ones if you wish.

The term duotone is often wrongly applied to images with three or four colours too (don’t ask), when they should be reffered to as tritone and quadtone respectively.

What I’ve called ‘pure duotone’ is created by altering the colours of the light and dark tones.

I played about with converting some iconic black & white photographs, such as the header image of Elizabeth Taylor (that one is tritone, the rest duo).

Abraham Lincoln

Muhammad Ali

LZ129 Hindenburg

As you can see, the results are decent considering how easy the process was. Old black & white photographs have been given a new lease of life-becoming pop art esque.

None of the images would look out of place on a site or as part of branding.

They convey a sense of happiness and merriment, even the picture of the Hindenburg disaster appears strangely jovial and somewhat calming, after a quick duotone makeover.

Next, an existing website example.

New Deal Design

This is quite a striking image thanks to the contrast between the bright pink and yellow hues, but it works well, especially with the imagery of people goofing around. I found myself smiling every time I glanced upon it (the whole point of duotone is to be fun).

Gradients

Now gradients are still duotone (or more depending on how many colours you use) but the distribution of colour is different (it is controlled by a gradient).

So the colour is essentially split in to sections controlled by the gradient line or radius.

Gradients are often used as backgrounds but are sometimes used as overlays (over another image). Gradients are as old as the hills but they are trending again in 2016.

Again I’ll show some examples that I’ve quickly knocked up.

Very quick & basic app mockup with gradient background

Donald Trump overlay

Can a gradient make Donald trump appear fun & cool? It’s a very hard task but it almost pulls it off, incredible!

Below are a couple of examples I found on the web that use both methods.

Solid Giant

Snippet

The Snippet one is a fairly standard gradient overlay but the cooling colours make it seem trustworthy and chilled. It’s an easy effect but it looks good.

Solid Giant looks a bit more complex and professional. My impression from this is that the designer is keeping up with current design trends and can execute them in a highly professional manner.

The tritone effect isn’t too hard to achieve but it looks fantastic and makes a great first impression.

Fantasy Premier League

In this one the same four colours are used across different elements of the page. This really compliments the duotone banner images for an eye-catching effect.

This was just a quick, lighthearted article. Try out some duotone effects yourself and share them in the comments, I’d be very interested to see what you come up with.

If you enjoyed this post let me know by showing some ♥, I appreciate it. Also, thanks a lot to everyone who has read my previous article about Spotify’s website UX, you guys are awesome.

I’ll probably do another history of UX on something else soon, so keep your eyes peeled for that one. Cheers.