Don’t Be a Sad Turtle: Using Gradients in Your Website Design

The web design world has spoken: flat color is out and gradients are in, baby.

It seems like every brand doing a website or app redesign this year has picked up on the gradient trend. No more big blocks of a single color, but two-colored gradients gently fading into each other. Look no further than project management app Asana or sales platform Hubspot‘s website for examples of how intentionally using gradients with your brand colors can help contribute to a fresh, fun design.

It’s not all roses, though. Over-using gradients can make your design inconsistent, difficult to understand, or just unattractive. Here are my top 5 tips for using gradients effectively, along with some examples from the biggest companies in the world who’ve done it wrong.

Limit Your Design to One or Two Gradients

Hulu’s much-maligned app redesign has jumped on board the gradient bandwagon. The consensus seems to be that it’s so pretty but extremely difficult to use. Having used the app myself for a few months, I agree that the user experience is terribly annoying – the chunk missing from my wall from when I chucked my Apple TV remote at it can attest to that – but it’s also not particularly attractive. Why not?

Gradient overload.

Some are two colors; others are three or four. Some are linear; others are radial. There isn’t a repeated color in the bunch. Not only are there already a billion gradients in the design, the app also creates its own new gradients automatically for each show and movie. That’s right: infinite gradients.

If you want to incorporate gradients in your design, please just choose one or two to use consistently.

Use Your Brand Colors

It’s like the designers at Hulu got the memo that gradients are cool again, but that’s the only memo they got. The Hulu app is filled with so many huge, beautiful, different gradients that it’s difficult to even know you’re still in the same app as you swipe through them. Instead of using Hulu’s well-known bright green as a base, the designers threw us an entire rainbow of gradients with nothing tying them together.

The lesson here is to pick a few colors from your brand’s existing color palette for your site’s gradients.

Don’t Let Gradients Get in the Way of Your Message

Another example of gradients gone wrong is Android’s new emoji. You might have already seen the truly horrific turtle and rabbit that will soon be gracing our phone screens. If not, let me apologize now for exposing you to them. I’m sorry.

There’s no question that something went wrong during the design process for these poor animals. Maybe the artist really hates turtles or has never seen a rabbit? Who knows. But in addition to animals that look like they were depicted by an alien returning from a research trip to earth with only a toddler’s description of what they look like, there’s another issue with this set.

The new emoji use gradients to convey emotion. For positive emotions, yellow to orange. For sad or worried, the reverse. And for those more intense emotions, blue to yellow. At a large size, they look okay. However, at the normal phone size, the design doesn’t come through.  You’re stuck wondering why some are orange and others yellow, and what in the world is possibly going on with the weird blue and green one?

There’s already a lot of detail that goes into an emoji to communicate complex emotions, and adding gradients to the mix dilutes the message they’re trying to get across.

Gradients are for Large Spaces Only

Let’s return to our turtle friend. How many different gradients are in that small image. Three? How well do you think that complexity will work when the image is shrunk down to normal emoji size? If you guessed “poorly,” you’re a winner.

For comparison, I’ve included the new turtle’s gradient-free predecessor. See how clean and simple to recognize the old one is? Meanwhile, our new turtle might be a dinosaur hiding in a lumpy bush.

Save your gradients for large spaces like covers and image overlays, and stick to a single color for smaller items like buttons. Gradients can get lost at small sizes, so give them plenty of room to shine.

You Don’t Need Them

Just like flat color and leggings (I hope), gradients are a trend, and there are plenty of other ways to be trendy. You don’t need to force them into your design just because everyone else is.

If your brand colors are navy and orange, you’re never going to get a pretty gradient out of them. Gradients look best when they contain colors that are near each other on the color wheel. Otherwise, they get muddy. In a “navy and orange” situation, you might create a gradient of navy to a lighter blue and use orange on its own as an accent color throughout the site.

Or, you can just forgo gradients all together.

---

What are your thoughts? Have you seen some really fantastic gradients out and about on the web? Are you already using them on your own site? Let me know in the comments!