Color Design for System 7.0
The appearance of system 7.0 is enhanced by using the color capabilities of
the Macintosh. The use of color makes the interface more visually pleasing.
The color also distinguishes the active window from other windows and
enhances user controls on the window frame. It's important to recognize that
color in the interface is applied to help users focus their attention on their
work and not to draw attention to the interface itself. This section describes the
use of color in the Macintosh interface and provides recommendations about
how you can add color to your icons and applications.
The windows and dialog boxes in system 7.0 are designed for aesthetic
consistency across all monitors from black-and-white displays to 8-bit color
displays. For display on color monitors, color and shades of gray have been
added to the frames of windows and to user controls. The window background
remains white on all systems and the window contents remain black and white.
This updated design takes advantage of the color capabilities of the Macintosh
but maintains the consistency of the Macintosh interface. On color screens, the
racing stripes in the title bar and the scroll bars are gray. The user controls,
close box, size box, zoom box, and scroll box are colored to make them more
ap parent. The borders of inactive windows are gray and recede into the
background so that the active window's black frame emphasizes its position in
front of the other windows.
For system 7.0 the standard window definition functions have been changed to
display color windows and dialog boxes. Some control definition functions have
been updated to display in color the window's scroll bars, scroll arrows, scroll
box, close box, size box, and zoom box. If you use the standard window
definition functions and standard control definition functions, your
application's windows will match the appearance of system 7.0 system
windows. If you create your own windows, be compatible with system 7.0 by
using the standard window color table and the guidelines described in this
section. Be aware that users can change the colors of windows and dialog boxes
by using the Colors control panel. If you use the default window color table,
you can be sure that the colors you use are consistent with any color that the
user has access to with the Colors control panel. You can use the
Palette Manager to associate a color palette with a window definition. See
General Color Design Guidelines
Always design for black and white first and then colorize that design. This
method ensures that your design looks good on all Macintosh computers. One
example of why this is important is the text selection mechanism. On a color
monitor you might be tempted to change the color of text to indicate its
selection; however, this technique would not translate to a black-and-white
monitor. In addition, a significant percentage of the population (up to 10
percent of the male population) has color deficiencies and would not recognize
the use of color to indicate selection. Therefore, you should never use color as
the only means of communicating important information. Color should always
be used redundantly.
Keep black-and-white designs two-dimensional. It's important to maintain
the visual consistency of the Macintosh interface across applications and
computer systems. Do not cause unnecessary visual clutter by trying to mimic
color effects, such as shadows, in black-and-white designs.
Note: This guideline does not apply to keyboard icons discussed in
specific patterns represent colors for black-and-white versions of
the keyboard icons.
Maintain a close visual relationship between a black-and-white design and its
colorized version. Users should be able to easily recognize standard interface
elements and icons across all monitor types. Users can have several monitors
connected to a computer and several computers on which they use your
applications. Your application should look consistent when a user changes the
bit-depth of a monitor or when the user moves your icon or window from a
color monitor to a monochrome monitor.
Use as few colors as possible in your designs. The fewer colors you use, the
less flashing occurs when the screen's color table updates during screen
re drawing. Using fewer colors also results in less visual clutter on the screen.
If you use a graphics application to do design work, make sure that the colors
you use are available in the default color tables. For more information about
color palettes and color tables, see the
Use light or subtle colors for large areas. Also use subtle colors to avoid
visual clutter on the screen. To extend the range of light or subtle colors
available, you can create colors that are lighter than those in the default color
tables by using a 50 percent pattern of the color and white.
Use bright colors sparingly and only in small areas. Bright colors attract the
eye and can distract the user from the information that you're trying to
convey. Bright colors can be effective in the contents of a window, such as in a
chart. However, if bright colors appear all over the screen, it becomes
difficult for the user to focus attention. You can use bright colors for small
details. An example of this technique is the system 7.0 hardware icons (such as
the hard disk icon) that use red and green pixels to represent the Apple logo.
For display on color screens in system 7.0 use true gray wherever you
previously used a 50 percent gray pattern. Use true gray in menus for the
dotted separator lines between groups of items and for dimmed menu items.
Use a consistent light source. On the Macintosh screen the light source always
comes from the upper-left corner of the screen. Therefore windows and other
elements have drop shadows on the lower-right side. Use the light source
consistently, so that shading is consistent throughout the interface.
The Icon Family
In previous versions of system software, you provided a black-and-white
32-by-32 pixel icon for your application that was automatically reduced to
16-by-16 pixels when necessary. In system 7.0, you can provide multiple
versions of an icon in black and white and in color. You can provide a family of
icons that includes a 32-by-32 pixel and a 16-by-16 pixel icon, in 1-bit
color (black and white), 4-bit color, and 8-bit color. The 32-by-32 pixel
icons appear on the desktop and, if the user chooses by Icon from the View
menu, these icons also appear in Finder windows. The 16-by-16 pixel icons
active. They also appear next to your application's name in the Application
menu and in Finder windows when the user chooses by Small Icon from the View
menu. The user can also set the icon size to 16-by-16 pixels or 32-by-32
pixels in other views. For localized keyboards and keyboard layouts, you
provide a 16-by-16 pixel icon only, in 1-bit, 4-bit, and 8-bit color. The
Figure below shows a family of icons for system 7.0.
An icon family
provide and how to create a bundle resource for your application.
The monitor displays the highest-quality icon that its screen allows. That is,
if you provide an 8-bit color icon, a 4-bit color icon, and a black-and-white
icon, the user sees the 8-bit color icon on the monitor that supports 8-bit
color. If you provide an 8-bit icon but not a 4-bit icon, the black-and-white
icon is displayed on the 4-bit monitor. If you provide a 4-bit icon but not an
8-bit icon, then the 4-bit icon is displayed on both 4-bit and 8-bit monitors.
If you do not provide a color icon, then the Finder displays the
black-and-white version of the 32-by-32 pixel icon on all types of monitors.
Black-and-White Icons
As stated previously, you should begin by designing a black-and-white icon.
In general, you should use an outline of one black pixel to create the icon
border. Use a minimal number of black pixels in the icon so that the icon's
appearance is noticeably different when selected. The Figure below shows an
example of a well-designed icon that changes significantly during selection.
A well-designed icon and its selected version
If you use too much black or 50 percent gray in your icon, the icon does not
appear significantly different when the pixels are reversed for selection. The
Figure below shows an example of an icon with too much black and 50 percent
gray.
A poorly designed icon and its selected version
Small Icons
In system 7.0 you can provide a 16-by-16 pixel icon that you scale to size
rather than relying on the Operating System to algorithmically reduce your
32-by-32 pixel icon. If you do not provide a small icon, the Finder reduces the
larger icon based on an algorithmic formula that makes the icon look rough and
creates less pleasing visual results.
You should provide a small version of your 32-by-32 pixel icon that you
scale. Preserve as many graphical elements of the icon as possible. In essence
you provide the same icon in a smaller scale. You can fine-tune the small icon
by adding and removing pixels. Do not eliminate significant elements, or the
smaller version of the icon may look different from the larger version. If you
have difficulty distinguishing the consistency or inconsistency, it's a good idea
to consult with a graphic designer to design or review your icons.
System 7.0 ships with full-color icons that appear on color monitors. Your
application can also provide color icons.
Do not design a color icon that's substantially different from your
black-and-white icon. When you add color to an icon, it's best to leave the
one-pixel black outline and fill the icon in with color. Coloring or graying the
icon's outline makes the icon appear less distinct on the desktop. Remember
that the user can change the background color of the desktop as well as its
pattern, so your icon may not be displayed against the background on which you
designed it. If you use ResEdit 2.1 to create your icons, it provides a way to
look at your icon against different backgrounds to see whether your design is
effective in various environments such as black-and-white displays or color
displays of different bit depths.
If you use ResEdit 2.1 to design and create your icons, the Finder icon family
editor provides easy access to the 34 colors used for icon design in system 7.0
in a palette with the standard 256 colors. Choose Apple Icon Colors from the
Color menu. This command sets the palette in the editor (which is similar to
the palette in most graphics applications) to contain the 34 colors used for
Finder icons. See ResEdit Reference for information on using ResEdit 2.1.
If the default color table colors are not available, the system software
gracefully degrades to black and white, starting with comparable 8-bit colors,
then using 4-bit colors if possible, and finally displaying the element in black
and white if no other choice exists. The system software will not substitute
colors that are not visually close to colors that you assigned. The selection
mechanism for color icons lowers the brightness of colors to indicate selection.
This means that the colors appear darker when selected. On a color monitor, a
black-and-white icon turns gray when selected. On a monochrome monitor, a
black-and-white icon uses reverse video to show selection. In order for
selected items to appear distinct from unselected ones, use light colors for
large areas.
One technique for enhancing the appearance of your icons is to smooth angular
or curved lines by coloring pixels on jagged edges. Designers refer to this
technique as anti- aliasing. Change the pixel color where you can see a visual
break in the outline of a black-and-white icon.
The Finder uses only one mask for each size in the icon family, so make sure
that all your icons have the same outline shape. Do not add pixels or shadows to
the outline shape of color icons. The Finder uses the icon mask for alignment
and transformation effects, so make sure that the mask and all your icons are
appropriate for each other.
Consistent Use of Icons
Use icons consistently throughout your designs. For example, if you reuse
icon elements when you modify the generic document icon to represent your
own application's files, make sure that they match. For example, the Macintosh
computer inside the System Folder icon is the same as the Macintosh that
appears as the Finder icon and as part of the Installer icon. The file server icon
contains the same gray document icon and the same purple folder icon that
appear on the desktop. Do not invent new icons to represent known entities
such as folders and documents.
You can provide the following customized icons if you support the associated
features. You can customize these icons to represent your application, just as
you can customize document icons.
• Document icon. This icon represents a document created with your
application. You can customize this icon so that it relates to your
application icon by adding graphics to it. Be sure to maintain the
information about displaying customized icons.
• Stationery icon. This icon represents a stationery pad that the user
creates from a document. You can customize the stationery icon for each
document icon by adding graphic elements to the stationery document
stationery.
• Query document icon. This icon represents a file that contains
to a database. You can customize this icon by adding graphics to the
document page. Be sure to maintain the outline of the icon and the
volume symbol that represents the database. See the
Data Access Manager for more information on query documents.
• Edition icon. This icon represents an edition file that is created
customize this icon by putting a different graphic inside the rectangle.
Maintain the horizontal orientation and the double-dotted line of the
icon that identify it as an edition icon. See the
Edition Manager for more information.
• Extension icon. This icon represents a system extension. You can
customize this icon by adding a graphic to the puzzle piece. You can
display the puzzle piece in a horizontal or vertical orientation with the
more information on displaying customized icons.
If you support these features but do not provide customized icons, the Finder
displays default icons for these objects, depicted in the Figure below. See the
Finder Interface or information on how to use the bundle resource to
associate these icons with your application.
Default system icons in black and white
If you develop control panels, you must provide an icon family for each
control panel. The control panel icon is a square panel with an indicator on it to
identify it. The indicator also appears on the Control Panels folder. You can add
a graphic to the square to customize the icon. You can display the icon in either
a horizontal or vertical orientation. The Figure below shows some examples of
control panel icons in both orientations.
Examples of control panel icons
Referenced by (1):