iPhone App Icon Design: Best Practises

Designing your application icon is a most crucial part of your success on the iPhone platform. The App store with it’s more than 70.000 apps have become quite the crowded bazaar. As an interface designer i cannot but marvel at the emphasis this has put on the delicate art of icon design. Read on as i take you through some do’s and don’ts of App Icon Design.


Other than being a self proclaimed iPhone geek, how do i get the nerve to post about ’best practises’ on this fairly new platform? Well first off, app icon design on the iPhone and iPod touch doesn’t differ that much from the general principles of universal icon design, which i’ve been involved with for a few years now. Secondly, over the past year i’ve been working on iPhone interface projects left and right. I’ve consulted a handful of companies and crafted several commercial and free app icons.

I maintain a minimalistic app review site called appweek.ly that lovingly forces me to spend my good share of money in the app store and generally keeps me on my toes. Now that we’ve got that aside, let’s start with one of my pet peeves.

Don’t include words

An icon is a graphical representation of a word, concept, object or operation. Words are in themselves an abstraction of a concept, object or operation – don’t mix these two representational tools as it will ultimately make your message more cluttered and harder to decode.

Infact, as a rule, I would refrain from using any form of typographical property in an icon. If you have to retreat to another tool of abstraction (the written word) I’d say you’re not using the full force of your pictorial arsenal. Rethink your analogy; is there really no better way to visualize the application than with dry words?Perhaps the only exception to this is single letter representations. They can in themselves become iconic enough to loose their wordly capabilities and transcend into the purely symbolic sphere. Also note that your app icon will always be presented with the name of the application. So people, please get those words out of your icons.

Get those words out of your icons!
There’s quite a few icons in the app store that has words in them. *gosh*

Don’t standard gloss

Apple gives you the option to add their standard gloss to your icon when submitting it to the app store. This is said to give a uniformity to the App store and give your icon that glossy apple look. Im baffled that so many developers choose to apply this standardization to their precious custom icon. If you must add gloss, why not be able to control every aspect of it yourself? Besides, note that not every single native Apple icon comes with gloss, let’s tone it down a bit guys.

Standardgloss
In my oppinion each of these respective icons would have looked better had they not included the standard app store gloss

Simple is good. Simple is clear.

One of the most important rules in icon design is to keep your motif simple and to the point. Icon design is all about expressing yourself clearly in a confined amount of visual space – your 57×57 pixel app icon is certainly no exception! So figure out your analogy, boil down (or trace back) your app to a purely conceptual plane. What is your app really all about? If you could only show people one thing that would represent your entire app, what would it be?

Selecting a single object can work for some apps. If you must have several objects interacting with eachother make sure each and everyone of them is clearly defined and that the interaction is unmistakingly clear.
To be precise you have 3249 pixels at your disposal (57×57), don’t clutter them up with unnecessary noise. As with all design, the more you take away from it while still keeping your message, the more clear that message will be.

Simple icons
It’s all about finding that one good illustration for your icon and making sure that its presented in a clear and simple manner

Details

Don’t confuse simple with plain looking. When you’ve found your conceptual masterpiece don’t hesitate to put it over the top. Slave over that 57×57 icon, add details that perhaps only yourself will notice. Use an array of gradients, highligts and reflections, anything to emphasize the pure awesomeness of exactly your app. This is the first and most important encounter with your product, don’t hold your horses – make it something to remember.

Detailed icons
Here’s a selection of enticely detailed icons. It’s important that the details don’t take anything away from the icon – it shouldn’t clutter up your image but strengthen your analogy.

Icon/App consistency

There’s an argument to be made about the experience of pressing your icon and then using your app. You’ll create a much higher level of trust and fidelity if those two events aren’t too dissimilar. The anticipation you create by having a great icon should be reinforced when your application itself is well designed and vice versa.

consistency
These highly stylized icons are reinforced by the experience of using their apps interfaces.

Stand out from the crowd

Scrolling through the grey rows of the App store, your first point of contact with the customer is more than often your application icon. All the thought and labor you’ve put into your app should shine through your icon and convince the user that he or she simply cannot live without this excellent piece of software. Take steps to stand out from the hordes of other icons out there, make design decisions that will take you away from ’standard’ and swing you over to ’unique’.

unique
Here’s a handful of unique icons that all bring something new to the table and stands out from the crowd.

So what now?

As of this writing there’s more than 70.000 apps in the app store. Make sure that your wonderful app doesn’t drown in the mundane. If you think this sounds like a daunting task, or you’d just like to spend your time actually developing your app, hire a professional. We’re not that expensive and it’s usually money really well spend. Send me an email if you want to talk icon design.

On the other hand, if you feel like mastering your own app icon I’ve put together a simple-to-use PSD file template that will help you get started on your 57×57 pixel gem. Download it here