java look and feel design guidelines visual design l.
Skip this Video
Loading SlideShow in 5 Seconds..
Java Look-and-Feel Design Guidelines – Visual Design PowerPoint Presentation
Download Presentation
Java Look-and-Feel Design Guidelines – Visual Design

Loading in 2 Seconds...

play fullscreen
1 / 39

Java Look-and-Feel Design Guidelines – Visual Design - PowerPoint PPT Presentation

  • Uploaded on

Java Look-and-Feel Design Guidelines – Visual Design Eileen Kraemer University of Georgia CSCI 4800/600 Visual Design Themes -- to control and change the colors and fonts of components to suit your requirements Layout and Visual Alignment Design Grids Text Layout

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Java Look-and-Feel Design Guidelines – Visual Design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
java look and feel design guidelines visual design

Java Look-and-Feel Design Guidelines – Visual Design

Eileen Kraemer

University of Georgia

CSCI 4800/600

visual design
Visual Design
  • Themes -- to control and change the colors and fonts of components to suit your requirements
  • Layout and Visual Alignment
    • Design Grids
    • Text Layout
    • Between-Component Spacing Guidelines
    • Spacing Guidelines for Specific JSP components
  • Text in the Interface
    • Headline capitalization in English
    • Sentence capitalization in English
  • Animation
themes color
Themes : Color
  • The default Java Look and Feel Theme defines 8 colors:
    • 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
    • See:
  • Primary Colors
    • 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
  • Secondary Colors
    • 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
colors black and white
Colors: Black and White
  • Black:
    • 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 :
    • Highlighting the flush 3D appearance of such components as command buttons
    • Background of editable text fields
redefining colors
Redefining Colors
  • Can redefine the primary colors:
redefining colors8
Redefining Colors
  • 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:
  • Java L&F also has a default font style mode
  • can use themes to redefine font typefaces, sizes, and styles in your application.
  • Default Java L&F theme defines four font categories, called "type styles":
    • the control font
    • the system font
    • the user font
    • the small font
  • (The actual fonts used vary across platforms. )
  • Control
    • 12-point bold
    • used for buttons, checkboxes, menu titles, labels, and window titles
  • Small
    • 10-point plain
    • used Keyboard shortcuts in menus and tool tips
  • System
    • 12-point plain
    • used for tree components and tool tips
  • User
    • 12-point plain
    • used for Text fields and tables
font advice
Font advice
  • Use the supplied default fonts unless there is a compelling reason for an application-wide change (such as higher readability).
    • Use the theme mechanism if you do make modifications.
  • Don’t write font sizes or styles directly into application source code
    • Store font sizes and styles in resource bundles.
  • Use layout managers
  • Check that  the font settings you choose are legible and can be rendered well on your target systems.
fonts nuts and bolts
Fonts: nuts and bolts
  •  six methods are used to return references to the four type styles
    • getControlTextFont(), getMenuTextFont(), and getWindowTitleFont() all return the control font
    • getSystemTextFont() returns the system font
    • getUserTextFont() returns the user font
    • getSubTextFont() returns the small font
layout and visual alignment
Layout and Visual Alignment
  • Layout is important:
    • can streamline the way users move through an application
    • can help users utilize features efficiently (or hinder them)
  • Good designs:
    • aesthetically pleasing
    • easy to understand
    • organize components in the direction in which people read them
    • group together logically related components
  • Keep mind: users may navigate via:
    • mouse
    • keyboard
    • assistive technologies
design grids
Design Grids
  • Develop a grid of rows and colums
    • can use pencil and paper, with a software tool, or even with a piece of graph paper..
  • In the design grid, use blank space to set apart logically related sets of components.
  • Using the grid, arrange and align components in a pleasing layout
  • Try out various arrangments; iterate through the process.
example dialog box for text search
Example: dialog box for text search
  • Define components:
    • labeled textfield for string to be searched for
    • match case?
    • whole word?
    • start at top?
    • wrap around?
    • Go/Submit/Find button
    • Close button
2 begin gridding
2. Begin gridding:
  • Create 12-pixel margins between the border of the dialog box and its components.
3 set up command row
3. Set up command row
  • Arrange the command button row and separate it vertically from the rest of the components
4 add in other components
4. Add in other components
  • Calculate number and width of remaining components
  • decide the number of columns and the column width for your design grid.
  • Try several choices
5 add remaining components
5. Add remaining components
  • Add components in logical sequence
    • most important should appear first in reading order.
  • Add rows of blank space between the component groups.
  • Align related components using columns as a guide.
text layout
Text Layout
  • Label Placement
  • Alignment
label placement
Label Placement
  • Indicate a label's association with a component by its relative position
  • In general, place labels before the component to which they refer, in reading order for the current locale.
  • For instance, in the U.S. locale, place labels above or to the left of the component.
    • Positioning to the left is preferable, since it allows for separation of text and components into discrete columns.
label alignment
Label Alignment
  • Align to the left?
    • easier to scan and read.
    • gives visual structure to a block of components, particularly if there is no immediate border (such as a window frame) surrounding them.
  • Align to the right?
    • If labels vary greatly in length, the use of right alignment can make it easier to determine the associated component;
    • also introduces large areas of negative space, which can be unattractive.
  • The use of concise wording in labels can help to alleviate such difficulties.
  • Align labels with the top of associated components.
  • Since the length and height of translated text varies, use layout managers to allow for differences in labels.
label spacing
Label Spacing
  • Insert 12 pixels between the trailing edge of a label and any associated components.
    • Insert 12 pixels between the trailing edge of a label and the component it describes when labels are right-aligned.
    • When labels are left-aligned, insert 12 pixels between the trailing edge of the longest label and its associated component
between component spacing
Between-Component Spacing
  • Generally, use multiples of 6 pixels for perceived spacing between components.
between component spacing25
Between-component spacing
  • Insert 5 pixels (6 minus 1) between closely related items such as grouped checkboxes.
  • Insert 11 pixels (12 minus 1) for greater separation between sets of components (such as between a group of radio buttons and a group of checkboxes).
  • Insert 12 pixels between items that don't have the flush 3D border highlight (for instance, text labels and titled borders).
spacing guidelines for specific jfc components
Spacing Guidelines for Specific JFC Components
  • Toolbar buttons
  • Command buttons
  • Toggle buttons
  • Checkboxes
  • Radio buttons
toolbar button spacing
Toolbar Button Spacing
  • Space individual toolbar buttons 2 pixels apart.
  • Space groups of toolbar buttons 11 pixels apart.
  • Include 3 pixels of perceived space above and below toolbar buttons. (This actually means 2 pixels of space below the toolbar because of the white border on the buttons.)
  • When you use mouse-over feedback, space individual toolbar buttons zero pixels apart within a group. Space groups of toolbar buttons 11 pixels apart.
  • The inset (the padding between the button graphic and the button border) on toolbar buttons should be zero.
toggle button spacing
Toggle Button Spacing
  • When independent (as in checkboxes) and
    • used outside a toolbar, separate by 5 pixels.
    • used within a toolbar, separate by 2 pixels.
  • When exclusive (form a radio button set)
    • separate them with 2 pixels (anywhere)
command button spacing and padding
Command Button Spacing and Padding
  •  Space buttons in a group 5 pixels apart.
    • Because of the white border on the right side of a button, the apparent spacing will be 6 pixels.
  •  Center the text within buttons.
spacing and padding in command button groups
Spacing and padding in command button groups
  • Command buttons often appear in groups .
    • the button in the group with the widest text determines the inner padding
    • Determine which button has the widest button text and insert 12 pixels of padding on either side of the text.
    • Make all the remaining buttons in the group the same size as the button with the longest text.
    • A space of 17 pixels should be left above command button rows in dialog boxes    Use the default height for whatever font size you select for your command buttons.
  • Make all command buttons in a group (including buttons that contain graphics) the same width and height.
  • Since the button with the longest text might vary from locale to locale, enable any of the command buttons to determine the width of all the other buttons.
checkbox layout and spacing
Checkbox Layout and Spacing
  • Align the leading of edge of checkboxes with that of other components.
  • Space checkboxes in a group 5 pixels apart.
  • Use a layout manager to achieve consistent spacing in checkbox button groups.
radio button layout and spacing
Radio Button Layout and Spacing
  • The height of the radio button is 12 pixels, not counting the white highlight border
  • Space radio buttons in a group 5 pixels apart.
  • Use the appropriate layout manager to achieve consistent spacing in radio button groups.
titled borders for panels
Titled Borders for Panels
  • Insert 12 pixels between the edges of the panel and the titled border.
  • Insert 11 pixels between the top of the title and the component above the titled border.
  • Insert 12 pixels between the bottom of the title and the top of the first label in the panel.
  • Insert 11 pixels between component groups and between the bottom of the last component and the lower border.
  • Titled border creates labeled boxes for grouping components.
  • Do not use them to supply titles for individual components; use labels instead.
  • Use a titled border in a panel to group two or more sets of related components, but do not draw titled borders around a single set of checkboxes or radio buttons. Use labels instead.
  • Use sparingly: Do not use multiple rows and columns of titled borders;
  • Do not nest titled borders--that is, do not insert one titled border inside another.
text in the interface
Text in the interface
  • Use language that is clear, consistent, and concise.
  • Ensure that the wording of your labels, component text, and instructions is readable and grammatically correct.
  • Follow one of two capitalization conventions: headline capitalization or sentence capitalization.
    • Use headline capitalization for most names, titles, labels, and short text.
    • Use sentence capitalization for lengthy text messages.
  • Do not capitalize words automatically. You might encounter situations in your interface when capitalization is not appropriate, as in window titles for documents that users have named without using capitalization.
  • Use standard typographical conventions for sentences and headlines in your application components. Let translators determine the standards in your target locales.
  • Place all text in resource bundles so that localization experts don't have to change your application's source code to accommodate translation.
headline capitalization in english
Headline Capitalization in English
  • Most items in your application interface should use headline capitalization, which is the style traditionally used for book titles (and the section titles in this book).
    • Capitalize every word except articles ("a," "an," and "the"), coordinating conjunctions (for example, "and," "or," "but," "so," "yet," and "nor"), and prepositions with fewer than four letters (like "in").
    • The first and last words are always capitalized, regardless of what they are.
use headline capitalization for the following interface elements
Use headline capitalization for the following interface elements:
  • Checkbox text (Automatic Save Every Five Minutes)
  • Combo box text (Centimeters)
  • Command button text (Don't Save)
  • Icon names (Trash Can)
  • Labels for buttons or controls (New Contribution To:)
  • Menu items (Save As...)
  • Menu titles (View)
  • Radio button text (Start at Top)
  • Slider text (Left)
  • Tab names (RGB Color)
  • Titles of windows, panes, and dialog boxes (Color Chooser)
  • Tool tips (Cut Selection)
sentence capitalization in english
Sentence Capitalization in English
  • When text is in the form of full sentences, capitalize only the first word of each sentence (unless the text contains proper nouns, proper adjectives, or acronyms that are always capitalized).
  • Observe proper punctuation within and at the end of full sentences.
  • Avoid the use of long phrases that are not full sentences.
  • If you determine that you must use a phrase that is not a full sentence, no punctuation is required at the end.
use sentence capitalization in the following interface elements
Use sentence capitalization in the following interface elements
  • Alert box text (The document you are closing has unsaved changes.)
  • Error or help messages (The printer is out of paper.)
  • Labels that indicate changes in status (Operation is 75% complete
  • can provide effective emphasis if used correctly,
  • BUT-- The human eye is attracted to animated elements. If the user's attention needs to be elsewhere, animation might increase user errors.
  • Do not use animation when it:
    • Detracts from more important screen elements
    • Interferes with the user's work
    • Dazzles without purpose
  • Useful animations include progress or status animations. For details, see Progress Animation and Status Animation. Other uses of animation include an animated graphic that activates when the user empties the trash or when the system state changes.