Let’s talk about white app icons

I unlock my phone to find another of my frequently used apps have updated overnight. Staring back at me however, is another 120x120 px white squircle with a bit of color in the middle. Another one bites the white.


A few weeks ago I was touring with a talk called ‘Designing Better App Icons’ in London, L.A., Florence & Amsterdam. I got to talk to a lot of people about icons. One reoccurring topic (that eventually made its way into my talks) was on the subject of the increasing amount of app icons that uses a white background. It prompted me to write this tweet:

Other than having the sub context of me being a grumpy old man, something about this resonated with people and I felt bad for leaving it hanging like that. So let’s have that talk about white app icons.

What’s going on?

The white-washing of our interfaces is bleeding through to our app icons and an increasing amount of designers across the globe are opting for a glyph on a clean white background.

There are many reasons for this development. Ground zero of this change was obviously the introduction of iOS 7 and the rise of both flatter interfaces and simplified app iconography. A considerable portion of the most vital stock apps Apple makes, features a white background. Put in another way: if you’re browsing the internet, looking at photos, listening to music or checking up on your health you’re most likely doing it through a white app icon.

The overall shift in UI design thinking is well documented and debated and frankly not all that interesting for this rant. However, behind this cleaning up and simplifying lies an interesting development in app icon design: The desire to introduce whitespace onto the canvas.

What’s wrong with white?

Nothing is wrong with white. Heck, I’ve made white app icons and I love them when they’re well executed. The problem is variety and mediocrity.

Variety

An icon embodies a product; it’s what users see each time they interact with that product. A big part of the success criteria for an app icon is therefore to stand out and clearly communicate what that product is about. Your icon is your greatest tool in shaping an image of your product in your users minds. It’s not entirely surprising then, that when a trend sweeps the landscape every similarly looking icon suffers in the uniqueness department. A lack of variety in icon design hurts users ability to navigate and blurs the mental image of your product. By making your icon look too similar to other icons, you’re essentially worsening the connection you have with your user. By choosing white as the majority color of your app icon, you’re choosing to put fewer colors on your canvas and therefore potentially limiting the amount of pixels in which you can be unique.

Josh Puckett’s scary take on a future Instagram Icon. (source)

Mediocrity

Many things can be said about the simplified, print-style design prevailing in app icons. On one hand, it has made design a lot more accessible as it doesn’t require intrinsic knowledge of texture and lighting to create a stunning and platform-acceptable icon. On the other hand, it has also opened up the floodgates of mediocre icon design. Where everybody with a copy of photoshop and 10 minutes to spare can create something that could pass as an app icon. Just because something looks simple, doesn’t mean that making it is simple. In fact, as most icon designers know, making something minimalistic work well within the constraints often takes a lot more effort. While trends may change, the craft of making something that scales, communicates and looks great remains the same. This isn’t necessarily pointed towards white app icons, but I’ve found that white app icons in particular is a great offender when it comes to mediocrity. There’s something about the lack of color that invites designers to not care or to not take into account the entirety of the canvas or the grid.

Make meaningful decisions

So to sum up; by all means, make white app icons, but when you do — think about how your design choices can either boost or hurt your uniqueness and therefore your connection to the user. Always make decisions based on maximum impact and not superficial aesthetics, what ‘others have done’ or because it is easy. If you do use a clean white background, do it because it is meaningful to your product and give it the care and attention it deserves to be great.


Update: I’ve gotten a lot of great responses on this article, but I felt it necessary to follow up with a much more constructive and practical approach on what I actually think makes a great app icon. Read “Designing better app icons” for less preach and more bullet points. ❤


🗯 Join me on Youtube for Behind-The-Scenes, Design Tool Tips and Adventures!


Published in #SWLH (Startups, Wanderlust, and Life Hacking)