You might have noticed the increased use of gradients in print and web design in 2017/2018. Well, it seems that design communities have embraced this trend and that this type of gradient transitions will only continue to be more and more dynamic in shapes and colors. Using colorful shapes and backgrounds is a tricky business if you don`t know how to apply them in a way that will benefit the message you are trying to convey with your design. What are the top 5 gradient trends and how to use them effectively in your work?
1. Duotone gradients
Duotone gradients are two colors with a smooth transition between them. Nothing more, nothing less. Its pretty simple to create these type of color transitions with gradient tool in Illustrator. When combining colors for Duotone gradient there are no rules. Rules come when you mix 3 colors or more…but two…you can do anything you want. It all depends on your intention with the design itself. If you need a strong, bold message then you might want to consider using more vibrant, higher contrasting color combination. If on the other hand, you wish a soft, more quiet approach then use less saturated colors.
HOW AND WHERE TO USE THEM?
The good news is that you can be as creative as you wish with Duotone Gradients. The most widespread use of this type of gradients is photo overlays. They are mostly used as just a simple backdrop for the content. The example below is one of such use cases created by
Another example of Duotone Gradient is in Home Navigation design created by Barthelemy Chalvet for AgenceMe. Here we again see the Duotone as a backdrop for the content. The content includes the text as well as an illustration. However, the colors used on illustration are chosen very carefully. Illustration has mostly light hues and just a few colorful details that are in contrast (cold) to the backdrop Duotone (warm).
To conclude, the safest way to use Duotone Gradient Trends is if you mix them with black and white photos, or apply them as a photo overlay. If you are mixing them with other colors make sure not to go overboard. Multiple colors can be outstanding in designs, but they can also introduce confusion and clutter if not matched properly. When in doubt, use fewer colors. Less is more, in most cases.
NEED PREMADE RESOURCES?
GENX Gradient Compositions Toolkit is a huge collection of gradient backgrounds, shapes, and textures that will help you create your own unique compositions fast and easy. This pack also includes Duotone Gradients.
Powered by Creative Market
2. Semi transparent gradients
The Top 5 Gradient Trends include the Semi Transparent Gradients. These type of gradients have a fading effect in them, they have a full color hue on one end while 0% color opacity on the other.
These Semi-Transparent Gradients can be Duotones or even three-tone gradients but they always end or start with transparency.
HOW AND WHERE TO USE THEM?
One of my favorite ways to use Semi-Transparent gradients is overlapping them with other gradient shapes and backgrounds, or as overlays on the photos. The example below shows an artwork made by Studio-JQ
Here we can see the use of one Semi-Transparent shape over a Three-color gradient circle. The subtle Semi-Transparent shape forms a foggy aura in front of a gradient circle, like a fading moon, simple but effective use of transparency effect.
Another fantastic use of Semi-Transparent Gradients mixed with photography and textures can be seen on the poster artwork made by Magdiel Lopez.
NEED PREMADE RESOURCES?
Semi-Transparent Gradients can also be found in my GENX Gradient Compositions Toolkit, just make sure to open them with Illustrator CS4 or newer, the semi gradient effects are not compatible with EPS10. However if you are not using Illustrator, there is a high res PNG images available in the pack which can be used with any photo editing software. The example I made that uses the Semi Transparent Gradients from the GENX Toolkit can be seen below.
3. Mesh gradients
Mesh Gradients are gradients made with mesh tool in Illustrator, hence the title. This type of gradients require a bit more skill to produce. Typically they mix multiple colors together, this should be produced with care, because some colors will not match well. Besides just mixing multiple colors together they also form a textural pattern, similar to liquid, which gives them a more dynamic look.
By now you might have noticed how all gradients work wonderfully with black and white photos, that provides them with the contrast needed to enhance their color intensity. It also eliminates the clutter and the feeling that “too much is going on” in your design.
HOW AND WHERE TO USE THEM?
Mesh Gradients can be used as a stand-alone pattern. Because of their often dynamic look they can be applied as a minimalistic pattern complemented with creative Typography.
The use of Mesh gradients for branding purposes is also getting more popular. This type of use can be seen on the minimalistic branding project below, made by Focus Lab.
NEED PREMADE RESOURCES?
If you need a premade Mesh Gradient backgrounds, look no more. Holographic Gradients is a huge collection of 60 gradient backgrounds that will help you in your design work. My second Mesh Gradients collection contains 30 colorful backgrounds inspired by Winter. All you need to do is choose which collection will work best for your project.
Powered by Creative Market
Powered by Creative Market
4. Gradient blurs
This is where things get interesting….introducing Gradient Blurs! I am sure you have seen these around, funny looking fellas that have a strong “artsy” feel. They are now a part of the Top 5 Gradient Trends.
HOW AND WHERE TO USE THEM?
They seem to be applied often as a part of a poster design. The great thing about the abstraction is that it can be used to describe a variety of emotions and abstract concepts. It can illustrate a sound, light, universe, happiness or sadness. We simply don`t know how to describe many of these words but a carefully chosen blurry colored shape can do the trick for us.
Let`s see some of the examples that use Gradient Blurs:
NEED PREMADE RESOURCES?
Gradient Blurs are tricky to create, they are a form of experimental artwork. Collection that I made was an experimental project that resulted in many failed shapes but it also rewarded me with many interesting, creative shapes that were ultimately included in the pack. If you need premade designs, check the Vibrant Gradient Blurs collection.
Powered by Creative Market
Blurs are usually created as circles but also they can come in a more free, fluid like forms as seen on the examples below:
Powered by Creative Market
5. Gradient spheres
The last Gradient Trend are Gradient Spheres, meshed circles that have a strong three-dimensional form, reminding us on planets and bubbles.
HOW AND WHERE TO USE THEM?
Gradient Spheres have found their place in application and web designs among other uses. Because of their resemblance to planet like objects they are often used in a techy- futuristic type of projects. For example Jiyoon Kim used Gradient Spheres to design a creative Watch UI that has a light futuristic touch.
Another creative example of Gradient Sphere used in poster design made by Mirtho Prepont for Asana
NEED PREMADE RESOURCES?
Gradient Spheres Collection has a set of lighter pastel colored spheres as seen on the example below. Depending on your project you will decide which set works best for you.
Powered by Creative Market
Hopefully, this selection will help you in your creative work, if you have any comments feel free to leave them below!
One Comment