Netscape Client User Experience Group
Date created: 3/17/96
Date Last Modified:
This document describes design goals and visual design details for
the Communicator 4.0 borderless buttons.
Table of Contents
Present a consistent visual style across the product
Provide an updated look that's inviting and attractive
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
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
Button sizes and image area:
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
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,
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,