As we continue examining what’s hot in the website design world heading into 2018, we’ll take a look at color. So far, we’ve covered two trends — hero images and brutalism — and this third trend can be combined with either of the other two. 2017 has seen an uptick of duotone color schemes — as the name suggests, that’s a two-color design. Many times, these two colors are blended together to form a gradient. Quite a few companies have hopped on the duotone bandwagon as you’ll see in the examples below.
Solid color duotone designs
At its core, duotone designs feature two colors used prominently in a website’s layout.
Dropbox
Dropbox is one of the major names making use of the duotone trend. Their home page (for new visitors and logged out users) features several sections of bold, two-color backgrounds. Images are used throughout the page but the primary visual focus is on the two-color background.
New York Times
Like many longstanding newspapers, the New York Times website features a very traditional, conservative look. They’re a lot more bold in their advertising, however, as seen in this gold-and-white New York Times ad on Facebook.
Gradient backgrounds
Taking the two-color trend a step further, gradient backgrounds are becoming increasingly popular in website design. Rather than using two solid colors, a gradient blends two colors together. The result is a spectrum of color from the first to the last.
Spotify
Perhaps the leading company in duotone design, Spotify is well-known for its use of gradient art throughout its website and its app alike. Spotify also uses other forms of duotone imagery that we’ll discuss further later in the article.
Pitney Bowes
Pitney Bowes uses gradients throughout their site, in the hero image at the top of their page and in other images below the fold. It’s common to see gradients used in combination with the hero image trend, and the Pitney Bowes site is no exception.
Stripe
The online payment giant Stripe uses a bright, bold gradient across the top of their home page. Dark-colored gradients work well behind white text as seen here.
Pantone’s 2016 color of the year
Perhaps the ultimate compliment to the gradient trend, in 2016 Pantone selected two colors — rose quartz and serenity — as their color of the year. Using them together as a gradient, Pantone described the color combination as “an inherent balance between a warmer embracing rose tone and the cooler tranquil blue.”
Duotone gradient maps
A gradient map is an effect that applies dual colorization to a photo. In other words, rather than black-and-white, a duotone gradient map uses two other colors instead. For example, the image at the top of this page uses an orange and navy gradient map, achieving the black-and-white effect but in color.
Spotify
At first it might seem strange to mention the same company twice in this article, but Spotify popularized the use of duotone gradient map artwork. A quick Google image search for “Spotify gradients” as seen above reveals numerous examples of Spotify using gradient map artwork across their website, music app, and advertising. Spotify began using the gradient map effect in 2015 and the trend has caught on elsewhere since.
Holm Marcher & Co.
Holm Marcher & Co., a Denmark-based agency, provides a great example of a beautifully-constructed duotone gradient map. They use a deep red and navy color palette consistently throughout their website, making use of vivid hero images.
MailChimp
MailChimp makes use of the gradient map effect on their home page. Gradient map colors don’t have to be drastically different to achieve the effect well, as seen in the subtle example above.
These three duotone color trends are bold but they’re all rising in popularity. What do you think of them? Let us know in the comments.
Want to see more website design trends? Visit mpwrdesign.com/trends for more ideas.
