Our WorkWhy Us
Summit

Momentum: Virtual Summit | November 30th, 2022

An interactive 4 hour virtual summit with 10 sessions on scaling during a downturn, featuring 14+ expert speakers from Jasper, Chili Piper, Instacart, Adobe, and more.
View event
Gather & Grow

Gather & Grow - Nov 21st - B2B Goes UGC

Join us live for our interactive session, where we explore how to scale using user-generated content (UGC) with expert Elif Hiz!
View event
Gather & Grow

Scaling Content for Maximum Impact | On-Demand Recording

Tune in to our full-length session on scaling content for maximum impact, with our friend, Tracey Wallace.
View event
Events & Summits

Explore all the content inside Events & Summits!

See all
BlogPricingBook a DemoSign In

The Gestalt Principles of Design Subtly Influence Your Brain. Here's How.

Cameron Smith
Cameron Smith6 min read
Gestalt Principles Of Design With Examples And Infographic

The human brain is an incredibly complex organ capable of processing massive amounts of information in nanoseconds. But to do this work as efficiently as possible, our brains look for patterns or logic to speed up the process.

This phenomenon is the basis of the Gestalt principles, a series of theories about human perception (i.e., how our brains make sense of visual information). Since the early 20th century, the Gestalt principles have had a major influence on the design industry, visible in many modern and iconic designs.

Jump to the right position

What is Gestalt psychology?
What are the Gestalt principles of design?
11 Gestalt Principles
1. The Principle of Figure-Ground
2. The Principle of Proximity
3. The Principle of Similarity
4. The Principle of Continuity
5. The Principle of Closure
6. The Principle of Simplicity
7. The Principle of Uniform Connectedness
8. The Principle of Common Fate
9. The Principle of Parallelism
10. The Principle of Focal Points
11. The Principle of Past Experience
Applying the Gestalt Principles of Design

What is Gestalt Psychology?

Ever watched those viral videos of over-the-top Christmas light displays? Or a flipbook animation? This is what we're talking about:

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.
Piotr Smietana

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.

9787a3a9b1968c18fb0dd69aae0d94f144f951b6

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.

34da47b0b20781dbebb0302f8f765dfbab62380f

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.

02e2004d0fd33293ef5921354e713c159dbcf9c8

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.

5dc7d58e09f6bf22d823f927b8f537676503ef8e

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.

453c6c4140b901047af8587014cde81108349947

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.

b2b2d2e32496ec5e6049ceba23fdd40c19d95f32

Join our community of 15,000 strong and receive the best design and marketing content, biweekly
No charge. Unsubscribe anytime

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.

fd03579c47b430104c53b3e9e5b24d415a7aa49e

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.

6178b11d8b14d04b0d232bd6eab61ad4662f464f

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.

85d085d87c0af922fe0771c4b7af0471c9d26927

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

44746605b40a5c56dd3705f913ddbc82fd58aba8

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.

fcda36e6a5cfd93c747f29c4823a67a23638d069

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.

28fafdb2685a177f35f2d29c82f46728ca8e5f84

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.

77b8a5c0dcf2eaa53751cd4f76aa3fc87e50e62d

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.

8a110e94d1e59ffb54e44cb0e7fd740930234585

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.

2155692e6a9fc08346fa77ba44da512a365d8627

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.

69652192ff49d33d4d016ab7b2bbdb33bb707a32

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.

10284d5cbc0295f4bc4050f3d52cb07a6ab3ad65
4947ed2b689f646d38ab01b58deb05fec88646ae

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.

39e47d90758ea5d2aaec08aedbfd01ef2ffc4595

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

8932c1ef43f82bc135592826a96ed594c836b51b
ee5a97af4f761551236ed7ed0d6af24467a8f196

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

c13e4e7b5cd37bca683a4a5c91c0d5bf9dea974d

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.

adfc6b8dd60112a109c261be3c8364cd324c5037

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.

b8ae8e9c2aa70844528f8257b30a729a4427bb41

Unlock the amazing design your business needs

Learn from the best world-class design leaders in this guide 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

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.

4d5754fa0e61accb825ef9182477b24791d75130

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.

f166f0fbadf0e65f08e6fe6af6b7a25474a5bd34

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.

95329bc271e4c0bef84556b1d1b46d28a1015b75

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
Published: Jun 1, 2022
Cameron Smith
Written by
Cameron Smith
Cam is a Content Marketing Manager at Superside. When he's not getting into heated debates about em dash usage, he's probably snootily obsessing over a local craft beer or dangerously obscure wine.

Join our community of 15,000 strong and receive the best design and marketing content, biweekly

No charge. Unsubscribe anytime

Continue reading

Hassle-free design starts here

Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top-quality designs at lightning-fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.

In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you

Get ready to join 450+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.
Ready to get started?Book a demo now

Book a call with us

Loading...
We need your phone number for the demo. We'll never use it for any other purposes.
Superside is a revolutionary way for businesses to get good design done at scale.Trusted by 450+ ambitious companies, Superside makes design hassle-free for marketing and creative teams. By combining the top 1% of creative talent from around the world with purpose-built technology and the rigor of design ops, Superside helps ambitious brands grow faster. Since inception, Superside has been a fully remote company, with more than 700 team members working across 57 countries and 13 timezones.
© 2022 Superside. All rights reserved.