Nov 9, 2013

Why Google gave up on gradients - and why you should too

Google's logo has ended up in plain, solid colours:



It's beautiful, it's vivacious, and it renders up fast.

Their previous one was more typical of what we see online: it was more gradient-y.



And the further back you go in their logo's history, the more gradient-heavy the logo appears to be.

So ironically, the logo has gotten more and more efficient in terms of file size, even as users' access speeds have increased.

This is what happens with companies - as time goes by, they simplify their communications graphics because they're less worried about impressing their users with graphics and more concerned with impressing their users with speed. They also tend to realize, slowly, that sometimes simpler is better, even if it's less impressive to designers and creative directors.

We've also watched OS and productivity software, which isn't restricted by the same speed issues, become very gradient-heavy:



And we've watched it snap back in the opposite direction:



So when I'm evaluating a client's graphics situation, if I see a lot of gradients going on, I often advise them to play the tape to the end, realize that they're going to get rid of this excess visual baggage at some point, and choose the cheaper, more confident path of opting for simplicity from the outset.

It's not just about loading time - gradient-heavy designs take longer to compose, prototype, and implement. They're more finicky at every stage, often in ways that are impossible to explain to someone who doesn't write HTML and CSS.

If you feel like commenting, I'd love to hear about some other examples of this trend - there are so, so many, and I only included a couple in here. I'd also be curious to hear about other similar trends that people should consider, so that they can future-proof their designs a bit. It also raises the topic of how user interfaces and visual communications mature along with the projects that they represent, and that's something I want to explore a lot more!