Looking For Fashion?

Can we make gradients fun again?

Learn how to make beautiful organic gradients in a few simple steps

In our previous post we talked about colours and demystified the process of picking an optimal colour palette for all of your design projects. Identifying a colour palette for your brand is critical for your visual identity — it gives meaning to your brand. Every colour has a story to tell, which is why today we’re going a step further and diving into the world of gradients.

Gradients are everywhere

You just need to squint your eyes to see gradients in nature

As designers, we often work with gradients and, while gradient tools in apps we use are quite powerful, it sometimes becomes a task to recreate more natural looking gradients. But what exactly are gradients? Gradients are suddenly everywhere — right from logos to web designs, illustrations to typography, and branding, packaging to UI.

What’s interesting about gradients is that they are a great way to make designs appealing — they can be used in a number of ways, and add a lot of depth to the design. They can be created by using just two colours, or more colours. Gradients add a unique and refreshing vibe — that wow factor that sometimes brands identities so desperately need. We love gradients because they are playful and need we say — colourful?

A simple 6-step process

However, it is extremely difficult to achieve a gradient that works — there are a lot of hits and misses in that creation-journey. For instance, take the Instagram logo; although not impossible, it’s extremely hard to achieve that without using a ‘hack’. We bring to you, our simple 6 step process to do just that. NOTE: You can follow along using your tool of choice, we did this using Sketch but it works perfectly well with Figma, Illustrator or anything that supports gradients.

Step 1

Draw 4 (or more) circles with different radii.

Step 2

Give them some nice colours. (You can learn more about this here)

Step 3

Combine them into a single blob.

Step 4

Turn up the Gaussian blur to 40 points (80%) and then group the blob together.

Step 5

Create a shape with one of the colours as base colour to use as a mask.

Step 6

Mask the blob with the shape and there you have it! Your own awesome natural looking gradient!

A gradient checklist

Now that we have gone through some how-to hacks to learn irregular gradients, let’s put together a checklist of things to remember before you start;

Choose the right colours

We cannot emphasize more on the importance of picking the right colours. To begin with choose colours that are of a similar hue — for instance, complementary and analogue colours are a good starting point. Once you have picked your colours choose the gradients with care — make sure there is depth and fluidity.

🧠 Know your audience

Understanding your audience is key. It’s important to choose colours which are true to your brand’s identity, or the vibe/ emotional response you want to create. So, if you’re going for a playful vibe, then pick colours which emote happiness like orange or yellow. Colour psychology is real. Also, identify which mediums you are going to use — is it digital, or print? Are you creating a logo? Gradients have a tendency of looking different across mediums — so choose wisely. Make it memorable.

Keep it playful

Experiment, get curious, have fun, play with colours, and eventually pick what works best for you.

Gradients are here to stay

Gradients call for experimentation — they are extremely versatile, and are definitely here to stay. Here’s hoping our hacks help you somewhere in your design process, and that you can incorporate some of these ideas whether it is for a poster design, or a book cover. Get exploring.

Can we make gradients fun again? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.