The Gradient Revival: 9 Colorful Tactics for Clear UI Design

Using gradients in digital design isn’t a new trend, but it is making a comeback. Revived as a reaction to the “flat” look that was a little too flat, gradients provide visual interest without going overboard. At least, when they’re done well.

What makes gradients work is often misunderstood. The common rule of thumb is to avoid them altogether — and this holds true unless you’re aiming for a more vivacious look. That’s when color works in your favor, especially given today’s trends towards a flat-yet-layered look. Creating great gradients mean thinking between the points: not just from this point to that, but what they create in between and how it impacts your work.

The Idea Behind Well-made Gradients

By nature, gradients create new colors in your design, so you must consider what they do to your color scheme. We’ve compiled a list of preset gradients to help your prototyping work, but to use them effectively you need to plan for the new shades and hues you’re creating. Here’s how:

1. Make sure that the middle shades & hues match your brand colors. If your design relies on specific colors, then gradients tend to break the plan. Minimize changes in hue to reduce the number of conflicts with your work. Alternatively, experiment to see if you can work those in-between colors into your color scheme.

Above, the in-between colors are practically shades of the official brand colors.

2. Consider mood. Like typeface choices, color sets certain expectations about how people should interpret your product. Do the in-between colors match what you want to convey?

Cool and muted, the colors above include few variations. This subdued change conveys less energy, which supports the color scheme’s sense of weight and melancholy.

3. Consider quantity. Gradients don’t have to wash over your entire site — but then again, they might. If you plan to use gradients in quantity, then remember that they subtly distract from content. That is, even slight shifts in background color draw attention from the foreground.

Source: AsanaAsana isn’t afraid to use gradients. In fact, it’s become a hallmark of their site and app design.

4. Consider skeumorphic consequences. If you only change value in a gradient, leaving the hue alone, then you create a slight 3D effect. Like large gradients, these elements appear to rise above their surroundings, and grab attention accordingly.For example, this bar appears to be lit from above:

Applying Gradients to Your Work

As we discussed in our free e-book Elegant Web UI Techniques:Flat Design & Colors, bold colors are important to today’s trends. But simply mixing two bright colors doesn’t always work. To color your work with effective gradients, we offer some specific best-practice techniques:

5. Use in-between points sparingly. The less complicated your gradients are, the more natural they’ll appear.

6. Use value to your advantage when shifting across many hues. Brighten or darken in-between colors to make a scheme that works well.

Above, bright green and fire engine red create a muddy middle color that doesn’t sit well with either end.

But if we brighten the middle, suddenly the colors work well together.

7. Use value for accessibility. Dark and light shades of your various hues also help your gradients stand out to people with vision impairments.

8. Use half-way points to control saturation. Gradients that cover many hues often do so at the expense of richness. Apply points to keep the middle consistent.

9. Aim for similar — or identical — hues. Avoid complimentary colors. Rule of thumb: Swing no more than 40° across the HSV spectrum.

Conclusion

Creating gradients is an opportunity to expand upon your color palette because you’re actually creating new colors between the endpoints. To use them effectively in your work, make sure that the middle sits well with the ends.

Reimagining the way you design.A new version of UXPin is coming.Sign up for a trial and be the first to know about the new UXPin.Your e-mailGet free trial now!

The post The Gradient Revival: 9 Colorful Tactics for Clear UI Design appeared first on Studio by UXPin.