Q The Overview provides you background design theory and visual perception. The
W Overview also describes how these principles apply to Windows, standards for screen B* design, and the use of color and fonts.
1 of 12
Windows 3.x System Visuals
T The Windows 3.x System Visuals section describes screen elements provided by the
V system (Windows). These elements (including buttons, title bars, window frames, and
Q minimize/maximize buttons) combine to create the look and feel of the Windows BN interface and are a baseline for the design of application screen elements.
!The Power of Visual Communication
Q What we see influences how we feel and what we understand. Visual information
M communicates nonverbally but very powerfully. We organize what we read and
V how we think about information by grouping it spatially. We actually read text by B, scanning the shapes of groups of letters.
T In addition, visuals include emotional cues that motivate, direct or distract. We
Y tend to describe graphic information with adjectives like "slick," "pretty," "boring,"
S "conservative," and "wild." The advertising industry has taken advantage of thisA> phenomenon for almost as long as publications have existed.
Composition and Organization
W We tend to read screens from left to right and top to bottom in what is known as the
U visual processing arc. The eye is always attracted to colored elements over black
X and white, to isolated elements over elements in a group, and to graphics over text.
T These are just a few of the principles that graphic designers apply to cluttered BR computer screens in an attempt to make the information in them more accessible.
Interface Design Basics
Z It's important to remember that all visuals influence one another. Good design depends
Z completely on context. And, in a graphical user interface, a graphical element and its
] function are completely interrelated. A graphical interface needs to function intuitively AS the way it appears: it needs to look the way it works and work the way it looks.
Windows Principles
^ A few simple unifying visual principles form the basis of the Windows 3.x visual interface BY design. They involve the use of tactile visual properties, contrast, color, and fonts.
Z Be sure to involve a graphic designer in the early stages of your product development.
Y A graphic designer can help you visualize the elements of your product and contribute AO ideas that help motivate the user and organize the information more clearly._
+Shading of these buttons gives the illusionA+that three are raised and one is depressed.
R In addition, since we have only two shades of gray, we use both black and white
S as highlight and very dark shadow colors to produce an effective 3-D appearance.
S We need all four (white, light gray, dark gray, and black) to create a clear 3-DA
appearance.W
$Icons, buttons and window frames allA*have black outlines to define their edges.!
Overview: About This Guide(
A!Overview: Interface Design Basics
4 of 12
5 of 12
6 of 12
Application Visuals
V The Application Visuals section includes some graphic elements of an interface not
Y pre-defined by the system, including graphic buttons, toolbars, toolboxes and cursors.
Application Examples
\ The Applications Examples section presents the most current application interfaces within
the Windows 3.x standards.
3-D Can Be Acted Upon
Q In Windows 3.x, three-dimensionality is used to emphasize function and to give
R actions real-world feedback. Anything that appears to stick up from the window
T surface can be pressed, or acted upon. When the button is pressed, it pushes in,
W giving the user powerful feedback. Elements that appear to recede are either static B
or inactive.
R Much careful design and usability testing have gone into the 3-D appearance of
Z Windows 3.x. It is very important to use the designs in the Windows 3.x System Visuals
Z and Application Visuals sections of this Guide for consistency with other applications A
and the system.
P A study conducted in the early stages of Macintosh development compared a set
P of tasks performed on both the Lisa and a MS-DOS-based computer. These tasks
W were actually more complicated on the Lisa, but subjects in the test perceived them
W as being as easier because the graphical interface made the tasks more fun. This is A7 only one example of how visuals can motivate people.
<Black Outlines for Crispness and Contrast in Low Resolutions
Q The target market for windows 3.x is VGA resolution computers. Because of this
Y and our limitation to 16 colors, we use black lines to define edges in Windows. Icons
V have black outlines, as do the window frames, buttons and controls. The two shades
^ of gray available don't provide enough contrast to be seen in VGA. Single-pixel gray lines
V are hard to focus on and cause both eyestrain and reading difficulties. Icons have BN black outlines to emphasize the icon shape for quick scanning and locating.
This Guide
Icon Design
P The Icon Design section discusses icon design standards and outlines methods
! and tips for designing icons.
Resolutions
< The Resolutions section describes PC screen resolutions.A
Q The Guide is divided into five sections: Overview, Windows 3.x System Visuals,A5 Application Visuals, Icon Design, and Resolutions.
3 of 12
Overview Section
The Overview
The Overview
The Overview
O This Visual Design Guide is a living document intended to describe Microsoft
X standards for the graphic design of user interface elements. It is primarily intendedA( as a specification of Windows design.
Topics...
&Close
Close
wwwwwww
wwwwwwww
wwwwwwwwwwww
wwwwwwwwwwwwww
wwwwww
33333333
pwwww
pwwwwwwp
wwwwwww
wwwwwwwwww
wwwwwwwwwwwp
wwwwwwwwww
ffffffff
ffffffff
ffffffff
ffffffff
ffffffff
ffffffff
wwwwwwwwwwp
wwwwwwwwwwp
wwwwwwwwwwp
wwwwwwwwwwp
pwwwwwwwwwww
wwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDOO
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
Topic:
more...
Overview
1 of 4
Z Fonts have many functions in addition to providing letterforms for reading. Like other AS visual elements, fonts create a mood, motivate people, and organize information.!
Windows 3.x System Visuals!
Windows 3.x System Visuals
%Readability of Font Weights and Sizes
U By the very nature of the computer screen, fonts are much less legible online than
X on the printed page. Generally, italic and serif fonts are harder to read because of
Z the jaggies that result from too few pixels per character. Similarly, smaller, thinner BJ fonts (one pixel width strokes) are harder for older people to read. G
The user can select
a color scheme in the A
Windows interface.
W Color is used in the icons very carefully. Too much color is distracting, but people
Q enjoy color, and seem to understand iconic images better when they are coloredA& like their real-world counterparts.
10 of 12
Q Because of color confusion, use color as a redundant cue - don't rely on colorA, alone to indicate a property or function.
Font Basics!
Windows 3.x System Visuals
Fonts Organize Information
T Fonts can create a hierarchy of information. By varying the size and weight of a
Q font, we see text as more or less important and perceive the order in which itB
should be read.o
6The smoothness and clarity of these font examples areA0easier on the eye and permit faster recognition.
3The jagged edges in these font examples cause more
/eyestrain and are not recommended as a computerA
interface screen font.
ResolutionA
Resolution
W The icon font is 8 pt Sans Serif, non-bold font. This is the smallest font availableA9 in Windows 3.x and yet is quite readable as icon text.H
10 pt System Font
(hand-tuned version ofA
10 pt Sans Serif bold)
8 pt Sans Serif bold
12 of 12
Recorder
System Visuals
Color
Fonts
Cardfile
Calendar!
8 pt, Sans Serif, non-bold"
10 pt, Sans Serif, non-bold
P Opponent colors (like red and green) should not be used together because they
X appear to vibrate as the eye tries to focus on them. And bright colors tend to leave AU opponent after-images on the retina - stay away from large areas of bright colors.
9 of 12
Overview: Font Basics
Overview: Color Basics
X The font used in dialogs is an 8 pt Sans Serif bold font. The smaller font creates a
_ hierarchy of information from the larger title font, and allows for more information to fit
\ in the dialog box. Likewise, this font must be bold so that when it is displayed in gray AW or dithered to a checkerboard pattern (the inactive state) it will still be visible.
11 of 12
[ The font used in status bars is 10 pt Sans Serif, non-bold font. This text is easier to
V read and fits more compactly on a line than the bold version. This text never needsAL to be inactive and also indicates that the information is less important.
Color Basics
X Color attracts the eye, so it is good to use color to direct attention, although many
Z colors can become confusing. Context is critical. Blue is a poor color for small, thin
Y elements or small text, because it is hard to focus on. But blue works very well as a A
background.
Saturation
Brightness
yellow red blue
degrees of yellowness
whiter - blacker
7 of 12
Color Recommendations
X There has been much written lately about color perception and computer screens, most
R of it not based on any appropriate scientific data. However, we can draw a few B& conclusions about how to use color.
Use of subtle, not circus colors
X The default colors in Windows are deliberately subtle. Color is used only to indicate
W activity or selection. The active, or selected, window has a colored title bar, and BI color is used to highlight selections much as highlighter pen is used.
Fonts Used in Windows
V Taking into account the principles described earlier as well as realistic technical
I constraints, the following font choices have been made in Windows 3.x:B
8 of 12
Hue, Saturation, Brightness
U We classify colors in terms of three properties: hue, saturation (or chroma), and
W brightness (or value). Hue is the name of a color, saturation is its intensity, and BA brightness is where it would fall on a scale of dark to light.
W Also, since color is a very personal thing, Windows 3.x tries to give users complete
T control over color choices, by allowing them to change any of the Window element
S colors, or to choose from a set of pre-defined schemes that were designed to be A( usable, but suit a variety of tastes.
X Use color to show relatedness or grouping - for instance, we tend to see all the red
W things on a screen as belonging together. But we are slow to associate a color with
M a meaning, i.g.: red means I'm in edit mode, green means I'm in read mode.A
[ It is important to remember that about 10 percent of the adult male population has some A_ form of color confusion, with a small fraction of that being true red/green color blindness.
How We See Color
X The eye can distinguish millions of different colors, but color vision can be broken B! down to a few simple concepts.
+Emotional/Psychological Properties of Color
P Color improves learning. This has been proven in various psychological tests.
U Why? People like color. Color has emotional properties: red excites the eye, blue
X calms it. But everyone has a different taste in color - some people love pink, others
\ hate it. If colors are well chosen, they improve marketability and give an impression of
[ friendliness. If they are poorly chosen they can severely affect usability and create a B
circus-like appearance.
Opponent Colors Create Spaces
Y Color also has spatial properties: we tend to see the edges of objects with our black
Z and white receptors (rods) and then fill in the edges with color. We always see colors
^ in relationship to the other colors around them. This leads to color shifts when the wavel-
\ length of one color changes the perception of the one next to it. The red/green opponent
X cones contribute to our tendency to see color in opposites because we have difficultyB3 focusing on both red and green at the same time.
Trichromacy
V The first concept is trichromacy. The retinas of our eyes have cones that perceive
S color as red, green, or blue. Each color in the visible spectrum can be reduced
P mathematically to groups of three numbers. These numbers were developed into
C international standards of color perception in the 1920s by the
Commission Internationale
d'Eclairage
M in France, commonly known as C.I.E. An interesting wrinkle on the principle
W of trichromacy is that we have very few blue cones in our eyes and very few of them
V occur in the fovea, the focusing center of the eye. We have approximately the same
! number of red and green cones.B
X The System font, a hand-tuned bold version of the 10 pt Sans Serif, is used for title
Z bars and menu text. This font must be bold so that it will still be visible when grayedA
.The two grays are RGB #128-128-128 (dark gray)A"and RGB #192-192-192 (light gray).G
Note that this graphic element A
does not behave like a button.
3 of 4
The Frame
Q The default frame color and all controls in Windows are black one-pixel lines.B/ Black lines provide contrast and definition.
UThere are 16 system colors in VGA and four extra in 8514 or other 256-color displays,
Usuch as Super VGA, that are saved out of the palette. These colors always remain the
Wsame on the screen, even if there are also highly colored bitmaps on the screen as well
Zthat use all of the colors available in the system. There are only 15 system colors in EGAA.because the hardware cannot make a light gray.
N Some aspects of the Windows visual interface are defined by the system and AM cannot be changed in an application. This section describes those visuals.
0-0-255
The system menu
0-0-128
2 of 4
4 of 4
Colors
System Visuals: Colors
A 0-255-255
The 16 colors are:
255-0-0
A 128-128-0
128-0-0
Yellow
Dark Yellow
128-0-128
255-255-0
255-0-255
Dark Red
Magenta
Dark Magenta
A Dark Blue
192-192-192 Light Gray
A 0-128-128
0-255-0
0-128-0
A Dark Cyan
Green
Dark Green
192-192-192
128-128-128
A Dark Gray
+The Four Extra Colors in 8514 and Super VGA
\ There are four additional colors available in 8514 and in Super VGA: light yellow, light
] green, light blue, and a medium gray. Due to technical limitations with this online style BA guide, these four colors cannot be presented to you visually.
255-255-255
0-0-0
White
Black%
The default screen colors are:
255-255-255 White
nsert
FormaB
tilities
indow
Sec 1
Application Visuals2
A+Black lines provide contrast and definition
255-255-255 White
0-0-128 Dark Blue
128-128-128 Dark Gray
Application Visuals
Application Visuals
Application Visuals
System Visual Standards
The System Menu
R The system menu is not 3-D because it is a menu and not a button. When pressed,
Y the background of the system menu reverses from light gray to dark gray and the black
\ graphic reverses to white. This graphic menu, although it is light gray, is inconsistent
Y with other elements of the interface and should not be used as a model for any other B
controls.
1 of 16
Three dimensions and the Grays
Q The three-dimensional appearance of parts of the Windows interface are definedBA rigidly. We assume a light source coming from the upper left.!
Word Processor - Document2
Topics...
Cancel
Close
wwwwwww
wwwwwww
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
wwwwww
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwww
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwww
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
wwwww
DDDDDDDDDDDDDDDDDDDDDDO
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDD
pwwwwwwwww
DDDDDDDDDDDDDDDDDDDDDDO
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwww
wwwwwwwwww
wwwwwwwwwwwwwwwwwwwwww
Topic:
more...
Applications
3 of 16
Buttons
=Buttons are outlined in one-pixel black lines and have a one-
Dpixel white highlight on the top and left and a dark gray two pixel
Bshadow on the bottom and right, with light gray on the surface of A
the button.
Text Buttons
Graphic Buttons
Control Buttons
4 of 16
W Text buttons in dialog boxes are usually a standard height of 10 Dialog Units (or 22
X pixels), a unit that is determined by the font used. Windows 3.x system dialog boxes
W use the 8 pt Sans Serif bold font. Text buttons on forms or on toolbars can vary in
^ height (typically 22 pixels) and also use the 8 pt Sans Serif bold font. If vertical space
X is a great consideration and aesthetics are not as important as the usability of the AA product, text buttons may be the best solution for a toolbar.
AWhen buttons press in, the highlight disappears, and they have a
Cone-pixel shadow on the top and left of the button. The surface of
@the button remains light gray. The text or symbol on the button
Bmoves down and to the right one pixel. This is a transitory state A9that appears only as long as the mouse button is pressed.
DThe indeterminate state is identical to the up state visual with the
Aexception that the button surface uses an even dithered (checker-
Cboard) pattern of light gray and white, and the black color in the
Bgraphic image changes to dark gray. This visual state occurs when
Ea selected object shares several properties at once. For instance, a A;selected body of text may have portions of bold and italic.
Disabled State
S The graphic images themselves are simple; usually black outline images with the
S occasional addition of white to enhance the visual appearance. The use of white
Z is limited to within the black outine areas and must be solid (not dithered or checker-A
board).}
Text Buttons (cont)
R When grouping text buttons in a dialog box or on a form, use the spacing shown B below.
Menu button with graphic
=The down disabled state is similar to the down state with the
>exception of the graphic image on the button surface. A white
Aoutline image shifted one pixel to the left and to the bottom is
=contrasted with a dark gray outline image on top to give the A
appearance of being embossed.
IIt is optional in this visual state, to choose between black or dark red
Dcolor for the graphic. the change to dark red helps to cue the user A%even further that the button is down.
CommandA
Function Button
9 of 16
5 of 16
6 of 16
Graphic Buttons (cont)
U In those cases where a menu bar is not available due to real estate constraints,
R there are special menu buttons. These buttons are purposely two-dimensional to
V inform the user that the button is unique in function and to simulate the flatness B5 that is characteristic of a typical dropdown menu.
(scale 5:1)
8 of 16%
One pixel of gray around image
Up State
Mouse Down State
7 of 16
U There are three states of text button appearance: up, mouse down or disabled. TextA8 button states are provided by the Windows 3.x system.
Menu button with text
Down State
2 of 16
Text Buttons
Y Text buttons are generally located in only a few places within the Windows interface: B- in dialog boxes, on forms, or on toolbars.#
Application Visuals: Buttons
U All buttons have an up state. Graphic buttons that perform a command function when
W pressed, such as File Open or File Save, will require a mouse down state. All other
Z button functions, including properties, will require a down state. The down state willAX stay pressed in until it is pressed again or another button in its group is selected.
Q In vertical layouts, use 6 pixels between buttons and 16 pixels between groups
Y of buttons. In horizontal layouts, use 8 pixels between buttons and 18 pixels between A
groups of buttons.3
6 pixelsB
(3 Dialog Units)2
6 pixelsB
3 Dialog Units)2
1
6 pixelsB
(8 Dialog Units)'
18 pixelsA
(9 dialog Units)'
8 pixelsA
(4 dialog Units)
Graphic Buttons (cont)
R On occasion, a graphic button can include text with the image. The button size
O increases dramatically and can be dependent on the text length. Graphics and
R text together should be used where a product needs the aesthetic benefit of the
T graphics, but where the graphics alone are not clear, and when vertical space is B
not a concern.
@The up state uses a one pixel line of white highlight on the top
<and left edges, and two pixel dark gray shadow on the bottomA>and right edges, with light gray on the surface of the button.
@The mouse down state of the button uses a one pixel line of dark
<gray shadow on the top and left edges, has no highlight, and
Buses the solid light gray background. The graphic shifts both down
Gand to the right one pixel. The visual state occurs for all buttons on A
the mouse down action.
Graphic Buttons (cont)&
Radio/CheckboxA
Function Button
-or-Z
Vertical layout depends on the
"text length. The graphic is alwaysA
above the text.
DThe disabled state is similar to the up state with the exception of
?the graphic image on the button surface. A white outline image
Eshifted one pixel to the left and to the bottom is contrasted with a
?dark gray outline image on top to give the appearance of being A!embossed into the button surface.
applicable
\ It is important that there is one pixel of light gray around the perimeter of the button
W image. If the button image touches the white highlight or the dark shadow, the image
W won't sit properly on the surface and will get compressed even more in other screen A
resolutions.
Indeterminate State
Down Disabled State7
4 pixels between symbolA
and text is recommended
S There are two recommended styles to choose from. In either case, the button sizeA# is dependent on the text length.
10 of 16
/Horizontal layout using the standard text size
2button (22 pixels in height). Allow 4 pixels space
0between graphic and text. The graphic is always A
left of the text.b
Q The menu button can either have text or a graphic, depending on the interface A
need.
Selected menu
A 3D Button|
7The menu button and the standard 3D button are the sameA<size, 24(w) x 22(h), so they can fit on the toolbar equally.
Menu Button
(scale 3:1)
O There are six possible states of graphic button appearance: up, mouse down,
S indeterminate, disabled and down disabled. These are states not provided by the
X Windows 3.x system and must be implemented with bitmaps. All buttons are outlined in A
one-pixel black lines.
R There are three main groupings of 3-D buttons in Windows: Text buttons, Graphic
P buttons and Control buttons. These buttons share a dimensional look and feel
T and have several states of appearance when pressed. The differences are outlined A+ specifically in the following sections.
Graphic Buttons
X Graphic buttons are located on ribbons, rulers, toolbars, toolboxes, property sheets,
Z and navigation controls. The graphic image on the button is limited to the 16(w) x15(h)
S pixel button surface area. The recommended standard button size for toolbars and
Z toolboxes is 24(w) x 22(h) pixels. In special cases, when a smaller button is required
Y due to real estate constraints, the next recommended size is 22(w) x 18(h) pixels withB" an image size of 16(w) x 12(h).
@The down state of the button uses a one-pixel line of dark gray
@shadow on the top and left edges, has no highlight, and uses an
@even dithered (checkerboard) pattern of light gray and white on
Bthe button surface. The graphic shifts both down and to the right
Done pixel. This visual state occurs for all Radio/Checkbox function
?buttons on the mouse up action. The down state will stay until A(another button in its group is selected.
O When deciding which button category meets your needs and follows the Windows
] standards, ask yourself (1) where the button will be used (in a dialog box, on a toolbar,
^ or on a form), (2) what is the result from pressing the button (another dialog box appears,
T a tool appears, a mode changes), and (3) how much screen real estate is available
T in your product. Then read each section description and locate the type of buttonA" that works for your situation. \
BWhen a button is disabled, the text in the button becomes a black A
U Status bars appear horizontally at the bottom of the window and contain prompt or AZ status information. Sometimes locked key status is indicated with gray 3-D inset boxes.
13 of 16B
Use black and white
buttons in EGA, CGA, A
and monochrome
Mini title bar detailE
The standard button
and drop-down list A
height is 22 pixels'
6 pixels
betweenA
button groupsI
Buttons are attached
to one another with no A
space between themh
/Small, black outline drawings, with a hot spot A0that defines the pointer position on the screen."
Application Visuals: Rulers
14 of 16
Rulers
P These are examples of two other controls that would be useful in applicationsA< designed to be consistent with the Windows 3.x interface.'
A Application Visuals: Status BarsP
"Rulers have one pixel of highlightA% beneath the horizontal rule:
Rulers may vary in heightA
depending on the product$
Location for formatting tools
O Cursors are sometimes known as pointers. These images give potent, immediate
U visual feedback to users about actions available in the interface. A well designed
W pointer draws the user's eye naturally to its hot spot, so that the user can easily A
and accurately position it.
Status Bars
8 pt Sans Serif, non-bold8
A1Should be the same height as the window title bar*
A#Use 8 pt. Sans Serif, non-bold font
Cursors
Other Controls*
A#Application Visuals: Other Controls
Spin buttons
Slides
No selection
Left arrow selected
Pressed
Slider with ruler beneath
Regular
Application Examples
Application Examples
1 of 4
Application Examples%
Toolbars and Toolboxes (cont.)#
Application Visuals: Cursorsx
9The reading areas in the bar are delineated by highlightsA6and shadows in white and dark gray single pixel lines.
11 of 16~
R Both toolbar and toolbox variations are recommended, but the horizontal toolbarA# is generally the default option.
12 of 16B
Floating toolboxes
have a 2 pixel dark A
gray drop shadow
(scale 5:1)
12(w) x 9(h)
Knob pressed
15 of 16
2 pixels
of lightA
gray[
AT Toolbars and toolboxes are quite similar in function but different in appearance.
L The arrow cursor has been enhanced to give more feedback during copy and
O move actions. The copy cursor has a plus symbol to the upper right, and the
V move cursor has a dithered box attached to the tail. In both cases, the hotspot is A' located at the tip of the arrowhead.
Q Rulers are horizontal measurement bars on the top of the window. On occasion, A5 a vertical ruler can accompany a horizontal ruler.
V Toolbars are the horizontal bars on the top portion of a window that contain tools,
R accelerator buttons, dropdown lists, and sometimes status areas. Toolboxes are
U vertical bars with their own miniature title bar and system menu button. They canA? either be floating or attached on the left side of a window.\
5There is no shadow at the bottom, allowing for betterA
S When concepts are repeated throughout a graphical interface, it is important to
N establish a visual vocabulary. This means that recurring concepts should beB! reinforced by recurring icons.
AThe folder icon is effective not only because of its metaphoricalA9strength, but also because of its consistent application.
W First, be sure to get a clear understanding of the icon's purpose and identify where
W the icon will be seen. Then brainstorm as many ideas as possible. As you brainstorm,
P concentrate on finding real-world metaphors that communicate the concept mostB
clearly.
Style
R Icons that appear together should have a similar style. Establishing a general
P appearance minimizes unnecessary distraction and allows the user to focus on
X content instead of style. The following screens briefly outline the basic process andB8 stylistic guidelines for designing icons for Windows.
W It is easiest to begin designing in VGA because of its square pixel resolution. But
\ remember, because each resolution has a slightly different pixel height, icon proportionsA. vary somewhat across the various platforms.
Sizes
V There are currently two sizes of icons: standard and small. The standard icon size B^ for all resoutions is 32x32 pixels. The small icon size for all resoutions is 16x16 pixels."
Icon Design: Design Process
3 of 10
Icon Design
The Design Processl
%It is easiest to work in "fat bits,"
#but be sure to refer to the actual A
size window for guidance.
Light Source
Q To produce the 3-D interface of Windows, we assume a light source coming from
Y the upper-left corner of the screen. Icons should also comply with this standard. For
] this reason it is a good idea to orient 3-D icons to the left instead of the right, so as B4 not to place the front of the icon in the shadow.
Start in Black and White
T Always begin designing in black and white. Introducing color too early can weaken
_ a design. Remember, if an icon looks good in black and white, it will look better in color.
\ Start by drawing the icon with a black outline. Black outlines assist shape recognition, BQ and help to ensure that the image will be visible on a variety of backgrounds.
3-D Objects
S When possible, depict icons as three-dimensional objects. This strategy enhances
Y recognition and improves communication. The available area, 32x32 pixels is not a lot
[ of room when you think of its as a flat plane. But if you think of the space as a cube,
] the possiblities are much greater. One way of utilizing this third dimension is to depict BM objects at angles. Employing oblique angles makes your icons more dynamic.
4 of 10
Black outlined image
Actual size
Antialiasing
Q Antialiasing is a technique to reduce the stairstep or jagged appearance of an
S image. This is done by placing shades of a color (in this case gray) next to the
U original color to give a cleaner appearance. When this technique is used on outer
V edges of an icon, it should be done sparingly so that the image can sit well on anyB
background color.4
$Illustrative styles using real-worldA
objects
Color
[ After you have established the general shape, color can be applied. Be careful to apply
Z color appropriately and with some restraint. Color in icons should enhance, not detract
W from the icon's meaning. The 16 colors available for icons are those used on VGA in B
Windows.
Print Manager
A 32 square
5 of 10
3-D objects
(scale 6:1)/
Color appropriateA
to subject
Oblique angles
Light source-
Correct light sourceA
and orientation.
Backgrounds
W Remember to try your icon designs on a variety of backgrounds. They will not always B
be seen on white or gray.
Notepad
File Manager
Without dithered shading
With dithered shading
6 of 10?
The inner eges can be
much improved by thisA
technique.4
Be careful not to antialiasA
the outer edges.
Work on the Computer
] It's easiest to work directly on the computer. Pushing pixels is a very different process
S than drawing with a pen or pencil, and since icons ultimately are viewed on the
S screen, it's helpful to conceive them there. Also, the computer makes refinementBI through many variations easy because of its ability to copy and paste./
Incorrect lightA
source and orientation.
@Users are more likely to remember and understand the function ofA?a trash can icon because they see and use trash cans every day.
Use of Metaphor
T The most successful icons are based on metaphors. Metaphors communicate abstract
T concepts through concrete associations. By using real-world objects to represent
Z abstract ideas, users draw from previous learning and therefore learn more quickly and B
with less effort.
T Icons are pictorial reminders of computer functions. When placed on the desktop,
X they help users maneuver through the interface. An icon-based system is an efficient
W way to access information because users can view the entire screen at once, instead AI of having to scan it systematically from left to right, top to bottom.
Things to Remember
[ Also, apply color consistently with this model. If you identify highlights and shadows,
Z the highlight colors should be on the top and left sides, and the shadow colors should AU be on the bottom and right sides. To create a range of shadow colors, use dithers.
Use of Detail
[ Windows has adopted an illustrative rather than symbolic icon style. Illustrative icons
S communicate metaphorical concepts better than abstract symbols. This is because
T users make basic functional assumptions about icons based on familiar real-world
V objects, whereas symbolic icons have to be learned from scratch. But be careful to
\ use only the appropriate amount of detail when designing illustrative icons. Unnecessary B? decoration obscures rather than clarifies an icon's meaning.
7 of 10
Proportions
U Try to use proportions in icons that are appropriate for the viewing distance and
] resolution. For example, fingers on hands look better if the fingers are not true-to-life,B
(.txt)