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.
Overview
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.
Icon types
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.
Launcher Icons
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
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).
Conclusion
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?
Very nice in depth post. Not only informative but really well done.
Thank you John!
Great post Andrea! Lots of interesting info here. Wow. :)
Thanks!
we worked with a app for android at my work. I think it is very confusing. You click in the phone menu to go to the App menu. i don’t know if the company that did the app for us that make things wrong, or if it really have to be like that…
Also, Not all the logos and stuff will be good with this perspective. The simplicity of the iphone makes possible that anyone can create the app and icons. In Android even a graphic designer can have big headached to do the icons…
well, what I saw until now only keep me loving my iphone and thinking that google should have better designers =P
That was exactly my point!
apple has a bunch of professionals makes their icons because they’re the only ones who can make apps (closed source)
and since android is open source any one can make any app and any icon to go with it
so in away yes most android icons do look like crap(ill admit that i’m man enough) but because of that android is better its more customizable you can unlock hidden doors you can have FREEDOM to do what u want with your phone. thats the way it should be! but with the i phone if apple says no then your screwed over. with android if Google says no we can root and walk around them. :D
P.S.
ANDROID Vs apple
who looks bigger >:P
First, learn to spell.
Second, check your facts. You don’t know what you’re talking about.
This is a great post and fair compairson b/w Android and iPhone icons. Agree the behemoth of Apple has some strict quality control but if they didnt, the App Store would turn into one ugly looking app factory with no consistency, kinda like android :)
While that trip into the excruciating minutiae of mobile icons was interesting, I do find the choice of an application platform by aesthetic appeal somewhat short-sighted. The Android platform offers many technological advances that even your vaunted iPhone 3GS lacks (remember those Droid commercials). Not to mention the fact that Time magazine just named the Droid (Android platform) smartphone the “Gadget of the Year”, and named Barnes & Nobles’ Nook (e-reader on Android platform) as runner-up. I agree that the iPhone is beautiful, BUT Android is shipping on roughly 15 devices (not just smartphones) right now. And 2010 is shaping up to be a year of exponential growth for Android in terms of hardware and software. Oh, yeah, that little consulting firm Gartner Group predicts Android market share will surpass that of the iPhone about 25 months from now. So, maybe, if you would like to sell your wares in more than one (restricted, proprietary, temporarily dominant–re:Apple //) mobile market, you could consider working on the “dark side” and help make Android a beautiful place too ?
I understand your point but I’m a designer writing a blog about icons so I’m not going to discuss Android’s technological superiority. I just wanted to share my thoughts on designing icons for this platform and engage my fellow designers.
As for working for Android I did! I wrote this article exactly because I completed a job on an Android app and I’ve included a few of my icons here. I have no intention of limiting myself to the iPhone.
@Andrude No matter how technological superior a thing might be but if you don’t present it well, it won’t sell :) Thats what I have always believed as a developer.
@Andrea Loved the icons buddy :) Good thing you pointing out about the Android store.. Sooner we point out the faster it will get renovated lol.
Every icon designer should read this!
Good post, thnx!
“But I am definitely sure I won’t ever own an Android-powered phone.”
Don’t knock the Android yet! It’s still in it’s early stages at the moment, and as an Android user I can fully vouch for it’s quality. Excluding the fact that the icons may not be as polished as the iPhone versions, it’s still a damned good OS for phones. Believe me when I say they are the easiest phones to sell at the moment, purely because it takes no effort, people just love them instantly
Also, I’m not bashing the iPhone here at all, I’m planning on ordering one tomorrow, but I will still be using my Hero as my main phone, I only want the iPhone for the apps I can’t get yet on Android!
Forgot to mention that by day I’m a phone salesman, just to clear up the ‘selling’ point I mentioned :)
Tom,
I’m pretty sure Android works well, hey it’s Google we’re talking about!
I just pointed out that the icons need an overhaul. Frankly I don’t know much about Android phones but I know they will sell well because they can be customized.
The iPhone is a closed, proprietary format and therefore doesn’t cut it for some people.
The problem with both platforms, as far as I’m concerned, is the high cost. I spend all day in front of my computer so I don’t need the internet in my pocket and I can’t justify spending so much just for the hell of it. But I know one day I’ll give in to my designer’s cravings for beautiful things and will bite the bullet.
Yea definitely, luckily I happen to work for a phone shop, so I get a fairly decent deal on them, costs me a little less than £50 a month for the Hero and the new iPhone
I agree with what you say about the Android icons, but I’d still definitely take Android over iPhone for my daily phone :)
Great article too btw
Hi, I recently bought a HTC Hero and I have to say that I really like Android os it is by far the greatest mobile os I have played with. The endless supply of great apps makes every day with my phone an new experience. Sorry for my long rant I just wanted to share my experience with android os. Have a awesome day and thanks for a great blog.
Android default icons are not 3D anymore since Android 2.1 (but the new guidelines are not yet published afaik, 2.1 was released just last week). The result is much more appealing. I think someone has read your post! :D
Completely agreed. I spent some time trying to design an icon for my app. It was difficult enough to get something representational enough for a non-representational action. The Android Design Guidelines just made things a real pain, and did not make it attractive at all. I shudder from a UI perspective as to why anyone would want to encourage icon to have depth, and promote images that are non-iconic for such a small screen space…
I’m now taking Apple’s base idea & reworking my Android icon with that in mind -that is until the new 2.0/1 guidelines appear…
I’d like to see what you’re working on. Maybe I can help you. I’m working on another Android app now and the main icon came out pretty well.
Personally I do like the default Android style overall better then the iPhone style tough. But you’re right about the perspective, 2D and 3D with different perspective mixed all together will make it all look messy.
Very good in depth post indeed. Good job.
Nice article, i made a couple of apps icons this week, and it was lots of fun… i did not make them ‘guideline 3d’ but it came out amazing!
Developers are often not graphic artist, and from what i see on the market, since lots of apps are free the money to pay for interface designer pros is just not there… yet.
Keep on doing your greatness ya!
They ditched the 3D grid now, apparently, but the new guidelines haven’t been published yet.
I really enjoyed your article and wish all app icons on the android market looked as good as yours.
Just wanted to point out one thing I noticed when first looking into the app guidelines for android myself. Google doesn’t even follow those guidelines for their app icons. I have never seen an android phone that actually uses those sample icons that Google has on their page. I use a Google Nexus One, and before that the G1, and the icons for all those apps have always been 2D without a rotated perspective. I don’t know what’s up with that disparity but it seems like they are just flat out lying or something on that guidelines page.
Also, there is no android approval team, and no android approval process. Feel free to make your icons look exactly like the iphone icons if you’d like (many apps do).
Thanks Joshua.
I noticed that too lately. From what I can see they use entirely different icons now, bigger too. The guidelines haven’t been updated yet.
The iPhone solution of using the same shaped cadre for each icon, is only a step in the right direction, IMHO. It still looks inconsistent to me.
You’d need a fixed cadre around each icon, in one colour (probably black). This also allows for a more even and effective contrast against all possible background colours and shapes.
Next, a rule of ‘one perspective only’ is needed (that’s also where Linux icons go wrong). Of course much more visual info and clues can be put into a 3D icon vs. a front-view icon, so 3D is much preferred.
The present Android Icon Guidelines and they are way too detailed and technical; no surprise nobody follows them.
I recently finished designing 36 3rd party apps for an operating system called Haiku, which has workable guidelines and (in my biased opinion) the best icons around by far, building on the BeOS icon tradition.
The iconset shown above (described as ‘launcher icons from Android’s default set’) is not bad at all, though the icons lack any form of outline and the use of colour is too restrained, or even bland.
Curious what Android will come up with as new version of their icon guidelines!
I understand your point but the black outline makes the icons look cartoonish. I saw your icons and they look alright but they’re a bit childish. So allow me to disagree on your statement that they are “the best icons around by far”.
The Android guidelines are technical because they are meant for design professionals who know what they’re doing, not the hacks that evidently worked on most apps out there.
About the iPhone icons not having contrast, again I disagree. They look perfect to me. The rounded square is like a little window through which you see the app’s logo and most well designed apps follow that logic. So in my opinion the iPhone’s interface is dead on.
Great design. Really inspirational for new bie developer to developed such a creative and beautiful website. I am also working on my new Android Apps. It will surely helps me. Thanks
I really like the launcher icons and the design is awesome i must say.
Very in depth. I enjoyed your take on making icons for each platform.
I was a little disconcerting that after such a thoughtful post you went on with something like “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.” which puts me off a bit.
I guess it is your place to give your thoughts, but just felt like taking a stab at the platform as a whole because maybe the way the develop icons is a bit harder to do….you also made the statement fairly early in the platforms lifespam.
That said it was a good article, and I think both platforms have horrible looking icons across the board and fantastic looking icons across the board. At the end of the day it is the developers/designers of each program that need to make their product good looking….can’t leave that up to Apple or Google. The fact that Apple has a strict approval policy has nothing to do with the quality of the icons, trust me.
Now that Android 2 is out the icons look dramatically better. I’ll update the article with some new insights.
Since I wrote this I bought an iPod Touch and played with a couple of Android phones. They look very capable and slick but in my opinion the iPhone OS is light years ahead in terms of intuitiveness, usability and user-friendliness.
Apple has really won me over with its products, both software and hardware, but I’m really happy Android exists. We need more companies doing things right in the mobile market.
Also been doing some Android icon design and it seems like due to the lack of quality control and headache of making designs in perspective, most app designers (especially on 2.0+) are opting for the more iPhone-like flat icons. This coupled with HTC’s Android skin make the flat icons look much more aesthetic. Guidelines be damned!
Your app’s main icon is what sells it? I thought it was the app itself, and how well it solves the problem it was designed to address with respect to the cost of the license. I.E., the value of the app. I’ve designed thousands of icons over the last eight years and I always watch vendors who have commissioned artwork use icon design as a distraction from R&D, all in the name of this “the icon makes the app!” philosophy. Probably not what you were saying but I wanted to chime in for the sake of venting.
I don’t like to see perspective used in icons unless the display has all kinds of room to work with and even then we’re limiting it to isometric perspective. Rules are GREAT for design.
From the standpoint of a consumer who daily browses through hundreds of apps yes, the icon is what initially draws to the app. Of course the app’s functionality is what creates a user base in the end but the icon is the first contact. First impressions do matter.
We all agree of course that no icon can save a poorly designed app.
Well I agree that they can – within the context you described (icon vs. icon) – generate interest, so to that end first impressions do matter. The goal of selling the app with the icon becomes less about usability and more about command-and-control marketing, a different consideration from software design altogether but one that requires skill nonetheless. A skill I can readily admit to not having. It’s icon design with new and different parameters which I simply don’t have reps in.
P.S. after going over this all day, I’m puzzled. I can’t figure out why the new Android guidelines introduce perspective. Is it recommended, or are they simply saying “Hey if you want to use perspective, use this one so they all look somewhat cohesive.” ? Trying to nail an icon perspective that isn’t isometric is tricky, especially when it’s hard enough to nail a design metaphor for some esoteric app function. Is 2D out? 2D like that used on the Launcher icon appendix here: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#design_tips
?
This article is about the old guidelines. The new ones ditched the perspective.
Way late I caught that. :) Interested in hearing your opinion on the new guidelines.
Thanks for the post. This is my first time leraning how to make icons. I’ve never done that before. I really need this since I learn how to make android icons. Really confusing for me :) and your post helped me so much!