• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Just Peachy Consulting and Web Design

Just Peachy Consulting and Web Design

  • Home
  • Websites
    • Portfolio
    • Website Care
    • FAQ
  • Technology Consulting
  • Content Marketing
  • Blog
  • Contact

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

October 19, 2017 by Alexandra Martines Leave a Comment

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.

Don't be a sad turtle: using gradients in your website 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?

The hulu app's start pageThe Hulu app's loading pageThe Hulu app's Choose Profile pageThe page for This Is Us in the Hulu app

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.

Android's turtle and rabbit emojis
Poor, sad rabbit-bear. At least the turtle is chill about this whole mess.

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.

Android's worried, distressed, and surprised emojis
Also pictured: how I feel about these new emojis

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.Android's worried, distressed, and surprised emojis 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.

Android's new and old turtle emojisFor 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!

Filed Under: Blog

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

{{Privy:Embed campaign=474067}}

Recent Posts

How GDPR Affects US Small Business Owners

Disclaimer: This isn't legal advice, and I'm not a lawyer. If you've been reading your emails, you know there have been some big changes to online privacy laws lately. Most of this chatter is about … Read more about How GDPR Affects US Small Business Owners

When to Hire a WordPress Professional to Customize your Website

With WordPress sites running the gamut from basic blogs to massive eCommerce stores, it can be difficult to figure out when you need to hire a WordPress professional and when you can DIY it. If … Read more about When to Hire a WordPress Professional to Customize your Website

The Easiest Ways to Customize a WordPress Theme

One of the trickiest things about DIYing a website for your business is creating something that looks as gorgeous as you imagined it would. From buttons that seem to be stuck at blue when your brand … Read more about The Easiest Ways to Customize a WordPress Theme

Why Website Maintenance Matters

Just like a car, websites require maintenance to keep them working. Your car won't take you very far if you never change its oil, and your website won't take your business very far if you don't look … Read more about Why Website Maintenance Matters

Why Small Businesses Should Care About Net Neutrality

If you're reading this article right now, chances are you have Internet access at your home or work. If you have Internet access, there's about a 98% chance you've heard something about how the FCC … Read more about Why Small Businesses Should Care About Net Neutrality

Footer

Connect

  • Facebook
  • Instagram
  • LinkedIn

Contact

(413) 376-8822
[email protected]

Quick Links

  • Cart
  • Terms
  • Privacy Policy
  • Cookie Policy
Change Cookie Consent

Keep Up

Subscribe to the latest in tech tips and web strategy.

Copyright © 2023 · Business Pro on Genesis Framework · WordPress · Log in

Request a Website Audit