GESTALT LAWS
What is Gestalt?
Gestalt (form, shape in German) is a group of visual perception principles developed by German psychologists in 1920. It is built on the theory that “an organized whole, is perceived as greater than the sum of its parts”.
“The whole is other than the sum of the parts.”
— Kurt Koffka
1.Law of Proximity
Objects that are placed near each other will be visually grouped together.
Gestalt’s Law of Proximity is a powerful tool that allows us to create relationships between components based on how close they are to each other.
This also allows us to create a disassociation between components by placing them further away from each other.
In the example above, you can see how the elements are visually grouped based on how close they are to each other. The image of two field inputs below is a real-world example of how proximity can be used; the labels are placed close to the relevant field to create a visual relationship between the two objects.
2.Law of Common Region
Objects that share an area with a boundary will be visually grouped together.
Gestalt’s Law of Common region allows us to visually group objects together by placing them within a boundary.
In the example below, you can see how the Card Ul groups together an image with some text as they exist within the boundary of a drop shadow.
3.Law of Similarity
Objects that are visually similar in size, shape and/ or color will be visually grouped together, even if those objects are not near each other.
Gestalt’s Law of Similarity allows us to create relationships between elements without them even being near each other. This is particularly useful when giving consideration to designing at scale.
A practical implementation of this law is often seen when styling text links, which helps create a pattern for text links across your entire site or product.
4.Law of Closure
Objects that are visually incomplete will be perceived as a whole by a user.
Gestalt’s Law of Closure states that when you see an image with missing parts, your brain will fill in the gaps and create a complete image. This is useful when designing horizontally scrolling sections on mobile, as it allows us to partially display a component, which the user will perceive as a complete object. This is shown in the example below.
5.Law of Continuity
Objects that are ordered in a line or a curve appear to be related.
Gestalt’s Law of Continuity is useful for guiding the users eye from one object to another, which generally happens when items are placed in a line.
This is useful when designing horizontally scrolling sections on mobile, as it allows us to draw the users eye to the partially shown component. This is shown in the example below.
🗨*Thanks for taking the time to read my first story on Medium
If you enjoyed this article or find it useful, please share it so more people can benefit from it. ❤
*photos and illustrations in this article are designed by EleanaGkogka
