Using Space and Gestalt’s Principles in Website Design

Photo licensed via Adobe Stock/ by Chaosamran_Studio

Understanding major principles of design is extremely important in creating a website that is both visually appealing and effective. In this post, we will talk about two important features to consider when designing a website: Space and Gestalt’s Principles. The usage of space plays a key role in the execution of the psychology behind Gestalt’s principles.   


Space in Design

When designing a website utilizing space as a design factor is key to creating a unified piece. The combination of both positive space and negative space works in equilibrium to compose a visual story that moves users’ eyes to the most noticeable features on a page.

Positive Space

The positive space in website design is the main object and focus of a specific area. It is the most notable area of interest and is at the forefront of a page. In addition, positive space tends to be more active and dynamic, catching viewers’ eyes. Positive space has contrast compared to the negative space that surrounds it.

Negative Space

The negative space in design is the background or the space that exists to push the positive space to the front. While sometimes negative space may appear as white space, this is not always the case. Negative space can be strategic and colorful. As long as it’s pushing the positive space forward, it’s doing its job.

Now, it may seem that negative space is not as important as positive. This is not true though, negative space has many beneficial features. Ayesha Ambreen in their piece on how to use space in design and Alan Smith in his article on negative space in web design talk about some of those benefits being that negative space:

  • Creates an easy flow to visual hierarchy
  • Makes specific visual elements ‘pop’
  • Improves page scan-ability;
  • Directs the flow of a page:
  • Helps de-clutter the page;

Smith offers a few tips on how to create websites with compelling usage of negative space. Some of those tips include:

  1. Remember that negative is not equal to white.
  2. Layer elements in order of importance.
  3. Look for negative space in everyday life.

Both negative and positive space will have important roles in the execution of Gestalt’s principles. The following section will talk about these principles and what each of them entails.


Gestalt’s Principles

The term Gestalt is a German word meaning “form”. Gestalt’s principles focus heavily on human perception and reference the idea that when something is unified users see items as a group rather than individual items. The term is primarily used in cognitive psychology to study how people make sense of and perceive sets of data. When viewing content, in this case visual, people use both conscious and subconscious methods to arrange elements into organized systems.

The whole is other than the sum of the parts.

Kurt Koffka, Gestalt psychologist

Importance to Designers

As Jenna Romano talks about in their blog post on Gestalt’s theories in web design,  these principles can give us an overview of our user’s needs and can help designers understand how users’ recognize and process the data that the website includes. This allows us to communicate with users in a more “advanced design language”. It also creates less room for misunderstandings or confusion. 

The six main categories of Gestalt principles are Figure and Ground, Proximity, Symmetry and Order, Similarity, Closure, and Continuity. The following section will use content from the resources to explain what each principle entails.

1. Figure and Ground

Photo licensed via Adobe Stock/ via Peter Hermes Furian

The principle of figure and ground is when the eye differentiates an object from its surrounding areas. The figure is normally what the eye would focus on, whereas the ground is usually the background. In Steven Bradley’s article on the relationship between the figure and ground principle and the usage of space, he talks about how this principle refers the most to space. In addition, he mentions that figure and ground can be seen in three different types:

  1. Stable: The design clearly shows what is the figure and what is the ground. It is noticeable which is dominating the design.
  2. Reversible: The figure and ground both attract the viewer’s attention. An example of this can be stripes, both colored lines gaining the viewer’s notice. 
  3. Ambiguous: The elements may appear to be both figure and ground simultaneously. Both forms have equally appealing visuals, and it’s the viewer’s choice on which to focus.

Figure and ground can enhance or detract from each other, and organizing the two in relation to each other is one of the more important aspects of design. It sets a context for how your design communicates and how it will be interpreted.

Steven Bradley in his article “Design Principles: Space And The Figure-Ground Relationship”.

In web design, three main areas of the figure and ground (boxes, contrast, and shadows) can be used to add visual cues to your website. These techniques create contrast and help bring the object of focus to the front. An example of figure and ground in website design would be placing text over a blurred image. The text would be the figure, whereas the image would be the ground/background.

2. Proximity

The principle of proximity refers to the idea that the closeness of items creates an association between the different elements in the viewer’s mind. Proximity has been shown to create a greater association between items, compared to other features such as color or shape.

Design made on Canva to show proximity and how objects close to one another will be grouped.

In UX design proximity is essential because it makes the website easy to scan and makes the requirements for interpreting the given content easier for viewers. In Marina Yalanska’s article on the proximity principle they mention that there are two different ways to use proximity in user interfaces:

  • Typography and copy: Negative space on a website can be used to make paragraphs more aesthetic by having larger spacing between sentences, or by adding spaces between paragraphs to break up larger chunks of content. Additionally, the rule of proximity can apply to the menus on a website. Placing related content under larger main menu tabs, shows a relation between the different pages, while still offering an appealing and usable design.
  • Blocks of content and control: In blocks of content using the principle of proximity can help show the relationship between elements, while still using negative space to make the content understandable. For example, in the image below, the content is placed in proximity to one another, while still being separated based on factors such as images, icons, controls, etc.
Sourced from Marina Yalanska’s article that showcases proximity for blocks of content and controls

3. Symmetry

Symmetry is described as the reflection of an object, splitting an image or design into two equal halves. If the two sides are unequal then that is referred to as asymmetry. The human mind desires balance and sees symmetry as creating harmony and comfort in design. 

This value of symmetry does not mean that all asymmetrical designs are bad, or should not be done. Asymmetry can be done by using a neutral background, or negative space, with unconventional positive spaces. Harmony in asymmetrical design can still be accomplished by utilizing similar color schemes, and by making each positive space on each half weighted with a similar amount of strength.

Design made on Canva to show the principle of Symmetry. Each half of the image is equal.

4. Similarity

The principle of similarity works closely with the principle of proximity because similarity refers to a group of elements sharing similar properties. These properties can be shape, size, color, font, orientation, or any relevant design element. When objects that are in proximity to one another share these similar features, the group will have a stronger value of connectedness in viewers’ minds. In Marina Yalanska’s article on using the principle of similarity, the three main aspects they talk about are:

  • Color: Color can be used to show the relation between different elements on a webpage. In general, adapting a color scheme makes a website feel more connected, and creates better navigation. 
  • Size: Using different sizes in a group of content can separate factors such as headers, and help distinguish the most important text and elements in a group of data. Being consistent with sizing will help readers have a consistent idea of what each size of text represents. 
  • Shape: Grouping items based on shape is another way to use similarity to help create a connection between elements.  Using shapes to represent certain tasks, helps to create hierarchy and association between items. 
Design made on Canva to show that objects will be grouped, in this case columns, based on similar features.

5. Closure

The principle of closure is related to the idea that our minds will close the gaps in an incomplete image to complete the figure. In this principle, positive and negative spaces work together to form a whole image. Closure is frequently shown in website design through text where letters may not be complete but our minds use past experiences with words, letters, and related images to make conclusions and close the spaces to understand the image or text. 

Design made on Canva to showcase closure, and how our mind closes in the gaps to create the triangle in the center.

6. Continuity

The principle of continuity follows the idea that the human mind is more likely to follow lines or curves than jagged lines. The principle of continuity is said to lead the mind more than other factors like color. In website design, graphic designers can position elements along some form of a line, and despite differences in color, size, etc., the human brain will continue to follow along the given line. 

Design made on Canva to showcase continuity and how the eye will follow structured lines, despite the presence of other features like color.

Less Common Gestalt Principles

Some additional Gestalt principles that are referenced in a Superside article on Gestalt’s principles that are less commonly known, but still very useful in website design, are:

  • The Law of Pragnanz: This law references the idea that our minds will simplify complex shapes into simple shapes. An example of this is seen in the logo for the Olympics, where instead of noticing multiple curved lines, we perceive a set of overlapping circles. Pragnanz also is used a lot when making wireframes, seeing as it refers to simplicity and basic shapes. 
  • The Law of Common Fate: This law is explained as when objects are pointing in similar directions our mind groups them together. This also refers to when objects move together they are perceived as being a part of the same group. 
  • The Principle of Uniform Connectedness: This law refers to the idea that items that are visually connected are more related than objects with no visual connections, despite any similarities in color, shape, etc. An example of a visual connection is a line connecting two separate text boxes.
  • The Principle of Focal Points: This law states that an item that has contrast will stand out more when placed in a group of items that are all similar. 
  • The Principle of Past Experience: This principle is based on the idea that our past experiences with affect our visual experience. For example many may associate red, yellow, and green circles with traffic lights, seeing as that’s where we have seen that color scheme most often. 

Ending Ideas

Space is a key element in creating an aesthetic page that is more than just the sum of its parts. Gestalt’s principles give designers a guide on how to effectively utilize space, seeing as space alone can be a very challenging aspect to use on its own. By using space, and the previous principles to your advantage, you can create a website that is effective and properly uses the psychology of perception to help guide your viewers understanding. So, before designing a website think about Gestalt’s principles, and how they may come into play when someone attempts to view your website.


Resources Used

Gestalt Theory for UX Design: Principle of Proximity

Gestalt Theory for Efficient UX: Principle of Similarity

How To Use Spaces In Web Design With Gestalt Principles

Negative vs. Positive: How To Use Space To Create Seamless Design Compositions?

Effective Use Of Negative Space In Web Design

Design Principles: Space And The Figure-Ground Relationship

5 Gestalt principles you can apply to you web design

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

This Post Has 4 Comments

  1. Hey Emily, your post did a great job at capturing the notions of positive/negative space as well as the Gestalt principles! It was a nice refresher after taking Document Design a few semesters ago. I agree with the idea that negative space is important to design choices. It reminds me of the textbook, “White Space is Not Your Enemy”. I think some website designers (and designers in general) have a fear of leaving “empty” space, but the reality is that trying to cram too many elements into a workspace creates confusion and could very well drive users away. Similarly, I think some designers don’t consider Gestalt theory when designing and tend to just throw stuff wherever (one of the most common examples of this I see is websites that don’t try to contrast text with backgrounds, leading to lower readability).
    I found an article from Dodonut that discusses how to apply Gestalt principles in UX design. Right away, the article states that Gestalt principles “help establish visual hierarchy, group and organize elements, provide feedback, maintain consistency, prevent errors, emphasize call-to-action, and enhance user engagement,” which are all the most important goals in UX and user-centered design. Without going into extreme depth, one example of incorporating Gestalt theory into web design is through proximity; even on this WordPress blog, the “Post Comment” button is almost touching the box I’m typing my comment into. Although the text “Post Comment” would probably lead me to believe that pressing the button would post my comment, the fact that it’s right next to the element it refers to allows me to click “Post Comment” without thinking twice.
    Link: https://dodonut.com/blog/gestalt-principles-of-design/

  2. Hey Emily, this was a very interesting and informative blog post! I really like your approach to discussing the topic of using space and Gestalt’s principles in website design. Something I really admired about your post was the way it used space itself within the ways you presented your content. This was a great demonstration for some of your spacing methods discussed. Your lists are also great for summarizing the ways positive and negative space are able to work in equilibrium to compose a visual story. Speaking of visual story, your images very really fascinating when paired with your main points, I was particularly interested in the section surrounding figure and ground, what the eye would focus on, and where the ground is usually the background. Your blog post got me thinking about the variety of principles you could apply for a single site and prompted me to do some research into the most popular ways. I ended up happening upon a site from a WIX blog discussing some of the most popular principles and uses. Through a combination of helpful insights from the author, Jenna Romano, I was able to grasp a better understanding on this topic.

    Link: https://www.wix.com/blog/gestalt-principles-of-design

  3. Hi Emily, great post on space affordances and Gestalt design principles to consider in UX design. I especially like your highlighting of lesser known Gestalt principles that can be used to further enhance our web designs. I found an article that explains a UX designers process of investigating various air conditioning unit remote controllers, and how he used Gestalt principles in his re-design of the remote controllers. The article does a good job of walking readers through the UX process and the different items one must consider when designing a functional product (whether a remote control or a website): https://medium.datadriveninvestor.com/the-weird-ux-of-an-air-conditioner-remote-control-9fae4b4d8aec.

  4. I’ve taken all the foundational art classes at GVSU for my major, so this post was more of a refresher for me. Most of the pieces you described were familiar, though you did put it into a new perspective of web design. I was more used to it in graphic design, or even pieces we had to create digitally for other classes. As someone who’s learned this for years, you broke it down really well. The different subcategories you sorted things into (Negative and positive space, Stable, reversible, ambiguous figure and ground, etc.) Your breakdown of how to include them digitally was also insightful, I wish you had a few examples pictured about what good and bad principles looked like so people could see the difference, but overall, really well done. I found a website that does the same thing you did- discussing other spaces where design principles of Gesalt are used- https://venngage.com/blog/gestalt-principles/

Leave a Reply

Close Menu