Design better interfaces using Gestalt principles

There is no better example of how psychology affects design than Gestalt theory. If you’re unfamiliar with it, Gestalt theory offers a set of suggested rules for improving composition in your designs. 

Gestalt is a German word that translates into English as pattern, form, shape, figure or unified structure. Gestalt theory is an approach to psychology that was born at the beginning of the 20th century to understand human perception and how the mind perceives things it sees.

Regarding design, Gestalt principles can help us better understand how people perceive and absorb the information they are presented with.

Today, we’d like to share the Gestalt principles closest to the design field. This theory can be applied to graphic design and UX/UI design. The more you use them, the more you’ll find them fitting into your technique; before you know it, you’ll have assimilated them.

Similarity

The principle of similarity is about how similar elements are perceived as a group or a whole. Let’s take a top menu on a web page as an example. All the words are the same size, equally spaced and of the same color. A visitor instantly perceives this row of words as a whole, an element of many parts, but with one function: to navigate between pages on this website. 

Continuity

The principle of continuity is about how people see things and subconsciously look for a continuous line of sight. Continuous lines in design don’t necessarily have to be lines per se, but rather a sense of continuity from one element to another. This can also be achieved through color and shape. Even a person’s gaze in an image can be perceived as a form of visual continuity.

Closure

The principle of closure relates to how the human brain creates shapes out of what it sees, even if that shape is incomplete. This visual principle is often seen in the use of negative space in the creation of logos. The human mind can visualize the “missing” shape precisely because the surrounding shape exists. In design, the principle of closure is seen in carousels of images where the image on each side is cut off, but you still know what it is.

Proximity

The principle of proximity relates to how close or far elements are from each other. Placing pieces together in space – independently of whether they are the same or different – gives them group quality. If there are shapes in a space that are close together and shapes that are slightly apart, it will feel like there are two groups.

Figure and background

The principle of figure and background is about how people’s vision always separates the elements they interpret as the figure or the background. The brain separates spaces into levels or layers. This is related to the perception of depth and dimension. The figure and background blending into each other may result in an entertaining design or a total failure. It depends on what your intention was! 

Symmetry and order

The principle of symmetry and order states that when elements are arranged or aligned symmetrically – in an orderly way – they are perceived as a group or entity.  Order is readily perceived by the human brain, and even more so when it is symmetrical. Symmetry and asymmetry play a part in this principle – as long as visible order exists, people will perceive it.

Design better interfaces using Gestalt principles

If you study educational content aimed at designers, you’ll quickly notice that most of the visual tips shared either embody or are based on Gestalt principles. Gestalt theory is one of the most important theories in UI design, providing you with guidelines to make your interfaces successful. Especially for a human audience.

With Gogeticon – you can easily create designs that employ Gestalt principles. All the resources we offer you are customizable. Unleash your creativity with Gestalt and Gogeticon.