Subscribe to
Posts
Comments
NSLog(); Header Image

Categories of Icon Design

The way I see it, Mac application icons fit into roughly four categories.

1. Object + Tool
These icons are the simplest and, I believe, the most commonly used. An icon in this category is often represented as the object on which work is done and the tool with which the work is accomplished. For example, a pen (the tool) sitting on a piece of paper (the object) would represent a writing application.

These types of application icons are typically the safest and clearest types of icons, but they are potentially the most boring as well.

Examples of Object + Tool: Preview, Audio Hijack Pro, CSSEdit, TextEdit (duh), Billable, Layers, OmniGraffle, VueScan, Scorecard, Disk Utility.

2. Icon as Action
While "Object + Tool" illustrates the work YOU can do (and the tools YOU use to do it and the object on which YOU do it), the "Icon as Action" category demonstrates THE ICON (i.e. the application) doing the work on your behalf.

Examples: Compressor, DropStuff, Migration Assistant, DropDMG, almost anything that is named "converter" or "uploader" (typically arrows represent the "action").

3. General Concept
The "General Concept" icon takes what the icon does (often expressed via the name of the icon, of course), and applies a general concept that isn't strictly tied to a metaphor in the "object" or "tool" category. For example, a security application that invokes the use of a policeman's hat or a badge with a star on it would fit this idea.

Examples: Front Row, Aperture, Aquatic Prime, Fission, Mail, Cyndicate, Safari, Transmit.

4. Branding
By far the most boring type of application icon, these represent the companies that have produced them or the product they represent. They're often not unique and they'll often include little else beyond the branding the company has chosen - branding which often won't tell you about the application or what it does.

Examples: Adobe Photoshop CS4, Google Chrome, Kindle for Mac, AIM.

Of course, there are hybrids. For example, Address Book shows an object but no tool. You could argue that it's a "general concept" type icon as well. Calculator shows a physical calculator, so it might best fit in "General Conccept," but arguments could be made for everything but "Branding." Screen Flow shows an object (your Mac's desktop) as well as a tool (a video camera), but you'd have a hard time shoving it in just the first category (Object + Tool).

My Icon
I thought of all of this because I'm working with an icon designer on an icon, and the concept we like the most right now is very much along the lines of Calculator. The difference is that our application's physical form doesn't exist - we'd effectively "build" it in the icon.

The whole computer UI paradigm stems from real-world stuff. We have a "desktop" and "folders" because that's what we had in real life, in physical form. We press "buttons" on our computers because that's what we pressed in physical form. Our software UI "mimics" physical objects every day (except when we can make something easier to use - for example we can twist our hands to rotate a dial, but twisting a mouse to do so is much tougher - but with multitouch, it's again not so bad).

The icon my partner and I like most now takes our software's UI and imagines it as if it was a physical device with physical buttons and perhaps a stylus for drawing. There are plenty of icons which do this already, but like Calculator they often use an object which already exists. Very few seem to "imagine" a physical machine that lets someone do work with it.

But, we like the idea and it's the best we have, so we're going with it. 😉

Trackback URI | Comments RSS

Leave a Reply

Please abide by the comment policy. Valid HTML includes: <blockquote><p>, <em>, <strong>, <ul>, <ol>, and <a href>. Please use the "Quote Me" functionality to quote comments.