CS 552, Spring 1998
Guidelines for Icon Design
From K. Mullet and D. Sano, 1995, Designing Visual Interfaces,
- Determine the essential qualities that should be conveyed by the
design. This is typically a short list of
adjectives. Also identify any fixed, formal elements - such as
a texture, pattern, color, or label - that applies to all icons in
- Critically examine each element in the design. Ask yourself
why it is needed, how it relates to the essence of the design
(identified in the previous step), and how the design would suffer
without it. If you can't answer any of these questions, remove
- Try to remove the element from the design, anyway. What
happens? If the design collapses, either functionally or aesthetically,
the element must be included. Otherwise, consider omitting it from
the final solution.
From A. Marcus, 1992, Graphic Design for Electronic Documents and
User Interfaces, ACM Press.
- Analyze the verbal contents and the display environment.
Determine how icon parts and complete icons should relate.
Icons are often developed in a chaotic manner with elements that
may not be relevant, consistent, or useful. Too many parts may
confuse the viewer.
- Design the initial icons by creating quick sketches.
Once the semantic content has been organized, create many
quick sketches that may vary from logical abstractions to
concrete images. Indicate all visual elements, their approximate
size, and their approximate location. It is important not to be
too precise or detailed early in the design process. It is more
important to explore possible variations. Evaluate which
icons seem to meet the needs of the sender, the receiver, the
message, and the medium.
- Sort the icons into styles.
Consistent stylistic treatment has a major effect on the perceived
complexity of icons. Styles should be established, in which all the
icons are grouped by consistent approach or appearance (for example,
curved versus angular shapes). By sorting the sketches, it is easier
to keep track of tradeoffs in optimizing the entire set of icons
with respect to simplicity, clarity, and consistency.
- Design a layout grid that organizes all major elements
of the icons.
Determine an underlying spatial grid to make consistent all visual
components, including point elements, gray patterns, curves, angles,
the length and width of rules, etc. It is especially important to
use the grid to establish standard horizontal, vertical, and
oblique lines and a limited set of sizes for objects.
- Use large objects, bold lines, and simple areas to
Once a style of presentation is selected, continue to use the same
approach as often as possible within the icon set. Avoid sudden
changes in the means of emphasizing or de-emphasizing the importance
of certain objects, structures, or processes. Avoid making
crucial elements of the icon's significance too small in comparison
to the total size of the icon.
- Simplify appearance.
Icons should be simple and clear. Any extraneous decorative parts
should be carefully weighed against the confusion they may cause
the viewer. The visual differences in an icon should be as
significant as possible from a communication perspective;
otherwise, the random or idiosyncratic changes merely add more
processing time for the human mind and create a possibility of
errors of interpretation.
- Use color with discretion
Too much variation will confuse the viewer with distracting
clutter. In general, for color displays it is reasonable to
use five or fewer colors (including black, white, and gray)
- Evaluate the designs by showing them to potential