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.
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.)
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.
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.
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.