Java >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part II: Fundamental Java Application Design
>
4: Visual Design
  Previous Next Contents/Index/Search


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.

 

Name Basic Drawing 3D Effects Text
Primary 1 Primary 1
RGB 102-102-153
Hex #666699
Active internal window borders Shadows of activated items System text (for example, labels)
Primary 2 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 Primary 3
RGB 204-204-255
Hex #CCCCFF
Large colored areas (for example, the active title bar) Text selection
Secondary 1 Secondary 1
RGB 102-102-102
Hex #666666
Dark border for flush 3D style
Secondary 2 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 Secondary 3
RGB 204-204-204
Hex #CCCCCC
Canvas color (that is, normal background color); inactive title bar Background for noneditable text fields
Black Black
RGB 000-000-000
Hex #000000
User text and control text (including items such as menu titles)
White 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.

Figure 22   Primary Colors in Default Color Theme

 

Default Primary Colors

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.

Figure 23   Secondary Colors in Default Color Theme

 

Default Secondary Colors

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.

Figure 24   Green Color Theme

 

Green Color Theme

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.

Figure 25   High-Contrast Color Theme

 

High-Contrast Theme

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.

 

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.
Previous Next Contents/Index/Search
Table 3   Type Styles Defined by the Java Look and Feel
Table 2   Colors of the Default Java Look and Feel Theme 
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner
Java 8 banner (182)