Gestalt Theory and Negative Space

In web design, the included elements should tell a fluid story. But what is the perfect formula to concoct the ideal design? Certain theories of design and organization, which are called Gestalt Theory, can provide designers with a set of guidelines that are guaranteed to improve the user’s experience on any given website.

What does Gestalt Mean?

Gestalt is a German word that means “shape” or “form”, and it is used in psychological research that studies how people perceive and organize data. Gestalt principles have been developed from this research, and they outline five ways that people interpret information, and how to make the most of these psychological predispositions. The five principles are:

  • Similarity
  • Proximity
  • Continuity
  • Closure
  • Figure and Ground

In this post, we will explore the principles of similarity and proximity and learn how to apply these ideas to web design.

Principle of Similarity

The principle of similarity states that visual objects that share characteristics are perceived as being part of a group. Some examples of these characteristics are shape, color, and size.

Shape

Objects that are a similar shape tend to be grouped together. For instance, the image from the website Simply Chocolate makes it clear to the user that the chocolate bars all belong to the same category and are similarly priced, because in each picture, the chocolate is arranged in the same way, and appears to be the same size. But the different style of picture for the “Bar Kit with 7 Chocolate Bars” immediately communicates a change in category to the user.

Color

Bright Vibe Calendar

Using color to match visuals or distinguish between them effectively organizes information for the user. Color schemes can create visual hierarchy and guide the user’s path of navigation. The image below demonstrates this because the calendar dates are organized by color, and the current date is emphasized with a brighter color from the overall scheme.

Size

Grouping visual elements by similar size is another way to achieve similarity. Size similarities and differences help highlight certain information and helps the user to find the content they are looking for. Many websites use font sizes to differentiate between categories and subcategories within their site menus.

Principle of Proximity

The principle of proximity states that viewers group content according to its relative closeness. In other words, objects located near each other are interpreted as being part of a group. White space, or negative space, plays a large role in this idea. Negative space can be defined as the absence of content, such as a blank background color.

For example, in this image, negative space creates separation between the two groups of circles. If the negative space was removed and all of the circles were equally distanced, the image would appear to be a single group of orange circles.

Text

Proximity is a valuable tool when choosing the layout of text, as well as blocks of website copy, because the addition of a little negative space can instantly separate and organize information. Then the user is able to easily scan for keywords.

Source

In this screenshot of Airbnb’s website, the separation between each city name creates a digestible list of text, even though it is quite extensive.

Another example of the use of proximity and negative space is the layout of this online magazine: the site does not utilize any borders, yet the content is clearly categorized because of the space between the main article, the “Latest” links on the side, and the social media icons at the bottom. Thus, the negative space communicates to the user where they can find groups of similar content. Furthermore, the detailed organization and separation encourages intuitive navigation and decreases user frustration.

Source

The Gestalt principles of similarity and proximity are straightforward methods to improve your website’s usability. Negative space is also a valuable tool that can simplify sites and prevent information overload. Crowded, text-heavy sites are overwhelming, and adding some white space between areas of content can give your website a clean, easy-to-skim layout. Remember, everyone always wants to grab and go!

Sources

Yalanska, M. (n.d.). Gestalt Theory for Efficient UX: Principle of Similarity. Tubik Blog. Retrieved from https://blog.tubikstudio.com/gestalt-theory-for-efficient-ux-principle-of-similarity/

Yalanska, M. (n.d.). Gestalt Theory for UX Design: Principle of Proximity. Tubik Blog. Retrieved from https://blog.tubikstudio.com/gestalt-theory-for-ux-design-principle-of-proximity/

Ambreen, A. (2019, April 1). How To Use Spaces In Web Design With Gestalt Principles. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/

This Post Has 4 Comments

  1. Hi Grace! You did a phenomenal job with this post. Your inclusion of images is extremely helpful and makes your blog post stand out. You definitely chose images that illustrate your point perfectly. I also loved how you included the meaning and background of the word gestalt. I’ve seen and used it in so many of my writing and design classes, but nobody ever told me what it meant or where it came from. This helps me understand the components of the Gestalt principles in a better context.

    The conversational tone of your writing was also very friendly and appropriate for this kind of post. I found another site that goes more in depth about how color affects your site design and functionality (https://webflow.com/blog/color-theory). I think it’s super interesting that psychologically, colors can convery different emotions and feelings in people, and that can then be implemented into web design.

    Overall you did a fantastic job with this post. This summary of the Gestalt principles was very thorough, informative, and easy to digest. Great work!

  2. Hi grace. I think your biggest strength in this blog post was the use of conversational word choice. You did well with using “you” and “your” to make the reader feel as though you were talking directly to them. You also did well with including photos in your post. I feel like I know a lot about the principles simply by looking at the pictures. Overall, the content of the post was there, however I did notice some odd things.
    My main concern with this blog post was the use of purple text throughout. Often, purple text can be used for links, and should not be used for anything else. I mistakingly tried to click on the purple wording, thinking it would take me to another site or move me down in your blog. I also was concerned with why you did not summarize closure, continuance, or figure & ground. You had a very in depth and well thought out summary of proximity and similarity, however I was looking for more details on the other three principles as well. This website https://courses.lumenlearning.com/wsu-sandbox/chapter/gestalt-principles-of-perception/ discusses all principles in detail.

  3. Just read that you actually weren’t required to talk about the other principles! So sorry.

  4. Hi Grace!

    I really enjoyed reading your blog post on the importance of Gestalt Theory in relation to web design. The principles of similarity was particularly well-written because I understand how any quality can be used to create similarity between objects, such as color, shape, etc. I never knew text could be a good way to create similarity, but I understand it better now with your examples in the post about being able to skim for keywords. When looking for addition resources on this topic, I found an article called “Effective Use of Negative Space in Web Design”. This article details the importance of negative space as a design tool. One of the biggest benefits of negative space is that it can direct the flow of a page. Negative space can guide a readers through a page to highlight the most important elements. In addition, the article gives examples of how to create a website using negative space, such as remembering that negative space doesn’t have to be white and to avoid monotony. This connects to your blog post by showing how design elements can help guide a reader to the most important information.

    https://usabilitygeek.com/effective-use-negative-space-web-design/

Leave a Reply

Close Menu