| Java Sun >
Guidelines Home Page > Java Look and Feel Design Guidelines >
Part II: Fundamental Java Application Design >
5: Application Graphics >
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.
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.
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
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.
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.
|2. Add some basic color (green is used here).|
|3. Draw a highlight on the inside top and left using white or a lighter shade of the existing color.|
|4. Add some detail to the icon.|
|5. Try a gradient that produces a "shining" effect instead of the flat green.|
| 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 next graphic shows an icon in which a pattern has been added to the color detail.|
| 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.
|8. Test your icon on target platforms.|
|Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.