Sofa's blog about design, code everything else.

This week I’ve decided to take you through the development of the Versions icon. For those who need some indication of the work involved in creating an icon, you may get a feel for it. Although this was an in house project and we weren't bound by any deadlines, this article still illustrates the lengths we take to create a strong visual brand.

Important to know is that, long ago, Versions had an other icon. It was designed by Jasper Hauser even before Sofa was founded. It wasn't until we told people about Versions at WWDC 2007 that people knew about its existence. We built a site for Versions sporting this early icon and revealed it at WWDC '07. Lots of people commented on the fact that the icon was very similar to the 9rules logo, so we decided to change it.

The old icon had all the characteristics a good icon should have. A strong and recognizable image that works at both big and small sizes and looks good in the Dock. More importantly, the concept was sound. Each leaf represented a different version of the main branch, a concept we wanted to preserve in the new icon.

Back to The Drawing Board

So, we set out on a quest to find a good replacement. Lots of ideas passed the review and we eventually settled on the idea of bonsai. The main reason for this was that the trunk, branches and leaves would still convey the concept of versioning, while a tree would look great in the header graphics we made for the last website.

The difficulty of a bonsai tree however was that it's not really easy to make in Photoshop and still give it that soft Mac feel. That's why we took the 3D approach. Basically, this allowed us to try and position the tree the way we felt it would work best. I built and messed around with the model for a week or so until I was satisfied.

Usually at this point the rest of the icon is done in Photoshop, because it's easier to get that aqua-feel in Photoshop than 3D. However, the tree was so complex it would have been a very hard job to get everything right in Photoshop, so I continued to work on it in 3D. Basically texturing the model until it looked like what I wanted. First results were stunning.

Then we encountered a major problem. Whatever I did, the icon would not work on small sizes or in the Dock. The leaves got blurry when we scaled the image down and somehow the icon always felt small next to other icons in the Dock. This rendered the plan useless and 2 weeks of work went down the drain.

So we were back to square one. Looking again at the old icon, I still admired the simple concept behind the leaves and thought that perhaps a flower could work. Flowers, or organic forms for that matter, are rarely seen in icons. I think because they're too complex. Still, I went ahead and searched for something suitable. I found a couple of pictures of a lotus flower and found that I could translate the concept perfectly to this image. The heart of the flower would be a repository and the leafs could be considered as branches and versions. With this in mind I created a couple of very simple models.

Not wanting to repeat the same mistakes, I moved from 3D back to Photoshop as fast as I could. After a couple days, progress ground to a halt and I got a designers block. I could see the icon had potential, but it was far from being on the same level as our other icons. I didn't know what to do next.

Most of the times when you have such a block, it helps to have a fresh set of eyes to help you look. Jasper, who was already giving pointers and suggestions throughout the whole process, offered to take a shot at the icon. I happily sent him the PSD and waited while he went to work on it. A week later he came back with amazing results. The differences are subtle, but very important to make the icon “sweet”. One of the most important alterations can be found in the composition of the leafs. The composition is more open which gives more focus on the center of the icon and it enhances the overall recognizability of the shape. The transparency in the leafs suggest they are thin, but the icon still has a lot of body. Also, it contributes to the whole “Aqua/Apple” feel. The center was given a texture to make it more flower-like, instead of the weird marble which was in my design.

Designing the final icon took about 2 weeks. The whole process from beginning to end, with all the ideas we had, took about 6 weeks of full-time work spread out over half a year. Too bad I was never able to use the bonsai for anything, hopefully I get to use it in some header graphic at some point.