Design Psychology
Key question
How does the eye organise the world?
Our brain is constantly receiving more stimuli than it can process. It organises, simplifies, and fills in the blanks, usually without us even noticing. Design can harness this organising capacity, or work against it.
Learning objective: You recognise the Gestalt principles, name them, and apply them purposefully to structure layouts, logos, and forms clearly.
Those who understand the order of the eye do not need to explain it.
2.1 / How we see
Seeing is interpreting, not depicting.
Light hits the retina, and the signals are processed in the brain. In doing so, prior knowledge is always added to the stimulus: experience and expectations help determine what we recognise. That is why we quickly spot a face in an electrical socket (pareidolia).
Pattern recognition is fast and efficient, but not infallible. Optical illusions reveal how the system works: with simultaneous contrast, the same grey appears lighter against a dark background than against a light background, even though the value is identical.
For design, this means: impact is created through the interplay between element, environment, and viewer. An element can never be assessed completely in isolation.
We do not see what is there, but what we expect to see.
2.2 / Grouping
We perceive things that belong together as a group.
01
Proximity
We naturally perceive elements that are close together as belonging together. In forms, labels are therefore placed closer to their own field than to the field above.
02
Similarity
Elements with the same colour, shape, or size appear as a group. Similarly styled links are recognised as links, even without an explanation.
03
Shared destiny
Elements that move or change together are perceived as a unit, such as cards fading in together.
Proximity and similarity group faster than any line.
2.3 / Add
The eye turns parts into a whole.
01
Unity
We complete unfinished shapes to create a whole. Many logos use gaps that the eye naturally fills in.
02
Continuity
The eye naturally follows flowing lines and directions. Aligned elements act like a line, guiding the viewer's gaze across the page.
03
Figure and ground
We separate an object from its background. The negative space can form a figure in its own right, as seen in logos with a hidden symbol in the space between.
04
Conciseness
We prefer the simplest interpretation of a shape. Clear, simple shapes are understood more quickly.
The eye fills in what is missing, as long as the form remains simple.
2.4 / In practice
Gestalt principles help with any layout.
01
Layout
Spacing between groups is larger than spacing within a group. This structures a page without the need for lines.
02
Logo
Figure and ground, closure, and conciseness make symbols memorable and recognisable even at small sizes.
03
Navigation
Similarity indicates that menu items are on the same level; proximity and indentation show which items belong under a parent item.
04
Forms
Keep labels close to fields, group related fields together, and clearly separate primary actions from secondary actions.
Gestalt principles can operate simultaneously or compete with each other. Which grouping emerges also depends on the task and context; if in doubt, test.
Group with spacing, not with lines.
Exercise
Apply, evaluate, transfer
Task: Declutter a cluttered layout (flyer or website) using only grouping, spacing, and alignment. Text and images remain unchanged.
STEP 1
In the original layout, highlight what belongs together and what does not.
STEP 2
Define spacing levels (for example small, medium, large) and apply them consistently.
STEP 3
Align elements along common lines.
STEP 4
Use similarity purposefully: the same function gets the same design.
Evaluation: Compare the before and after. Where can you recognise the structure faster? Which Gestalt principles did you use, and where did you make deliberate exceptions?