java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part II: Fundamental Java Application Design > 4: Visual Design

4: Visual Design

Visual design and aesthetics affect user confidence in and comfort with your application. A polished and professional look without excess or oversimplification is not easy to attain. This chapter discusses these high-level, visual aspects of Java look and feel applications:

• Use of themes to control and change the colors and fonts of components to suit your requirements
• Layout and alignment of interface elements to enhance clarity, ease of use, and aesthetic appeal
• Capitalization of text in interface elements to ensure consistency and readability
• Use of animation to provide effective emphasis and meaningful feedback

Themes

As a software developer, you can use the theme mechanism to control many of the fundamental attributes of the Java look and feel design, including colors and fonts. For instance, you might want to change the colors and fonts in your application to match your corporate identity. The theme mechanism enables you to specify alternative colors and fonts across an entire Java look and feel application.

 For more information on using themes, see the description of the javax.swing.plaf.metal.DefaultMetalTheme class.

Colors

If you want to change the color theme of your application, be sure that your interface elements remain visually coherent. The Java look and feel uses a simple color model so that it can run on a variety of platforms and on devices capable of displaying various depths of color. Eight colors are defined for the interface:

• Three primary colors to give the theme a color identity and to emphasize selected items
• Three secondary colors, typically shades of gray, for neutral drawing and inactive or unavailable items
• Two additional colors, usually defined as black and white, for the display of text and highlights

Within the primary and secondary color groups in the default theme, there is a gradation from dark (primary 1 and secondary 1) to lighter (primary 2 and secondary 2) to lightest (primary 3 and secondary 3).

Default Java Look and Feel Theme

The following table summarizes the eight colors defined in the default Java look and feel theme. It provides swatches and numerical parameters representing each color in the default theme. It also gives details about the roles each color plays in basic drawing, three-dimensional effects, and text.

Table 2   Colors of the Default Java Look and Feel Theme 

	Name	Basic Drawing	3D Effects	Text
	Primary 1 RGB 102-102-153 Hex #666699	Active internal window borders	Shadows of activated items	System text (for example, labels)
	Primary 2 RGB 153-153-204 Hex #9999CC	Highlighting to indicate activation (for example, of menu titles and menu items); indication of keyboard focus	Shadows (color)
	Primary 3 RGB 204-204-255 Hex #CCCCFF	Large colored areas (for example, the active title bar)		Text selection
	Secondary 1 RGB 102-102-102 Hex #666666		Dark border for flush 3D style
	Secondary 2 RGB 153-153-153 Hex #999999	Inactive internal window borders; dimmed button borders	Shadows; highlighting of toolbar buttons upon mouse button down	Dimmed text (for example, inactive menu items or labels)
	Secondary 3 RGB 204-204-204 Hex #CCCCCC	Canvas color (that is, normal background color); inactive title bar		Background for noneditable text fields
	Black RGB 000-000-000 Hex #000000			User text and control text (including items such as menu titles)
	White RGB 255-255-255 Hex #FFFFFF		Highlights	Background for user text entry area

 Unless you are defining a reverse-video theme, maintain a dark-to-light gradation like the one in the default theme so that interface objects are properly rendered. To reproduce three-dimensional effects correctly, make the secondary 1 color darker than secondary 2, which should be darker than secondary 3 (the background color).

 Ensure that primary 1 (used for labels) has enough contrast with the background color (secondary 3) to make text labels easily readable.

Primary Colors

The visual elements of Java look and feel applications use the primary colors as follows:

• Primary 1 for active internal window borders, shadows of activated items, and system text, such as labels
• Primary 2 for highlighting of activated items, such as menu titles and menu items; keyboard focus; active scroll boxes; and progress bar fill
• Primary 3 for large colored areas, such as the title bar of active internal windows and the background of selected text

The usage is illustrated in the following figure.

Secondary Colors

The visual elements of Java look and feel applications use the secondary colors as follows:

• Secondary 1 for the dark border that creates flush 3D effects for items such as command buttons
• Secondary 2 for inactive internal window borders, shadows, pressed buttons, and dimmed command button text and borders
• Secondary 3 for the background canvas, the background of noneditable text fields, and inactive title bars for internal windows

The usage is shown in the following figure.

Black and White

Black and white have defined roles in the Java look and feel color model. In particular, black appears in:

• User text, such as the entry in an editable text field
• Control text, such as menu titles and menu items
• Title text in an internal window
• Button text in command buttons
• Tab text in tabbed panes
• Text in noneditable text fields

White is used for:

• Highlighting the flush 3D appearance of such components as command buttons
• Background of editable text fields

Redefinition of Colors

The simplest modification you can make to the color theme is to redefine the primary colors. For instance, you can substitute greens for the purple-blues used in the default theme, as shown in the following figure.

You can use the same value for more than one of the eight colors--for instance, a high-contrast theme might use only black, white, and grays. The following figure shows a theme that uses the same grays for primary 2 and secondary 2. White functions as primary 3 and secondary 3 as well as in its normal role.

Fonts

As part of the theme mechanism and parallel to the color model, the Java look and feel provides a default font style model for a consistent look. You can use themes to redefine font typefaces, sizes, and styles in your application. The default Java look and feel theme defines four font categories, called "type styles": the control font, the system font, the user font, and the small font. The actual fonts used vary across platforms.

The following table shows the mappings to Java look and feel components for the default theme.

Table 3   Type Styles Defined by the Java Look and Feel

Type Style	Default Theme	Use
Control	12-point bold	Buttons, checkboxes, menu titles, labels, and window titles
Small	10-point plain	Keyboard shortcuts in menus and tool tips
System	12-point plain	Tree components and tool tips
User	12-point plain	Text fields and tables

 To ensure consistency, ease of use, and visual appeal, use the supplied default fonts unless there is compelling reason for an application-wide change (such as higher readability). Use the theme mechanism if you do make modifications.

 Do not write font sizes or styles directly into your application source code (a programming practice that is also called "hardcoding"). Store font sizes and styles in resource bundles.

 Use layout managers to ensure that the layout of your application can handle different font sizes.

 Ensure that the font settings you choose are legible and can be rendered well on your target systems.

 In the Java look and feel, six methods are used to return references to the four type styles. The getControlTextFont, getMenuTextFont, and getWindowTitleFont methods return the control font; getSystemTextFont returns the system font; getUserTextFont returns the user font; and getSubTextFont returns the small font.

 All fonts in the Java look and feel are defined in the default Java look and feel theme as Dialog, which maps to a platform-specific font.

Java Look and Feel Design Guidelines, second edition. Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.