Applying Gestalt Law to your designs: 8 Gestalt laws with practical examples
Gestalt psychology or gestaltism is a German term interpreted in psychology as “pattern” or “configuration”. It is a school of psychology created by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. These principles describe the way we perceive the world.
This article talks about how to apply these sever principles practically to you designs.
1. Symmetry
Our mind likes symmetrical objects to create an impression of stability, order and grouping.
A symmetrical navigation menu below is quick way for the user to visually group items and is perceived as more stable than the asymmetrical one.
Not denying the fact that asymmetrical layouts and structures can make the designs more interesting.
2. Common Region
Elements sharing an area with the clearly defined boundary. By adding borders/color around UI elements, you separate it and have their own space defined separating them from surrounding elements. Check Amazon’s departments page below. The light grey background gives a defined boundary to scan the content in chunks.
3. Similarity
Elements that are related and have visual similarity of shape and color (more related to one another).
Elements which are grouped together have visual similarities. Your brain processes objects faster similar using size, color, and shape recognition.
4. Law of Proximity
Objects that are closer to each other are scanned as grouped together. Whitespace plays an essential role in the principle. Closely placed objects creates a connection with each other.
Using the principle of proximity you connect the chunks of text on the image above a particular section.
5. Figure-Ground
A principle which visually separate helps human brain recognise both foreground and background elements on the same visual.
6. Continuity
we see objects arranged in lines or curves both related or grouped. It happens because objects connected by straight or curving lines are seen in a way that follows the smoothest path.
Users create a visual connection between items. This principle is very useful when designing a menu or a navigation.
7. Law of Closure
Human brain automatically fill in the visual gaps. A great example is WWF logo below.
In the animation below, you probably how an animated sequence of dots leads to chrome browser logo. Even before the logo was formed, you would have perceived it as a be a circular object.
Whenever design a loading indicator or a progress indicator, remember the law of closure for effective visual communication.
8. Common Fate Principle
When elements move in the same direction, our brain perceives them as part of the same group.
For example, in Microsoft Windows or Mac OS, if you select a number of icons and then drag-and-drop them, partially-transparent copies of all of the selected icons move together as a group:
Common fate helps to connect the dots.
