Design of an Icon
We began developing Cha-Ching for the iPhone in late September of 2008. One of the initial items that we tackled was the design of the application icon which we hope will be occupying a slot on your home screen in the very near future.
Building Brand Identity
Good icon design is absolutely essential when it comes to brand recognition and identity. We feel fortunate to have a very identifiable icon for Cha-Ching on the Mac which was originally designed by the Icon Drawer.
We wanted to build off that identity and create a new icon for Cha-Ching Touch that would look great on the high density screen that comes packed with pixels on every iPhone and iPod Touch while keeping the icon “in the family” so to speak to continue to build on the brand that we have created on the Mac desktop.
What seemed like an easy task when we started turned into an evolutionary process with over 20 iterations created and tested.
Challenges
There were several issues we came across when working on this icon and the design of Cha-Ching Touch as a whole. The largest of those issues is the simple fact that images appear very different on the high density iPhone screen. This definitely took some getting used to.
There is really no good way to simulate how an image will appear on the iPhone and the only real way to get a feel for what works is through trial and error. Lots of “on iPhone” testing was needed to get this right.
One other stumbling block was how to make the rounded, highlighted edges of the icon appear smooth on the phone. It took us several attempts before we realized that the icon image actually needed to be fully opaque without any transparent pixels and that the iPhone OS adds the rounded corners to the icon for you.
the finished product looks something like this in photoshop:
Notice how there is no transparency in the actual icon image. Instead, a solid 57×57 fill serves as the base of the icon and any highlights are added over top of that.
An icon for iTunes
The final piece of the puzzle was to turn the 57×57 icon that appears on the iPhone home screen into the 512 x 512 monster that appears inside iTunes on your Mac or PC. Fortunately we had already created the Cha-Ching for Mac Application icon at a resolution of 1024 x 1024 which afforded us a fairly painless process when working on the 512×512 pixel Cha-Ching Touch App Icon.
Here is the final large icon which was submitted to Apple along with the Cha-Ching Touch Binary:
So there you have it. We completed the design of the Cha-Ching Touch icon in early February approximately six months after we began work on Cha-Ching Touch. You will be able to see it for yourself in the App Store soon.
