Java Sun >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part II: Fundamental Java Application Design
>
5: Application Graphics
>
Designing Icons
  Previous Next Contents/Index/Search


Designing Icons

Icons typically represent containers, documents, network objects, or other data that users can open or manipulate within an application. An icon usually appears with identifying text.

Sizes for icons vary from platform to platform. Two common sizes are 16 x 16 pixels and 32 x 32 pixels. In the Java look and feel, the smaller size is used in the title bar of windows (to identify the contents of the window or minimized window) and inside tree components (for container and leaf nodes). You can use 32 x 32 icons for the desktop representation of Microsoft Windows applications and for components in applications designed for users with visual impairments, or for objects in a diagram, such as a network topology.

  Design icons to identify clearly the objects or concepts they represent. Keep the drawing style symbolic, as opposed to photo-realistic. Too much detail can make it more difficult for users to recognize what the icon represents.

  When designing large and small icons that represent the same object, make sure that they have similar shape, color, and detail.

  Specify tool tips for each icon so that assistive technologies can use the accessibleDescription property to find out how to use the icon.

  Specify the accessibleName property for each icon so that assistive technologies can find out what the icon is.

  Consider providing an option that enables users to switch from smaller to larger icons.

  Since sizes of icons vary across platforms, determine the size requirements of your target platform and provide suitably sized icons.

Working With Icon Styles

Icons can appear as flat drawings or as perspective drawings. The flush 3D style is a unique effect that can be applied to either flat (2D) or perspective (3D) icons.

The following figure shows flush 3D icons for files and folders drawn in the perspective and flat styles. Icons drawn in the flush 3D style fit best with the Java look and feel. For information on how to create the flush 3D style, see Drawing Icons and Producing the Flush 3D Effect. Three visual elements appear in the sample icons: an interior highlight (to preserve the flush style used throughout the Java look and feel), a pattern to minimize dithering (described in Working With Available Colors), and a dark border.

Figure 44   Two Families of Flush 3D Icons

 

Perspective 3D Icons

  Use a single style to create a "family" of icons that utilize common visual elements to reflect similar concepts, roles, and identity. Icons in families might use a similar palette, size, and style.

  Don't mix two- and three-dimensional styles in the same icon family.

  Use the flush 3D style so that your icons suit the Java look and feel.

For more on the flush 3D style, see Producing the Flush 3D Effect.

Because icons must appear on various backgrounds across platforms, the borders of graphics must maintain consistent color. Changing the appearance of an object's border to look smoother at screen resolution in relationship to a specific color is called anti-aliasing. In most application development cases, anti-aliasing is not desirable because you are unlikely to be sure what background color the object will appear against. However, within an icon, anti-aliasing can provide smoother interior lines.

  For satisfactory display on a wide range of background colors and textures, use a clear, dark exterior border and ensure that there is no anti-aliasing or other detail around the perimeter of the graphic.

Drawing Icons

The following section uses a simple folder as an example of how to draw an icon. Before you start, decide on a general design for the object. In this example, a hanging file folder is used to represent a directory.

 


1. Draw a basic outline shape first.

Icons can use as much of the available space as possible because they are displayed without borders. Icons should usually be centered horizontally in the available space.

For vertical spacing, consider aligning to the lower edge of other icons in the set, or aligning with the baseline of text, as shown in the figure.

If multiple sizes of an icon are required, work on them at the same time rather than trying to scale down a large icon later; all sizes then can evolve into designs that are recognizable as the same object.

Basic outline drawn

2. Add some basic color (green is used here).
Basic color added (small) Basic color added (large)

3. Draw a highlight on the inside top and left using white or a lighter shade of the existing color.

This practice creates the flush 3D style of the Java look and feel.

Highlight added (small) Highlight added (large)

4. Add some detail to the icon.

In this case, the crease or "fold" mark in the hanging folder is drawn.

Icon detail added (small) Icon detail added (large)

5. Try a gradient that produces a "shining" effect instead of the flat green.

Here a dark green has replaced the black border on the right and bottom; black is not a requirement as long as there is a well-defined border.

Gradient added (small) Gradient added (large)

6. Add a pattern to prevent coarse dithering.

This technique minimizes banding and dithering on displays with 256 or fewer colors (see Maximizing Color Quality).

The first graphic is an exploded view of an icon that shows how the pattern is added.

Dithering prevented
The next graphic shows an icon in which a pattern has been added to the color detail.
Pattern added (small) Pattern added (large)

7. Define the empty area around the icon graphic (in which you have not drawn anything) as transparent pixels in the GIF file.

This practice ensures that the background color shows through; if the icon is dragged to or displayed on a different background, the area surrounding it matches the color or pattern of the rest of the background.

Transparent pixels added

8. Test your icon on target platforms.




Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner Java 8 banner (182)