Gestalt Theory in design

Shapes and relationships between those shapes are an important foundation of any design. Being aware how our brain inteprets those shapes is therefor an important aspect to ensure clear visual communication.

To better understand this we have to look at some psychology…

What is gestalt theory?

Gestalt theory originally comes from psychology and revolves around perception. In relation to design it is focussed around visual perception. However it can be applied to other areas.

The term gestalt comes from german and is somewhat difficult to translate, but can be loosly interpreted as “totality” or “organized unity” maybe “structure”.

“The whole is greater than the sum of its parts.”

Gestalt Theory Laws

We can divide gestalt theory into several laws or principles.

Law of Prägnanz (law of good figure/law of simplicity)

We tend to perceive complex or ambiguous images as the simplest form we can see. Take a celtic cross for example, unless you focus on the knotwork you’ll see the cross most of the time.

Figure-ground law

This is where we can see a shape and another shape in the negative space of the first shape. But we can’t perceive both at the same time.

Law of proximity

Placing objects close together will make us perceive them as related. A very common example are menu items that are isolated/separated from any other design element with whitespace.

Law of similarity

Another way of grouping/relating objects is to make them appear similar. This can be done by shape, e.g. a group of squares and circles or even all circles but with different colors.

Law of Common Region

Elements that share the same enclosed region will seem related. Example of this could be sets of images with a border around them.

Law of Closure

Incomplete shapes wil be perceived as the complete shape. An example would be the crescent moon as we can still imagine the full moon shape.

Law of Continuity

Elements that are placed on a straight or curving line in a way that we can draw a line through them will be perceived as related. This is why you want to make sure that a list of items is aligned on some side.

How to use it

With these you can make sure that related pieces of information are perceived as such. The inverse is true too.

For example if you take the law of similarity and have one element that does not match the rest it will stand out as it seems out of place. This will allow you to make direct the attention of the user.

Have a look at https://lawsofux.com/ for some more examples.

Similarities with engineering?

These clues are mostly for visual interpretation of data or information. So it is hard to see if there is any application for this in our codebase. The easiest transferable principles that I can see are the similarity and proximity principles. We can apply those to what we put together in a package, namespace, class or endpoint.