Module description

Gestalt principles in design are the principles of human perception that describe how people group similar elements, recognize patterns and simplify complex images when we perceive objects. While being quite abstract, these principles help designers create compositions and interfaces that take into account how the human brain works.

This term shows how design and phycology are linked together, especially when it comes to building user interfaces. Having an understanding of how the human brain works will help you better understand your user and use the right visual instruments to solve the problems set in front of you. At the end of the day, design is a social profession, design is about solving problems. Lean design principles, see them in action and use them in your designs.

Elements that are close to each other are perceived as more connected than those that are some distance away. Thus, we often perceive individual elements as a group, rather than individually.

The principle of proximity states that objects that are related should be close to each other, and unrelated objects should be at a distance. In this case, white space is the key as it creates a contrast that directs the user’s eye in the right direction.

See the difference in these two images

Elements with similar visual characteristics seem more connected to us than those that look different.  We tend to perceive similar elements as a group or pattern. In addition, we assume that such elements serve the same purpose. The principle of similarity helps to organize and classify objects within a group and relate them to each other by value or function.

It may be any visual similarity: shape, colour, texture, size etc. Some of them have more visual weight than another. For example, similarity in colour perceives as stronger than one in size. While the similarity in size will be visually stronger than in shape.

The figure-ground principle describes how the eye can separate shapes in a design from the background of that design. The figure is often referred to as the positive space, and the ground is also known as the negative space or the background, and it is the area that surrounds the figure.

The relationship between figure and ground can be stable and unstable. When we look at a picture, the first thing our brain does is define what is a figure, and what is ground. In this particular image, you can switch between seeing two faces or a vase, and it demonstrates the unstable relationship between figure and ground.

Compositions, where the figure-ground relationship is clear, are considered to be more stable.

Symmetrical elements (even if they are placed at a distance) are usually perceived as interconnected and create a sense of integrity and order. Symmetry sounds boring? Maybe yes. As well as being calm, satisfying and stable. Sometimes it’s exactly what we need.

Symmetrical compositions may look simple, but usually, they are also very harmonious. In an attempt to make sense of the world around us, we always strive for symmetry, stability and order. Therefore, symmetry is a useful tool when you need to convey information quickly and efficiently. Symmetry creates a sense of comfort and allows you to focus on what really matters.

We often think of a group of elements as one recognisable object or figure. The Closure Principle also works when the object is incomplete, or some parts are not connected to each other. Our brain is smart enough to fill in the gaps in the composition within a particular context. How does it help in design, you may ask? It allows us sometimes to use fewer elements to communicate the information and minimise visual noise in the layout. No need to repeat, no need to same things twice, no need to… you got me!

No drama, even though the word fate may sound pretty dramatic at first sight. The common fate principle says that the elements of the composition moving in the same direction are perceived as more connected to each other in contrast to the ones moving in different directions or not moving at all or placed randomly. No matter how far apart objects are and how different they are, if they move or change together, our brain perceives them as interconnected.

It’s a powerful instrument to guide your user through the composition or the interface, so relax, apply the common fate principle and make it easy for your user!

The Uniform connectedness design principle is also known as common region. It explains that the elements of the composition that are visually connected are usually perceived as more related than the ones without connection. It’s one of the most powerful principles of design that describes how the grouping works. Connectedness is your design superpower that overcomes both proximity and similarity. It shows the unique correlation between how our eyes see things and how our brain perceives them.

You may connect elements using colours, lines, and frames. It’s one of the most important principles in building user interfaces as it helps build hierarchy and improve scanability of information.  Make sure you have this powerful tool in your pocket.

The good continuation principle shows that the elements located along a line are perceived as grouped. The smoother the line, the easier the elements fit into a single shape: our brain likes to follow the path of least resistance. Make it simple for your reader or user, and the easier – the better.

Using the good continuation principle helps us convey direction and movement in a composition. A good example of practical usage of it is the alignment of the elements: it helps us smoothly guide the viewer’s eye across the format and make content more legible. Order is key!