Graphic design fundamentals

Learnings from Gestalt psychology and principles of visual perception

Image header from Exploring the Gestalt Principles of Design

Introduction

What are “Gestalt principles”?

Gestalt is a German word which roughly translates to “shape” or “form,” but is better interpreted as “pattern” or “configuration of individual things” in the context of Gestalt design principles. Derived from Gestalt psychology of human perception, Gestalt principles can help inform our visual design of effective, delightful, and human-centered user interfaces.

Overview: 7 core Gestalt principles

From 7 Gestalt principles of visual perception: cognitive psychology for UX

Below are 7 Gestalt laws of visual perception, which drive our understanding of “good” design principles.

Principle 1: Figure-Ground relationships

We tend to perceive objects as either 1) in the foreground or 2) in the background. As designers, we can leverage this inherent and often subconscious process of moving between foreground / background to create interesting and compelling graphics.

Principle 2: Similarity

When objects’ appearances are similar to each other (via various visual variables like color, shape, size, etc.), we tend to group them together + perceive that they have the same / similar functions.

Principle 3: Proximity

When objects are placed close together, we tend to perceive them as being more related than things spaced farther apart. The power of proximity often has a stronger effect than similarity of color, shape, and other visual variables.

Principle 4: Common region

When objects are enclosed within the same container, we tend to perceive them as being grouped together. Common regions are highly related to proximity, since the inclusion of borders and other visual barriers is a means of creating a perceived separation between groups of objects.

Principle 5: Continuity

When objects are arranged on a line / curve, our eyes travel such that we tend to perceive a relationship between the objects. Even in the presence of other visual variables like color, we tend to perceive them as being more related than objects not following the same line / curve.

Principle 6: Closure

When we look at a complex arrangement of objects, we tend to look for a single, recognizable pattern based on our expectations and prior experiences. That is, when there are “missing” parts to an image, our brain naturally fills in the blanks to construct a familiar, recognizable pattern.

Principle 7: Focal point

Objects that stand out visually (via contrasting visual variables) will capture and hold the viewer’s attention first.

More on graphic design fundamentals + examples

References at the end!

(1) Proximity

Proximity is one of 6 standard modes of grouping — the other five are: simplicity, similarity, closure, continuity, and symmetry. In general, grouping serves to both combine AND separate elements in an image:

  • Combine individual elements into groups via shared patterns / visual variables
  • Separate large elements into smaller subsets by decomposing along key differences

In the example below, we can see how Netflix uses proximity grouping to 1) horizontally combine similar content and 2) vertically separate different content.

Use of proximity grouping in Netflix interface

(2) Alignment

Alignment, when used appropriately, can help guide the viewer’s eye and enable easier information consumption.

In the example below, we can see how Amazon uses alignment to call the user’s attention to various purchase options. Notice how Amazon uses left-horizontal alignment, and consider an alternative layout which uses top-vertical alignment— since Western readers typically read left-to-right, top-to-bottom, we can see how this design decision makes it easier for us to quickly evaluate the different shipping options.

Amazon’s use of alignment in checkout (p.s. Sapporo Ichiban best instant ramen ever)

(3) Contrast

While color is the most common, contrast can be created with various visual variables (e.g., size, texture, spacing, etc.).

Below, we can see how Citizen uses color contrast to highlight certain elements in its interface. Against a relatively dark background, red and yellow icons draw the user’s attention toward emergencies and crime incidents on the map, as well as key pieces of information (i.e., proximity and recency of incidents).

Citizen’s use of color contrasting for incident alerts

(4) Similarity

Like proximity, similarity is another mode of grouping. Instead of grouping elements by how close together they appear, we can also group elements by their inherent similarity (in terms of visual variables or other attributes of the objects).

In the examples below, we see how Apple’s responsive navigation menu uses similarity grouping to display only products which are relevant to certain categories (i.e., Mac products vs. iPhone products). This design decision improves the UX of shopping with Apple as similarity grouping helps simplify users’ navigation of the website.

Apple web design for displaying Mac products
Apple web design for displaying iPhone products

(5) Typography

Typography is often used to create hierarchy among text elements, as well as to distinguish and highlight certain texts.

In the New Yorker typeface study below, we can see how one of the most famous digital and paper print magazines leverages typography in its mobile interface. In addition to the careful use of different typefaces (fonts, font sizes, and font weights), color is also used to highlight the text header denoting the reading category (i.e., “Poems” in red at the top).

New Yorker mobile UI (top left), Irvin for title font (top right)
Caslon Pro for serif body font (bottom left), Neutra Face for sans-serif body font (bottom right)

This is might be a bit meta, but notice how this Medium article you’re reading also uses typography principles to create hierarchy and structure :)

(6) Color

Choosing a color scheme is one of the most important design decisions because the use of color ultimately affects the overall visual energy and mood of an image. When it comes to color, there are two high-level relationships that exist in the color spectrum / color wheel:

  • Analogous colors: colors that sit near each other on the color wheel have minimal chromatic differences, and therefore typically create color schemes with innate harmony
  • Contrasting (“complementing”) colors: colors that sit opposite each other on color wheel. Note that there is a difference between opposites vs. near opposites: while opposites sit directly across from each other on the color wheel, near opposites are not quite as contrasting (and therefore provide a less harsh, more subtle color scheme that still enables more contrast relative to analogous colors)

Below, we can see how Lyft’s UI design uses analogous colors (variations of pink and violet) to create a subtle, pleasing color scheme.

Lyft UI design (left) and variations of pink hue using different values and intensities (right)

(7) Use of grid

Grids leverage proximity and alignment principles to create grouping among elements. As an organizational mechanism, grids can help us design clear and coherent formats for structuring content and information. Common grid types include manuscript grids (e.g., blogs), column grids (see example below), modular grids (e.g., databases), and hierarchical grids (e.g., company websites).

Below, we can see how Twitter’s web interface is built upon a 3-column grid:

  1. The leftmost column is a menu which contains all user navigation for the web app
  2. The middle column (bulk of the screen) contains everything relating to the app’s user-generated content
  3. The rightmost column contains recommendations (i.e., “other news” and “other people”)
Twitter’s 3-column grid

References

Christina Wodtke and other really smart people made it easier for me to learn these concepts:

stanford econ and hci, we out here just tryna learn!