Apple's Icon Ecosystem or: Carrying the Quality All The Way Through
Note: This post is long, as in, ~2,800 words long. If you are only here to see icons and not my words, feel free to download the complete sets here (for Mac to iOS transitions) and here (for iOS to Mac transitions).
There were a few things about the Mac that captured my interest back when I was a full-time Windows user. The simple, out-of-the-way aesthetic of the menu bar, the quick window-finding maneuvers of Expose, and even the Dock (which I now have hidden on all my Macs; go figure) were all big attractors. But above all else, I loved the gorgeous, understatedly playful and magnificently detailed 3D application icons.
Since then, a second Apple OS has skyrocketed in popularity: iOS. It, too, has application icons; in fact, they are even more central to the user's interaction with the device than on OS X. In iOS, though, application icons are vastly more limited compared to their Mac counterparts. I wondered: how have Mac developers with existing apps, who had been able to let their design talents loose on the open canvas of OS X, handle these limitations on their icons? Would the beauty of their icons wilt or would the frame sharpen their loveliness?
Help! I'm Trapped in a Rounded Box and I Can't Get Out!
The icons I looked at1 (over 100!) seemed to fall into four categories, and I have opinions about each as a whole. I will reserve judgement on the aesthetic qualities of individual icons insofar as I can contain myself, and will instead try to focus on the methods with which they brought their Mac icons to iOS.3
The first grouping of icons was immediately evident and, sadly, extremely disappointing. These applications took the existing Mac icons, slid them into a rounded square and painted on a background colour. Apple itself was among the worst offenders here; it looks as though they spent five minutes selecting a gradient for the background of the iOS iWork and Filemaker icons and called it a day:
And many, many third party applications, including some top-tier apps like Dropbox, TextExpander and Google Chrome, understandably followed suit:
I would say that Apple's iLife apps also exhibit some symptoms of this, but are somewhat redeemed by more thematic and interesting backgrounds, a technique that has also been used by a smaller group of third party applications:
There were also some edge cases, where iOS icons took at least some creative license with their use of the Mac counterparts, like Sparrow and Skype's inverting of the colours from their desktop icons:
Side Note: Oh God, the blue icons!
These icons do have the benefit of familiarity for users of the Mac versions of the applications, but I don't think that excuses the complete lack of optimization of the icons for what is an entirely different paradigm of icon design. The original Mac icon often has to be shrunk substantially to properly fit into the rounded square, causing it to look too cluttered and complicated on iOS. As Apple says in the iOS HIG:
Embrace simplicity. [...] If an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at smaller sizes.
I think this guidance provides ample argument against this type of icon transfer. While the difference may not be as notable with the icons blown up to a large size like I have shown them here, details such as those on the Garageband guitar or the Pages inkwell are completely lost when seen on the smaller iPhone or iPad screens. Quelle surprise, as the French may say, that Apple says one thing and does another!
This set of applications seems to have simply copy-pasted the icon assets from the Mac version into the iOS app, or at least had such minimal changes so as to make them nearly indistinguishable. I initially felt that this category was the worst, but I felt a bit of sympathy for the iOS icon designers upon realizing that the Mac apps (basically, logos in coloured boxes) had painted them into a corner (mind you, if it was the same designer working on both icons, this excuse goes out the window). I feel that icons that look the same on both platforms tend to be substantially less attractive; rounded-square Mac icons go against some good advice from Apple that helps create visually interesting icons (emphasis mine):
Give your app icon a realistic, unique shape. On OS X, app icons should have the shape of the objects they depict, including cutouts. A unique outline focuses attention on the depicted object and makes it easier for users to recognize the icon at a glance.
Of course, these are even more familiar to users than the first category, but my contention on the grounds of lacking creativity stands doubly here.
Growing it Out and Shrinking it Down
The next logical step up for Mac-to-iOS icon design is to adapt the Mac icon to the rounded corners of an iOS icon. Some of these apps really just changed the shape of the Mac icon into a rounded square, which really makes them no different from the previous category.
The much more interesting icons are those that have focused their design on communicating more clearly by getting rid of, or greatly reducing the visibility of, non-key details. I love this technique in that it mirrors the overall process of transitioning an app from the Mac to the iPhone/ iPad - not every detail can be transferred, and a careful focus on which to highlight can vastly improve the experience by optimizing each device for the subset of features users are most likely to need. I doubt that the icon designers intended to mirror the entire development process in their design, but I like it nonetheless.
These icons really show the prowess of the icon designers; they look just as at home on the desktop as on the mobile devices. Some real standouts here are Prizmo, Billings and Capo; all of their icons are beautiful, and they brought just enough detail into their iOS icons as to preserve their similarity to the desktop counterparts.
My favourite group of icons were those that took some themes from the Mac version, but still stand apart from them. It was often a matter of carrying over a colour scheme, or a key symbol, but in all cases it was a rethink of how best to communicate the app's message with what small, rounded face it presents to users. Apple has a few icons in this category as well:
I like what Apple was trying to do here but, sadly, I hate both the Mail and iTunes iOS icons. I find them boring and visually unappealing, particularly the purple-and-white colour scheme for iTunes. I hope that Apple keeps up the unique thinking, though; they have shown that they can create new, attractive icons with the new Podcasts app, and many of their icons, particularly the iWork ones, need a good revamp.
Other applications did a better job of the complete rethink, though. NetNewsWire went beyond merely simplifying their Mac icon and created something completely distinct and, yet, still distinctly familiar. iBank still has a stuck-in-a-square icon for the iPhone version, but their newly-introduced iPad version has an attractive, simplified concept. And Soulver, one of my absolute favourite apps, has two completely different though equally beautiful and platform-appropriate icons.
Others, like PDFPen and Moneywell, went a little too far along the simplification path and missed the mark on both platforms, at least from my perspective.
The Omni Group, makers of some of the finest applications anywhere, are actually the most interesting case of Mac-to-iOS icon design I found. They seem to have taken Apple's "Back to the Mac" theme to heart, and have let their Mac and iOS icons cross-pollinate, so to speak:
The original iOS versions of OmniGraphSketcher, OmniOutliner, OmniGraffle and OmniFocus were all easily distinguishable from their Mac counterparts while retaining an important symbol and/or colour scheme to make them recognizable. The Omni Group then redesigned all of their icons with a decidedly iOS-inspired aesthetic (while, in most cases, keeping those same key symbols and colours from the original Mac icons).
I do not prefer the new, iOS-inspired Mac icons in any of these case, but there is no denying that the Omni Group have certainly embraced the design of iOS icons in equal measure to their embracement of the iOS platform as a whole. The new Mac icons are nice enough and provide visual consistency between all Apple devices, but I am going to give a definitive thumbs down to this kind of "dumbing down" of Mac icons. As we will see in the next section, this kind of icon design is quickly turning into a slippery slope as more and more iOS icons move to the Mac.
It's an iOS World and We Are Just Living in it
While Mac-to-iOS icon transitions are interesting, it's clear that the winds are blowing much stronger in the other direction. Classic OS X icon design can't fully influence iOS icon design because all iOS icons have to be exactly the same shape and size. The real question for me is whether iOS developers porting their apps to the Mac (or designing for both simultaneously) will uphold the tenets of Mac icon design, or whether they will design to the lowest common denominator.
Unfortunately (though unsurprisingly), I think that the later of these two scenarios is the one that is unfolding. It's just so much more convenient to design a single icon to work on both platforms, and the only kind of icon that can work on both platforms is an iOS-style icon. For what it's worth, Apple says something directly to this effect in the HIG:
Don’t reuse your iOS app icon, if you have one. If you’re developing an OS X version of an iOS app, you should not reuse your iOS app icon. Although you want users to recognize your app, you don’t want to imply that your app isn’t tailored for the OS X environment. Start by reexamining the way you use images and metaphors in your iOS app icon. Then, remove the rounded rectangular outline of the iOS app icon and focus on the main images within it. For example, if your iOS app icon shows a tree inside the rectangle, use the tree itself for your OS X app icon.
To which developers have responded (en masse) with the following icon designs:
Games were the worst offenders, followed closely by utilities that need a helper app running on your Mac to work. I know there are many more examples of this kind of icon design but after I found these I stopped searching; I find them ugly, for one, and disrespectful to the user for not putting in a little bit of effort to customize the icons for the platform they are on.
Some developers made poor iOS icon decisions by putting a primary object inside of the square app icon, which at least made it easy for them to make their Mac icon by removing the background. Apple used this technique for their Facetime icon, and boy, did it turn out poorly. Both icons look out of place on their platforms, and the Mac app in particular has ugly shadows and a confusing logic (is it supposed to be high or low fidelity? On a wall or on a desk?).
Third parties didn't do much better.
Apple has brought/ is bringing a few more of their iOS apps to the Mac, and are doing so in a better way than they did for Facetime; let's see if you can see the pattern:
If you guessed that they "three-dimensional-ized" their iOS icons, you'd be right! For the three icons that are coming to the Mac in OS X Mountain Lion (Notes, Reminders and Gamecenter), they have actually used the exact same angle for the 3D transformation: 98 degrees. Fun fact: this is also the same angle that the Mac iPhoto, Address Book and Dictionary icons are on, in addition to the photo in the back of the Preview icon. Strangely, TextEdit and iCal, which appear to be at the same angle, are just slightly off of 98 degrees. Many third party developers have also used this same method:
I'm really conflicted about these icons. At least some effort went into them, I suppose, and they look more natively OS X than most of the other methods by which iOS icons are brought to the Mac. However, they definitely lack the visual intrigue of apps that started on the Mac, like Things, Fontcase, 1Password, Papers and others.
Some apps, on the other hand, have tried to recreate the magic of traditional Mac icons from their humble beginnings in the rounded squares of iOS:
Reeder, for its part, did a fairly good job of bringing something special to the table during the iOS-to-Mac transition (with a few added goodies, like the papers in the box filling in when new feeds are available). The other icons, though, did a much worse job. Todo and Osfoora (at least, version 1) are simply ugly, and all of the icons give me the inescapable feeling that they are trying to be something that they aren't.
These makes me question whether it is really possible to go from the squashed down iOS icons to something 3D and beautiful, something that doesn't look like an afterthought but a primary component of the application. We might get there as the Mac continues to grow, although the shrinking of the Mac's relative importance compared to iOS makes me suspect that the Mac icons we used to know may well be on their way out.
When I first purchased a Mac, it was amazing to me that anyone would have put so much thought and work into an aspect of the application that would so rarely be noticed and, even then, would often be shrunk to such a small size that the details, so painstakingly crafted, would disappear. It's symbolic of a tenet that many Mac users hold dear: every detail should be carefully considered and aesthetically powerful, small or large. Practical? Perhaps not. But Windows applications (I still use them frequently for work and school) generally feel like a thousand tiny paper cuts, whereas the best Mac developers make every piece of their application smooth and pleasing. I would be remiss not to quote Steve Jobs, who said:
When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.
I worry that, as the Mac slips further and further from the focal point of the industry, that pursuit of beauty throughout might start to fade.
Thanks to everyone who caught the errors; unfortunately, the way everything was put together makes it challenging to change the images. Thanks, also, for all the kind words.
The fine folks at Bjango, who make two apps featured here (iStat Menus and Skala Preview), sent me the updated iOS icon for a forthcoming version of iStat. The new comparison is below. I really like what they have done; they improved on two fronts by increasing the consistency with the Mac icon and by better integrating the icon into iOS's rounded square. As a brief aside, Bjango had a media kit which included high resolution versions of their icons, a much-appreciated courtesy when you are trying to collect 250 different icons like I was.
(I had to do this update from work, so I could only use Powerpoint to put the image together. Really makes you appreciate Keynote.)
If you made it all the way down here, maybe you would be interested in following me on Twitter.
1 It seems that, regardless of the content of the post I want to write, no definite list or dataset is available. So, I made a list of all Mac apps with iOS counterparts that I could find and made it available as a freely editable Google Spreadsheet here. Please add on any that I have missed!
It was also a challenge to get decent resolution icons for some applications. Many of the Mac icons came directly from the application packages, if I owned them, but there were some other tools I had that were invaluable. Crunch made it a piece of cake to get the iOS icons out of their application in the appropriate format, and Keynote and it's fantastic alpha function was what let all of these great images come into existence. ↵
2 The Keynote file with every icon I used is also available for download here.
3A few disclaimers: all icons belong to the original creator, obviously. Also, my criticisms say nothing about the quality of the app: many I have simply not used, and others have a level of quality disproportionate to the attractiveness of their icon (for better or for worse).
