The Rise and Return of Gradients

From its disappearance during the flat design era, gradients are making a fantastic comeback. You may see them already in logo designs like Instagram’s, to being applied full-blown as backgrounds for a website.

Web 2.0, skeuomorphism and the aim to be realistic

When Web 2.0 hit around the early 2000s, it created a major impact in how websites would be designed and developed. New trends emerged: from bevelled, glossy shapes and elements to – as you may guess it – the use of gradients. For buttons, gradients were used to apply a layer of glossiness and sheen it; most probably as a way to differentiate the element from the background (which were mostly pattern-filled and quite linear), signifying the user that it can be interacted upon. Urgent, promotional badges and “stickers” also became popular during the time, and they needed to stand out as well, employing gradients once more to give a similar effect.

Graphic from  MaterialDesignBlog.com
With the world transitioning to more experiences in the digital one, graphic interfaces gradually entailed the skeuomorphic style of  aesthetic to mimic the look of real life objects. Most likely designers then had to make digital objects look realistic (or at least contain a speck of realism) to match the user’s familiarity of what they actually represent, to make interaction with such easy to understand. Gradients were employed with shadow effects, textures and patterns to give objects depth and that sense of realism. Gradients were used to somewhat digitally capture how an object looks like when light is reflected upon it from a certain distance or angle. As for the aforementioned gradient sheen, it may also be seen as an effort to replicate certain metallic surfaces and textures.

Goodbye gradients?

But when 2012 came about, a new design trend was on the rise that heralded the loss of glossy, three-dimensional effects, and eventually the minimal to non-use of gradients. Flat design was front and center, and doesn’t employ any of the skeuomorphic, realistic and pseudo-three-dimensional design styles. The design style was highly popularized with the advent of Microsoft’s Windows 8 bearing the Metro UI. Flat design utilized straightforward two-dimensional rectangles and squares, individually colored and bearing sharp edges – no gradients around. Brands started adapting the flat design style, from Netflix to Hershey’s, and soon even Apple followed suit – sort of. iOS7’s release saw the end of Apple’s long-held skeuomorphic interface and introduced a radical new look, where the once-3D realistically-looking icons have been totally flattened out. Apple managed to have gradients stick around, albeit a bit muted out and minimally-used, but sadly this came at the ire of some critics having too many inconsistencies and looking a bit too harsh for the eyes. (But more on that in another time.)

Windows 8 Metro UI
Image from PC World

Semi-flat, Almost Flat and Flat 2.0

Over time however, designers have felt and identified that flat design has its own flaws; mainly that its lack of depth affected usability. Bearing only a two-dimensional look, flat design lacked a sense of hierarchy and users essentially didn’t have visual cues on which elements can be clicked or interacted with. Designers sought to improve or “fatten” flat design further and in 2014 Google released its Material Design principle, which utilized subtle shadows, highlights and animation to give a sense of depth to flat design. Kate Meyer of the Nielsen Norman Group writes, “Google’s Material Design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content.” If one takes the time to study Google’s Material Design, gradients are only subtly applied as “scrims” for text protection. They weren’t fully back in the bigger picture of design just yet. Gradients were applied to make text legible on top of images, varying opacity on its environment and should be long enough to avoid banding yet also giving it a “natural fall off” as opposed to a sharp edge.

Google’s Material Design
Image from Material.io

Gradients back in trend

“What is dead may never die, but rises again harder and stronger,” so it says in A Game of Thrones. Recently gradients have made a comeback but in a totally different light and manner of its application before. It seems the world wants to go beyond the current plethora of colors as designers try to mix and match plenty of them in creating various gradient combinations. Nowadays however, gradients appear softer, more playful and quite contemporary (and to an extent futuristic). Coming from the flat and semi-flat design period, the keyword here is “subtlety” – gone are the days of harsh color transitions, imitating metallic finishes and intense rainbow-colored rays. Gradients may jump from blue to pink in a heartbeat, but what makes it work is not the gradient itself but by the choice of colors and shades designers make nowadays. Bold, bright and spectacular, gradients’ comeback is all over: you may see them being applied to branding, website design, mobile apps, UI in general, various print materials and plenty more. Take for example Spotify’s website for its Out-of-Office email builder feature. The site is a one-page, single-scroll one with each section donning vibrant colors and gradients as background elements.

Furthermore, Spotify’s “Year in Music” interface utilizes images applied with a duotone gradient, and a gradient background as well to achieve the eye-catching look below.
Image from RefinedGuy.com
The gradient comeback appears in mobile applications as well. A recent example would be Skype, which updated its interface design last June. Admitting to hail inspiration from Snapchat and a few of Facebook’s features, Skype’s update introduced new camera features, chatbots, message reactions and its own version of Stories. Duotone gradients are employed here once more and gives Skype a perkier yet also edgier look, slowly stepping away from the conventional business and work outlook associated with the app.
Image from MacRumors.com
Instagram is another example of the use of gradients, this time in logo design. In 2016, jaws dropped for Instagram’s total rebrand. The brand now sported a wildly-colored semi-flat logo, and the gradient splashed over it contained hues of yellow, orange, pink and purple. The bold change in design was meant to reflect this exact, intense growth of the app, as well as the wide diversity of users and content it now hosts. Various brands and applications have followed suit in applying gradients to their rebranded icons as well, even moving forward from an already-flat version of it. Check out how Mozilla Firefox, Tinder and Asana have also utilized gradients in their logos.  

Conclusion

With its appearance, disappearance and eventual comeback, the question remains on whether gradients are here to stay or if they’re only here for now and gone once again, just like any other trend. Gradients make any design potentially very memorable and may make a long-term imprint unto a viewer’s memory. Just as much, they could make designs look quite unique as well as feel light, playful, and brimming with energy. Without a doubt however, is the fact that gradients bring color and life to any design; and it falls on designers to make the most out of that feature.

Want new articles before they get published? Subscribe to the 8020 Graphics newsletter.