Designing Beautiful Gradients
By: Onething Design
Tags: UI Design, UI, Website Design, Colors, App Design

To old-school designers, the word ‘gradient’ conjures up horrid images of early Microsoft PowerPoint word art. However, UI gradients have come a long, long way from then, and are probably used in more places than what you may imagine, to great effect.

One of the principles of UI we stand by at Onething is ‘less is more’ and you’d be surprised by how much can be conveyed by implementing a simple gradient in a design. Contrary to what you may believe, gradients in UI are highly functional, and infinitely customizable to fit many needs, a worthy addition to the toolkit of any UI designer. In this piece, we’re breaking down why and how to use gradients in a UI color palette, without compromising the sensibilities of modern design.

A Note on Colour Theory

In order to begin seamlessly integrating gradients into your UI, you must first grasp the essentials of color theory. In essence, the manners in which colors coexist, or oppose each other, and to what effect this can be used in a design sense. Here are the most common color theories to note.

Complimentary

This encompasses two colours that are directly opposite to one another on the colour wheel. This leads to the colours having high contrast, and appearing ‘punchy’ and vivid in combination with one another. On our work with the RBL Bank YOUnique Credit Card, the red and blue colour scheme throughout the web-pages are complimentary.

Monochromatic

This is defined as when three variations of tone, tint, or shades are taken from the same, base color. This gives a unified look to a project, giving calmness, harmony, and continuity to every element. Our work on Revolt used different tints and shades of a light blue colour to bring a futurist look to the project.

Analogous

An analogous colour scheme is when three colours directly adjacent to one another are taken from the colour wheel, and used in a design, not to be confused with the aforementioned monochromatic, since all three colours are distinct. An example of this is our work on the Netradyne project, where the fiery colour scheme of orange, red and yellow were used.

Triadic

Triadic is a high-contrast colour scheme, involving three colours, equally spaced out on the colour wheel. Generally working well when one colour is put into focus, and the other two are used for accenting primarily. You can spot a similar colour scheme in our work on the PVR app, with yellow being primary, and red alongside green being accented.

Types of gradients

There are tens of types of gradients that exist and can be used effectively in UI’s. We’ll illustrate just three basic types which should be sufficient to get a foundational understanding of how they work.

Linear

The quintessential gradient, simply one colour fading into another across a straight axis, either horizontally, or vertically. As mentioned above, this type of gradient is great for creating momentum on a page, especially from a users’ perspective. The ring around the Apple Music logo is linear across a diagonal axis, transitioning smoothly from pink to blue.

Radial

Radial is the kind of gradient that begins at a point, and fans outwards, or the reverse. Most commonly, this is found in logos and can be used to great effect to elevate designs that are simple in either construction or colour.

Reflected

Reflected gradients are essentially when a standard gradient is created, then reflected across an axis to make it appear encased. This way, the gradient begins and ends with the same colour, and has a dash of a separate shade in the center. Most commonly used in luxury brands, such as the Audi logo.

Why use gradients in your UI?

As mentioned, gradients aren’t just a simple measure to add flair but can have a much deeper function in the UI design process. Here are just a few examples of why you should be using gradients more frequently in your interface designs.

Emphasize on certain elements

Gradients are not only a striking element, but can also be highly functional. The shift of color in UI gradients, in particular, can be used to guide users’ eyes from one part of the design to another. For example, the color theory suggests that the eye naturally moves from light to dark, creating an infinite number of possibilities to subtly shift the user around the page, without relying heavily on text or scrolling gimmicks.

Elevate simple concepts

Look no further than Instagram’s logo for an example of this. In essence, just a circle, inside a square, inside a bigger square, but the pink, to purple, to yellow gradient just takes the design to another level, while still keeping the elegant simplicity of the original concept. While not a UI design per se, this illustrates in a vacuum that minimal, simple, or even flat contents can be given plenty of character by using gradients effectively.

Adds depth with lights and shadows

Novice designers may not know this, but shadows and highlights all fall under the category of UI gradients. Truth is, there is no such thing as an exclusively ‘flat’ colour, any colour can be given depth with proper manipulation of light and shadow. With the flat UI colours design trend slowly falling out of favor with some influential designers, perhaps it’s time to get some practice playing with shadows to bring depth back into your designs!

Tips to better implement gradients in UI

Be mindful of colour choices

Unsurprisingly, one of the biggest rules of design also carries over into designing UI gradients. Colour theory for designers is a foundational piece of knowledge that is carried into all aspects of the field, and the manipulation of colour to achieve certain effects is a must-have skill for any designer.

A great example of this is to look at the websites of vehicles aimed at different audiences. Aston Martin’s website always puts their car configurators in profile view with a radial gradient consisting of grayscale tones, normally white to black from behind the car. This puts into focus the luxury, elegance, and simple brilliance of their vehicles, appealing to an older, more mature audience.

Conversely, the website of the Honda Civic, marketed internationally towards millennials and young professionals, puts the car in configurator view against a gradient of bright colours in UI, normally yellows and blues, signifying the youthful, and fun side of the brand.

Additionally, be sure to use complementary colours, gradients in UI are a fantastic way to spice up a design, but done poorly looks amateurish and lacklustre. This tool by Codepen allows designers to play around with UI gradients, and experiment with colour theory. We’d highly recommend testing your concepts before transitioning into final designs.

Spend time on smoothing transitions

It will take time and effort to perfect a gradient, and it’s unlikely that you’ll crack a visually striking one on your first attempt. Play around with color stops, try adding or deleting steps to the gradient, or messing with the number of colours in the gradient.

Also keep in mind that long transitions aren’t necessarily always the answer, and in some cases, like shading smaller elements, short transitions can put more emphasis on the motion. Experiment with 3 stepped gradients, which can work well when using understated tones. As with all other things in UI design, some amount of tweaking and meddling is required, but we assure you the final result will be worth it.

Use contrast to improve accessibility

Approaching the end of the article, you’re probably dying to start creating some gorgeous UI gradients yourself. However, there’s one final tip you must consider, gradients can destroy any semblance of readability on your design if executed incorrectly, and can throw your compliance with the Web Content Accessibility Guidelines off a cliff immediately.

Fret not, we’ve got a solution for you. Using contrasting elements over a gradient can easily combat this issue, and even elevate your design even further. A great example of this is The Impossible Bureau, whose website balances bright UI gradients with white text to great effect, leading to unexpectedly high readability levels.

A contrast ratio of 4.5:1 is recommended for standard text, and we’d not suggest going below that in any case. This tool, utilizing colour theory can help you optimize and min-max the perfect contrast for accessibility in your gradient design.

Conclusion

To sum up, don’t be afraid of gradients! As a UI designer, a gradient can be another arrow in your quiver when it comes to making extensive and attractive designs. Additionally, it can add another dimension to designs that otherwise have ‘that special something’ missing. Shading and highlights can add depth to designs as well, which will be useful as and when the industry moves away from a ‘flat UI’ trend. Experiment, and see what works, you’re bound to find some value in using UI designs.