Gestalt Principles describe how humans group similar elements, recognize patterns, and simiplify complex images when perceiving objects. In other words, the human brain attempts to organize information by subconsciously arranging the parts into a cohesive whole. Applying Gestalt Principles in your mockups will help create user-friendly designs that are rooted in psychology and human behavior.

In this article, we will focus on six Gestalt Principles:

Similarity: elements that look similar are perceived to have the same function. In the Home page of the Caltrain app, there is similarity in the station at the bottom. It looks and works similarity in choosing the station or destination.

Proximity: elements that are close together apear to be more related than elements that are spaced farther apart. Caltrain app puts related elements in the close proximity like the timetable. We know right away that the next line has to related items and so forth.

Common region: elements located within the same area are perceived to be grouped togther. In the Caltrain app is the top bar for navigation, then timetable and lastly the zone area. These different sessions act as common region, where elements are perceived to be grouped under the session.

The Gestalt Principle of closure describes that when a human looks at an incomplete object, they subconsciously complete the image to see a whole, completed object. Check out the PBS logo that utilize the closure pinciple of 3 heads with two positive space and one negative space.

To learn more about applying closure principle in visual design by Nielsen Norman Group.

The Gestalt Principle of continuity states that elements that are arranged in a line or on a curve appear to be more related than elements not on the line or curve. Continuity guides a user’s eye from object to object, following a line, and focuses attention to specific parts of the screen. Continuity principle is often used when showing step-by-step processes and when displaying a list of items that are related to each other. It can be used in navigation menus, as shown on the website for the United States Postal Service (USPS) in the image below.

When you first get to the site and looking for info for Send at top bar and then Learn About tab. Why is that the case? It’s the Continuity principle that keeps our attention on things as well as navigation tool.

The Gestalt Principle of symmetry describes that elements are more visually pleasing when the parts of an object are balanced or are mirror images of each other. Objects that are symmetrical are also perceived as related to each other.

On the other hand, asymmetry, which is a lack of balance and equality, can emphasize an element’s importance and cerate visual interest. Using asymmetry in your designs can help call attention to a specific item or grouping of items.

The Alan Turing Institute uses the asymmetry in organizing their home page with minimal text on the right and a large picture on the left. Different text sizes and the placement of text boxes guide users to the more important information on the page.

With Gestalt Principles in mind, you’re on your way to creating designs that are smart, visually attractive, and user friendly. Remember to think about your user’s needs as you design and don’t be afraid of heading back to the drawing board to bring some of these principles to life within your designs!

Good Luck!