Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Introduction to Gestalt Principles

There are several basic principles that can help you transform your work and sharpen your eye for design. Understanding these principles will help you master layout and composition in design.

In this lesson, we will talk about Gestalt Principles, a German school of psychology that has been widely applied to inform design layouts.

The first principle is proximity.

Proximity

Proximity is all about using visual space to show relationships in your content. In practice, it’s pretty simple—all you have to do is make sure related items are grouped together in closer proximity than other items.

For example, check out Google’s News site. The text “Headlines” is clearly related to all the content in the card below — even though it’s not enclosed within the card.

Groups that are NOT related to each other should be separated to visually emphasize their lack of a relationship. All in all, this makes your work easier to understand at a glance, whether it’s purely text or something more visual.

The second principle is called common fate.

Common Fate

Human beings tend to perceive elements that move together as being more similar to each other than elements that are either still or moving in a different direction. In other words, if you have a group of objects, and those objects are all moving in the same direction, then you’re going to automatically look at them as being far more similar and related to each other than objects that aren’t moving or those that are moving in the opposite way.

One of the best ways to show how this gestalt principle has been applied to web design is by looking at the slide-out menu. A slide-out menu is a navigation menu that has additional layers of navigation. It slides out, hence the name, in an unobtrusive way that also helps you to fit more navigation options onto the screen.

In this example, the second layer of navigation immediately pops out when you simply hover your cursor over each category on the page’s left-hand side. Again here, we see that all the elements in each group of elements in every sub-menu are clearly related to each other, more so than they are to other elements in other groups.

The third principle is similarity.

Similarity

Elements can visually be grouped together if they have visual similarities. This can be applied in the form of color, shape, or iconography.

In this example, the designer grouped names that are assigned in same category in the one color, effectively separating the categories from each other by color tags.

The fourth principle is continuation.

Continuation

Continuity happens when the eye is guided to move from one object to another.

https://miro.medium.com/max/2000/1*Oy8pBwKkUGLumo8epKLdQg.png

In this example, the horizontal navigation menu bar guides users eyes to move from left to right in one line. The continuation of this pattern makes the menu items seem more related to each other than if they are not position in the same directional line.

The fifth principle is closure.

Closure

Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap.

https://miro.medium.com/max/1000/0*cNRxrg9XHVd-9rT5.gif

The sixth principle is called figure/ground relationship.

Figure/Ground Relationship

The figure/ground principle is similar to the closure principle in that it takes advantage of the way the human brain processes negative space.

Our brain will distinguish between the objects it considers to be in the foreground of an image (the figure, or focal point) and the background (the area on which the figures rest).

In this poster design, there is a very creatively constructed giant fork and 3 bottles of wine, which happens to be situated in the openings of the fork. Most people will regard the fork as the background and the 3 wine bottles as the foreground.

In general terms, your brain will interpret the larger area of an image as the ground and the smaller as the figure.

The figure/ground principle can be very handy when digital product designers want to highlight a focal point, particularly when it is active or in use—for example, when a modal window pops up and the rest of the site fades into the background, or when a search bar is clicked on and the contrast is increased between it and the rest of the site.

The seventh and final principle is symmetry and order, also known as prägnanz in German.

Symmetry and Order

The law of symmetry and order is also known as prägnanz, the German word for “good figure.” What this principle says is that your brain will perceive ambiguous shapes in as simple a manner as possible. For example, a monochrome version of the Olympic logo is seen as a series of overlapping circles rather than a collection of curved lines.

Here’s another good example of the gestalt design principle “prägnanz”:

Your brain will interpret the image on the left as a rectangle, circle, and triangle, even when the outlines of each are incomplete because those are simpler shapes than the overall image.

If you are learning about Gestalt Principles for the first time, it may be difficult to grasp and understand how they all relate to design. Hopefully, the examples in this lesson gave you an overview that will come back to you as you start your design journey. It is not necessary to memorize the definition – remember, design is about observing, practicing, doing and repeat.

Scroll to Top