Web Style Guide third edition

7 Page Design
Sidebar: Visual Design Principles

The Gestalt psychologists of the early twentieth century were fascinated with the mind’s ability to see unified “wholes” from the sum of complex visual parts (“Gestalt” is German for “shape” or “whole shape”). Their research into the perception of visual patterns yielded a number of consistent principles that dominate human visual reasoning and pattern recognition, and these principles form the theoretical basis for much of modern graphic design. The following principles are those most relevant to web page design:

Proximity

Elements that are close to each other are perceived as more related than elements that lie farther apart (a, below).

Similarity

Viewers will associate and treat as a group elements that share consistent visual characteristics (b, below).

Continuity

We prefer continuous, unbroken contours and paths, and the vast majority of viewers will interpret c, below, as two crossed lines, not four lines meeting at a common point. A three-part figure: a, shows the Gestalt principle of proximity: things that are close together seem to be related to each other; 2, Similarity: things that are similar in shape or color seem related; 3, We prefer to interpret lines as continous. Where they intersect, we tend to see two lines crossed, and not four lines coming together at a single meeting point.

Closure

We have a powerful bias to see completed figures, even when the contours of the figure are broken or ambiguous. We see a white rectangle overlying four circles (a, opposite), not four circles that each have a section missing.

Figure-ground relationships

In figure-ground reversal the viewer’s perception alternates between two possible interpretations of the same visual field: you see either a goblet or two faces, but you cannot see both at once (b, below). Proximity has a strong effect on figure-ground relationships: it’s easier for most people to see the goblet when it’s wider and the “faces” are farther apart (c, below). Also, visual elements that are relatively small will be seen as discrete elements against a larger field. The small element will be seen as the “figure” and the larger field as the “ground” around the figure. A three-part figure. A, shows that we prefer to see whole ../figures/7-page-design like squares, even where the visual evidence is ambiguous; 2, the Rubin Vase visual illusion; 3- the Rubin Vase figure, but with the face profiles farther apart, strengthening the vase and causing that view to dominate.

Uniform connectedness

Uniform connectedness refers to relations of elements that are defined by enclosing elements within other elements, regions, or discrete areas of the page. Three diagrams show how Gestalt principles of uniformity, connectedness, and enclosure are commonly used in visual user interfaces and graphic design.

1 + 1 = 3 effects

The “white space” between two visual elements forms a third visual element and becomes visually active as the elements come closer together. The well-known visual illusion below of gray “spots” appearing in the spaces between the dark squares shows the worst-case scenario for 1 + 1 = 3 effects, but this principle applies to all closely spaced elements in which the ground forms an active part of the overall design.

Two illustrations of '1+1=3' effects, where the white space between graphics becomes another element in visual complexity, and can even result in optical illusions of motion or shimmering gray spots in complex arrays of graphics.