“Gradient is a blast of bright colors to attract attention.”

This statement might’ve been true in 1995 when web designers used it to expand their color scheme adding a unique element to their website. Remember the good old 90’s when even we used ‘Word-art’ to introduce a professional touch to presentations in school which we now identify as a bad idea! Phew!! But you know what? Maybe, we were headed in the right direction.

Nowadays, Gradients are used to create bold statements and channel user emotions, helping audiences connect with a product or an idea. In 2017, the world was intrigued by the transition of one hue to another and that trend isn’t stopping anytime soon unless- someone disrupts this trend much like Instagram did with their re-branding in 2016, using gradients in ways no one had at a scale like this. But…we can’t simply talk about gradient and not mention Spotify, who fused the duotone gradients with the emotions in playlists.

How did it all begin?

We must go back to 2014 when it was all about flat design. Google had introduced their ‘Material design’ and Windows had their ‘Metro’. It looked cool & refreshing compared to the detailed skeuomorphic designs that were a rage at that time. They were great for low-resolution mobile devices where the designs looked clean, but alas, we were constrained by the variety of colors and with the advent of higher resolution mobile devices- it didn’t have the same aesthetic impact.

Can you name more than 20 flat colors?

I bet you can’t. Flat colors are limited.

Gradients let designers create something that feels new by blending colors. A color that didn’t exist before you mixed them, a color that looks unique, modern and refreshing. You see gradients everywhere in nature, every fruit, every leaf you see has a gradient from a light color to a darker shade in the shadows. The sky always has a gradient from an unsaturated hue to more saturated color as you go farther away from the horizon. Gradients seemed like the obvious way to go after flat, beginning with soft gradients in 2015 that brought about a sense of depth to all-out exotic & saturated hues in 2017.

So what’s all the fuss about the resurgence of gradients in 2018?

Gradients in 2018

It’s already being called ‘Gradient 2.0’ by design communities around Behance. You’d have to get out of your comfort zone. It’s time to take risky decisions, be brave and ditch that blue color you’ve been using to awe your clients. Everyone is into every color now, just look at Dropbox with their cool new branding, introducing a lot of colors without redesigning their logo.

Unlike the gradients of last year which were everywhere and were the focus of attention. We won’t be seeing the world with rainbow eyes this time. Gradients will not simply dominate the foreground, we’ll see more of them in the background too. They will eventually become a natural element of design, bringing more depth and dimension to compositions. This trend is likely to be fueled by the onset of Virtual & Augmented reality as websites and designers try to incorporate more realism, immersion & 3-dimensional elements in the design.

Here are few examples from industry which confirm this belief-

The Pantone Color Institute forecasts global color trends and advises companies on color which they can use in creating a brand identity for themselves. No wonder why this year they have chosen the Enigmatic purple hues as the color of the year.

Another example is the use of gradient as background in illustrations for articles related to medicine and health. Gradients are used here to create a mood along with the depth.

And if you are not convinced yet, look at the illustration below. Use of gradients has added depth and adds to the city’s night charm.

One last example before we move on. Look at the bold color statements that Sphynx has made with their choice of colors and use of gradients.

Tips to create an awesome gradient

A gradient is created by using two or more hues to paint one element with a gradually fading color shift between them. I’ll share the tricks and ideas that I have picked up along the way when I started learning how to create a gradient. Here we go-

Don’t choose colors randomly

The last thing you want for your audience is to believe that colors you chose are random and used without putting any thought. You can use a gradient to communicate a change, guiding their gaze. Choosing a bright color where you want your viewers to see, choosing a dark transition to create a sense of shape or maybe a dull color to reduce its visual weight. But keep a few things in mind when choosing colors.

Look at any color wheel. Choosing colors which are close to each other will have a smoother transition in a gradient as compared to colors which are at opposite sides, or even close to being complementary. The reason is- they cancel out each other’s brightness, the same thing that happens when you mix two complementary hues in pigment colors, and you end up getting a neutral color. See Image 1.2 below- you get a dark unsaturated green during the transition from a bright green hue to a bright purple hue.

The easier fix is to choose colors that are closer to each other on the color wheel (Image 2.2). But let’s just say your brand or the marketing team doesn’t want to go by the color wheel, then what?

Introducing, the 3-stop gradient

You simply need to add a third stop in the gradient at about halfway between the original two colors. Now replace the dull color along the gradient transition with a more aesthetically pleasing color, preferably a color in between the two stops in a color wheel (Image 2.3). Your eyes will thank you for the smoother gradient. Also, when you know how to avoid the dull gray color means that you have more colors to play with

Another tip and pay attention here because not many people pay heed to this. When you create a gradient from a solid color to transparent color AKA a color fade effect. Make sure both stops have the same color, as you see in Image 3.1, different colors means at the midpoint you have the ‘transition phase color’ at 50% opacity instead of a visually smooth effect.

It doesn’t stop at 3, you can create as many stops in the gradient to gain more control over the transition (Image 4.2) or if you have Adobe illustrator™ go all out and try the Mesh tool for finer control of not just color but even direction and much more (Image 4.3).

Still confused about where to begin?

The best place to start would be nature. Look around. Nature has the best examples and you got to trust the millions of Artists & Designers through the ages who were fascinated by everything around them. Colors are everywhere, you simply need to shift your attention.

I always go back to nature when I run out of ideas. When I travel to mountains, I click a lot of pictures and use them to make my very own natural color palette. Sonal, my fellow designer, recently wrote about the same- Why every designer needs to discover the nature insisting upon the same thing.

Here’s a sneak peek into some of the illustrations I made using the inspiration from nature-

For one of the blog- How to create widgets in iOS 10, I created a dimension by playing with the angle of gradient of the floor.

In the recent one- Why every designer needs to discover the nature I have used the background Gradient to bring the center into focus.

I hope this blog was helpful to you in learning something new about gradients and how to use them to create better illustrations. I am a strong believer that gradients have come back to rule 2018, which means 2018 is going to be more fun.

Here are a few tools in case you need help to learn more about gradients-

• Paletton (My favorite color palette generator)
• Webgradients (lots of gradients)
• Grabient (more gradients)
• CoolHue (more gradients, such wow)
• ColorSpace (Good color palette & gradient generator)
• Wave Gradient Generator (Use this to understand how a multi-stop gradient would work)

I hope it helps. Let me know in case there is anything I can help you with. Drop in your comments and I would be happy to help.

If you liked reading this post, you might also enjoy reading our ebook on UX Design Principles. It’s a book for every designer and it illustrates some of the very common design principles that we often ignore. The book will help you become a better designer, for sure. Don’t believe? You can read the first chapter for free, here.

This blog is contributed by Nilanjan Debnath and was originally published on Humble Bits