Blog

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

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.

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.

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.

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. 

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. 

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. 

---

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.