Sofa's blog about design, code everything else.

This post, which admitedly has been due for quite a while, documents the creation and evolution of the Checkout application icon.

For those readers who don't know what Checkout is or what it does: Checkout is our very own Point of Sale application for the Mac. A complete retail solution, whatever you sell, Checkout makes your life a little easier.

During the summer of 2006, still bearing the Etalage title and pending the first public release, the makeshift icon used for Etalage – depicting a store front window – had a very narrow message. After weeks of research trying to come up with just the right visual metaphor, I decided to start from scratch. I wanted to make sure the icon would convey a broader message. And so the hunt for the visual metaphor that would explain it all was on.

However, the hard thing about coming up with this icon was that, normally I ask myself the following question. What summarizes best what this application does? It's what I call the classical “find the one thing that represents it approach”. Unfortunately, I just couldn't find any physical object or real world thing that would summarize every function the application has. A cash register for example was too simple, just like the initial storefront window icon shown above, because they only highlighted just one of the many things Checkout can do to help you run your store.

That's why I ended up asking two different questions altogether. What subject covers all of the functionality? To which my answer was: running a store. And the second question: So what does a store look like? The answer to the second question is exactly what the icon ended up visualizing.

When I go about making an icon that has the responsibility of being the representative of an application my ultimate goal is always to come up with something that seems obvious. It should make you wonder "how could it have ever been anything else". Like how the Address Book icon depicts an actual Address Book, because what else could it be? Right? To me the current Checkout icon qualifies as being one of the few icons out there that are of the obvious kind.

In the two years since its creation I haven't come up with a, or ran into any other, visual metaphor that would convey the concept of a store any better then the current Checkout icon.

As mentioned earlier, up until a couple of weeks before the launch of Checkout, it was developed under the "Etalage" title. To our amusement and astonishment an American friend politely asked what it actually means and how one would go about pronouncing it. Which made us realize a change was needed from an international marketing point of view. For those wondering, Etalage is French for storefront.

And now that the application had an icon that explained it all, it begged for a name that better summarized the subject and functionality as well. Quite some deliberation and a memorable evening looking through the dictionary brought us the current and now well known application name.

The initial sketches as well as the final icon draw their inspiration from historic Mom-and-Pop stores with their vintage striped awnings, and the basic blocky stores reminiscent of early american settlements. Together creating the cosy, cute yet contemporary icon, that seems so obvious and is so recognizable. An iconic representation of small retail stores.

And finally, when active development started on Checkout 2, we decided the application icon was ready for an update. Not from a conceptual point of view, but from an implementation point of view. We had a list of details ready for improvement. Additionally we needed the icon to be scalable enough for print. But because we made a lot of adjustments in Photoshop to the initial 3d model, Hugo had to reverse apply them to the new 3d model.

A lot of work but the result was more than worth it. As shown in the images above and below, the extra large version has tremendous detail, in shading and structural. The loading dock's individual bricks and overhead door parts would have been practically impossible to achieve in Photoshop with such convincing detail.