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.
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?