UIEye

Application icon design is more important to the interface than we often first think. It is the representation of the application or interface element that a user first interacts with before the program, and we need to make sure that any use of icons is clear to the end user.

It should clearly distinguish between itself, and other similar programs particularly those from the same family of applications. It is of course more of a branding issue on how to define family and relationships between products and hence icons, for instance here is how Adobe maps out theirs:

but as you can see they do not make any differentiation with shape, just the letters and color. This I feel is a big mistake, using shape means they translate better to black and white, the letters do help but is it clear what “Ic”, “Cp” or “Rh” means? They of course have internal shape but at smaller sizes they suffer.

As display technology become increasingly advanced we start seeing resolutions hitting more than 96ppi and that means even more detail for icons which can only be a good thing if the design allows for this. But 16×16 icons, pretty much standard size for favicons, and icons in tool bars also need to be taken into account. These are the most frequent launchers of applications. Here is an example done well, xTorrent, it clearly shows that the icon hasn’t just been resized, instead detail that we create noise at smaller sizes has been removed, leaving the outline shape and colour with overall detail:

This design was done by Jasper Hauser, and he has some interesting things to say about the process behind the creation of the icon on his blog. From this page he also links to the his post on the obviousness of icon design.

He makes very good points about the obviousness of icons, but I feel that it is perhaps even more important to make clear differences between icons that will be used together such as those in the Adobe Create Suite.

As a taster here are some more examples of well done high resolution icons:

Camino icon by Jasper Hauser

Candybar icon by Panic

Coda icon for Panic by Iconfactory

Little snapper icon by RealMac Software

VoodooPad icon by Flying Meat

So my steps to creating good icons for applications would include:

1. Use color, shape and design to distinguish between icons.
2. Try to make them have some connection with the application.
3. Make sure that the design works at 16px and 256px, particularly for OS X.
4. Do not simply resize an icon down, remove detail, thicken lines, even redraw lines when needed.
5. Make sure that they will work on variety of backgrounds, including cross platform.
6. Do not rely on just text or having text around the icon.
7. Try and get a professional to do the job of the actual design and brief them well.

There are more icons uploading into the extended entry of this post.

(more…)