24 May Double-edged consistency
Category: Apple, Icon Design, iPhone

iPhone icons are gorgeous. The home screen is a beautiful display of icons that have been extremely carefully designed to achieve a stylistic balance. On the desktop, the same applies, but icons have far less ‘rules’ imposed on them, and are generally very diverse in their appearance. One could conclude that there is less consistency in the design of desktop icons than there is in iPhone application icons.

iphone-icon-macro

As a result, icons in the Mac OS X dock also generally have less trouble looking good and blending in with the system icons. There’s simply more room for creative freedom and slight stylistic differences. The iPhone is a different story. I keep all third-party application icons (apart from a few notable exceptions) off my home screen, because they stick out like a sore thumb. Why is this, when it is so seemingly simple to fit into the consistent design standard, and what can Apple do about it?

Most of Apple’s iPhone icons are surprisingly simple at first glance. The ‘phone’ icon is not much more than a well-designed glyph and a green gradient with the obligatory crisp bevel and gloss applied. Apple provides direction to developers on how to design an application icon for iPhone in their “iPhone HIG”; a brief 378 words and two sample images are provided as guidance to developers on how an iPhone application icon should be designed. The example even gets it wrong, and produces an undesirable icon that has an inset bevel and lacks a proper gradient styling. Google’s Android platform, on the other hand, has a detailed 17-page PDF guide on icon design for its platform.

Is this the same Apple that developed such elaborate documents on how all types of icons on the desktop should be designed? In the mean time, to fill the void, several tutorials on iPhone icon design have appeared on the web, often making things worse. A good example is this one (credit to Louie Mantia for the link), which uses all types of effects in the icon that are completely out of line with how system icons look.

You can see where I am going here; the consistency of the iPhone home screen is so high, that the design requirements to make an icon look ‘in place’ have increased exponentially. Placing a bevel three pixels ‘deeper’ into the icon rather than at the top edge of the icon looks extremely strange. The same goes for using a shorter, bold gradient, for example. A lot of professional designers get it wrong as well, and I can understand; it’s truly very hard to make an icon that looks as great as one from Apple’s bunch and blends in with the rest. I don’t mean to be an icon snob; I like diversity in my icons, and especially creative freedom. It’s more than just annoying, however, when creative and diverse motifs look extremely alien to their environment.

What could Apple do about this? Well, for one, it could publish its icon styles and expand the guidelines for making iPhone application icons, which would allow developers to access resources that will help them not only stand out in the store, but also worthy of being on people’s home screens.

I won’t wait for Apple to do such a thing: to be honest, I don’t think they ever will. That’s why I’m working on creating a set of Photoshop files with pixel-perfect styles that Apple uses in their own icons, and more importantly, release a Mac application that will make previewing and designing iPhone icons a breeze. I will do a blog post about it later today.

What are your thoughts on icon design and consistency on the iPhone platform? Do ‘inconsistent’ icons annoy you, or even force you to keep your home screen the way it is out of the box?

Related:

    Being Flash Free

    I tend to be harsh on Flash a lot, and I dislike it as much as the next standards-advocating (and technologically savvy) Mac user. Since I like...

    IconResource Launches.

    The day has come, and Icon Resource, the biggest project I've spearheaded since the start of my own company has gone live. You can now go to...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    Big icon day

    Today was a pretty special day in San Francisco for me: it wasn't just special because I had a truckload of work to do, but also because I had one...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

16 Responses

  1. 1
    Andreas 

    i keep those weird icons off my home screen… my 3 pages of other apps look like shit, lol

  2. Good on you for the “creating a set of Photoshop files with pixel-perfect styles ”

    That will be very useful! :)

  3. I couldn’t agree more when it comes to the poor state of 3rd party iPhone icons.

    I’m not sure that I fully understand your objection to Apple’s example icon though – are you referring to the inset bevel on the white star?

    Just out of interest, do you use Apple’s built-in “shine” on your icons, or do you do your own shine (and other) effects by using UIPrerenderedIcon?

  4. 4
    sebastiaan 

    Nick: If one were to use it on the home screen, it would look out of place. This is partly due to the soft, reversed gradient and its blurry and inset bevel.

    I think the Apple-supplied gloss is rarely useful; being able to balance your own gloss, like Apple also does (see Mail, for instance), wins out most of the time.

  5. I was thinking that it is not as bad as many of the icons on apps that I actually use – which I guess is an indictment on the general standard of existing icons!

  6. 6
    Vjh 

    The icons designers at Apple aren’t really ‘best in the business’ either. The clock icon looks terrible, seriously.

  7. 7
    Alan 

    I don’t think that the auto generated gloss+shadow+corners is much of a problem, since I believe you can remove it by code if you want.

    The real problem, IMHO, is that the home screen is too crowded, and to make it cleaner you have to use simpler icons (or make more whitespace, which isn’t our case since the screen is small). Look: all Apple’s default icons are dead simple and, with the exception of the “Maps” icon, all of them have a single subject. The bubble for the messaging icon, the phone for the telephone icon, the camera, and so on. The Youtube icon isn’t even a container with a subject, but a subject itself.

    How many third party apps can you spot on the app store designed with this rule in mind? Very few.

  8. 8
    DeanDMX 

    I think the problem is not the execution (mostly) but the concept of most third party icons. From what i’ve seen iPhone icon design is terrible. Clip-art on blue squares. Things Touch icon is awsome, while Stanza’s icon is terrible.

  9. 9
    Bandar 

    What makes things worse for developers is that you may submit an app with ( No Gloss ) on the icon in the .plist .. but it appears on the app store with the gloss! .. and it ruins the whole effort.

    It keeps happening to me .. iTunes Connect and the App Store are so buggy when it comes to ( applying the gloss or not ) ..

  10. I agree completely with everything you have posted here. Adam Betts hall of wrongness pretty much sums up my feelings. I almost always move apps that are usefull but have awful icons to my last home screen, and subsequently they are rarely used. Very few developers seem to realize the importance a good icon design for their app is.

    However, working with developer chilli X I also appreciate that getting apps built, approved and released is rather hectic and in some environments where all of the dev team aren’t in one central place slip ups happen, not to mention different people liking and disliking different icons. For people making a living from iPhone app development however, there is no excuse for a bad icon design.

    Bandar – That is incredibly annoying, you would expect Apple to have slightly more appreciation for the little things like that..

    Sebastiaan – I’d love to know what you think of my icon for chilli X’s to-do list Done, I am aware it isn’t perfect and am looking to tweak it for the upcoming 2.0 release.

  11. 11
    Patrykw 

    Clock.app icon is terrible. Black icon on the black background…
    New Message.app in 3.0 beta software is also bad, old icon was better.
    You can write to Apple by http://www.bugreport.apple.com and suggest them to change this ugly icons.

  12. 12
    Patrykw 

    Sorry, bad link – http://bugreport.apple.com

  13. 13
    kaishin 

    Clearly there is a lot of litter when it comes to iOS app icons. At the same time there are several gorgeous icons that do not use any of the default styles used in Apple icons. Indeed the absence of in-depth official guidelines is to blame for this lack of consistency, but I think that with so many apps out there, designers would run out of glyphs and colors…

  1. 14
    Cocoia Blog » Composition (via Pingback)

    [...] I alluded to earlier today, Sean Patrick O‘Brien and I are working on the very first Mac application that will be released [...]

  2. [...] Mac and iPhone icon designer Sebastiaan de With of Cocoia takes app designers to task for not making their icons better match the quality and look of Apple’s built-in apps. Says de With: [...]

  3. [...] great article by Sebastiaan de With on the astetics of iPhone [...]