App icons

Beautiful apps start with a beautiful icon, and Google's Android design team offers some great advice for all developers.

Google's Android developers are constantly working with the growing community of application developers and designers to help makes apps that not only do great things, but look lovely while doing it. Building responsive and unique apps is only half the battle, because you and I aren't going to install them -- let alone recommend them to others -- if they don't look good.

In today's segment, they focus on the app icon itself. It's the first thing we see when we install an app, and it's important that it make a good impression. The blog posting lists all the important things to consider when designing your application icon, including the various sizes and formats that will make it look great on every Android device.

Android has taken the world by storm, and a big part of the reason is the rich app catalog. You want to make apps that stand out, and using tips like this will help. It's a must-read for any developer, and worth reading for the curious layman as well. Follow the source link and have a look.

Source: Android Developers

 

Reader comments

Making apps beautiful: The icons

22 Comments

Google icons are crap!!! they are too hellbent on the "minimalistic" look.

There... my rant for the day... ;-)

The point of an icon is to get the user to recognize the function of the icon in the shortest time possible while still appearing distinct. Minimalism helps with this. Any adornments that don't serve this purpose are superfluous.

correction, not everyone knows they want minimalism. no matter how smart you think you are, your brain prefers simple items, keeping things basic, like icons, leaves room for the important functionality. i should know... mobile ui designer.

Sounds like the Govt... just give the sheeple what we think they want, they'll all conform cuz they're sheep.

I don't think they are minimalist, and by that I mean designs that discard ornaments and limit themselves only to basic form as a representation of their own function. Think of Bauhaus school, Slutzky teapot, modernist architecture of Corbusier and Niemeyer, things like that.

If you take a look at Android icons, you can clearly see they don't go that far. The People app icon even has a small easter egg only clearly visible in high resolution, large screens (Lauren Ipsum, a good joke on the old placeholder text). Besides, they have lightning and complex shading effects, as well as reflections and some simple extrusions and viewpoints. The Camera app icon is a good example of all this.

To understand the icon design, you must understand the history of Android.

Unfortunately, the old icon design guidelines don't seem to be available anymore (and they provided a good rationale behind the decisions), but they are still available in the Wayback Machine:

<:>webarchive org/web/20110207225724/<:>developerandroidcom/guide/practices/ui_guidelines/icon_design_launcher.html

Before, they were not meant to be minimalist really, but just clean, caricatured, exaggerated and more dependent on uniform matte textures instead of complex, detailed reflections. This was clearly justified before, when icons should look just the same even on low resolution screens (small LDPI screens). Icons with too much detail may lose its identity when reduced to these smaller sizes. Therefore, the guidelines were justified.

These days, however, most of these limits don't apply anymore, considering the screens available. I'm not even sure small-ldpi is even properly supported anymore (the SDK doesn't seem to have updated graphical assets). That said, most of the limitations of the Launcher icons were removed, as you can see in the new guidelines:

<:>developerandroidcom/design/style/iconography.html

Most of the limitations _suggested_ are purely aesthetic, to keep an uniform look: distinct, full silhouette, viewed by front or slightly front-above. But, as I said in the beginning, the developer now is much more willing to be creative, since resizing limitations don't apply as strongly as before: reflections, extrusions and small text are even encouraged these days, as long as it keeps the uniformity across the launcher panel. And even these are recommendations, not enforced rules. Google won't pull your app because you are not following their guidelines. ;-)

The Holo UI elements, however, are quite minimalist, but even then not that much. There are still glows, subtle shadows, tactile materials. The place where the minimalism is really evident is the ActionBar: simple, plain shapes with unicolor icons. However, I humbly think a more modernist approach (as opposed to the Launcher icons) is clearly justified: they are not meant to really wow the user as a first impression. They have purely utilitarian purposes, and are heavily used all the time (remember, visible ActionBar icons should be those mostly used). Hence the focus on clearly identifiable, simple shapes, to convey their purpose without too much thinking by the user. These are, indeed, the Slutsky teapots of Android, but at least in that position/usage this is justified.

Finally, as a side note, I think the Holo design language transformed a whole industry, and people give too little credit to Matias Duarte. As an example, if Jony Ive did it, people would sing this for decades and write songs about it. Some people say Web OS started the trend, but, honestly, neither it had the same simple design with minimalist touches (Web OS certainly had a light look, but not simple and minimal, but I could be wrong), nor it had the influence and adoption that Android has had. So, I consider Holo to be the first serious step that changed the mobile industry towards more simple, minimalist and functional designs, to the point it had the muscle to force Apple to change their language somewhat.

webOS did it *correctly*.

no fragmentation in gestures with webOS. You know every app has basic gestures to get you settings and such. webOS you knew what the buttons were. Android has a mash of buttons that don't look like buttons and not knowing if you can slide something to get more stuff. of course the OEMs add more 3D effect to the buttons to tell the user easily that it is indeed a button.

but what do i know...

In the final remark, I was talking about visual style, not about who got UI right or wrong. The original point was about icons, that I compared with other Holo elements to say that they have even less minimalist elements than the rest of Holo components (no matter how influent this rest of Holo became). Remember: the original point was about how minimalist the Google icons are.

Besides, no need to play the thought-terminating irony cliche here... Let's disagree with manners and arguments. This is not CNet, Engadget or Gizmodo.

Jerry, now if only the Android Central app and various other Mobile Nations apps actually read this article. "Launcher icons should have a distinct silhouette, meaning that you should avoid simple square/circle icons and instead opt for unique shapes."

Tersus icon pack with Nova launcher is part of my initial device setup. I'm not a fan of the different sized icons that come with stock. I like my rows and columns to be uniform.

Tersus is too square for me.

One issue I had when I switched to the S4, from an iPhone, is that Google is terribly lacking in the icon standards department. Some icons are smaller than others, some icons (i.e. CNN, Zite, Bloomberg) aren't high resolution (which is noticeable on a 5", 1080p screen), etc.

I hope Android 5.0 introduces standards for stuff like this.

Run a launcher and all you have to do is long press on an app and you'll get an option to change the icon from those you've loaded into your Gallery. A Google search will turn up all kinds of alternatives. Just make sure they are in png format. I have beautiful icons on my HTC One running Apex Launcher.

I hate apps that basically use the same icon from their iOS app. None of them ever get to make it to my first page.

I'm looking at you Netflix, IMDb, Flixster, Dictionary, and now Dropbox.

Shouldn't they first learn how to design icons themselves? I use Click UI icons, those are infinitely better, to start with, they have a consistent size, so I can fucking place any two given icons alongside each other without it looking ridiculous.

Not a fan Tersus squared icons, but even those are better.