Iterative App Icon Creation

<li>From a marketing perspective, it incorporates your branding: It has to be easy to decipher, easy to recognize, and it should employ the main strengths of your brand. 

From a usability perspective, it needs to give the users hints about your apps main functionality. But it is strongly advised not to overstimulate this: If the actual app fails to fulfill the expectations that the icon sets, you will burn your users.

<li>From a graphic design perspective, the icon has to look beautiful, strong, and not out of place when it is composed into its actual environment (i.e. the iPod Screen, or the Mac OS X Dock). </li>


<li>From a semiotic perspective, the signs and symbols that you use should have a shared and distinct meaning in your audience. If you intend to use symbols (like a note, a truck, a cup, a newspaper, or a book) you should make sure that they fit the attribution you are trying to apply in general.</li>


<li>Finally, the icon is the entry point into your app experience. And in most App Stores (iPod / iPhone, Ovi, Android …) the icon also represents your advertising in the store. It is the first thing people see, and the icon quality can influence the decision whether people like to request more information or not.</li>

Now, that does not mean that only perfect icons will lead to success (as Google has shown time and time again), but if you have limited other advertising resources at hand, then it is certainly advisable to optimize the hell out of your icon.

For my newest app, my first entry into the Mac App Store, I had to design an icon that had to explain a difficult concept to a mass market. The icon started with a base idea and then was optimized through 8 iterations.One can clearly see its development path, and I would like to explain the process that has lead to the final icon, so others can learn about the thinking behind it.

The App, Clarity

1. Facebook Stream Client Facebook offers with its News Streams a feature that is very similar to Twitter but oftentimes succeeds where Twitter fails as more of your close friends are probably on Facebook and so it is easier to feel connected. However, even though there are a couple of very good desktop Twitter clients (Tweetie, Echofon, Kiwi, etc), there are far less desktop Facebook Stream clients. There are some multi-clients (supporting Twitter, Facebook, and others), but given the huge set of Facebook features, their support is often poor. Therefore, my objective was to develop a Facebook Stream client, that would run on my desktop and inform me of the newest events in my friends‘ lives.

2. Pleasing & Uncluttered Interface The second key feature has to do with the way news streams are presented on Facebook: Cluttered. The recent font-size change (smaller) did not really help the general impression of unsorted and unstructured heaps of text. For a long time, I longed for a simple interface that omits unnecessary information and just presents key aspects in an aesthetically pleasing interface.

3. Only write to and read from specific social subnets The third and last key feature is something that I really miss on Facebook but which seemed possible to pull off given their data structures: Posting status messages to subsets of your friends. Many people combine different social networks on Facebook: Work friends, School friends, Football friends, and more. Most of the time, when posting a status update, people have one specific social (sub) network in mind. However, while Facebook allows you to group friends in lists, it does not allow you to just post to one of these lists.

To sum it up, my app Clarity is a Facebook Stream Client that tries to display the information in a simple, structured, and aesthetically pleasing way. It supports the concept of different social sub networks defined through friend lists which allow you to write to or to read from just some of your friends. Furthermore, my goal was to offer a simple and satisfying way to sort friends into these friend lists, since the original Facebook interface is rather cumbersome and has kept me - so far - from actually creating lists for all of my friends.

Key Features the Icon Should Display

• Facebook News Client

<li>Simple / Structured Display of the news</li>

<li>Being able to read from or write to specific friend lists</li>

<li>A simple way to categorize these friends</li>

1. Facebook Client I decided to remove the ,Stream‘ and tried to explain that in the accompanying text. Even though I could have applied ,Messages Bubbles‘ to explain the ,Stream‘ metaphor, I decided against it as that might have been too far-fetched to understand. Thus, it was only important to see that the app has to do with Facebook.

2. More Structure Alas, the name of the app, Clarity, already gives strong hints about this feature. So even though this also had to be part of the icon, I could explain it through another, a smaller element / hint.

3. Friend Lists Instead of trying to explain the ability to create lists, and write to lists, and read from lists, I reminded myself that most people that I introduced to the feature set of my app, did not even know that Facebook supported friend lists as the function is well hidden in the interface. Given that, I decided that an icon that resembles ordering or sorting of friends would be appropriate.

Identifying Metaphors and Elements

The Base Design After lots of thinking, I settled on an open book with varying elements and clearly visible friend profiles as the basis of my icon. On the one hand, the book resembles the actual physical facebook that Facebook originated from, and on the other hand, it offers a big canvas upon which I could try to employ symbols to explain other meanings of the app. With just this basis, I had already hinted at key feature #1, the ,Facebook Client‘.

In the beginning, I thought that it would suffice to layout the contents of the two open pages of the book in a very structured way to hint at feature #2, but I realized that that was not the case as a good structure is the standard and not the exception in books. Other options would have been to add a ruler, structure markers, or color labels, but neither of these seemed to be easy understandable enough. I then tried to see this key feature from a benefit-oriented point of view. The main benefit of having a cleaner and more structured interface is that it is easier to find and read information. Thus, I decided to use a loupe since these characteristics apply to loupe very well. The loupe could be placed on the book and hint at the ability to focus on friends, too. Finally, pulling off feature #3, the Friend Lists, was easy. As I already had an open book with profiles, I could just draw some circles to indicate the creation of friend lists. In order to support the understanding that these lists are being created by the user, I also added a text marker.

First iteration

On the left page it reads ,Clarity‘, and on the right side it reads ,Book‘. You can find a big version of the icon here.

This was the start of a series of iterative improvements since there were manifold things, that I did not like. Nevertheless, you should not concentrate on changing details too early in the design process, you will not end up with a solid end result. Instead, you need to start working on the main proposition: The first thing that the user should grasp about your icon. In my case, what I found most unsatisfactory was (1) that the whole icon had an unstructured feel to it, and (2) that the icon paled size-wise in comparison to other Apple icons:

Here, all the icons are 128 x 128. My icon looks so small because it does not really use perspective to its advantage.

Therefore, in the next version I tried to enlarge the icon through a different perspective. I also changed the border color to something less obtrusive, and moved the circles so they were not overlapping - as that seemed to add to the unstructured feel.

So for the next iteration of my icon, I decided to shift the perspective again, remove one of the friend circles, and enlarge the loupe. Also, I decided to remove the ,Book‘ word to omit even more unnecessary clutter.

Next, Iremoved the text markers‘ lid, and also decided to remove the middle line of profile pictures as these did not contribute to the actual understanding of the meaning – since there were more than enough of them. Finally, I found that other Mac icons often had thicker lines so I enlarged the book cover.

This was actually the first time, that the icon started to please me. There were still rough edges, but in general I felt it was going in the right direction, meaning it was going to start looking more “Mac-like”. Now, that I had the basics in place, I needed to get back to my original key features, and see if they were still being represented well enough. Beta testers confirmed at this stage that they did not think that the resemblance to Facebook was immediately visible. Thus, for the next version, I decided to settle for a even more “facebooky” look by installing a rectangle filled with the Facebook color to simulate the basic layout of the Facebook homepage. Since I had already been using that color for the book cover, I had to find a different color for the book cover. I settled for a light gray as that matches well with almost any other color.

In addition to that I had the nagging feeling that the hand-drawn circle on the right side was part of the general cluttered feeling that the icon (at least in my point of view) still inhibited. Therefore, I replaced the circles with rounded rectangles as that seemed to fit the overall cubic form of the icon.

This one looks far better. The contrasting blue toolbar really helps the icons‘ appearance. What I did not like was the area where the loupe and the blue headline background overlap in the book middle as that looks very dark and gray. Additionally, the icon still did not feel ,right‘ compared to other Apple / Mac icons as it still seemed to have an awkward position:



Feedback from the beta testers indicated though that they thought that it still did not look as if it was an app for Facebook. I decided to replace the ,CLARITY‘ word with a simple ,f‘ to resemble Facebook. Now, that it seemed as if the icon was almost done, I could finally take care of the really small tidbits that had annoyed me all the time but were not worth investigating until I reached the semi-final version. First, I thought that the loupe needed a nice shine on the glass. Second, I did not like the overall brightness / shadow composition of the image as that looked rather out of place on my Mac, and third, the book cover had a small, disturbing noise on it. So, with these changes, the final logo looks like this (I also added a shadow):

And here next to other Mac icons:

Here is a comparison of the first version to the final version of the icon. The most important changes were probably (in descending order) the right perspective, the bigger loupe & text-marker, and the removal of clutter.

Oh, and because it sounded like such a funny idea, I also added an animation that shows the iterative development:

The icon was created in Blender 3D, the textures were created in Photoshop, and postproduction was also done in Photoshop.