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 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.
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.
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.
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.
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%).
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.
© Copyright 1996-2014, Interaction Design, Inc.