Use The Gestalt Theory For Your Website Design

Much of web design is guided principles developed in the early 20th century. One of the most prominent visual perception principles is Gestalt Theory, which serves as a foundation for most of what we view online today.

What is Gestalt Theory?

Gestalt Theory assumes when we look at a group of objects, we see the objects as a whole, while making assumptions about how the objects relate to each other.

Users do not want to be confused; they want to quickly analyze and understand content. The design principles of Gestalt Theory detail how to efficiently arrange objects and information on a web page.

Why You Should Care About Design Theories

Have you heard of Apple products? Of course you have.

One reason Apple has become the default electronics brand is because every Apple product follows six guiding principles fans have grown to love and expect.

Using these principles in your own site design will elicit similar feelings. The main guiding principle for Apple is simple: The user comes first. Every decision is made to make the user happy. Here is how they do it:

  1. Make it beautiful: It is not enough to have a functional site; it needs to look good doing it.
  2. Consistency: Every page on your site should not be a learning experience. Be consistent.
  3. Get people to interact: The page should react when users touch it. (How frustrating it is to click ENTER and nothing happens!)
  4. Feedback: When people engage, your site needs to respond. Send confirmation emails, and let your visitors know how you are going to fix the problem.
  5. Make Real World Connections: Let users know what each button does by associating it with something in real life that does the same thing. (This is why email buttons often look like envelopes.)
  6. Give the user the reins: Users hate to push buttons which put motions in action they cannot take back. Give your users the option to take a step back.

How Gestalt Theory Guides Web Design

Be aware of certain principles of design to create the most user-friendly experience on your website. You want users to feel like they can navigate your site intuitively.

Proximity: Items that are close to one another are perceived to be related — unlike items that are spaced far apart. Good designers know how to break information into smaller blocks of relevant information so that users can easily find what they need.

Uniform Connectedness: Using lines to separate or enclose information also clearly tells users that items are either related or distinct. A good example of this is the voice bubbles in comic strips that show what the characters are saying. They usually include an arrow to the character that let us know who says what.

Figure and Ground: Make a distinction between background and figures on the page. The most interesting information should be figures, not background.

Continuation: Columns, rows, and flowcharts are all design examples of continuation — or how we show items are related by presenting them in a line or curve pattern. Horizontal and vertical navigation tabs are also an example of continuation on a web page. Designers often use a grid to properly arrange information for best continuation.

Closure: We can create designs without edges on every surface. Check out the WWF Panda for an example.

download (1)

As you can see, all the edges are not drawn. Your brain’s ability to group objects create the rest of the edges.

Similarity and Differences: Use shape, size, and color to imply groupings of information. Color is the strongest way to break items into different groups. This is why designers will use a single color for all of the links on a page; it sends the silent message: We are different from the other text.

Common Fate: The common fate principle is concerned with motion and the way users move through information. Think of how a submenu differentiates information from the main menu. These principles allow designers to invisibly convey meaning about content. All of those same-shaped, same-sized boxes in a straight line at the top right-hand sections of many websites do the exact same thing — they all take you to their respective social media sites. They all have a common fate.

The Take-Away

Many of the principles that make up Gestalt Theory are probably intuitive to you. For our entire lives, we have been giving and taking information according to Gestalt Theory principles, but it is helpful to be aware of those principles as we design websites.

Gestalt Theory explains how users will perceive information on your site by how you lay it out. Being aware of how users perceive information helps designers set up content that can be easily navigated — a hallmarks of the professional website.


  1. Avatar Kevin Griffin, Esq says:

    Thank you for this article on web site design. Re design of my web site just jumped on the list of things to do after reading the suggestions here.

  2. Avatar Turbervilles Solicitor says:

    Absolutely spot on – we have gone for the “no more than 5 clear elements on any single page” on our site and it has worked very well.

Leave a Reply