Tags

, , , , , , , , , , , , , , , , , , , , , , , ,

The Graphic Perception of Space is a book with an immersive quality. Using 90 simple, black and white plates, the reader has direct experience of the perception of two-dimensional surfaces as three-dimensional spaces.  Each plate asks a simple question to the reader (e.g., of three identical circles positioned within a rectangle, “which of the three round shapes appears closer?”), followed by a clear and simple explanation of the perceptual mechanisms and design cues at play.

The book starts from the observation that seeing is fundamentally a spatial experience:

Our sense of sight permits us to judge where we are and helps us direct our next movement. With sight we can judge distances: whether certain objects are near or far away.

The same subtle cues in the environment that we use to perceive three-dimensional space can be designed in the two-dimensional surface to create a richer, deeper experience. The book focuses on nine properties of graphic elements and lay-outs that generate spatial illusions of a third-dimension, like distance and depth. These cues are:

1. SIZE, a form that appears smaller is perceived more distant; lines that are thicker appear closer; types that are smaller and/or thinner appear more distant. Perception interprets the change in the apparent size of an object as a change in distance from the observer.

2. VALUE relationship, higher contrast between figure and background creates a sense of proximity along a scale of values that goes from white to black through gradually darkening greys. Perception uses the degree of tonal contrast between a figure and its local background (i.e. the comparative brightness or darkness of areas) to determine the  spatial position of the figure.

3. POSITION, a form near the bottom of an area appears proximal. For instance, we usually take the top part of a painting to represent distant areas, while the bottom part represents areas close at hand.

4. EDGE, forms that are hazy, out-of-focus or indistinct appear distant, while elements with distinct outlines, sharp edges, in-focus appear closer.

5. OVERLAP, forms that overlap appear most distant from us.

6. TRANSPARENCY (translucency), forms and areas that are more opaque appear to be the closest to us.

7. PATTERN, textures or patterns with bolder and more intensely vibrating qualities than any other around attract attention because of their degree of contrast and appear closer. So, also contrasting patterns or textures generate spatial qualities: some patterns are ‘active’ and ‘loud’ while others are ‘quiet’ and have less of a vibrating quality; some textures are rough others smooth.

8. FORMAT, a same figure contained within a smaller format, that is, the size or scale of a compositional area, appears bigger and therefore closer than the same figure contained in a larger format.

9. ISOLATION, spatial illusions are also generated by isolating one form from its neighbouring shapes, e.g. the banner headline in a newspaper.

As Frank Mulvey writes about the introduction of this kind of design cues:

A few decades ago a handful of graphic artists began to challenge traditional typography. Their innovations broke several longstanding compositional rules. In doing this, they liberated the printed page from its age-old two-dimensional format.

In the world of User Interface design, it took a surprisingly long time to go through the same evolution and use graphic cues of value, position, transparency, etc. to generate a three-dimensional perception of space on digital surfaces. The transition is still very much happening, and a book like Graphic Perception of Space is an excellent introduction to the basic mechanism of spatial perception and corresponding design solutions.

Advertisements