Design Spotlight: Design with Gradients

A design trend we're loving.

We’ve talked about branding trends to watch for in 2017, but one technique in particular has made an impressive and unexpected comeback; design with gradients. This previously outdated technique has evolved into a trend that’s being utilized by brands big and small—and we’re not mad about it.

Better described as a color transition, they primarily uses 2-3 bright, analogous colors (AKA neighbors on the color wheel) so that the shift is smooth and vivid—never muddy. This makes them more natural than their predecessors which often included several colors that forced the transition and lost the punchy ombre quality. The transitions are also happening more organically as opposed to sharp diagonals or forced fades. The result is a smoother, more natural looking color field. 

Design with Gradients: Who stands out?

These color transitions are a bright breath of fresh air for an otherwise outdated trend. Plus, it’s being leveraged on a large scale, not just logos. It appears in web design, UI/UX and more. Here’s some moodboard-worthy examples from brands that have embraced and owned this popular trend.

INSTAGRAM

Instagram logo

Instagram wasn’t the first to experiment with these modern transitions, but they were the first to bring it onto a broad conversation. The rebrand was controversial, but despite your opinion it’s been a success that’s debatably a source of inspiration the trend as a whole. 

HULU

Hulu logo

Hulu’s beautiful new platform & interface champions this technique everywhere from its logo, to UI/UX. The overhaul accompanies a shift in Hulu’s services. No longer the go-to for next day TV,  they’ve become their own provider. Live TV, no cable box and affordable monthly plans. The new look and feel supports the breakthrough in TV and gives the platform a vibrant, energetic feel. Their design with gradients emphasizes splashes, overlays and bright transitions.

Hulu home screen
Hulu gradient screens
Design with gradients is back in style! Blend on, designers. Blend on. Click To Tweet

SPOTIFY

Spotify brands their playlist covers and banner images with transitions, vivid color overlays and even simple shapes with contrasting gradients. It gives Spotify ownership through a branded approach while letting the playlist or artist still be the hero. It doesn’t overtake the subject matter, just enhances the existing personality. It’s a great compromise between maintaining brand standards and letting the album art shine.

Spotify overview screen

ASANA

This beautifully designed project management service has the creation of energetic color transitions down to a science. Visible everywhere from the logo, to website design to video, this design with gradients takes on a life of its own— that support’s Asana’s brand messaging.

Asana dashboard
Asana gradient colors

NYC Pride

The NYC Pride website is all kinds of beautiful. They’ve integrated the trend on both a visual and conceptual level. As you scroll through the header images, the colors transition through a rainbow of gradient overlays to echo the pride flag.

NYC Pride home screen
NYC pride website
NYC pride LeAnn Rimes
Design with gradients: NYC Pride's website is really taking things to a whole new level! Click To Tweet

BLEND ON, DESIGNERS. BLEND ON. 

Cheers to recycling an old technique to create new, dynamic colors. Gradients give us flexibility that flat colors don’t. In a world saturated with makers and creative energy, this trend gives us the ability to curate something more unique and own-able than pantone swatches. As is the key with all trends, it’s all about taking the concept and making it your own. Think about the psychology behind colors, conceptual uses of design with gradients and how to blend this technique into your brand story. 

Thoughts or Questions?

Our blog does not accept comments, but we want to know what you think!  Tag us on Twitter to get the conversation started or contact us.