What is Gestalt principle of figure

Figure-ground perception refers to the tendency of the visual system to simplify a scene into the main object that we are looking at (the figure) and everything else that forms the background (or ground). The concept of figure-ground perception is often illustrated with the classic "faces or vases" illusion, also known as the Rubin vase. Depending on whether you see the black or the white as the figure, you may see either two faces in profile (meaning you perceive the dark color as the figure) or a vase in the center (meaning you see the white color as the figure).

A History of Figure-Ground Perception

The concept of figure-ground perception emerged out of the field of Gestalt psychology. According to the Gestalt approach, the whole is more (or different) than the sum of its parts. The term Gestalt itself comes from the German word meaning "form" or "shape."

During the 1920s, a number of German psychologists including Max Wertheimer and Wolfgang Kohler began studying different principles of perception that govern how people make sense of an often disorderly world. Their work led to what is known as the Gestalt laws of perceptual organization.

The Gestalt theory of perception proposes that people make sense of the world around them by talking separate and distinct elements and combining them into a unified whole.

For example, if you look at shapes drawn on a piece of paper, your mind will likely group the shapes in terms of things such as similarity or proximity. Objects that are similar to one another tend to be grouped together. Objects that are near each other also tend to be grouped together.

While the concept of figure-ground perception is an important principle in Gestalt psychology, it is usually not identified as one of the laws of perceptual organization.

Figure-ground perception describes one of the most fundamental ways that we simplify a visual scene.

How Do People Distinguish Between Figure and Ground?

When looking at a visual scene, people tend to look for ways to differentiate between the figure and the ground. Some ways that people accomplish this include:

• Blurriness: Objects in the foreground tend to be crisp and distinct while those in the background are blurry or hazy.
• Contrast: The high contrast between objects can lead to the perception of figure and ground. The Rubin vase is one example.
• Size: Images that appear to be larger will be perceived as closer and part of the figure while those that are smaller will seem further away and part of the background.
• Separation: An object isolated from everything else in a visual scene is more likely to be seen as a figure versus background.

Examples

The "faces or vases" illustration is one of the most frequent demonstrations of figure-ground. What you see when you look at the faces or vases illusion depends on whether you see the white as the figure or the black as the figure.

If you see the white as the figure, then you perceive a vase. If you see the black as the figure, then you see two faces in profile.

Most people are able to reverse their perceptions and switch back and forth between the vase and faces images.

The artist M.C. Escher famously used this concept to create a number of fascinating figure-ground reversals. His elaborate drawings often include clever visuals that trick the eye and create fascinating figure-ground changes.

Verywell Mind uses only high-quality sources, including peer-reviewed studies, to support the facts within our articles. Read our editorial process to learn more about how we fact-check and keep our content accurate, reliable, and trustworthy.

By Kendra Cherry
Kendra Cherry, MS, is an author and educational consultant focused on helping students learn about psychology.

Thanks for your feedback!

These are great examples of Gestalt psychology at work. Even though you're watching hundreds of flashing lights or a series of static images, your brain only perceives the 'whole,' i.e., the moving animation.

Gestalt psychology is a movement that led to the development of the Gestalt principles. It began in Germany in 1910.

After watching flashing lights at a railroad crossing, psychologist Max Wertheimer noticed that the lights appeared to be moving, even though he knew they were simply individual lights turning on and off.

This realization led Wertheimer, with his assistants Wolfgang Köhler and Kurt Koffka, to develop a theory that perception involved more than simply combining sensory stimuli. This became known as Gestalt psychology.

Lead with the DesignOps of the future

Learn how to build a world-class design team with our free Guide on how best to leverage DesignOps in your business.

Get your copy

What are the Gestalt principles of design?

So how does this all connect back to the design? The word 'gestalt' means form or pattern, and this quote from Gestalt pioneer Kurt Koffka sums it up nicely – "The whole is other than the sum of the parts."

Gestalt theory posits that when we look at a complex image or design consisting of many elements, our brains will try to create some form, pattern, or structure. The Gestalt principles are the common unconscious shortcuts our brains use to make meaning out of our environments.

That makes them extremely useful for designers, who rely on them to convey more information, more quickly, than would otherwise be possible. Take it from our very own Creative Director, Piotr Smietana:

One of the main purposes of design is to solve problems. Gestalt Principles help designers make order out of chaos, concentrate on things that are important and convey a lot of information in design, without overloading the audience with too many things at once. The proper use of them leads to intuitive designs that are deliberate, easy to understand, and consume. Designers that are aware of these Principles, can create optical cues that are easily recognizable by the audience, leading to better perception of said designs - and in the essence, solve more problems.

It’s hard to say exactly how many Gestalt principles there are (some are far more common than others). But we’ll focus on 11, which are most frequently used in design.

Eleven Gestalt Principles to keep in mind for design

The seven most common Gestalt principles are figure-ground, proximity, similarity, continuity, closure, simplicity, and symmetry. But some newer theories are also regarded as Gestalt principles, such as uniform connectedness, parallelism, common fate, focal points, and past experience. Don’t worry – we’ll dive into ‘em all.

All this psychological theory can be tough to get into, so we'll be discussing the principles alongside diagrams and real-world examples to illustrate how you can apply the principles to your design practice.

1. Figure-ground
2. Proximity
3. Similarity
4. Continuity
5. Closure
6. Symmetry
7. Uniform connectedness
8. Parallelism
9. Common fate
10. Focal points
11. Past experience

1. The Principle of Figure-Ground

According to this principle, people segment visuals into two components: figure and ground. The figure is the object or person that is the focus and the ground is the background. This results in people having wildly different interpretations of an image depending on which part they see as the figure or the ground. For example, in the classic optical illusion below, you might see either two faces or a vase.

In contemporary design, this principle is often used to convey two different messages simultaneously. For example, in the macOS Finder icon on the left, you might see either a happy face or a happy face in profile looking at a computer screen. Likewise, in the FedEx logo, if you look at the negative space between the 'e' and 'x,' you can see an arrow. This shape gives a sense of motion and direction that makes sense for a shipping company that prioritizes speed like FedEx.

2. The Principle of Proximity

The Gestalt Principle of Proximity suggests that we tend to see close-set objects as being in a group. For example, in the diagram below, you probably see image A as one block of dots and image B as three columns.

When used in web design, this principle conveys a sense of commonality. For instance, security and application icons are grouped on the Google Workspace landing page, so viewers quickly understand that these images are related.

3. The Principle of Similarity

This principle theorizes that we mentally group objects that look alike. For example, when you look at the image below, you see alternating rows rather than a block of dots because of the two different colors. If the dots were all a different color, you wouldn't see the image in the same way.

You can see this principle frequently in website navigation menus. For example, on Zoom's homepage, all the links that take users to the app (e.g., join, host, sign in) are blue, whereas the links that are related more to the customer journey (e.g., product pages, pricing, resources) are grey. Without you realizing it, the color differentiation signals that these links have different functions.

4. The Principle of Continuity

According to the Principle of Continuity, we perceive objects arranged in continuous lines or curves as more related than elements on a jagged or broken line. For example, you likely see two overlapping lines, not four meeting in the middle in the image below.

Take Pinterest's home feed interface, for instance. While the images on the screen are all different sizes, they're arranged in columns which create unbroken vertical lines of negative space between the pictures. Here, the continuity principle drives users to scroll up and down through the app, as the vertical column layout encourages vertical movement.

5. The Principle of Closure

The Principle of Closure states that even if an image is missing parts, your brain will fill in the blanks and perceive a complete picture. For example, we can still see the circle and rectangle below, even though the lines are broken.

Some of the most recognizable logos (e.g., IBM, NBC) apply this principle.

It's also a common feature in web design. For example, when you see a partial image above the fold on a screen (like the pink image on MarkUp.io's homepage below) your brain wants to complete it by viewing the whole picture, which unconsciously drives you to scroll down the page.

6. The Principle of Simplicity

Also known as 'prägnanz,' German for 'good figure,' the Principle of Simplicity is the idea that people will perceive and interpret ambiguous or complex images in the simplest form possible. In the example below, you're more likely to see the left image as a simple circle, square and triangle like the image on the right because the three simpler shapes make more sense to your brain than the original amorphous shape.

The most iconic example of this concept in design is The Olympics logo. You likely see it as five overlapping circles because the whole shape is harder to understand and describe. Another example would be Slack's old logo. Rather than seeing a combination of different colored squares and semicircles, you likely see the whole image of a multi-colored hashtag.

7. The Principle of Uniform Connectedness

This principle proposes that visually-connected objects are more related than objects with no connection. For example, in the diagram below, even though there are two squares and two circles, we see the square–circle pairs as more strongly related because the line visually connects them.

Designers typically use this principle to visually illustrate a process or illustrate connected ideas, as shown in the screenshot from Superside’s blog on ContentOps below.

8. The Principle of Common Fate

The Principle of Common Fate is the rule that objects that move in the same direction seem more related than elements that are stationary or move in different directions.

You can often see this principle at work on product pages. For example, in the screenshot from the Allbirds website, you can see that all the sneakers are facing the same direction. However, in the photos at the bottom of the screen that depict different types of shoes, the models' feet all face different directions.

9. The Principle of Parallelism

Similar to Common Fate, the Principle of Parallelism is the understanding that parallel objects are seen as more related than elements not parallel to each other, as you can see in the diagram below.

We can see this principle at work on Away's home page. Many of their images depicting their products place the objects parallel.

In contrast, images of travel destinations at the bottom of the page are not parallel, underscoring their differences.

10. The Principle of Focal Points

According to this principle, contrasting elements stand out more to us than similar ones. For example, in the image below, our eyes are drawn to the red square because it's a different size, shape, and color than the black dots surrounding it.

Most designs have focal points because they help direct your audience's eye to an important element or drive them to take the desired action. For example, call-to-action buttons are usually contrasting colors, as you can see in the Honeybook homepage screenshot below. Our eyes are naturally drawn to the bright teal color because it stands out from the darker colors on the page.

11. The Principle of Past Experience

Lastly, we have the Principle of Past Experience, which is the rule that our past experiences influence our visual perception. So, for example, you likely interpret the red, yellow and green circles below as a traffic light because that is where we often see these colors and shapes.

Past Experience typically shows up in app icon design because universally understood shapes can convey a lot of information without taking up a lot of visual real estate. For example, many of the default Apple apps have recognizable shapes and symbols: the FaceTime icon is a video camera, the mail app features an envelope, the clock app looks like a clock, etc.

But, since we don't all share the same experiences, past experience is the weakest of the Gestalt principles. Colors and shapes can have varying meanings across different cultures or generations.

Take Microsoft's save icon, for instance. The icon depicts a floppy disk, an object that many younger people don't even recognize.

Unlock amazing design your business needs

Learn from the best world-class design leaders with tips on how to subtly influence your audience with the perfect design. This bright, shiny bit of intellectual property is also 100% free.

Get your copy

Applying the Gestalt Principles of Design

When it comes to our design services, it is always important to apply these principles to get the most out of the designs, regardless if it is motion, static or video that is being designed.

It doesn't matter what kind of designer you are; understanding the Gestalt principles and their underlying psychology will improve your work. Why? Because design is all about purpose. It's about solving problems.

If you design products and experiences according to the natural ways our brains process visual information, the end result will be a lot more intuitive and user-friendly. And if you want to keep learning about design best practices, you should check out our Digital Ad Design Guide.

Get Frictionless, Delightful Design

Superside delivers design at scale to over 400 businesses. Let's find the right solution for you.

Book a call

What is figure in Gestalt psychology?

What is good figure in Gestalt principles?

What are the 5 principles of the Gestalt principle?

What are examples of Gestalt principles?