1. 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.
2. 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).
3. 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.
4. 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.

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

(www.clarity-app.com)
When I designed the app, I had three key features that I wanted to implement.

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

The list of features above had to be represented in the icon.

• Facebook News Client
• Simple / Structured Display of the news
• Being able to read from or write to specific friend lists
• A simple way to categorize these friends

Obviously that is not only a lot to display but also incredibly difficult to explain in an icon. Therefore, I decided to group and consolidate these features to just gain three easily identifiable elements.

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

With this in mind, the first iteration of the icon looked like this:


Clarity Icon Version 0.1

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.


This version already looked better but I still was neither happy with the perspective, nor with the clutter, and I found that the elements of the icon did not occupy the available space. If you look closely at other Apple icons, you will find that if there are additional elements, they will be big and clearly visible:

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.


Once again, this looked better, but I felt that I had not gone far enough with the sizing, and it still felt cluttered and unstructured. Thus, I enlarged the loupe even more and changed the perspective again.

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:


In order to fix these problems, I had to do two things. First, I corrected the perspective of the icon again, to make it more akin to XCode‘s. Second, I heightened the pages so that I gained more contrast to the binding.


This result looked really good, and I was already very happy with it. Next to other Apple icons one can see that it looks more at home than the older icon:



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:


I started developing the logo on the 27th of December, next to continued programming on the app, and I finished the logo on the 29 of December. Given the short time frame, I am really happy with the outcome. Future upgrades to the app will probably also alter the icon, just as the iTunes icon has changed over time.

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.


Finally, if you design Mac icons, Apple will encourage you not to create only 128px x 128px icons, but to also include a version with up to 512px x 512px. In this big version, of course, one can add far more detail. Here is the big version of the Clarity icon:


You can see that the big version entails more details: One can see the leather from the book cover, one can see the names below the profile pictures, one can see the text on the text marker, and one can see a small descriptive text at the top left.

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.

Let’s move back, for a minute, and consider the state of the music industry, ca. 2001. Napster had moved the task of finding, downloading, and sharing digital mp3 music from the realm of hackers and nerds to the broad public. Suddenly everyone was able to get music in an instant. For free. For years to come, the music industry, and its legal companion, the RIAA, tried everything imaginable to hinder mp3 music sharing, and lecture (or even force) people to buy expensive CD’s or download incompatible music instead. As indicated, by this quote from Jimmy Lovine – Founder and chairman, Interscope Records, it wasn’t until the advent of the iTunes & iPod behemoth, that the market of legal digital music exploded. By now, iTunes has surpassed CD sales and is the worldwide major music distribution platform.

How did Apple achieve this? First of all, there seemed to be a latent demand for legal digital music. People oftentimes claimed that they’d buy music in an instant, if it was available in something other than the arcane CD format. It was, however, possible to buy digital music online before the iTunes Music Store came along, a fact that diminishes the strength of the ‘legal music’ argument. Another important reason was of course the combination of iPod, iTunes, and iTunes Music Store. While previous approaches to selling music online were limited & rather unknown, the widespread success of the iPod brought access to millions of potential customers. Finally, there’s an often-overlooked but very important reason: The ease and comfort of Apple’s solution.

Napster reached such a wide audience not only because of the simplicity of the task, but also because the availability of of music. One could enter an artists name, find tons of related (or unrelated) tracks, and download them with a click. But Napster also had a ton of problems: Many tracks weren’t available at all, it was nearly impossible to get complete albums – mostly only a small selection of tracks, the files were not always in good quality, and almost every download took ages because the sharing party was accessing the Internet by modem.
Whereas iTunes brought best-of lists, fast downloads, high quality files, cover art, a big database of content (except for the Beatles), complete albums, reviews, and much more. And best of all, it was only one click away from the regular iTunes music experience.
I’m fairly confident, that the superior success of the iTunes Music Store lends itself a big deal on the usability of Apple’s solution.

So, going back to the future (or rather lack thereof) of journalism, how can we apply the merits of the digital music solution to newspapers? Since news is already free on the Internet, this market lacks a significant demand for ‘legal’ news. However, as explained above, this wasn’t a big deal for digital music either. The difference is actually marginal: Before iTunes, people could buy digital music, but illegally downloaded free stuff instead. After iTunes people could still buy digital music, but did download far less illegal music. Now, people can buy paper news, but they access free, digital news instead.
If Apple really was to try to reinvent the newspaper, it would need to offer a seriously simplified, less cumbersome, very usable interface. But is this possible? Online newspapers have been evolving for years, the NY Times employs a constantly growing team of web developers to optimize it’s site. These sites still follow a model that lends its basics from the classic newspaper. A frontpage, departments, current articles in chronological order, features, and a ton of adds.
These simple thoughts establish a basic framework which allows to draft a set of requirements for a device that could establish itself as a news platform:
- The perfect size: It certainly has to be bigger than an iPhone. It needs space for a splendid layout, big fonts, high quality pictures, and a general feeling of comfort. However, it shouldn’t be so big as to be considered clunky.
- The layout: Visit Google FastFlip), which introduces a blazingly fast way to read news. Instead of html content, the site serves screenshots of news sites. I’m hardly convinced that Apple will not use WebKit for the iTablet newspapers, but that’s not the point: They just need to find a way to make the browsing and loading of articles incredibly fast.

When I applied the probable factors of success of the iTunes Music Store onto journalism, I left one factor out: The giant userbase of the iPod. The Music Store not only did benefit but wouldn’t have been possible at all without the already available incredible amount of iPod owners. The iTablet, on the other hand, isn’t even on the market yet. So, in comparison to the iPod, where the physical product helped sell the digital content, with the iTablet the digital content would need to help sell the physical product. I imagine newspaper access to be one of Apple’s arguments for the iTablet. While this certainly limits the applicability of the thoughts above, the App Store has shown that even a new content platform can quickly become a selling argument.

If only a bit of these thoughts apply, it would be a chance for journalism. The iTablet scenario won’t help solve many of its inherent problems, like bias, uneven news distribution, or the rise of entertainment, but it might at least help journalism to stay alive – maybe until a conclusive ‘future of news’ has been found. Because weblogs, social news, or Twitter cannot replace journalism.

Update: Just stumbled upon this Billshrink.com Smartphone comparison. They compare the iPhone, Pre, and the Droid. In the following (about) 40 user comments, one guy laments the lack of Windows Mobile, another one the lack of BlackBerry, and finally the last comment just notes ‘No mention of Nokia.. again’. That’s three out of forty.

RIM only has two options. First, invest serious work in their current platform. Or second, develop a new platform that eases development and enables developers to target different devices with one code base. Currently, they seem to try to sit it out instead.
There is a stark and distinct relationship between the usability of a Software development kit and the amount of software being developed with it. Current BlackBerry users buy the device because of the email and texting features. But with the increasing feature set of Android, this primary BlackBerry advantage will diminish. A wide range of apps (or a small range of high quality apps) are increasingly influencing purchase decisions. RIM has neither.

(via Andrew Keen)