5 key visual principles

Scale

The size of elements and their relationship to each other.

When discussing the principles of scale with your team, use objective vocabulary such as small, large or dominant.

Hierarchy

To ensure your users can quickly understand and navigate your content, it´s essential to present in a clear order of importance. Hierarchy principle is how information is visually organized to signify importance. Size, placement and color of elements all help influence visual hierarchy like signs in a a roadmap.

Balance

How visual weight is distributed in a composition. Design can be symmetrical or asymmetrical and still feels balanced.

Contrast

How elements stand out and create visual interest or capture attention. Like visual hierarchy, this can be achieved through color, size, shape or font weight.

Gestalt

A group of principles that explain how people perceive grouped elements as part of a whole system.

According to Gestalt principles of perception (aka Gestalt laws), humans recognize that the whole is more important than its individual parts.

Here are any Gestalt principles:

1 Similarity

Things that looks alike are seen as related. For instance, in an interface or design system, you will notice the difference between buttons with a primary color background and other buttons with a gray color background.

2 Proximity

Things that are close to each other are perceived as a group. Think about a navbar within the boundaries of other UI components in a mobile app.

3 Closure

If there's an incomplete shape or image, we automatically fill the gaps between elements to perceive a complete image. World Wildlife Fund logo is a classic example to illustrate this principle.

In conclusion:

Gestalt principles describe how we interpret and organize complex layouts, influencing hierarchy, informational grouping and readability

Resources:

11 Gestalt principles of perception - and how to use them
The Gestalt principles
Gestalt proximity