At the beginning of every year, there are predictable trends which shape the course of design for the months to come. There are some trends that aren't expected, but make their mark all the same. Then there are design trends which come out of nowhere and with little explanation. Gradients would be filed under the latter category.
Gradients were one of the design techniques pushed to the side by designers when they fell madly in love with flat design. While that matte era is still here, it’s safe to say that gradients are making a comeback in a big way! Earlier last year, it appeared that gradient designs were inspiring changes almost overnight. From backgrounds to overlays to subtle textures in UI elements, gradients were trending upwards.
The original gradient trend started with web 2.0, but things have changed quite a bit since then. Modern gradients can be designed purely using CSS3, which makes it much easier to integrate them into buttons, backgrounds and even typography (another quickly progressing trend that we'll discuss later).
How Designers Use Gradients
As always, there’s no better way to explain and showcase design trends than to look at how current designers and companies are utilizing them now. We’ve scrolled through our archives (and the web) to find some strong examples of gradients in modern design. Plus, we'll have a look at the numerous ways in which companies are switching up their techniques and styles to incorporate this growing trend.
Gradient colors are also a perfect idea for logos, it creates a more appealing and multicolor style without creating a distraction. Big brands like Instagram, opted for a gradient color design when they re-designed their logo. You can design a logo for your company in gradient shades to spice up your image while maintaining your corporate color palette.
Flat Color Gradients
As I mentioned, gradients pretty much fell off the face of the Earth during the flat design era, but ironically, their comeback into the industry is filled with examples of flat design and colors. Furthermore, bold examples of color in gradients are often directly inspired by flat design palettes. The consequence of this shift towards flat color gradients is an increasingly modern feel, which can be easily mixed with an aesthetically flat design. It’s also common to see these gradients added to a Material Design interface or as part of a minimal project.
The flat color gradients are also a nice complement to other trends, which makes it easier if your website is going through a redesign and you don’t want to completely change what you currently have in place.
HR tech review site SelectSoftware Reviews uses a simple gradient to great effect on its ATS systems guide, and Tennis pro, Marion Bartoli's spring 2016 athletic clothing line with Fila incorporates subtle, flat color gradients into a bold background color for a high-fashion twist.
Gradients In Background Imagery
Along with gradients, you’ll notice that backgrounds with an increased depth are also making a return. It wouldn’t be surprising to see this continue as well, with more and more designers trying to incorporate realistic and 3D elements to their designs (hint, hint, virtual reality).
Realism is something that flat designs historically have lacked, and when you think about real-life scenarios in nature (for example, the sky) you generally see gradients of colors rather than blocks of one color. Coupled with shadows, gradients add a level of depth that flat design cannot achieve.
Image Overlays With Gradients
They’ve been a popular choice for some time now, but images with color overlays have seen a shift from a single-color overlay to a more gradient-based overlay in recent years. It’s a nice effect that works well for large images, particularly hero banners or headers. This technique is also incredibly effective when the intention is to focus the user on certain design elements or to create an effective call-to-action (CTA). Digital agency Interactive Sites utilizes image overlay gradients in their own design to showcase their capabilities.
It should be said that it’s important to create a balance between the image and the color -- if that balance isn’t achieved, then the effectiveness of the overlay will ultimately be sacrificed. Some questions you might find yourself asking are things such as: Do the hues align with the meaning of the image? Is it possible to clearly see and understand what is happening in the image? The tricky aspect of design is combining these elements in such a way that maintains the integrity of the overall message, as well as the image.
Gradients For UI Elements
It’s interesting to consider the role that gradients can play in user interface elements. Although it’s certainly not as popular as some of the already-mentioned gradient styles, there definitely has been a trending uptick of designers introducing subtle gradients. In fact, the single color gradients in UI elements was a recurring feature during the early years of iOS and the iPhone, but fell out of favor.
However, the use of gradients works best for larger elements. In smaller elements, gradients can be difficult to see, and potentially distract or distort the vision of the user. But when used in larger spaces, gradients can help users focus on a specific call to action. Case in point: Baldor Foods, whose use of a gradient showcases a featured produce item and easily attracts visitors.
With that in mind, we should remind ourselves that the user shouldn’t really stop and look at a gradient design and think “that’s a great gradient.” Rather, they should almost miss the gradients, as they’re only there to enhance the user experience.
Gradients In Logos and Typography
Designers now have the capacity to add custom gradients to icons, logos and typography, which makes for some interesting designs. There are a number of ways designers can use this to great effect.
Try, for example, a fixed color gradient that shifts onto a logo as you scroll down a web page (which is also a pretty high level of design detail!). However, gradients can also be used in more conventional ways to purely make typography or a logo pop on a plain background, much like designer Pierre George's personal portfolio typography (featured above).
While gradient elements, in the context of typography and design, are still in fairly early stages, they have the capacity to boom over the coming year(s). It will likely become even easier to add gradients to letters and logos, creating an easily accessible feature for designers to quickly improve their creations and boost user experience in website designs each and every time.
