Sketchplanations

Explaining one thing a week in a sketch

Gestalt principles of visual perception showing proximity, similarity, continuity, closure, figure and ground, symmetry and order, and common fate.

Gestalt principles

The Gestalt principles of visual perception describe how our brains make sense of what we see. For example, they explain how we associate a photo with the text of a newspaper article or understand a series of words as a sentence on a billboard. These principles originated from the field of Gestalt psychology in the early twentieth century.

In laying out sketches, I try to consider how a viewer will understand what connects with what, the order in which the viewer will read the sketch with their eye, and how colour or formatting link related elements—skim through the back catalogue to see it in action. In creating each sketch, consciously and unconsciously, I use many of the standard Gestalt principles of design.

There are many Gestalt principles and some variations in the names. I chose seven common principles to illustrate:

  1. Proximity
    Objects that are close together are perceived as a group
  2. Similarity
    Similar objects are perceived as a group
  3. Continuity
    Elements on a line or curve are related
  4. Closure
    Completing missing parts of images to create a whole
  5. Figure-Ground
    Identifying what's in the foreground or background
  6. Symmetry & Order
    Perceiving symmetrical or orderly elements as a group
  7. Common Fate
    Objects moving together are perceived as part of a group

The Gestalt principles are helpful for information design, user interface design, user experience design, graphic design and just about any design. It is also fascinating to spot how you unconsciously use them when interpreting designs you see. For example, look at the signs in an airport, a menu, or a page of your favourite app and see which principles are in play.

The Interaction Design Foundation has a great article on the Gestalt principles that explains their use in design in more depth. You'll also find many others.

Also see sketches on:

Keep exploring

Starting a Company - Reid Hoffman quote illustration: a brave soul leaps off a tall coastal cliff with only a backpack for survival. On their way down, they quickly assemble a plane from the components in the backpack and pilot it away from the beckoning sea - just in time! Written in the sky is the quote: "Starting a Company is like jumping off a cliff and assembling a plane on the way down."
Anamorphosis illustration: the words "Tilt Me" are written in large bold letters on an angle, making it easy to read when viewed from an intended position.
The frog boil metaphor illustration: showing a frog put into cool water that is slowly raised not complaining until it's too late. Poor frog. Don't try this.
Affordance illustration: one person effortlessly pushes open a door with a flat plate while a victim of poor design struggles to pull open a door with a bar handle and a discreet push sign
Ordering adjectives illustration: two people in kilts improbably play catch with a terrific giant old circular grey scottish stone throwing toy
The dilution effect illustration: showing how adding a side effect of 'itchy feet' to sleeping pills reduces perceived risk of the other side-effects of heart attack and stroke!
Buy Me A Coffee