About Those Icons

10 June 13

No question we’ve just got a brand new and exciting look for iOS 7. The flat design and frosted transparency look will take some getting used to, but it’s definitely an improvement over the current candy-button and shadowy look.


Those icons. Those home screen icons. If I didn’t know any better, I’d say these were designed in a rush. They look like they were supposed to get a few more revisions and a few more coats of varnish before they were used. The icons just don’t have the refinement and craft that I’m used to in an Apple product.

So, rather than just whine, I spent the 7 hours after the WWDC keynote working on it. I try not to complain unless I have a fix in mind, so here’s what my home screen of iOS 7 would look like:

For seven hours work, I think that’s a big improvement. Yes, there are gradients all over the place, but that’s something we’ll have to live with unless we want a lawsuit from Microsoft.

For comparison:

Messages: The message bubble is too large and the “tail” too small in the original. This tries to fix that imbalance.

Calendar: No changes. Looks great.

Photos: No changes. I have no idea how that icon directly relates to photography, but I’m good with it.

Camera: New icon. The official icon looks small and underwhelming, and for some oddball reason, has a relief effect to it, giving it depth – unlike all the other new icons. Mine reverses the grey/black colors, and adds some color to the lens. It better resembles not only the actual lens on the back of the device, but is more visually engaging.

Weather: No changes. I like the abstract weather look.

Clock. No changes, but why is it suddenly 9:41? Is it actually showing the proper time? It appears so, if the status bar is any indication.

Maps: Absolutely terrible icon. The insider element of this is that the old icon was actually Apple’s HQ, and this location is where Campus 2 will go, but the blockiness and fine-line detail sabotage the new look. It’s a bad rendition, and Campus 2 is still three years away, for goodness sakes. I’ve re-created the 1 Infinite Loop map, and with the abstract look of the rest of the icons.

Videos: Why so much blank space? It feels like something’s missing. To fill the space, I’ve put a “play” triangle in there.

Notes: Another blank space. With white and yellow, can an icon be more bland? I put in some lines and color to try and add some visual information and distinguish itself from the next icon, which looks almost exactly the same. I don’t care if the actual app does’t look like this, the icon is supposed to suggest what it is, dagnabbit.

Reminders: When I sassed if an icon could be more bland, this one gives Notes a run for the money. Four small colored dots and thin grey lines. Wow. So I did my best, by enlarging the dots and giving the eye something to look at.

Stocks: No changes. It’s not a great icon, but it’s functional enough.

Game Center: I love the idea, the execution sucks. Why is it all aqua-like all of the sudden? That candy look was supposed to be gone, but here it is again. Why? So here, I’ve abstracted the balls and applied the same transparency effects.

Newsstand: I love the little designs for the icons in this one, but, again, they betray the new abstract iconography. So, once more, I’ve abstracted a news rack to suggest what the function is while keeping things looking simple.

iTunes Store & App Store: The giant white circle ruins it. It takes up too much space and adds too much white. I’ve removed the circe, and replaced it with a second gradient, allowing the white icon to be larger and take up more space, and adding visual complexity.

Passbook: No changes. It’s nice. The icons may be a smidge too tiny.

Compass: One of the challenges of designing an iOS home page is that you have two icons that are compasses (Compass, Safari). However, in an effort to stick to a “circle” theme, (Clock, iTune Store, App Store, Settings and Safari) Compass beefs it. First: Why is the dial rotated 45 degrees, to have north pointing northeast? If it’s rotated, why are the letters still facing “up?” Even if that is a feature of the new Compass app, why display it here, in this way, totally confusing everyone? Second: Why is the pointer in the upper right, and so small that you don’t even recognize it at at directional pointer? Sheesh! So, I dump the circle theme, point it up and make the pointer bigger.

Settings: What kind of gear is this supposed to be? A Ten-Speed spoke? Seriously? Simplify. So I just have a nice big gear that’s clear and obvious.

Phone: No changes.

Mail: No changes.

Safari: The circle theme continues as does the “dial” theme (Clock, Compass, Safari.) The white border sucks the life out of the icon, so I put in a matching blue gradient. The tick-marks are just ugly, so they’re gone. I put the “globe” effect back in from older Safari icons, because I do think that the globe is the best visual metaphor for web surfing. “Dial” does not say web surfing.

Music: I change the gradient here a little, just because I think the original doesn’t match the new color scheme. This tones it down slightly, too.

Original artwork © Apple