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. Various UI UX design companies in India are catching up on using gradients to enhance user experience. 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 colour 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 colour theory. In essence, the manners in which colours coexist, or oppose each other, and to what effect this can be used in a design sense. Here are the most common colour theories to note. These theories will play an integral role in understanding gradient design.
Complimentary
This encompasses two colours which 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 a calmness, harmony, and continuity to every element. Our work on Revolt used different tints and shade 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.
Using gradients in UI design is not just a more pleasing way to showcase elements in a page, but it also drives user engagement, increases user satisfaction & improves overall experience while interacting with the brand. You can have a look at our Qubo project to understand how gradient design can be incorporated into the user interface.
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.
Place emphasis 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.
Easily 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.
Adding 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 which otherwise have ‘that special something’ missing. Hence, using gradient design as a UI UX design company can ensure that the company is not just at the forefront of embracing contemporary design but also adaptive to meet industry standards. 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.
FAQ’s
How do you apply a gradient in Photoshop?
After selecting foreground and background colours, select the space in which you wish to apply a gradient. Select the gradient tool from the toolbox, and select the type of gradient from the gradient tools options. Then, simply point and click where you want the gradient to appear.
What is a gradient logo?
A gradient logo is essentially a logo which has been filled with a gradient. An example of this is the modern Instagram logo which is essentially a collection of basic shapes, where the yellow/purple/pink gradient adds plenty of character to it. Gradients are a great way to elevate simple logos, or reinvigorate older designs with modern sensibilities.
What's the new color for 2020?
Some of the trending and top colour schemes in UI have been pastels, and washed out denim tones. Going along with the theme of minimalism, gray, or monochromatic colour schemes are still trendy in the world of UI, however, implementing splashes of bright colours can elevate these otherwise simple designs.
What are the trends for 2020?
There have been many major emerging UI trends in 2020, here are our top picks:
- Responsive colours
- Oversized, bold typography
- Animated illustrations
- Microanimations and microinteractions
How do you put a gradient on text?
In Illustrator, remove the default fill and stroke of the particular text you want to fill with a gradient. Then, using the appearance menu, after selecting the text, add a gradient in the fill section, and watch it appear on the workspace.
Where is the gradient tool Photoshop?
The gradient tool is in the toolbox as standard. If not visible, you must have the paint bucket tool equipped instead. Simply long press the paint bucket, and replace with the gradient tool when the dropdown option appears.
How do you change the gradient color in Photoshop 2020?
With the gradient tool selected, open the gradient panel which has further settings to modify the colours. Here, you can add colour stops, as well as change the colour of the gradient as a whole. Then, use the tool to apply the gradient, or the selection tool to place it on a pre-existing object.
Why is my gradient black and white Photoshop?
There are two possible issues here. First, the default gradient is a simple black to white, which you can change as mentioned above in the gradient appearance menu. Secondly, you might be using a greyscale colour gamut, and you’ll have to change it to RGB or CMYK before colours begin to appear in your design.
How do I make a transparent gradient in Photoshop CC?
This effect can be achieved by adding the gradient to a layer mask. This allows for a fade effect to be achieved on top of a pre-existing layer. Simply use the gradient tool on a masking layer, and select one of the colour steps to be transparent.
Is GREY still in for 2020?
Yes! Grey contributes greatly to the minimalist and futuristic look which many UI’s strive for in 2020. However, the use of a grayscale colour theme almost always benefits from a splash of another colour or two.
What is Ctrl +J in Photoshop?
The Ctrl + J shortcut is by default assigned to the ‘duplicate layer’ command in Photoshop. The selected area upon entering the command will be shifted to a newly created layer, which can then be worked on.
What is Gradient Overlay in Photoshop?
Gradient overlay is the settings menu on the lower right hand corner of the screen, when the gradient tool is selected. Here you can add colour steps, change the colour gamut, or modify the colour scheme of your gradient.
How can you add another color to the gradient?
Yes! Using the gradient overlay, or appearance overlay on the lower right hand corner when selecting the gradient tool, you can add steps to the gradient for more colours to appear in your final design.
How do I move the gradient layer in Photoshop?
Using the layer effects menu, select the gradient overlay. Now, when you hover over the gradient, you should get the movement cursor, rather than the regular one. Simply drag and drop the gradient where you wish to move it!
Why is my Photoshop stuck in grayscale?
The most likely issue is that you’re working with a grayscale colour gamut, which can be changed to either RGB or CMYK to add colour to your workboard using the appearance menu in photoshop.
How do you gradient a shape in Photoshop?
Simply create the desired shape in advance, and then use the gradient tool to fill it with the colours of your choice. You can alter the appearance of the gradient using the appearance menu on the bottom right of the screen.
How do you make a gradient rainbow in Photoshop?
Select the gradient tool, and then, from the appearance menu, ensure that you have 7 steps in the gradient. Then, change the colours of the steps to match those of the rainbow, and fill any shape to apply the rainbow gradient there!