8 ms·

The Art Of The iOS Icon

200 points by muratmutlu 14y ago

rudiger 14y ago
What do these actually look like on the iPhone at icon size?
- muratmutlu 14y ago
  It varies, on Retina many look beautiful. Some of the icons shown in the post are only for iTunes which has a different, larger pixel size (512x512) to the one on the handset
- underwater 14y ago
  I wondered about this too. The icons that use a pseudo-isomeric perspective may look strange next to a bunch of top down icons.
deleted 14y ago
[deleted]
MaxGabriel 14y ago
Murat, are there any resources/insight you'd recommend for making app icons yourself?
- muratmutlu 14y ago
  Here's a great video of one of the designers recording their Photoshop session and creating a icon http://vimeo.com/36302707 http://vimeo.com/36302707 I use this PSD to create icons, it comes with a PS Action that resizes and exports the icons based on the biggest design so you don't have to make each one. It also puts it in situ! Download it here http://www.pixelresort.com/blog/new-app-icon-template/ http://www.pixelresort.com/blog/new-app-icon-template/
jblow 14y ago
Cute site. It doesn't change the fact that the iOS icon standard is terrible, though. (It defeats the human visual system's attempts to recognize objects by silhouettes, which is why so many people take so long to find the icon they are looking for).
- 54mf 14y ago
  It's not terrible. You're ignoring the human visual system's ability to recognize objects by color, shape, or pattern.
  - jblow 14y ago
    It seems likely from your reply that you have no education in matters related to vision. The human visual system uses other things too, yes, but silhouettes are one of the most dominant features because they are most invariant to lighting conditions. (Think about what would happen if you mostly depended on color, but now you are walking around at night when humans have poor color discrimination).
  - underwater 14y ago
    Shape and silhouette are closely related. With simple icons, like the Phone app, the background is not overly distracting. Unfortunately many apps believe they need to fill the entire icon with detail. The YouTube and Notes apps have pictures instead of simple shapes. There is nothing to subconciously recognize so instead I must interpret the picture and conciously map that to the name and purpose of the app. Apple could have used spacial awareness to help us recognize apps. Unfortunately iOS messes this up too, the home button can take me to any of my app screens. So I need to get my bearings before hunting for my app. We are left with just color and patterns to differentiate icons. This makes the task of recognizing apps much more difficult purely so the phones look nice in store.
- gurkendoktor 14y ago
  I wonder if the reason is that idiots will fill the whole available area anyway. Is Apple that afraid of bad designers? Ony my HTC One X, PlayBook and Mac, the builtin icons are gorgeous and have interesting silhouettes. But if I look at any of the three attached App Stores, 3rd party vendors are desparate to fill the whole area with details. The medicine category in the Mac App Store is a pretty good example of it. Most icon are either a solid block that will ruin your Dock's aesthetics, or a circle. I wish Apple would reject them all, but I can imagine the media response to that. http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewRoom?fcId=412962468&mt=12&genreIdString=12010&mediaTypeString=Desktop+Apps http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewRoom?f...
templaedhel 14y ago
"Never underestimate the importance of a great app icon. It’s the first thing a user sees before downloading your app (I’ve downloaded apps in the past solely on the icon making the app seem interesting)." I cannot stress the importance of this. I have payed money for apps over their free counterparts because the icon looks better. It's a bite sized preview of the experience I can expect to have with your whole app, and more often than not, the quality of the icon is directly correlated to the quality of the UI and UX as a whole.
markdascoli 14y ago
Nice collection, thanks for posting. Have you seen Marco Arment's new Nursing Clock icon? Clever and Unforgettable http://itunes.apple.com/us/app/nursing-clock/id525195468?mt=8 http://itunes.apple.com/us/app/nursing-clock/id525195468?mt=...
kurtvarner 14y ago
1) Put £500-800 of your budget aside I think this is a gross underestimation of how much these designs would cost. Does anyone have any real data on the cost of iOS icon design?
- muratmutlu 14y ago
  I've contacted several designers on that list, give or take exchange rates, you can expect to pay that.
  - objclxt 14y ago
    Does that include the 57x57 icons though? As several people have pointed out, most of the icons you posted won't scale down, whereas Apple and Co may have some beautiful hi-res icons but also completely re-do them for smaller display.
    - muratmutlu 14y ago
      Yes it did in my enquiries. I hired one of the guys and he produced the full set of icons, making changes to all the sizes to make sure they looked good on the phone.
- coryl 14y ago
  Anyone willing to pay that much for an icon design either has deep pockets or a big commitment to good design. That is a lot of money for an icon.
  - arn 14y ago
    I don't see that at all. Unless you are just building free throwaway apps in your spare time, it's in the realm of reason for any serious app. People do make decisions based on icons, so a better icon can be good investment if you are trying to attract downloads.
  - rahoulb 14y ago
    In the Apple ecosystem, you need a commitment to good design. It's less strong than it used to be (for example read John Siracusa and early Gruber criticising Apple's design choices with in OSX or Pierre Igot taking every app he comes across to task). But it's always been a defining point of playing in the Apple world, ever since Steve Jobs mentioned his calligraphy classes.
esad 14y ago
The author of the article seem to think that a good iOS icon is a one that uses a perspective trick to produce a faux 3d effect. I'm not sure these are very usable when sized down to 57x57 pixels which is default iPhone icon size (double that for retina).
replicatorblog 14y ago
I love all these designs and follow many of the designers who created them on Dribbble. These are impressive aesthetic achievements, but I'm always surprised that none of these icons are for an app with decent sales. I don't think many, if any, of these are in the top 200 of their respective categories, but there are a number of horribly designed icons in most of the top 20's. I'm a designer and predisposed to nice designs, but always find it a shame that these great works don't get a larger audience.
nanijoe 14y ago
One of those icons was designed for an app of mine : http://itunes.apple.com/us/app/bill-organizer-manage-track/id509909227?mt=8 http://itunes.apple.com/us/app/bill-organizer-manage-track/i... We (the designer and I) ultimately rejected it, because it just did not stand out at 57x57. As good as some of those icons look, you have to discipline yourself to view and evaluate them at 57x57, cos thats how the user is going to see them. Also bear in mind that the user will see them among a multitude of icons, so they have to stand out for more than just being pretty.. I am tempted to conclude that these pretty icons just don't matter as much as we think they do, and the most effective ones may well be those with a solid bloc of color (like the path icon), cos they are easier to make out on a crowded screen .
- pantag 14y ago
  that app of yours is getting some serious bashing... is the app new, or are they unfair reviews?
  - nanijoe 14y ago
    The app is new..the biggest complaint, is that there is no way to delete stuff. There is.. ie , swipe from left to right on an item, and a delete button appears, something I thought was pretty familiar to most iPhone users (turns out I was wrong). Right before I submitted the app (a second time) for review, I decided to ask the user if they wanted to upgrade to the full version every time they saved a bill...I forgot to also remove the buy button on the main menu, when a purchase was made in that particular instance. The user still got the full version, but as you can imagine, the presence of the buy button made it look as if the features were still unlocked. I'm of course working on an update to fix those..and add a few new features.
    - X-Istence 14y ago
      The swipe left to right to me is counter-intiutive, most of the apps I've come across it is swipe from right to left, and the button to delete appears on the right. Although, testing with some apps right now it appears both ways works, but I have noticed that apps also generally include an edit button that then lets me select multiple items and do a particular action on them.
generateui 14y ago
Those icons are absolutely horrible. They are images, distracting the viewer by the amount of details. Icons should convey only the bare minimum of shape. The metaphor of the meaning should be captured, not the incredilous picture of a remotely possible parrallell.
eswangren 14y ago
Just my $.02, and I realize this is anecdotal, but I don't give two craps what your icon looks like. If your app is good, I'll use it.
- pooriaazimi 14y ago
  You're right. But a lot of users buy/download free apps simply because it has a nice icon. Would you buy/download '3420 TOEIC Word Test Pack'[1]? It might be good, but you wouldn't download it because it's ugly and pollutes your shiny phone's home screen. [1] http://itunes.apple.com/us/app/3420-toeic-word-test-pack/id482837003?mt=8 http://itunes.apple.com/us/app/3420-toeic-word-test-pack/id4...
  - eswangren 14y ago
    Well, like most people on HN, I'm an engineer, and I just don't care. I want functionality and stability. You could have the ugliest icon ever and I just don't give a damn because it is irrelevant.
    - pooriaazimi 14y ago
      I agree completely, and that's what I do too. But I also understand that potential iOS users are not necessarily engineers and if my goal is to sell more apps to these naive users, I'd better find a good designer.
    - MrScruff 14y ago
      There's nothing inherent in being an engineer that means you can't appreciate good design.
      - Karunamon 14y ago
        No, but dismissing an app based on "bad design" (of a tiny icon, of all things) is just prejudicial, illogical silliness.
  - mitjak 14y ago
jyap 14y ago
The problem is most of those aren’t actually apps (are any of them?) and are not shown at actual iPhone size. Dribble isn't the app store. The post may has well been titled 'Cool picograms in a 1024 pixel rounded square'.
hamey 14y ago
I understand the criticism about these highly-designed icons not being appropriate for low resolutions, but any decent designer will recreate them from scratch for different sizes so they still perform well.

200 points by muratmutlu 14y ago

rudiger 14y ago

What do these actually look like on the iPhone at icon size?

muratmutlu 14y ago
It varies, on Retina many look beautiful. Some of the icons shown in the post are only for iTunes which has a different, larger pixel size (512x512) to the one on the handset
underwater 14y ago
I wondered about this too. The icons that use a pseudo-isomeric perspective may look strange next to a bunch of top down icons.

deleted 14y ago

[deleted]

MaxGabriel 14y ago

Murat, are there any resources/insight you'd recommend for making app icons yourself?

muratmutlu 14y ago
Here's a great video of one of the designers recording their Photoshop session and creating a icon http://vimeo.com/36302707 http://vimeo.com/36302707 I use this PSD to create icons, it comes with a PS Action that resizes and exports the icons based on the biggest design so you don't have to make each one. It also puts it in situ! Download it here http://www.pixelresort.com/blog/new-app-icon-template/ http://www.pixelresort.com/blog/new-app-icon-template/

jblow 14y ago

Cute site. It doesn't change the fact that the iOS icon standard is terrible, though. (It defeats the human visual system's attempts to recognize objects by silhouettes, which is why so many people take so long to find the icon they are looking for).

54mf 14y ago
It's not terrible. You're ignoring the human visual system's ability to recognize objects by color, shape, or pattern.
- jblow 14y ago
  It seems likely from your reply that you have no education in matters related to vision. The human visual system uses other things too, yes, but silhouettes are one of the most dominant features because they are most invariant to lighting conditions. (Think about what would happen if you mostly depended on color, but now you are walking around at night when humans have poor color discrimination).
- underwater 14y ago
  Shape and silhouette are closely related. With simple icons, like the Phone app, the background is not overly distracting. Unfortunately many apps believe they need to fill the entire icon with detail. The YouTube and Notes apps have pictures instead of simple shapes. There is nothing to subconciously recognize so instead I must interpret the picture and conciously map that to the name and purpose of the app. Apple could have used spacial awareness to help us recognize apps. Unfortunately iOS messes this up too, the home button can take me to any of my app screens. So I need to get my bearings before hunting for my app. We are left with just color and patterns to differentiate icons. This makes the task of recognizing apps much more difficult purely so the phones look nice in store.
gurkendoktor 14y ago
I wonder if the reason is that idiots will fill the whole available area anyway. Is Apple that afraid of bad designers? Ony my HTC One X, PlayBook and Mac, the builtin icons are gorgeous and have interesting silhouettes. But if I look at any of the three attached App Stores, 3rd party vendors are desparate to fill the whole area with details. The medicine category in the Mac App Store is a pretty good example of it. Most icon are either a solid block that will ruin your Dock's aesthetics, or a circle. I wish Apple would reject them all, but I can imagine the media response to that. http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewRoom?fcId=412962468&mt=12&genreIdString=12010&mediaTypeString=Desktop+Apps http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewRoom?f...

templaedhel 14y ago

"Never underestimate the importance of a great app icon. It’s the first thing a user sees before downloading your app (I’ve downloaded apps in the past solely on the icon making the app seem interesting)." I cannot stress the importance of this. I have payed money for apps over their free counterparts because the icon looks better. It's a bite sized preview of the experience I can expect to have with your whole app, and more often than not, the quality of the icon is directly correlated to the quality of the UI and UX as a whole.

markdascoli 14y ago

Nice collection, thanks for posting. Have you seen Marco Arment's new Nursing Clock icon? Clever and Unforgettable http://itunes.apple.com/us/app/nursing-clock/id525195468?mt=8 http://itunes.apple.com/us/app/nursing-clock/id525195468?mt=...

kurtvarner 14y ago

1) Put £500-800 of your budget aside I think this is a gross underestimation of how much these designs would cost. Does anyone have any real data on the cost of iOS icon design?

muratmutlu 14y ago
I've contacted several designers on that list, give or take exchange rates, you can expect to pay that.
- objclxt 14y ago
  Does that include the 57x57 icons though? As several people have pointed out, most of the icons you posted won't scale down, whereas Apple and Co may have some beautiful hi-res icons but also completely re-do them for smaller display.
  - muratmutlu 14y ago
    Yes it did in my enquiries. I hired one of the guys and he produced the full set of icons, making changes to all the sizes to make sure they looked good on the phone.
coryl 14y ago
Anyone willing to pay that much for an icon design either has deep pockets or a big commitment to good design. That is a lot of money for an icon.
- arn 14y ago
  I don't see that at all. Unless you are just building free throwaway apps in your spare time, it's in the realm of reason for any serious app. People do make decisions based on icons, so a better icon can be good investment if you are trying to attract downloads.
- rahoulb 14y ago
  In the Apple ecosystem, you need a commitment to good design. It's less strong than it used to be (for example read John Siracusa and early Gruber criticising Apple's design choices with in OSX or Pierre Igot taking every app he comes across to task). But it's always been a defining point of playing in the Apple world, ever since Steve Jobs mentioned his calligraphy classes.

esad 14y ago

The author of the article seem to think that a good iOS icon is a one that uses a perspective trick to produce a faux 3d effect. I'm not sure these are very usable when sized down to 57x57 pixels which is default iPhone icon size (double that for retina).

replicatorblog 14y ago

I love all these designs and follow many of the designers who created them on Dribbble. These are impressive aesthetic achievements, but I'm always surprised that none of these icons are for an app with decent sales. I don't think many, if any, of these are in the top 200 of their respective categories, but there are a number of horribly designed icons in most of the top 20's. I'm a designer and predisposed to nice designs, but always find it a shame that these great works don't get a larger audience.

nanijoe 14y ago

One of those icons was designed for an app of mine : http://itunes.apple.com/us/app/bill-organizer-manage-track/id509909227?mt=8 http://itunes.apple.com/us/app/bill-organizer-manage-track/i... We (the designer and I) ultimately rejected it, because it just did not stand out at 57x57. As good as some of those icons look, you have to discipline yourself to view and evaluate them at 57x57, cos thats how the user is going to see them. Also bear in mind that the user will see them among a multitude of icons, so they have to stand out for more than just being pretty.. I am tempted to conclude that these pretty icons just don't matter as much as we think they do, and the most effective ones may well be those with a solid bloc of color (like the path icon), cos they are easier to make out on a crowded screen .

pantag 14y ago
that app of yours is getting some serious bashing... is the app new, or are they unfair reviews?
- nanijoe 14y ago
  The app is new..the biggest complaint, is that there is no way to delete stuff. There is.. ie , swipe from left to right on an item, and a delete button appears, something I thought was pretty familiar to most iPhone users (turns out I was wrong). Right before I submitted the app (a second time) for review, I decided to ask the user if they wanted to upgrade to the full version every time they saved a bill...I forgot to also remove the buy button on the main menu, when a purchase was made in that particular instance. The user still got the full version, but as you can imagine, the presence of the buy button made it look as if the features were still unlocked. I'm of course working on an update to fix those..and add a few new features.
  - X-Istence 14y ago
    The swipe left to right to me is counter-intiutive, most of the apps I've come across it is swipe from right to left, and the button to delete appears on the right. Although, testing with some apps right now it appears both ways works, but I have noticed that apps also generally include an edit button that then lets me select multiple items and do a particular action on them.

generateui 14y ago

Those icons are absolutely horrible. They are images, distracting the viewer by the amount of details. Icons should convey only the bare minimum of shape. The metaphor of the meaning should be captured, not the incredilous picture of a remotely possible parrallell.

eswangren 14y ago

Just my $.02, and I realize this is anecdotal, but I don't give two craps what your icon looks like. If your app is good, I'll use it.

pooriaazimi 14y ago
You're right. But a lot of users buy/download free apps simply because it has a nice icon. Would you buy/download '3420 TOEIC Word Test Pack'[1]? It might be good, but you wouldn't download it because it's ugly and pollutes your shiny phone's home screen. [1] http://itunes.apple.com/us/app/3420-toeic-word-test-pack/id482837003?mt=8 http://itunes.apple.com/us/app/3420-toeic-word-test-pack/id4...
- eswangren 14y ago
  Well, like most people on HN, I'm an engineer, and I just don't care. I want functionality and stability. You could have the ugliest icon ever and I just don't give a damn because it is irrelevant.
  - pooriaazimi 14y ago
    I agree completely, and that's what I do too. But I also understand that potential iOS users are not necessarily engineers and if my goal is to sell more apps to these naive users, I'd better find a good designer.
  - MrScruff 14y ago
    There's nothing inherent in being an engineer that means you can't appreciate good design.
    - Karunamon 14y ago
      No, but dismissing an app based on "bad design" (of a tiny icon, of all things) is just prejudicial, illogical silliness.
- mitjak 14y ago

jyap 14y ago

The problem is most of those aren’t actually apps (are any of them?) and are not shown at actual iPhone size. Dribble isn't the app store. The post may has well been titled 'Cool picograms in a 1024 pixel rounded square'.

hamey 14y ago

I understand the criticism about these highly-designed icons not being appropriate for low resolutions, but any decent designer will recreate them from scratch for different sizes so they still perform well.