 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
   
|
| |
Visual
Hierarchies |
|
A visual hierarchy translates a document's logical
hierarchy into a visible system by assigning display characteristics to
each element and by organizing the visual field in appropriate ways.
For each document type, develop a set of
specifications that will show the document's chief structural
characteristics "at a glance." These specifications will ultimately guide
the development of layout templates for each document type.
In order of their importance, the tools for creating visual hierarchies include
 |
|
organizing
a pattern of  white space
|
|
|
adjusting sizes,
line weights, font families to show an element's position in the logical
hierarchy |
|
|
applying color to
objects (words, backgrounds, dingbats,
icons) to show which level of the hierarchy various elements belong to
|
|
|
organizing the elements in a particular,
unchangeable order (some but not all arrangements in a numbered or
alphabetized sequence help make the logical structure of a document
visible) |
|
Also see  Layout |
|
| |
A traditional outline
 |
| I. |
|
ROMAN
CAPS |
| A. |
|
ALPHABETIC
CAPS |
| 1. |
|
Arabic numeral |
| i. |
|
roman lower case |
| a. |
|
alphabetic lower
case |
|
|
|
|
manipulates white space. It usually affiliates each item with an icon or
a symbol, as in the example on the right, to make the logical structure
visible. Most
printed tables of contents use the same two systems, even if secondary and
tertiary levels of the hierarchy are only implied.
Bulleted lists apply these same visual devices but imply that
the items could appear in a different order (items are essentially
interchangeable parts, their order irrelevant to the purpose at hand).
The most effective visual hierarchies
are unambiguous, regular, and consistent.
|
| |
Unambiguous:An unambiguous hierarchy uses at least two visual tools and often three.
White space is the easiest to read and comprehend quickly.
Variations in size, line weight, and density are a
close second. Numbered lists a distant third. Color works well with
variations in size and line weights, but less well with variations in fonts or
with an ordered list when no other visual vocabulary is employed.
Regular:A visual hierarchy achieves
regularity by assigning the same increment between
elements belonging to the same visual system.  If a table of contents uses an indented format, the distance
from the left edge of the top level to the left edge of the second level
should also be the distance from the left edge of the second level to the
left edge of the third.
This rule can break down in spacing elements
vertically since vertical proximity is a clear signal of affiliation. Thus
a group of elements nested underneath a hierarchically higher element might
observe the regular horizontal spacing but cluster more tightly together
vertically.
Consistent:Consistency
requires that every element belonging to the same level in the document's
logical hierarchy be displayed with the same characteristics: all in a
smaller size than the next level up, or all bold, or in small caps. |
 to Documents |
| |
|
|
|
| Web Design Guide |
|
|