Borderless Buttons

This document describes design goals and visual design details for the Communicator 4.0 borderless buttons.

Summary
Design Goals
Design:
Color palettes and icon file formats
Button size and image area
Text only
Image only
Image and Text
Visual design details

Mac platform:
Image Only
Text & Image
Windows platform:
Image Only
Text & Image
Unix Platform:
Image Only
Text & Image

1. Present a consistent visual style across the product
2. Provide an updated look that's inviting and attractive
3. Create clear distinction between controls and content

Communicator 4.0 and after provides three toolbar appearance choices: pictures & text, text only, or pictures only in toolbars. The buttons on the toolbar also have four states: mouse over; enabled; mouse down; and disabled. The visual design of icon images should meet these requirements. For other related information, please see the Toolbars Specification.

Color palette for icon images:
Communicator 4.0 and after uses specified color palettes and file format for all the icon images. For details, see Color Palette Specification.

Button sizes and image area:

• Text Only
Toolbar buttons need to be reasonably large so the text is readable, yet not so large that the desired 9-10 buttons cannot fit. We limit the number of characters for text labels so that they do not exceed 9 characters. For details, see the Toolbars Specification.
• Image Only
• Image area: 23w X 21h pixels. This is also the size for toolbar icon images.
• Button size: 27w X 25h pixels.
• Pictures & Text
• Image area: 44w X 37 pixels (the actual bitmap size will remain as 23w X 21h unchanged).
• Button size: 48w X 41h pixels.

• Borderless appearance: by default, all the icon images of toolbars in Comminicator 4.0 and after will have normal enabled state when no action is taken. The "button" will remain borderless until the user moves the mouse cursor over the button area.

• Mouse Over: when the user moves the mouse cursor over a particular icon image, the border of the button will show up and the icon image will change from the nomad enabled state to "Mouse Over" state by slightly "lightening up" the image. If the users' Preference setting is "Text & Image" , then the color of the button text will change from black to blue with the action. (See sample images for details on Mac, Windows, and UNIX)

• Mouse Down: when user clicks a button, the button will change from " Mouse Over" state to " Mouse Down" state, the image inside the button will shift 1 pixel right/down and the color of the image will slightly darken accordingly. If the users' Preference setting is "Text & Image" , then the color of the button text will change from blue to dark blue with the action. (See sample images for details on Mac, Windows, and UNIX)

• Disabled: if a particular button function is not available, the icon image for this button will be dimmed and the button border will not show up when the user moves the mouse cursor over the image area. (See sample images for details on Mac, Windows, and UNIX)