Portfolio: interactions magazine, CHI'96 tutorial, color theory

This page has examples of Josef Albers' teachings in relation to UI design. He taught that interpretation of color depends on context. His ideas included colors blurring and vibrating when placed together, colors creating three-dimensional space, and colors causing each other to change. These can be used in different combinations to create a variety of effects in UI design.

These examples are from the interactions article (July/Aug 96, vol. III.4), the CHI 96 tutorial and consulting in general.

Blurring makes reading hard. When colors with similar light values are adjacent, they tend to blur together, and their borders "melt." It's hard to read the yellow text on a light background (25% gray), but easier against a dark one (50%).

Blurring makes reading hard Changing background light value makes reading easier

Blurring can be a problem for text.

Blurring creates interesting patterns. Sometimes, having colors blur is a good thing. In the next example, the brushed steel effect (left) is made up of pixels (right) that blur to make a smooth pattern.

Blurring can create interesting visual effects

Blurring can create interesting patterns in graphics. Right: A zoomed-in
view of the pattern on the left.

Backgrounds change foregrounds The calculators below are the same except for their background colors. Notice how the blue buttons change from black background to white: the spacing between them and their color seem to change.

Different background colors change size and color of foreground elements

Changing the background seems to change button spacing and color

Backgrounds change foregrounds. Both axes are the same color, but the vertical axis seems to change as its background changes. The horizontal axis remains constant against a constant background.

Vertical axis seems to change as the background color changes

The vertical axis is the same color, although changing
background color makes the color seem to change

Light intensity. This image shows how Windows 95 grays out the currently-open windows to get your attention when you ask to shutdown the system. The dialog box comes forward and the other windows are pushed back.

Windows 95 shutdown screen in 3D effect

The shutdown screen in Windows 95 focuses attention on the important popup (they do it in Windows XP, too)

Light intensity. This "color ladder" appears to move out of the plane of the page. The four reds have the same hue (red), and saturation (100%), but vary in brightness (25%, 50%, 75%, 100%).

"Color ladder" created by changing brightness

The brightening reds seem to climb off the screen

Similar colors can be used in sorting items. The left-hand figure shows three kinds of objects represented by different colors. The colors are similar in light value (darkness), so none of them stands out from the others, yet they are different enough in hue that they can be identified. On the right side, one item in each row stands out from the others because the light value has increased.

This technique can be used to display search results, to ease navigation and in other activities.

Color used to group elements Light value used to make one element stand out

Color can be used to group and light value can make things stand out

Back to previous page