Traditional User-Interface Graphics

This page discusses aspects of the traditional design (up to about the year 2003) of user-interface graphics, such as button and border styles, icons, and mouse pointers.

Note: User interfaces found in video games are outside the scope of this document.

Contents

Display Modes

In this document:

Some display modes follow, along with their screen resolutions and commonly implemented pixel densities:

An image can be adapted for display modes with pixel densities that differ from the VGA mode just given (which is the usual one in the mid-1990s) by scaling the image’s width, height, or both. For example, a 300 × 300 image, when adapted for the EGA mode, becomes a shrunken 300 × 225 image (the height becomes 72/96 = 3/4 of the original height). If a display mode is isotropic, one way to find an appropriate scaling factor for images is to divide the mode’s pixels per inch by 96 (or whatever value of pixels per inch is the “normal” one); examples of such a factor are 1.25 (for the pixel density 1.25 to 1; IBM 8514/a), 2 (for high-pixel-density displays), and 3 (for very-high-pixel-density displays).

More generally, units similar to the spacing from one pixel to another may be employed as units of measure for user-interface elements, for design purposes to promote right-sized user interfaces. Examples include dialog box units (which depend on the font in which text is rendered) and effective pixels (which depend on the kind of display and its size, among other things).

Button and Border Styles

This section discusses the traditional drawing style for buttons and the borders around those buttons and other user-interface elements.

Colors for Button and Border Styling

Traditionally, the kinds of colors used to design buttons and borders in user interfaces (also called system colors) were the following. The given default values are those found in the “Windows Standard” color scheme in Windows 95.

User-interface conventions other than Windows 95 may use only a subset of these system colors or derive some of them (such as the highlight or shadow color) from a base color (such as the button face color).5

Traditional Button Styles

The following appearances are traditionally seen in ordinary buttons:

The following is typical in buttons found in Windows versions 3.0 and 3.1 7, Windows 95 6, and applications for these systems:

The following ways to draw buttons, default buttons, and toolbar buttons are typical in Windows 95 6 and applications for it:

In Presentation Manager and in System 7 of the Macintosh Operating System 9, to render a button in the unavailable style, the entire button (including text, icons, and borders) is drawn such that only every other pixel is rendered in a “checkerboard” pattern.

Traditionally, the three-dimensional effects of buttons, icons, and other user-interface elements are based on a light source shining from the upper left. 10

Button and Border Drawing Challenge

Here is a challenge. Write computer code (released to the public domain or licensed under the Unlicense) to draw the following ways to style borders and buttons:

Using only the following system colors and with some pixels or areas allowed to be transparent: the button face, window frame, button highlight, button shadow, button “light” highlight, and button dark shadow colors. It is allowed to simulate more colors using these six system colors by means of dithering.12

The desktopwallpaper.py file has some example code for border and button drawing. I expect many other variations here, some more subtle than others, but the design should not employ trademarks, should be suitable for all ages, and must not involve the help of artificial-intelligence tools.

Icons and Cursors

An icon (a small graphic representing a computer program, document, or resource) should come in a set of variations in color and dimensions:

Traditionally, 32 × 32 icons with the VGA palette are the most common variation.

Cursors (mouse pointer graphics) can follow the guidelines given earlier as well, but most cursors are traditionally in a single width and height, generally 32 × 32 pixels, except to account for pixel density.

Icons and cursors can include transparent pixels, but should have no translucent (semitransparent) pixels except for 8-bpc icons and cursors.

Note: Icon formats for OS/2 Presentation Manager and Microsoft Windows allow for icons and cursors with inverted pixels (where some existing pixels have their colors inverted), in addition to transparent and translucent (semitransparent) pixels. Describing these icon formats here is beyond the scope of this page, but see the imageformat module documentation.

Drawing Style

In general, when user-interface graphics, including icons, cursors, and illustrations, are drawn using a limited number of colors, the following is observed. The observations apply to graphics from 1995 to about 2003, unless noted otherwise.

Note: After about 2003, user-interface graphics tend to be 8-bpc images (with or without translucent pixels) and are less interesting to discuss here, as 16- and 256-color versions are often made from those images through dithering12 or similar techniques.

In general, from about 1990 to about 1997, user-interface text was drawn in one color only and rarely had smoothed edges; the edges were smoothed only if the display mode can show more than 256 colors at a time. In fancier ways to show text, a “shadowed” text look was often achieved using multiple shifted renderings of the text in a single color (for example, from one unit upward and leftward to three units downward and rightward) followed by an unshifted rendering in the base color or pattern.22 But new applications should avoid having text in icons, cursors, and other images.

New user-interface graphics with limited colors ought to be designed as vector graphics (geometric models; for example, line segments and filled polygons) from the start, even if they are meant to resemble the drawing style given in this section when in their original size. Existing images that function like icons should be converted to vector graphics if they are simple enough.

Animations

Although Windows 95 and later versions have an animation control for displaying simple video files without sound that are limited to 256 colors, this control appears to be rarely used. More usually, traditional desktop applications don’t store an animation as a video file; rather, the images making up the animation are either stored as separate image files or arranged in a row or column of a single image file (in either case with transparent pixels marked with a color not present in the animation’s frames). 23 The source code file desktopwallpaper.py has a method, named writeavi, to write video files.

Flexible User Interface Graphics

For a high degree of flexibility, new graphical user interface systems should allow for the following:

Given a graphic with multiple variations (such as in size, colors, or being a vector graphic), a system could then choose or synthesize the appropriate version of that graphic depending on the current display mode’s pixel density and which colors the mode can show. (For example, a vector graphic could be scaled up for high-pixel-density display modes, or a 256-color icon could be dithered to the VGA palette 13 if the display mode can show only colors in that palette.)

Relevant Works

The following books and other works discuss design matters on traditional user interfaces:

Worthy Mentions

// First calculate the background color's "brightness",
// then calculate the derivative colors.
// Assumes each component of background color is
// from 0 through 1.
// 'getrgb' gets the color's three components.
rgb=getrgb(background); r=rgb[0];g=rgb[1];b=rgb[2]
// default values for thresholds
foregroundThreshold=0.7
lightThreshold=0.93
darkThreshold=0.2
// find "brightness" of background color
brightness=0.75 * ((r+g+b)/3) + 0.25 * (0.3*r+0.59*g+0.11*b)
// find foreground color
if brightness>foregroundThreshold
   foreground=[0,0,0] // black
else
   foreground=[1,1,1] // white
end
if brightness<darkThreshold
    // very dark color
    select_color=background+0.15*(1-background)
    lower_shadow=background+0.3*(1-background)
    upper_shadow=background+0.5*(1-background)
else if brightness>lightThreshold
    // very light color
    select_color=background-0.15*background
    lower_shadow=background-0.4*background
    upper_shadow=background-0.2*background
else
    // medium color
    select_color=background-0.15*background
    fac = 0.6-0.2*brightness
    lower_shadow=background-fac*background
    fac = 0.5+0.1*brightness
    upper_shadow=background+fac*(1-background)
end

License

Any copyright to this page is released to the Public Domain. In case this is not possible, this page is also licensed under the Unlicense.

End Notes

Back to classic-wallpaper start page.

  1. This definition disregards whether a display shows an image using interlacing (for example, alternating between showing only odd rows and only even rows) or a progressive-scan method (all rows are displayed each frame). ↩

  2. These two values for pixel density need not match the true pixel density of a particular computer display. For example, the drivers that come with Windows version 3.x employ a pixel density that is greater, on average, than the true one to aid readability of text (C. Petzold, Programming Windows: The Microsoft Guide to Writing Applications for Windows 3, Microsoft Press, 1990, chapter 14).
    Moreover, two display modes with the same screen resolution can differ in their pixel density, even if both are meant for displays with the same aspect ratio. For example, a 320-×-200 display mode can have 40 or 48 vertical pixels per inch, even if both are intended for displays with the 4:3 aspect ratio typical in 2000 and earlier. ↩

  3. In Windows, this color was first supported in version 3.1. In the Foundation Class Library’s implementation of toolbars, this color is fixed to (255,255,255); see MFC Technical Note TN031, “Control Bars”. ↩

  4. In Windows, this color was first supported in the Win32 interface, and so was not available in Windows 3.1 or earlier. ↩ ↩2

  5. Examples include the Motif toolkit (see the section “Worthy Mentions”) as well as Windows 10 and Windows 11. ↩

  6. See The Windows Interface Guidelines for Software Design. ↩ ↩2 ↩3 ↩4

  7. Buttons possessed a 3-D look (in that they appear to have depth or elevation) in Windows versions 3.0 and 3.1 by default, but not other interface elements. The article “Adding 3-D Effects to Controls” describes a library for these versions that gives 3-D appearances to more places in an application. ↩

  8. In this case, if the button is a toolbar button with a thin border, the button’s inner background involved in the mixed-value appearance is surrounded by an additional 1-unit-thick edge drawn in the button face color. ↩

  9. Macintosh Human Interface Guidelines, p. 207 (according to which the system font in System 7 of the Macintosh Operating System was designed to be legible even when rendered this way). ↩

  10. The Windows Interface Guidelines for Software Design; Macintosh Human Interface Guidelines, p. 232. ↩

  11. Window borders are the outer edges of desktop windows. Text box borders are also known as “field borders”. Status field borders are the edges of inner boxes found in a status bar, which can appear on the bottom of some desktop windows. Grouping borders are the outer edges of areas that bring together several user-interface elements, such as checkboxes or option buttons (“radio buttons”) with a common purpose; grouping borders also serve as horizontal bars that separate parts of a menu. ↩

  12. Dithering is the scattering of colors in a limited set to simulate colors outside that set. ↩ ↩2

  13. The VGA palette has 16 colors, each of which is one of the following: light gray, that is, (192, 192, 192); or each color component is 0 or 255; or each color component is 0 or 128.
    Windows CE before version 4.1 also supported four-color icons in a 2-bit-per-pixel format, where the colors tend to be the four gray tones of the VGA palette (namely, black or (0,0,0), white or (255,255,255), light gray, and dark gray or (128,128,128)) (“Display Buffer Formats”, Windows CE Device Driver Kit).
    A Windows color icon file can store an icon limited to 8 colors, but still in the 4-bit-per-pixel format, separately from 16-color icons in that format (Petzold, chapter 8), but such an 8-color icon is rarely seen in practice. Indeed, before version 3.0, the Windows EGA and VGA video drivers supported only eight logical colors rather than sixteen (Petzold, ch. 14), and there were no standard Windows color icon and bitmap file formats. (In addition, the Japanese computers PC-8801 and PC-9801 were equipped with eight-color video cards.) A traditional color choice for 8-color icons was a table of eight colors where each color component is 0 or 255.
    The EGA video driver for Windows version 3.1 supports 16 logical colors, but only 15 “physical” colors: the VGA palette is used, except the logical color light gray is missing and often replaced with a dithered mixture of dark gray and “white” (which is one possible way to adapt images colored using the VGA palette to the EGA driver). ↩ ↩2 ↩3

  14. Modern guidelines recommend a 256 × 256 icon as well. Toolbar icons are traditionally offered in 16 × 16 (or 16 × 15; see MFC Technical Note TN031, “Control Bars”) and 20 × 20. The standard icon sizes in OS/2 Presentation Manager are 16 × 16, 20 × 20, 32 × 32, and 40 × 40 (“Bitmap File Format”, in Presentation Manager Programming Guide and Reference); sometimes larger icons such as 64 × 64 occur. In The Windows Interface Guidelines for Software Design (Windows 95), the recommended icons were 16 × 16 in 16 colors, and 32 × 32 in 16 colors, and 48 × 48 in 256 colors (large version of desktop icon; see Win32 Programmer’s Reference). ↩

  15. See “Creating Windows XP Icons”. Similar advice was also given in The Microsoft Windows User Experience.
    Before 1995 the icon outline tended to be black on all edges (see, for example, Macintosh Human Interface Guidelines, p. 239). And icons seen in Windows 3.0 (as opposed to version 3.1) tended to be drawn over a drop shadow, more specifically a dark gray silhouette of the icon, which silhouette is offset down and to the right by two units. ↩

  16. This is evident in the graphics (also known as watermarks) of Windows 95’s wizards, which are drawn in a teal background (color (0,128,128)) and show one or more computing devices in a three-dimensional, often rectangular appearance, and where, although there is internal shadowing, no shadow is cast on the teal background. But computer monitors may still be drawn straight on in order to accentuate what the monitor is showing. ↩

  17. Adventure games developed by Sierra On-Line in the early 1990s are well known to employ essentially 1-unit-thick lines and flood fills in their illustrations. (A flood fill is a way to fill a colored area that is surrounded by other colors.) Windows 95 wizard watermarks are also of this style, essentially, except that the use of black outlines, as opposed to outlines of other colors, is rarer and less systematic. ↩

  18. The only icons and cursors supported by Windows versions before Windows 3.0 (in 1990) were limited to the two colors black and white. ↩ ↩2

  19. Macintosh Human Interface Guidelines, p. 263. ↩

  20. Exceptions are found in the Marlett, Wingdings, and Webdings symbol fonts in Microsoft operating systems. ↩

  21. See also Macintosh Human Interface Guidelines, p. 233, which discusses deriving smaller icons from larger ones (in this case, 16 × 16 icons from 32 × 32 ones). ↩

  22. For example, see the discussion on buttons in the RIPscrip specification developed by TeleGrafix in 1992 and 1993. This specification was designed for building graphical user interfaces for online bulletin board systems under the EGA display mode. ↩

  23. The Microsoft Windows User Experience considers an animation to be fluid only if it runs at 16 or more frames per second. For an example of an animation in the form of a single image file, see Herman Rodent, “Animation in Win32”, Microsoft Developer Network, Feb. 1, 1994. ↩

  24. For example, an image can be drawn with four variations in width and height: 32 × 32, 40 × 40, 32 × 24, and 32 × 16 pixels. Multiple sizes and vector versions of a graphic are useful for several reasons, including:
    (1) to accommodate different display modes and pixel densities;
    (2) to render parts of the graphic more crisply, especially if their smallest feature would measure less than twice the spacing between pixels.
    They are useful for toolbar icons, for example, especially nowadays where the icon style is a single-color filled outline akin to a typographic symbol. Indeed, even 16-×-15-pixel images often used as toolbar icons are, in many cases, ultimately vector graphics consisting of polygons and 1-unit-thick line segments. ↩

  25. The resulting color may vary slightly from the one calculated by the Motif toolkit, because of rounding errors committed by that toolkit. ↩