January 23, 2016
Last May, in an attempt to improve my skills with both color and Adobe Illustrator, I designed the first of these reimagined versions of the default icons for Apple's iOS. After the first few, which for a short time I considered discarding, I gave another thought to my original idea with the icons: to do them as I would have done them around the time iOS 6 gave way to iOS 7, an update that vastly changed iOS's (and, since then, Apple's) design aesthetic.
As I suddenly found myself redesigning all the icons in the operating system, I had a few guiding principles in mind:
- 1.Keep the artistry.
- 2.Return to what I see as the often “simpler” (... a tricky word), more rigorously designed, and more consistent stylistic origins of iOS without reducing the icons to the point of abstract non-communication that I believe some of the current icons reach.
- 3.Improve the icons' color, shading, and legibility (use contrast, boldness, etc., so people can see features easily).
- 4.(Mingles with the first two points...) Call back to the elegant taste and specific feel of early 2000s Apple. For instance, incorporate white (but not pure, flat white, in the blinding style of the current iOS design).
- 5.Wherever possible, though under reasonable constraints, increase an icon's usefulness.
- 6.Wherever possible, though under reasonable constraints, replace an icon with a more creative rendition. (Do not be afraid to scrap an icon's previous/current concept for something new.)
- 7.Remain conscious of the fact, as much as I resent this impulse in some ways, that some users had been crying out for something “new” during the period prior to iOS 7's release. (To some extent, the very fact of my redesigning the icons answers the desire for “newness”; in any case, I felt I could breathe enough new life into the icon collection to address both these people and my concerns listed above).
I worked on the icons for a few weeks in May before abandoning them for some time. I never planned to post them anywhere, or show them to anyone. But I had a reawakening this January and hatched a plan to refine and revamp the icons, add two new ones, and post my result. Let me give you a glimpse into my thought process with each:
The Phone app icon, among the first few I designed, was supposed to be an exercise in tasteful application of color and shading. It lies somewhere in between the hard shine and pinstripes of the iOS 6 icon (as it happens, both the shine and the pinstripes had grown more pronounced over the previous few iOS versions) and the bareness of the current icon. I feel the current icon suffers from too little contrast between the glyph and its background. Therefore, I redrew the old phone glyph, which I find more proportionally harmonious and overall better-looking, and gave it a subtle drop shadow to help it stand out from its green field. My icon's background, in contrast to the washed-out, nigh-on-unpleasantly-oversaturated gradient in the current icon, has a calm but still colorful green with three-dimensional shading on the top and bottom as well as an understated glow. The Messages app received the same treatment:
Finally, FaceTime, which completes the trio of “communications” apps, had a distinctive icon in iOS 6 and prior. However, despite my qualms about the execution of its post-iOS 7 counterpart, I liked the idea that FaceTime would join Messages and Phone in the green suite:
My icons for iOS's “core” apps (by which I mean Phone, Music, and Safari) all lent their looks, with some adaptation, from the original icons Steve Jobs presented for those features in 2007:
Apple retitled the iPod app “Music” in iOS 5, changing the icon accordingly to a musical note. Here are the icon comparisons for Music and Safari, respectively:
The main trio as they might look today:
On the subject of blue apps, the blue gradients in iOS 6 and prior were different enough between different icons to make a visually hypersensitive person itch (or twitch, or wheeze mildly, or perhaps endure a sudden swelling of the uvula), but not different enough to seem as if Apple meant them to stand totally distinct from one another. My treatments of other blue apps use the same blue as Safari:
Now I come to the last of the blue apps: Weather. The pre-iOS 7 Weather icon permanently read 73 degrees and sunny. As it is not, of course, 73 degrees and sunny all the time, that reading often amounted to a lie. In the icon's iOS 7 redesign, Apple removed the 73-degrees label and added a cloud in front of the sun. Weather no longer had a deceptive icon, but it did not provide as much information as it could. In my treatment, the Weather icon updates with a "live" picture and temperature every twenty minutes. I thought twenty minutes would be infrequent enough not to drain the iPhone's battery too quickly but frequent enough to accommodate the obsessive weather checker. Perhaps the Settings app could contain a setting for Weather that allows the user to lengthen the interval between updates, for those either concerned about their batteries or unconcerned about the weather. Perhaps the user could turn off the live icon altogether in favor of a permanent sun. Either way, allow me to present my renderings of sundry weather:
Now for Calendar, an icon that has always broadcast live updates:
And other productivity-focused apps:
I return momentarily to the “live app icons” zone with Stocks, an icon I changed drastically. In my rendition, the stock name appears at the top of the icon, and the most recent fluctuation in that stock appears at the bottom of the icon. The Stocks icon, like the Weather icon, would update every twenty minutes (with the same “perhaps iOS could allow the user to change the interval...” caveat). Finally, the user could feature any stock he or she pleases, and the type would condense or resize to accommodate the name; I just happen to use NASDAQ in my example:
Next, I would like to show the icons for the leftover “media”-type apps. First in line is that perennial sibling of the App Store icon, the iTunes Store icon:
iBooks, Game Center, Videos, and Podcasts:
My above Podcasts icon expands on a concept Apple established with the icon for its Tips app, launched with iOS 8. The filament in the light bulb glyph is a “T,” for “Tips.” I like the idea a lot. Although Tips has no iOS 6 version or equivalent, I can still show the current icon with my rendition:
I've not yet covered some of iOS's “utility” apps. The most obvious among those is probably Settings:
But let us not forget the Maps app:
Then comes a quintet of “C” apps: Camera, Contacts, Calculator, Clock, and Compass:
I thought at length about the color for Voice Memos. Apple's icon design guidelines (at least as pertain to OS X; I do not know about the iOS ones) recommend a grey palette for utilities, reserving the more colorful treatments for consumer-oriented apps. This makes sense to me. So the Voice Memos icon wore a dark grey coat at first, before I decided I could do better. I realized that I had no red icons yet, and that red reminds me of “record,” and before I knew it, I had a red Voice Memos icon that begs to be pressed:
Some apps for which I designed icons used to be extras that one could download on a whim from the App Store, only recently graduating to default app status:
Passbook, introduced with iOS 6, changed its icon, name, and concept to Wallet as of iOS 9. My rendition of Wallet has stronger Apple branding, something that, for reasons that remain a mystery to me, Apple seems wary of nowadays as it strips away “i-” prefixes and all remnants of its previous warm design aesthetic. Here I compare my icon to the iOS 6 Passbook icon and the current Wallet one:
And, at long last, I come to the apps that did not exist until iOS 8 or 9. In my eyes (and ears, and nose, etc.), most of these icons, as they currently exist, have room for drastic improvement:
The last of these relatively new apps, and the last of all my icons, is Apple Watch:
I worked for probably several hundred hours on these icons, if only to show what could have been. I hope they make you look at the world a little more closely.
N.Newer Post George Martin Older Post At Bay Go to Main Blog Page