8. Gestalt Principles of Design
The Psychology of Perception
The Gestalt Principles are a set of psychological laws explaining how the human brain automatically groups and organizes visual elements. Mastering these principles gives you 'Jedi powers' over where the user looks and how they interpret information without writing a single line of instructional text.
1️⃣ Law of Proximity
Elements placed close together are perceived as a related group. If a headline and a paragraph are 8px apart, and the next headline is 64px away, the brain automatically chunks the first two together as a single unit.
2️⃣ Law of Similarity
Elements sharing visual characteristics (color, shape, size) are perceived to have the same function. If your primary 'Submit' button is a blue pill shape, the user will instinctively assume any other blue pill shape in the app also submits data. Breaking this law (e.g., using a blue pill shape for a non-clickable label) destroys user trust.
3️⃣ Law of Common Region
Placing elements inside a clearly defined boundary (like a faint gray background box or a card with a drop shadow) forces the brain to view them as an isolated, unified object.
In the Sandbox, you will find a disorganized list of raw UI elements that the brain struggles to read. Your task is to apply Gestalt principles to create order. First, adjust the Proximity (spacing) so related items sit closer to each other than to external elements. Next, apply Common Region backgrounds to unify independent chunks of information into clear, distinct 'Cards'.
Rank the Content Hierarchy
Assign the correct hierarchy level to each element on a product page.
Knowledge Check
Ready to test your understanding of 8. Gestalt Principles of Design?