C H A P T E R 1 1

Icons

Viewer, Player, and Accessory Icons

Some applications that represent objects or well known products, such as Calculator and QuickTime Player, are most easily recognized by the symbols or objects themselves. When creating icons for such applications, it’s more aesthetically pleasing to create a simplified, idealized representation of the object or symbol, instead of using an actual screen shot of the software. Re-creating the object is particularly important when users could confuse the icon with the actual interface.

Figure 11-7 The icons for QuickTime Player, DVD Player, and Calculator

These icons, many of which are a precursor of what you’ll see when you open the application, use a straight-on perspective (rather than the “on a desktop” user application style). You never see the Calculator onscreen in three dimensions, for example, so its icon doesn’t depict it that way.

Utility Icons

Icons for utility applications—which are used less often and not simply for fun or creative activities— convey a more serious tone than those for user applications. Color in these icons is desaturated, predominantly gray, and added only when necessary to clearly communicate what the applications do.

Figure 11-8 Discriminating use of color in the Activity Monitor and System Profiler icons

Because utility applications are normally focused on a narrow set of tasks, it’s best to keep the number of elements in the icon to a minimum. The focus should be a single object that represents what the utility does. The perspective of utility icons is straight-on, as if they are on a shelf in front of you. For more information, see “Icon Perspectives and Materials” (page 141).

Document Icons

	Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. As previously
	suggested, document icons should make it obvious which application they are associated with. Preview
	documents, for example, include a graphic of the media (the pictures) used in the application icon. For
	simplicity and to avoid confusing the document with the application itself, the viewing tool is not repeated
	in the document icon.
138	Document Icons

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 1

Icons

Figure 11-9 Icons for the Preview application and a Preview document

Document icons are presented as if they are hovering on the desktop, with the shadow behind the document. For more information, see “Icon Perspectives and Materials” (page 141).

When you want to put an identifying badge over a document icon, treat the badge as an integrated element within the document instead of putting it over the top of the base image and breaking out of the overall document shape.

Figure 11-10 Incorrect and correct badging of a document icon

Don’t do this

Do this

Toolbar Icons

Toolbar icons represent frequently used commands in an application. Typically, toolbar icons are not as rich in detail and photo-realism as other icon types, because they are intended to be small, streamlined representations of application-specific objects and tasks. For example, Keynote toolbar icons (some of which are shown in Figure 11-11) have more in common with sketches than with photographs, using simple shapes, constrained shading, and just enough detail to suggest each item.

Figure 11-11 Keynote toolbar icons portray objects and tasks in a simple, streamlined way

For some guidelines on how to design toolbar icons (including the simpler style of icons that can be used inside toolbar controls), see “Designing Toolbar Icons” (page 148).

Toolbar Icons

139

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 1

Icons

Icons for Plug-ins, Hardware, and Removable Media

Plug-in icons look like stackable components, with the associated application identifier on the left side and a plug-in–specific image on the right.

Figure 11-12 A plug-in icon

Hardware icons represent devices as you most often see them: on your desk. Because these devices are also frequently handled and carried, people are familiar with them as three-dimensional objects with weight. Therefore, the hardware icons reinforce their association with real objects.

Figure 11-13 Icons for external (top row) and internal hardware devices

To help users distinguish between external devices, their icons provide a region for an identifying symbol (FireWire, USB, and so on).

Removable media such as CDs, floppy disks, and PC cards are depicted the way they look when you hold them in front of you—that is, the perspective is straight-on.

140	Icons for Plug-ins, Hardware, and Removable Media

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 1

Icons

Figure 11-14 Icons for removable media

Icon Perspectives and Materials

The angles and shadows used for depicting various kinds of icons are intended to reflect how the objects would appear in reality. All interface elements have a common light source from directly above. The various perspectives are achieved by changing the position of an imaginary camera capturing the icon.

Application icons look like they are sitting on a desk in front of you.

Figure 11-15 Perspective for application icons: Sitting on a desk in front of you

Utility icons are depicted as if they were on a shelf in front of you. Flat objects appear as if there were a wall behind them with an appropriate shadow behind the object.

Icon Perspectives and Materials

141

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 1

Icons

Figure 11-16 Perspective for flat utility icons

An actual three-dimensional object such as a rocket, however, would more realistically be viewed sitting on the ground; its icon shows the rocket sitting on a shelf, with its shadow below it.

Figure 11-17 Perspective for three-dimensional objects

For toolbar icons, the perspective is also straight-on, as if the object is on a shelf in front of you with the shadow below it. (For more information on designing toolbar icons, see “Designing Toolbar Icons” (page 148).)

Figure 11-18 Perspective for toolbar icons

Icons that represent actual objects should look as though they are made of real materials. Examine various objects to study the characteristics of plastic, glass, paper, and metal. Your icon will look more realistic if you successfully convey the item’s weight and feel, as well as its appearance.

Use transparency only when it is convincing and when it helps complete the story the icon is telling. You would never see a transparent sneaker, for example, so don’t use one in your icon. (See “Creating Icons for Mac OS X v10.5 and Later” (page 145) for some advice on using transparency in an application icon.)

142	Icon Perspectives and Materials

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.