The whole is something else than the sum of its parts.

Gestalt principles in web design

Gestalt Principles are a way for humans to make sense of chaotic data presented to them. So, rather than see a bunch of text, images, and space, the human brain recognizes patterns to simplify complexity. About half a dozen principles are associated with this theory, and they’re related to factors like symmetry, similarity, and proximity. There are five of the key Gestalt principles that can be applied in web design – proximity, similarity, continuation, symmetry and closure.

Proximity

The Gestalt law of proximity states that “objects or shapes that are close to one another appear to form groups”. Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together. Good examples of proximity can be seen web design when menu links or buttons are kept close together, such that a sense of ‘unity’ and clarity is created between these elements.

Similarity

Gestalt theory states that things which share visual characteristics such as shape, size, color, texture, or value will be seen as belonging together in the viewer’s mind. The example given shows how this works – although the shapes in the middle are different to the shapes on the outside, the image appears as a single unit because all the shapes have similarity. Unity occurs because the circles in the center of the image look ‘similar’ to the squares in terms of size, color and proximity.

Simmetry

Symmetry states that the viewer should not be given the impression that something is out of balance, missing, or wrong. If an object is asymmetrical, the viewer wastes time trying to find the problem instead of engaging with the message or instruction.

Continuation and Closure

Continuation occurs when the eye is compelled to move along a path, line or object – preferring to see a single, continuous figure instead of separate lines. This principle can be used in web design with lines or arrows leading towards buttons or content, and thus guiding focus towards what is most important.

Closure occurs when an object is incomplete or a space is not fully enclosed. Preferring wholeness, people automatically fill in any gaps in order to perceive a complete image.

WE DON’T NEED

Start a Project