Application icon design

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:

adobe-cs3-icons.jpg

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:

xtorrent_sizes.jpg

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.png

Camino icon by Jasper Hauser

candybar.png

Candybar icon by Panic

coda.png

Coda icon for Panic by Iconfactory

LittleSnapper.png

Little snapper icon by RealMac Software

voodoopad.png

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.

Versions

Versions by MadeBySofa

undercover

Undercover

transmission

Transmission

screenflow

ScreenFlow by Telestream

relationship

Relationship by JumSoft

qlab

Qlab by figure 53

pixelmator

Pixelmator

netnewswire

NetNewsWire by Brent Simmons now working at Newsgator

appzapper.jpg

AppZapper

disk

Disk icon

marsedit

MarsEdit by Red Sweater

delicious-library

Delicious Library

cssedit

CSSEdit by MacRabbit

coverflow

Coverflow now acquired by Apple

cappuccino

Cappuccino framework

This entry was posted in Application UI, icon design and tagged , . Bookmark the permalink.

Comments are closed.