Designing Android Icons
I just completed an icon design job for an Android app so I’d like to share my insights on designing icons for this platform.
UPDATE: Android 2 is out with a revamped interface and better icons. The guidelines have been updated. This post reflects the previous icon system found in Android 1.1.
I recently designed icons for an Android app. It was the first time I had anything to do with Google’s operating system for portable phones so I was very excited about the job.
I’ll detail the design process soon but in the meantime I’d like to discuss the (few) pros and (lots of) cons of designing for this platform.
Google has released guidelines for Android icon designers. There are instructions for all types of icons with color palette, shadow settings and reference diagrams. You can also download a template pack to get you started.
Android features two types of icons: launcher icons (48×48 px) are three-dimensional and colorful whereas the remaining icons (menu, status bar, tab, dialog, list view) are two-dimensional and grayscale.
This already feels like an iPhone ripoff but if you think about it it’s really the only way to go. Menus and toolbars must be visually simple so they employ pictograms instead of full blown icons. Android adds shadows to these pictograms in order to differentiate itself from the iPhone. I believe this is a poor visual choice which adds no value to the icons and in fact reduces their legibility. Anyway since these pictograms are rather simple I’ll concentrate on launcher icons here.
In Google’s words:
A launcher icon is the graphic that represents your application on an Android device’s Home screen.
Here’s a set of launcher icons from Android’s default set:
My first reaction was:
Cool! they’re all 3D!
Unfortunately on closer inspection we can observe a certain lack of homogeneity in the set. Some icons are clearly three-dimensional (Alarm Clock, Calendar, Market) while others are basically two-dimensional icons viewed in perspective (Generic Application, Google Talk, YouTube). It’s reminiscent of Windows’ infamous default icon set:
Ok, Android icons are not that bad! Hey, at least they share a unified visual style and they seem to conform to the same perspective grid. In fact that is exactly the case.
Below is the reference cube to be used for all icons. The designers carefully considered every aspect of the icons therefore the guidelines include precise information regarding the size, the perspective angles, the radius of the rounded corners and the shadow properties:
The guidelines continue:
A launcher icon [...] is a simplified 3D icon with a fixed perspective.
Yeah, about that. Many adjectives come to mind but “simplified” is not among them. The perspective cube doesn’t have a single straight edge. What do you think will happen when you scale down the artwork to 48×48 pixels? Massive antialiasing. At least that’s what happens if you have complex designs.
The biggest problem I have with this perspective grid is that the angle is awkward. It forces you to either emphasize the top face, which is not ideal for all icons, or the front face, which is unfortunately slanted forward. What is that? Not to mention that the side face is viewed at an extreme angle that deforms the shapes beyond recognition. So no detail must be present there. Here’s the Illustrator template you can download from the guidelines:
Both the house and the answering machine have no detail on their side face.
Let’s review the YouTube icon from Android’s default set:
See what I mean? This icon is essentially two-dimensional yet it is viewed at an angle.
The words You and Tube hang forward and down, a very unusual angle. For 48×48 px icons it’s best to choose a perspective angle that preserves straight lines either horizontally or vertically. See what a true master icon designer like Hybridworks does with the amazing Yoritsuki icon set:
See how he kept all horizontal lines exactly straight? That really helps the icons be legible at this small size.
Let me include a few of my own icons for completeness:
As you can see some icons work really well (Burger, Banks, Travel) while others are strangled by the perspective (Coffee, Groceries, Hospitals). The gas icon depicts a road sign rather than an actual gas pump which, at this angle, would have been almost indiscernible.
Granted, in a set as diverse as this you can’t expect every icon to work equally well (and let’s not forget my own craftsmanship which I hope will improve over time) but I’m sure a simpler perspective grid would have created less trouble.
Android’s perspective grid is a bitch to master.
There, I said it.
Android icons vs. iPhone icons
The iPhone Interface Guidelines don’t include specific requirements regarding perspective, color palette, corner radius and shadow blur distance. Icons can be 2D or 3D, more or less realistic, simple or complex, plain or detailed.
The way the iPhone achieves visual coherence is by framing all icons in a 57×57 px rounded square. No matter what the squares contain they all look nice sitting next to each other, both in grid and in list view.
Of course this alone doesn’t prevent icons from being ugly though it seems that iPhone developers pay attention to their main icons.
Maybe it’s because they know that your app’s main icon is what sells it.
Enter the Android Market.
Android Market is the equivalent of the iTunes App Store.
Are they kidding? Is this the way to counter the iPhone?
Take a look at the app gallery. Take a close look at those launcher icons. Did any of the developers read the design guidelines? Forget about respecting the idiosyncratic perspective grid, most of the icons are not even three-dimensional!
I’m sorry but this is unacceptable. If I were considering an Android phone I’d be immediately put off by these two facts:
Say whatever you want about Apple’s byzantine, puzzling approval policy for iPhone apps but at least they weeded out the amateurs. This is the impression that I get by browsing the App Store in iTunes.
Notice how many styles these icons encompass and yet they don’t look bad next to each other. The common frame helps unify the view. The lack of perspective and color restrictions allows the designers to fully express the app’s potential.
My reasoning is that a platform open to developers should not cripple designers before they even start working.
If you’re an Android developer please consider hiring a professional interface designer for your next application (a shameless plug, but I’m also trying to make a living here).
If you’re a member of Android’s approval team please don’t let the amateurs through by requesting developers stick to your design guidelines (but consider changing them).
I still don’t own an iPhone and I don’t know when I will. But I am definitely sure I won’t ever own an Android-powered phone.
Designing icons for the Android platform has the advantage of pushing your skills to the limit by forcing you to come to terms with a tough perspective grid. And the icon world could surely use more designers skilled in 3D and realism.
The problems lie in the unpredictable results these restrictions yield. An awkward viewing angle, a restricted color palette and a small size certainly don’t do justice to good design.
My advice to the Android graphic team: step it up!
Consider introducing a perspective grid that doesn’t smother the icons in antialising.
Someone informed me on Twitter that new icons will be introduced with a different perspective at 72×72 pixels. While this is good news for future apps it also means that present apps will have to redesign their launcher icons. I shudder at the thought of what some of the developers will do (read: scale their PNGs up…).
I’m kidding. No disrespect here, I know there are serious developers out there who are passionate about their work.
What are your thoughts on this matter? Am I too harsh? Or outright wrong?