• • •
As a designer of apps, iOS 7 has me at once inspired and frustrated; excited and disappointed.
On one hand, I really enjoy the increased focus on content, the subtle (and not-so-subtle) animations, and while I may not agree with some of the implementation details, I respect the attempt to unify the OS under a new design language.
On the other, I can’t abide some of the design decisions. The liberal use of 1pt lines combined with new, thinner iconography make the whole experience feel a bit anemic. I find the borderless text buttons are a huge step back in terms of usability and clarity. That status bar is really hard to design around if your app uses anything other than a standard UINavigationController.
But more than any of that, I just hate some of those icons.
I know, I know, it’s been done to death. I think Neven Mrgan nailed it, so I won’t repeat everything here. I know he received a fair amount of blowback for that post, but I completely agree with his assessment.
That Safari icon sits in my dock, taunting me every time I unlock my phone. Reminders. Newsstand. Both so rough. And why is the gradient on Mail the opposite of the rest? What do those candy balls have to do with Game Center?
iOS 7 redesign
At times like these, dozens (if not hundreds) of designers immediately take to Dribbble, Behance, or similar to post their own takes on the subject. In this case, flat iOS app icons.
On the surface, it seems like a fun design exercise as well as a chance for designers to hone their craft by applying their unique style to a shipping product. The actual implication, however, can be a little more harmful.
When these kinds of revisions are done in a collaborative environment and as part of an iterative process, it can actually be very constructive. Having been on the receiving end of design reviews where clients (or even worse, other designers) dismiss my work and try to show me exactly how to they would do it better, I know how destructive that can be. Not just to my ego, but to the creative process itself. Or maybe designers are just too sensitive about their work. I know I can be sometimes.
I do enjoy browsing these different ideas though, and I don’t fault any designers for wanting to share them with the world. But there’s always a little voice in the back of my head that tells me that it’s disrespectful and unnecessary.\
So, what did I do? I redesigned all the iOS 7 icons, of course.
My work organized a 12-hour hackathon back in June and I needed to pick a project. I planned on floating around and offering design help to any team that needed it. Then, the day before (beer was involved) I decided that I’d just try and redesign all of the iOS 7 icons. I don’t plan on jailbreaking my phone so I can’t actually use them, but it would at least keep me busy for the day. There can’t be that many icons - maybe a dozen, right?
Turns out there are 24, and that was just the core apps (I didn’t do iBooks, Find My Friends, Remote, or others like that).
24 icons in 12 hours
The first hour was mostly eating breakfast and reading up on using Grapher to make the squircle icon shape. I couldn’t get it to match as closely as I wanted to the actual shape, so I decided just to draw my own squircle. 30 minutes later, I’m done with another bagel and a custom squircle path. (Squircle bagels in Café Macs, that’s a free one for you to run with, Apple) I picked some color swatches for key apps and set up my document.
Now it’s 24 icons in 10.5 hours.
I started on paper, as usual, sketching out several options for each icon. The favorites were selected with a little input from the table. 24 icons in 9-ish hours. No problem.
I’m not debating the merits of flat vs. skeuomorphic design here. It’s been covered to death. But I do think most of Apple’s icons look unfinished. Glossy, candy icons looked amazing in 2007 (well, maybe not amazing, at least new) but I’m afraid they’ve overcorrected and taken away the finishing touches that make all the difference.
Starting in the top left and working my way across each icon. With only a few done by lunch. I was starting to feel a little overwhelmed with the task ahead.
I put my headphones on, quit Tweetbot, and ignored the pain in my wrists that’s associated with designing on a laptop at a cramped folding table. Spoiler alert: I managed to push through and finish just before the deadline.
Here’s what I came up with — I’ll go one-by-one.
Calendar didn’t change much. I just wanted to get rid of that pure white background and bring back the red top bar from iOS 6. I think the white-on-red text is way more legible at a glance and it gives the icon a little more weight. Also, how awesome would it be if Apple opened up an API for dynamic icons like Calendar and Clock? Very awesome, that’s how.
I actually really like the new Photos icon. It’s a great example of how the “Ive grid” can work really well. Again, I just gave it a little shading in the white to get rid of that unfinished, pure white background. The colors are a little more saturated too, mostly because I didn’t have time to keep tweaking the blending mode to match the Apple icon.
The iOS 7 Camera icon is one of my least favorite. For an interface that is breaking (nearly all) ties with physical analogs, it seems to be a huge step back to mimic a SLR shape in the icon. And what’s with that yellow dot? One of my favorite things about the old camera icon was that it mimics the actual hardware on the back of the phone. I figured there was a way to do this a little less photo-realistically and still get the point across. I really like how this one turned out.
Videos is another perplexing one. It’s not new for iOS 7, but I’ve always wondered why they used a clapboard for the icon. It’s a concept that I think most people understand, and they associate it with film and filmmaking. But it’s not appropriate for video playback at all—if anything, it should be the iMovie icon. I kept it simple and just made it a play button. Youtube is headed in the right direction here, strangely enough. I think this one could use a little more work though.
Maps is nearly perfect already. I have no major problems with it as an icon, though it might be fun to try a completely different concept when I have more time. I mostly just tightened up some of the lines and made the blue path a little thinner.</p>
I don’t see why Weather can’t be a dynamic icon. At-a-glance current conditions and temperature would be incredibly useful. Also, the bottom-lit gradient is gone in my version. In this case, it makes even less sense to be dark on the top because there’s a light source in the top half of the actual icon. I know, a blue sky gets lighter approaching the horizon, but out of context, it just looks like a button with a light source underneath.
Passbook was a challenge. I actually don’t hate the iOS 7 version now that I’ve lived with it for a while. I would actually pick Apple’s icon over mine now that I look back.
Notes on iOS 7 is pretty garish. I toned down the yellow and made it more like a yellow message pad. I know, a reference to a physical object will get my design credentials revoked by the skeuo-police, but it makes sense here. For all the talk about flat design and the backlash against skeuomorphism, about half of the new icons still reference a physical objects directly.
When people complain about skeuomorphism, what they are really responding to is realism. Apple is moving away from realism with iOS 7, but not that far away from skeuomorphism. But I said I wouldn’t rant about that. I like my Notes icon a lot. Moving on.
Somehow I’ve been designing apps for years and never made a checkmark app icon. Now I have. Check. I have so many things to say about both the icons and overall design of both Notes and Reminders. They just don’t make sense. Suffice to say that I’d love to have been a fly on the wall during those design reviews. I can’t imagine how bad the stuff was that they threw away.
With Clock, I didn’t find the numbers on the face particularly legible. I like the way this one turned out and it’s another example of how Ive’s larger circle in the grid can work well.
I’d love to revisit the Stocks icon. Honestly, it was about this point where I realized that I had very little time left. I was just glad to get rid of that big blue dot. Mine is not a major improvement though and I have had some better ideas since.
Newsstand is a challenge. I like my little awning treatment, but I don’t love the concept. Anything is better than just chopping them off with a white bar, so I guess it’s an improvement in my mind, but not a huge one. This is another I’d like to revisit.
I don’t care for the hot-pink-to-magenta gradient on the iTunes Store icon. I’m sure others might, but I just wanted to tone it down. I also made an attempt to correct the visual balance of the circle. Mine is a little small, but I had been using that shape up to this point and had no time to correct the others. I’d probably end up with an outer circle somewhere right between mine and Ive’s—I think Neven was closer to a perfect balance here.
App Store is the same story. Tone down the blue and balance the circle.
I don’t even know what to say about Game Center. What do those glossy bubbles have to do with anything? Most people know about chess and associate it with a turn-based game. I’m not in love with my rook shape, but it gets the idea across.
Settings on iOS 7, to my eye, has such an odd mixture of simplicity and clutter. The overall shape is simple, but the teeth on the gears are so tiny that they blend together at arm’s length. I just wanted to simplify it to match the others. I’ve drawn a lot of settings gears in my time, but this one is one of my favorites. Still, I’d like to tweak those inner spokes a bit.
I dropped the eye-piece from the FaceTime icon and toned down the green gradient.
I want to pause to mention that green gradient for a minute. The top part of that gradient is so incredibly vivid that I’m actually afraid it’s going to harm my display over time. I don’t know how—I guess I just imagine that I’m going to use up all the green pixels. It’s afflicting two icons on my home screen that I use the most, Phone and Messages, and I just wanted to back off a bit. I may have overcorrected here. The dark green on the bottom of mine is a bit too dark. I’d like them to look more like the App Store icon. Still, I’d prefer a white background over that neon-green they have now.
Calculator was fun and simple. I just wanted to get rid of those black lines which seemed too harsh for my taste, even if they do accurately represent the look of the actual app.
Contacts on iOS 7 feels so unbalanced with those tabs on the right. Mine isn’t conceptually groundbreaking, but it’s a lot cleaner and I was running out of time. Gimme a break, the caffeine was starting to wear off.
Phone is essentially FaceTime with a phone. Still, anything that gets rid of that neon green is an improvement.
The bubble on Messages feels too big, so I brought the shape more in line with the desktop icon. I like the reference to a two-sided conversation rather than just a speech bubble. Again, goodbye neon green. Good riddance.
Mail suffers from the same upside-down gradient that implies a light source coming from below the icon. I don’t get it at all, so I just went with a deeper blue and a little smaller envelope shape. I’d like to go back and tweak the envelope a bit. I tried playing with a different shape — a paper airplane, perhaps — but I think I was down to an hour at this point and everything I tried just looked like a blatant copy of Mailbox, so I stuck with the envelope.
What can I say about Safari that I haven’t already touched on? The pure-white border. The hairline marks. The strange gradient that implies a light source but doesn’t affect the needle. All of these combined lend to an overall unfinished look and I hate that it has to live in my dock. It’s everything that is “wrong” with iOS 7 icons all wrapped into one.
Now, mine isn’t perfect. I think the blue is a little too saturated in both Mail and Safari. There are many approaches I could have taken, but sticking with the compass needle seemed appropriate. I might go back and try to make the cardinal direction markers a little larger, maybe play with a slightly larger inner circle. I was officially out of time at this point. People were about to start presenting, so I had to be okay with it and move on.
Music was easy, just tone down the gradient to match the others and slightly reduce the size of the music note. The first of the presenters was on his way up as I was exporting the file. Barely made it.
Here’s the whole set, side by side with the originals.
3 months later
Looking back, I recognize that my style is not consistent across the entire set. The latter half is a lot more formulaic — partly because I felt like I needed to rush, but partly because those icons are more, well, iconic.
Having lived with the actual iOS 7 icons for the past few months on my development devices, I can say that there are some that have grown on me. The green gradient on Messages and Phone is still way too neon for my taste. The pure white background of Safari (also on Photos, Voice Memos, among others) still bothers me, though Twitteriffic uses it to great effect so maybe my aversion to it is more complicated.
Maybe someday I will revisit these. I doubt I will ever export these or put them on my phone. I only actually use 4 or 5 stock apps regularly, so I think I’m just going to keep my fingers crossed for iOS 8.
Hopefully posting this doesn’t make me seem like a jerk. I don’t mean any offense to the designers at Apple personally. I certainly don’t know exactly what constraints they had to deal with. One could argue that my icons are very derivative and coming up with original ideas takes much more time, and that’s absolutely correct, but what I was able to put out in a little over 9 hours makes it pretty clear that time was not one of those constraints.
More likely, Apple is trying to challenge our basic assumptions of what an app icon should look like. I can’t say I agree with all of their decisions, but I’m excited to see where things go from here.