Evolution of A Mac App Icon
A good icon is a challenge—it must be detailed enough to look great large, but also be simple enough to be good-locking on the dock.
One of the last things to get finished before Compartments was released was the application icon—not because we waited until the last minute to start it, but because making a good icon takes time.
The Compartments icon was designed by Kenichi Yoshida, who does design work for Panic (makers of Coda and Transmit) as his day job. With his permission, I wanted to share the evolution of the Compartments icon—and what I learned about icon design in the process.
THE EARLY DRAFT
At the beginning, we wanted an icon that represented the ability to catalog all of the items in your home. Kenichi’s initial sketch represented his first idea—a chest of items, signifying that you could drop anything into the app, and track it.
We planned a nice, glossy wood texture, with several home-related items inside. I thought it was perfect (maybe because it brought back fond memories of my childhood toy box). But Kenichi recognized some problems before he really began: for one, sitting on the dock, the icon looked very brown—it would be difficult to see the items inside. Plus, we had just about settled on the name “Compartments” for the application, which didn’t seem to fit with a box of items randomly tossed around—it didn’t portray order.
ADDING COMPARTMENTS
Kenichi came up with a quick render of a second idea. This time, we would alter the perspective of the icon, and divide the items into little compartments—perfect. An icon must clearly represent the goals of the application, and we were on the right track with this render.
Unfortunately, I was quickly learning that something that looks great at 512x512 doesn’t always look so good small. This draft had similar problems on the dock—the items were too small to see, and the brownness still overwhelmed the icon.
So, we attempted to fix these problems by ditching the lid, and altering the perspective a little more. Kenichi tossed some initial items in this render, to get a better idea of how it would look. We were on the right track with everything looking ordered, but now we had another problem—the icon looked too similar to the Bento icon.
So it was back to the drawing board again.
A FRESH IDEA
This is when I really appreciated Kenichi—I knew I didn’t want something too close to the Bento icon, but at the same time, I had no real alternative ideas. Kenichi came to the rescue with his next idea—a house divided into Compartments.
A couple important things clicked into place with this revision: the icon conceptually represented the purpose of the app better than ever: cataloging and organizing items into your home into various “compartments.” Plus, by using two distinct tones of brown, and significant shadows inside the compartments, the one-tone brownness of the app seemed significantly reduced on the dock. Finally, the items were more prominent then before, and in a more natural perspective.
Kenichi deliberately left the bottom corner empty, to increase the artistic asymmetry of the icon.
The last few problems were small—the clock seemed to evoke the concept of “time” to me, but Compartments doesn’t deal with time, so I thought we should eliminate it. Kenichi felt like the person on top of the house might be meaningless, but I kind of liked it.
FINISHED PRODUCT AND LESSONS
I think the finished icon turned out fantastic. In the end, Kenichi conceded on the clock, and I gave up on the person on top. The final changes we made included removing the clock and person icons, little tweaks to the items, and some additional subdividing of the compartments inside the house. Simple, yet effective, and good looking. The bigger it is, the more you can see the detail, but it looks great even at tiny sizes.
I was thrilled with Kenichi’s work, and learned a lot from the process. Some lessons:
- A designer who both considers the feedback of the client, and has solid ideas of the direction he or she wants to go is invaluable. Kenichi often said “trust me” when he made changes. He was usually right, even when I didn’t see it his way at first. At the same time, he always considered my feedback, even if he didn’t ultimately incorporate it.
- Trust your designer. Don’t reject ideas you don’t like right away. Think about it, keep an open mind. Maybe get other opinions. Several times, changes Kenichi made that I didn’t like turned out to be for the best. Rather than rejecting changes I disliked, I waited and thought over it for a day first. Often, I changed my mind. A client who knows and loves his product can easily be too demanding and rigid with project specifications.
- An icon that looks good big won’t necessarily look good on the dock. Make sure you test the icon everywhere. Design specific, separate versions for the smaller sizes (16x16 and 32x32 in particular). Be sure to put your icon in a dock before signing off on it. Over-complexity can ruin a dock icon, but so can over-simplicity.
What do you think? Like how the icon turned out? Any other tips for working successfully with a designer or creating a successful dock icon?
Posted on May 26, 2010
