This section introduces visual design variables. The information presented is abbreviated due to the scope of this book.
The visual design variables available to you comprise the visual "language" you use to create your application's interface. Some variables, such as texture, have limited availability on today's systems, and are not addressed. However, the variables described can provide a wide variety of elements to create an infinite number of unique visual designs. Visual design variables are:
You can use color in a wide variety of ways due to increasingly sophisticated technology. This section discusses only a few prominent design principles.
The computer display image is formed of pixels radiating light toward the user. As a consequence, such an image covers a wider range of contrasts than reflective images like printed pages and paintings. Computer display images have ranges from black to bright and luminous white. In addition, the color contrasts that are possible are much stronger than in traditional reflective media.
Used judiciously, color contributes greatly to the appeal and usability of an interface. Subtle contrasts are possible, but the misuse of color can have jarring effects. Also, remember that some users may be unable to distinguish colors due to disabilities. For more information about designing for users with visual disabilities, see "Designing for Accessibility".
If you do not have a graphic designer available for consultation, consider the following principles for using color:
Color is three dimensional. The color of a pixel on the screen is specified by three numbers: a level of red, green, and blue (RGB). A more intuitive, useful representation of color uses three defining dimensions: hue, saturation, and value (HSV). Developers often offer HSV versions of their color settings as a standard. The following list provides a brief description of these three dimensions:
Table 5 lists HSV principles for designing background and foreground elements.
| Element Position | Hue | Saturation | Value |
|---|---|---|---|
| Background elements (background, window client areas) | No restriction | Low | Medium |
| Foreground elements (icons, text) | No restriction | Medium to high | Low and high (higher contrast) |
When designing your application, plan to support a variety of hardware configurations. Take into account whether color is available on the system (that is, black and white and gray-scale design), and the number of colors available on different systems. Design your application so that colors can be viewed in black-and-white or greyscale without a loss of clarity. Remember that the same set of colors may look different depending on video hardware specifications. Always evaluate color palettes with appropriate video hardware when available.
Map the colors of an interface (or any image) into a color space. Such a visualization method helps define color relationships between different categories of interface elements. By establishing color relationships, you control the relative prominence of these elements and offer users interfaces that are more usable and make better use of the rich colors now available on state-of-the-art displays.
When specifying color for an application interface, consider the color resource (the HSV color space, for instance) as a "credit" of color. That is, once you use a color for a certain purpose, do not use it for another purpose. "Spend" your color resources judiciously.
The shape of interface elements can convey meaning. For example, an organic, rounded shape appears more inviting than a pointed shape.
Introducing different shapes provides visual interest and gains attention. Because of today's system implementation techniques, you can incorporate a variety of shapes in icons. Note that selected emphasis can emphasize different icon shapes.
A change in the shape of an element can also convey meaning. For instance, a trash can might change shape to show that it contains trash or a folder icon might open when an object is dragged over it to indicate that the object can be dropped there.
Element size is relative; that is, the terms "large" and "small" are relative to what you are comparing. Elements in the interface can vary in size depending on different factors, such as meaning. You can also reflect relative status of elements by contrasts in the size of elements, as described in "Contrast".
When designing your application's interface, keep in mind the various elements that will be required. For example, consider the appearance and size of window icons, the variety of monitors (including size and resolution), and the proportion of elements as they appear on the screen.
You can use color, shape, and size alone or in concert to express the concept of contrast. Contrast ranges far beyond simple opposites, for example, mild or severe, vague or obvious, simple or complex.
Use contrast to differentiate elements. For example, two elements can be similar in some aspects and different in others. Their differences become emphasized when the elements are presented with contrast. In other words, one element might look small by itself, but it might appear large compared to small elements next to it. An element can have a similar shape to the elements around it and can have a contrasting color.
The following list describes contrast in conjunction with other design elements:
Some examples of color contrast would be light and dark, brilliant and dull, and warm and cool. Elements can be the same hue, but have contrasting saturation: one would be light, the other dark. The opposite is true as well; that is, elements can have the same saturation with different hues (light red, light blue, or light green) but still be perceived as a group because they all have the same saturation and value. Pastel elements in an image otherwise dominated by dark, saturated colors could be perceived as a group.
Contrasting shapes are complicated because you can describe a shape in many ways. Geometric shapes contrast with organic shapes, but two geometric shapes can contrast if one is angular but the other is not. Other common cases of shape contrast include:
Contrast of size is straightforward. That is, size contrasts such as big or small forms and long and short lines are familiar concepts and usually easily recognized.
An anomaly is a kind of contrast: the irregular introduced into a regular pattern. If a pattern of any kind is maintained and then broken, an anomaly is created. In other words, there is contrast between anomaly and regularity because regularity is the observation of, and anomaly is the departure from, a certain kind of discipline or pattern. The element might be similar in many aspects to other elements, but an anomaly in one aspect gives it emphasis. Two examples are a set of elements that are all green with one yellow element or a set of rectangle elements with one circle.
In design, use an anomaly only when necessary. It must have a definite purpose, which can be one of the following: