Paul Kahn
Dynamic Diagrams
Hand-made Site Maps, Part 2
Two-Level Circular Graphic
- MetaTools
Miniatures of screen shots connected by lines. Reading left to right, top to bottom. - Braun
Two levels of the site, with typography conveying the corporate identity. Color and size separates levels. - Apple Computer
Colors are used to distinguish first-level sections and these colors are used throughout the site design. Replaced by a simple table layout during Apple's reorganization in 1997.
Three-Level Graphic
| Circular graphic map |
| Colors are used to distinguish first-level sections |
| Expandable content: clicking on a section title produces a graphic list of its sub-sections |
| Popup lists in five categories. |
| Visual restatement of navigtion system used throughout the site. |
| Note use of color and line to connect groups on first, second and third level. |
| Combination of circular and horizontal/vertical organization. |
Metaphor diagram
- Star Wars
Mixture of real map (position of planets in space) and concept/features (email notification is somewhere between Bespin and Dagobah?) Reference to relative position of web site features. - Merck
Astronomy metaphor used to present home page (center of the solar system) and first level pages (planets) Link from planet displays second level pages (satellites) - Toyota Belgium
Metaphor of a circuit diagram. Metaphor, color, and shading provide very little information value. - JAM Design
Metaphor of a flying saucer. 3D graphics, color, and imaginative illustration used to express web site structure.
Z-Factor diagram
- Dynamic Diagrams site views
Simplified representation. Limited to three levels. - Zero.One map
Suggests three levels but describes two levels.
