Gestalt Principles: How Are Your Designs Perceived?

When your first impression of a design is positive, when you instinctively see the design as being good, it’s likely because one or more Gestalt principles of perception are at play. When you look at a design and admire one or two of it’s parts, it’s likely because those parts are adhering to one or more Gestalt principles.

One of the best things you can do as a designer is to learn these principles and understand what they tell us about how people perceive visual objects and the arrangements of visual objects.

Understanding gestalt principles will give you greater control over your designs, create more harmonious designs, and increase the likelihood that your message is communicated to your audience.

What is Gestalt?

When human beings look at a painting or a web page or any complex combination of elements, we see the whole before we see the individual parts that make up that whole. This idea of seeing the whole before the parts and even more the whole becoming more than the sum of its parts is Gestalt.

The German word gestalt can be translated as “shape” or “form” and the term refers to how visual input is perceived by human beings. Gestalt psychology was founded by Max Wertheimer and has been added to over the years by other authors.

Wertheimer’s original observation was that we perceive motion when there is nothing more than a rapid sequence of individual sensory events such as a series of lights flashing in sequence. Imagine a string of Christmas lights. Each light turns on and off in sequence along the string. We see the movement of light from one end of the string to the other, when in reality nothing has moved.

We see something that’s not really there and Wertheimer’s explanation is that we see the effect of the whole event that is not necessarily contained in the sum of the parts.

The easiest way to understand Gestalt is to look at the various principles.

Gestalt Principles

There are a variety of gestalt principles, most of which can be explained in a sentence or two. Many of the principles below can be written about a great length, and I’d encourage you to look deeper at them.

I’ve tried to present links to other resources throughout so you begin your exploration and I’ve also listed some resources at the end of this post. Consider the following an introduction to each of the principles listed.

Figure/Ground

Elements are perceived as either figure (element of focus) or ground (background on which the figure sits).

A classic example of figure/ground is the image to the left. Are you seeing a black vase on a white background or two white faces in profile sitting on a black background?

One of the first things people will do when looking at your design is determine what in your composition is figure and what is ground. This determination will occur quickly and subconsciously in most cases.

Figure/Ground lets us know what we should be focusing on and what we can safely ignore in a composition.

Area

The smaller of 2 overlapping objects is seen as figure. The larger is seen as ground.

In the figure above you likely see the smaller square as figure in both cases. Its possible in the image on the right you see a dark figure with a hole to a lighter background, which is based on darker objects appearing more often as figure with lighter areas seen as ground.

Similarity

Things that are similar are perceived to be more related than things that are dissimilar.

In the image above you no doubt group the objects into either square or circle due to similarity of shape or form.

Through repetition of color, size, orientation, texture, font, shape, etc. we can design elements so they appear more related. Think of links in your content. Assuming they are all blue and underlined they clearly send a message to the viewer that they are related.

Color has been used above to denote similarity in the image above. You should see alternating columns of black and red squares. Each column is determined by the similarity of color of the circles that make up the column

Isomorphism

Similarity that can be behavioral or perceptual and can be response based on viewer’s previous experience. Think non visual similarity.

Uniform Connectedness (Law of Unity)

Elements that have a visual connectedness are perceived as being more related than elements with no connection.

When you look at the image on the left you see two squares and two rectangles. When you look at the image on the right you see two objects, each consisting of a square and a circle. Circle and square are connected by the line between them. Uniform connectedness trumps similarity here.

Continuation (continuity)

Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

In the above image you should see a curved line with a vertical line running through it. Continuation is stronger than similarity of color here. The red circles in the curved line are more related to the black circles along that same curve than they are to the red circles in the vertical line.

Closure

When looking at a complex arrangement of individual elements, we tend to look for a single, recognizable pattern.

Your first impression when looking at the above image is to likely see a square, even though the image is 4 straight lines. We fill in the missing information to make for a single recognizable pattern.

Proximity

Things that are close to one another are perceived to be more related than things that are spaced farther apart.

You should see three groups of black and red circles above. The proximity, the relative nearness of the circles is stronger than the similarity of the colors. In a larger composition the color similarity would still communicate information about the objects, because of the similarity between them.

Common Fate (Synchrony)

Elements moving in the same direction are perceived as being more related than elements that are stationary or that move in different directions. Elements that change at the same time group together.

In the animation above you see two sets of three circles each instead of a single set of six circles, due to their common movement or common fate.

Imagine the animation above didn’t show the circles moving, but showed 3 of them changing back and forth between blue and red. You would still see two groups of circles, but it would be based on the change in color as opposed to their change in movement. In either case they share a common fate.

Symmetry

The idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their center.

You likely see three sets of opening and closing brackets in the above image. Here symmetrical balance is stronger than proximity.

Parallelism

Elements that are parallel to each other appear more related than elements not parallel to each other.

The three parallel lines above should appear more related to each other than to any of the other lines.

Common Region

Elements tend to be grouped together if they are located within the same closed region.

Earlier we saw how the alternating colors gave the perception of their being 5 columns of circles. Now by enclosing some of the circles with a border we see two distinct groups of circles.

Adding borders (common region) around an element or group of elements is an easy way to create separation from surrounding elements.

Past Experience

Elements tend to be grouped together if in the past experience of the observer they were often grouped together.

Past experience could be individual or it could be something common most of us experience.

Law of Focal Point

A point of interest, emphasis, or difference will capture and hold the viewer’s attention/

When seeing Kandinsky’s painting above you more than likely first notice the dark circular form in the upper left. This is the focal point and thus the entry point into the painting. The focal point captures your attention and from there your attention flows to other parts of the painting.

Law of Prägnanz (Good Figure, Law of Simplicity)

People will perceive and interpret ambiguous or complex images as the simplest form possible.

The shape above is ambiguous and complex taken as a whole. You most likely see it made up of three simple shapes, square, circle, and triangle. These shapes can be seen clearly when each is given a different color below.

Further Resources on Gestalt Principles

Each of the articles linked to below has additional information on several gestalt principles. Much of what’s covered will overlap with the other articles as well as with what’s here. Many of the articles below will show different examples and discuss the principles in a different way.

• Visual Perception: Gestalt Laws
• The Constructive Aspect of Visual Perception
• Gestalt Laws of Perceptual Organization
• Gestalt Principles
• Gestalt Principles
• Gestalt
• Gestalt Laws
• Gestalt Grouping Principles
• Gestalt Principles
• Gestalt principles of form perception
• The Gestalt Principles
• Gestalt Psychology
• Gestalt Principles & Web Design

Additional Thoughts on Gestalt Principles

Sometimes two gestalt principles will be at play, though one will dominate our perception. I’ve tried to point this out in a few of the images above where one gestalt principle dominates, such is in the image for proximity above. Both similarity and proximity are present, yet proximity in this case is the stronger principle and so you see three groups of circles instead of six columns of circles.

Gestalt principles are a set of tools at your disposal for controlling how your designs are perceived.

The perception someone gets from looking at your design is ultimately what you’re communicating to them. Learn to control Gestalt principles and you learn to communicate through your design.

Gestalt principles help us design better and help us understand when an element is needed or not. They help you see where elements should be placed on the page, how they should be grouped together, which elements should share a color or size and which shouldn’t. Gestalt principles help you determine which elements should be enclosed inside a border and which elements simply need more whitespace between them.

As you begin to understand how others will perceive your elements, you will have more control over your designs and you will become a better designer. Take some time to further explore Gestalt principles of perception. Look over designs you like and discover how gestalt is working within them.

Study your own work to see how you’re already including gestalt principles in your designs and where you aren’t, but should be.

The 7 Components of Design

• unity
• gestalt
• space
• dominance
• hierarchy
• balance
• Color Part I: Color Theory
• Color Part II: How to Use Color

Subscribe to TheVanBlog |  Email This Post