Friday, October 03, 2008

iTimeZone 1.1: Coming Soon With Updated Icon, and a Retrospective

iTimeZone 1.1 is feature complete and coming soon. One of the things I wanted to improve was the icon. When iTimeZone 1.0 shipped, I was perfectly happy with the icon, but also nervous if it would be up to snuff with the other App Store competition. There are great, good, mediocre, and terrible icons for apps on the App Store. I think the iTimeZone icon already belonged in the good category, and the changes I made to me only solidified that assessment, but if you disagree don't be shy to post a comment. That said, once the rush to release 1.0 faded and I had time to reflect, some things started to bother me about it.

Design
The icon design that I finally settled on as seen in iTimeZone 1.0 and 1.1 had to have these elements:

  • World Map Background. The first public iTimeZone icon only had various clocks on it, a more traditional representation of world clocks. It seemed to me the easiest way to say world clock was to show an image of the world.
  • Clock Face/Target. I didn't just want to convey that this is a world clock application, I want to show that this application shows you where the time is at this point on the map. That's why I distilled the analog clock down to just the markers for the 4 quarters of the clock face, it conveniently visually looks very similar to the iPhone's locate icon in the Maps application. Somewhat ironically, I am not using the location features in iTimeZone, yet...
  • Clock Arms and Anchor Dot. The dot under which the arms intersect is like a bullseye under the clock face/target. The arms need to be there to clearly show you are looking at a clock.

iTimeZone 1.0 Icon
The iTimeZone icon everyone sees on the iPhone or iPod touch is a 57x57 PNG (pictured right). You can either choose to allow the iPhone OS to composite a plastic layer on top and round the corners, which results in your icon being lighter on top than it is on the bottom, or do it yourself. I just let the iPhone OS do it since that is much easier for me. This became issue one for me, the gray just ended up being to washed out. Second, I realized that I could easily tweak the color scheme just a little and maintain (well I guess really establish) that this was a Tangerine Element icon.

iTimeZone 1.1 Icon
Changing the clock face/target to black and removing some shadowing shows up much better on the iPhone, and also black of course is one of the core Tangerine Element colors. The new arm colors are straight out of the Tangerine Element logo, and provide a nicer contrast to the teal continents. The arms are also slightly repositioned so that all quarter markers of the clock face/target are visible and distinct. Further, the arms are as completely in the whitespace between landmasses as possible, allowing more teal to come through. Also, the teal is brighter, so that the plastic composite washes it out a tad less. In other words, it "pops" a bit more.

First Public iTimeZone Icon

Other Discarded Ideas