Designing iPhone icons
TAGS: apple, design, icon, iPhone, Mobile, tips
The idea
One of the most important reason to buy or not to buy an iPhone app is the icon. Why? It will represent the app in the App Store and on the home screen. Also the importance of the icon metaphor can not be underestimated if you want your app to standout from the other apps.
The best method to start from, is to keep it as simple as possible because you only have 3249 pixels to fill a 57x57 canvas. So try to bring down your app’s main goal into one idea or image before starting the magic.
How to
First off all you will need to create a 57x57 and 512x512 version of your icon.
The small one is intended to fit on the home screen and the large one will be for the App Store and promotional reasons. From my experience I suggest you start with the small icon; it is much easier to create a large icon from a smaller one then reverse.
A second thing you need to keep in mind is the gloss on your icon. Apple uses a default layer of gloss but you can turn it off ( native icon & web icon) and create your own. Personally, as a designer, I don’t like the default gloss because it is just a lazy excuse to make your icon fit the style of rest of the default apps.
Another thing you have to be aware of is the rounded corners on the icon. This is done by default and can not be changed, so make sure that your icon is prepared for this.
To make life a little bit easier I created some default Photoshop files where you can start from. I hope you will like them !
Trends
If you are looking into the App Store you will notice that there are some trends in icon design for the iphone, I tried to gather some to give you some inspiration to start with.
☛The first thing you will notice is the way some developers try to group their apps by creating a family of icons. One of nicest example there is is the Tapbot family with their range of apps: Weightbot, Convertbot and Pastebot. Another example can be found in the EA games; they all have the same gray border on every icon off all their apps/games..
☛If you have played some games on your iPhone or iPod Touch you might have noticed the PLUS network or the Open Feint network icons within the application icons. Via this element the developers give notice that they have included one of these social networks within the application. Nowadays such networks can be seen as a sort of quality label that is added to the game.
☛The last trend I would like to discuss is translating the app UI into the icon. This is a excellent way to make sure the icon represents the app and it also makes it easier to understand the app based on the icon. Examples are apps like Weightbot, Classics, ... .
Icons I ♥
Resources
The importance of icon metaphors by @mantia
iPhone app icon design best practises by @flarup
Something missing ?
Have I forgotten something? Is there something you see differently? Please do leave a comment!
5 January 2010 @ 5:16 pm
Toon Claes
Maybe it would be nice to include the border radius of the rounded corners…?
”17 January 2010 @ 3:34 pm
Bert Timmermans
@to1ne: For the 512 by 512 pixel version the radius is about 80 pixels, for the smaller one on the iPhone the radius is 10 pixels.
”18 January 2010 @ 7:42 am
Alena
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
”