rends are never stationary, they keep changing and evolving. And in the world of UI design, gradients are back. They add visual depth, complexity and style, whether they’re used as background or foreground. Designers use them to visualize a mood and make an emotional connection with viewers.
Gradients are inspired by natural and real world colors, which are rarely flat and uniform. For UI designers, there are some basic rules to follow for using gradients, as well as plenty of online resources and tools they can use.
Introducing Gradients
In case your high school art classes are a distant memory, here’s a quick recap. A color gradient is also known as a color progression or color ramp and gradually shades two colors into each other. For example, Fig. 1 shows a linear or axial gradient, which transitions two colors into each other along a straight line.
In a radial gradient, the color transition starts from a point and radiates outwards, as shown in Fig. 2.
Why use gradients in design
Gradients have a contemporary look, which is bold and natural at the same time. They add extra depth and dimension to images, whether they’re used as foreground or background. Designers use them to evoke moods and to make an emotional connection with the viewer.
Color is crucial to branding. Gradients let designers create new colors and to create visual effects ranging from dramatic to soothing.
How to use gradients
You can create a gradient between any two colors, but in general, it’s better to choose colors that are closer on the color wheel. If they happen to be far apart, you can add another color in between and create a more complex gradient.
Gradients between different shades of the same color work well, for example, between shades of blue or orange. When using gradients, remember to keep in mind that there must be enough contrast with text so that it can be read easily.
Most design apps like Adobe Illustrator let you create gradients. There are plenty of special tools, where you can find inspiration, color schemes, and free online gradients to use in your own designs.
Gradients give a fresh and contemporary look to colors, and are appearing on more and more websites and designs. There are plenty of online tools and resources to help UI designers use gradients for their own projects.
