Gestalt Theory and Web Design

The Gestalt Principles

Borrowed from psychology.
German word meaning the essence or shape of an entity's complete form.
One of the most important rules of design.

The brain first sees the overall shape of any design, then starts to focus on and see the details.

Proximity or Grouping

Things that are close together are perceived to be related.
Proximity overpowers similarity in color or contrast.

Example:Charles Schwab

Continuity

Elements on a line or curve are more related than those not on the line or curve.
Text follows this principle as do graphs.
Site navigation uses good continuity.

Example: Charles Schwab

Similarity

Elements similar in shape, size or color are perceived as part of a group.
Color is the strongest way to suggest relationship.
Consistency in styling implies structure.

Example: Boston Consulting Group - Careers

Figure-Ground

Elements are perceived as either figures or background. The mind can only handle one perception at a time.
The mind quickly decides what to focus on and what to ignore.
Color, shading and highlights tell the viewer what has focus and depth.

Examples:
Crystal Links
Personal Tao

Common Fate

Elements moving in the same direction are more related than those that are stationary or moving in opposite directions.
Humans recognize contrasting movement more than any other visual cue.
Moving objects are seen as figure. Stationary objects are ground.
Utilized in tooltips and slide-out menus to create relationships between elements.

Example: IBM

Uniform Connectedness

The strongest Gestalt principle of relatedness.
Visual elements with the same visual properties are perceived as part of a group.
Borders and tabbed navigation elements.

Examples:
BCG
www.dcccd.edu

Symmetry

Humans prefer symmetry.
Symmetrical elements are perceived as figure.
Symmetry conveys stability and harmony.
Asymmetry is associated with negative feelings.

Examples:
Apple
Verizon

Closure

Humans visually close gaps in forms.
We use past experience and recognizable patterns to fill in gaps in incomplete images.

Examples:
World Wildlife Fund
ATT logo

Experience

Humans will rely on experience to understand visual elements.
Icons and other interface elements expect us to use this principle.

Example: Lowes

Simplicity

Simple figures are easier to process and recall than complex figures.
Complex or incomplete pictures are perceived as simple and complete.
Use symmetry for efficiency. Asymmetry adds interest.

Example: BCG

Resources