I quit my job at my last company and I’m self-employed now, working on various app and web projects for myself or third party companies. One of the more prominent apps is, for example, InstaDesk a Instagram client for Mac OS X.
After working in a employment setting for more than 10 years, I longed for more freedom. The freedom to move to any city in the world, the freedom to go jogging in the early afternoon and continue working in the evening, the freedom to go shopping in the morning, or the freedom to work through the night. I longed for flexibility. In the end it was this (and several other personal things) that led to me quit my job and start on my new adventure.

What excites me so much about this, is that I can move to any place and any city anywhere in the world now – as long as it has a good Internet connection.

Take Gibraltar, for example: A small (20.000+ Habitants) city around a rock (which houses Barbary monkeys) that lies right next to the Spanish region of Andalucia but belongs to the English crown. So you get the great southern European climate, the sun, but also the English language, the kind English people, and can walk over to Spain for vacation or visiting the beautiful city of Cadiz. Even more, Morocco is only 15min away by boat. Gibraltar even has it’s own airport.

Best of all, Gibraltar has a terrific Internet connection. It is home to many Internet based startups (especially poker companies seem to like it there) and thus has data lines that put the neighboring Spain to shame.

It’s opportunities to live in places like these, that makes my current endeavor so exciting for me.

You get three cutting-edge Mac Photography Apps for less than the price of just one:

FX Photo Studio Pro ($39.99 retail) – Bring a brand new image processing experience to your Mac. Get access to over 170 magnificent photography effects.

Color Splash Studio ($1.99 retail) – A brand-spanking new Mac App lets you create amazing photos with selective colors in a snap. No similar app offers the same!

InstaDesk ($4.99 retail) – This Instragram Client for Mac OS lets you easily browse your photos or explore your friends and not only that, but you can comment on pictures, like them, download them, or watch them in slideshows to boot.

That’s right, you can get all three of these stellar apps for a measly $35. That’s $5 less than the cost of FX Photo Studio Pro alone!

AND if you’re one of the first 500 people to buy this bundle, you’ll get *four extra licenses* for both FX Studio Pro and Color Splash Studio to share with your friends.

This bundle ends on Oct 26, 2011.

Get it here:
http://www.stacksocial.com/

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.

Published from QuoteVault.org

Published from QuoteVault.org

ars technica on why Apple won't buy AMD

Published from QuoteVault.org

Paul Graham on Addiction

Published from QuoteVault.org

It reminded me a, at least as I see it, equally impressive forecast by Fake Steve Jobs (née Dan Lyons). Back in 2006, in one of his parodical pieces, he contemplated what Steve Jobs might want that mythical iPhone to be like, and wrote:

Keep in mind, this was in 2006. Back then there was no iPhone, and nobody knew if Apple intended to ever build one. Even more, when people thought what this mythical unicorn could be like, they came up with this, this, this, or that.

On Literary Criticism
Sounds about right to me.

Published from QuoteVault.org

Just found this gem while browsing through my QuoteVault archive.

Mr. Tevanian, the Mac OS X lead System Architect, on whether Microsoft could / should rebuild Windows from the ground up, as Apple did with Mac OS X.

Published from QuoteVault.org