Here’re the Gestalt principles which can inform today’s UI design.

Proximity

Elements arranged close to each other are perceived as more related than those placed further apart. This way different elements are viewed mainly as a group rather than as individual elements.

How does the Proximity principle apply to UI design?

We can use the Proximity principle in UI design for grouping similar information, organising content and decluttering layouts. Its correct use will have a positive impact on visual communication and user experience.

As the principle states, items that are related should stay close to each other, while the unrelated items should stay further apart. White space plays a vital role here as it creates contrast guiding the users’ eyes in the intended direction. White space can boost visual hierarchy and information flow, contributing in easy to read and scan layouts. It will help users achieve their goals faster and delve deeper into the content.

We can apply the Proximity principle pretty much everywhere from navigation, cards, galleries and banners to lists, body text and pagination.

Common Region

Similarly to the Proximity principle, elements placed within the same region are perceived as grouped.

How does the Common Region principle apply to UI design?

The Common Region principle is particularly useful. It can help with information grouping and content organisation, but it can also achieve content separation or act as a focal point. It boosts hierarchy, scanability and assists in promoting information.

The Common Region principle can hold together many different elements keeping them unified within larger groups. We can achieve it with the use of line, colour, shape and shadow. It can often be used to bring elements into the foreground, indicating interaction or importance.

A good Common Region example would be the card UI pattern; a well defined rectangular space with different bits of information presented as one. Banners and tables are good examples as well.

Similarity

Elements sharing similar visual characteristics are perceived to be more related than those not sharing similar characteristics.

How does the Similarity principle apply to UI design?

We tend to perceive similar to each other elements as grouped or a pattern. We also might think that they serve the same purpose. Similarity can help us with organising and classifying objects within a group and linking them with a specific meaning or function.

There are different ways of making elements perceived as being similar, and thus, related. These include similarity of colour, size, shape, texture, dimension, and orientation; with some of them being more strongly communicative than others (ex. colour > size > shape). When Similarity occurs, an object can get emphasised by being different from the rest; this is called ‘Anomaly’ and can be used to create contrast or visual weight. It can draw the user’s attention to a specific piece of content (focal point) while assisting with scanability, discoverability and the overall flow.

We can use the principle of Similarity in navigation, links, buttons, headings, call to actions and more.

Closure

A group of elements are often perceived to be a single recognisable form or figure. The Closure also occurs when an object is incomplete, or parts of it are not enclosed.

How does the Closure principle apply to UI design?

As the Closure principle states, when presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole. This way we can decrease the number of elements needed to communicate information, reducing complexity and making designs more engaging. Closure can help us minimise visual noise and convey a message, reinforcing a concept within a pretty small space.

We can use the Closure principle in Iconography, where simplicity helps with communicating meaning, swiftly and clearly.

Symmetry

Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.

How does the symmetry principle apply in UI design?

Symmetrical elements are simple, harmonious and visually pleasing. Our eyes seek those attributes along with order and stability, to make sense of the world. For this reason, Symmetry is a useful tool for communicating information quickly and efficiently. Symmetry feels comfortable helping us focus on what’s important.

Symmetrical compositions are satisfying, but they can also get a bit dull and static. Visual symmetry tends to be more dynamic, and interesting. Adding an asymmetrical element to an otherwise symmetrical design can help with drawing attention while making an impression; something useful for any point of interest or a Call To Action, for example. Symmetry, along with a healthy amount of asymmetry is important in any design.

It’s good to use Symmetry for portfolios, galleries, product displays, listings, navigation, banners, and any content-heavy page.

Continuation

Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.

How does the Continuity principle apply in UI design?

Elements following a continuous line are perceived as grouped. The smoother the line segments, the more we see them as a unified shape; our mind prefers the path of least resistance.

Continuity helps us interpret direction and movement through a composition. It takes place when aligning elements and it can help our eyes move smoothly through the page, assisting with legibility. The Continuity principle strengthens the perception of grouped information, creating order and guiding users through different content segments. Disruption of continuity can signal the end of a section drawing attention to a new piece of content.

The linear arrangement of rows and columns are good examples of Continuity. We can use them in menus and sub-menus, lists, product arrangements, carousels, services or process/progress displays.

Common Fate

Elements moving towards the same direction are perceived as more related than those moving in different directions, or not moving at all.

How does the Common Fate principle apply in UI design?

Regardless of how far apart are the elements or how dissimilar they might appear, if they are moving or changing together, they are perceived as related. This effect can take place even when movement is implied, by other visual elements.

The Common Fate principle is more potent when elements move synchronised; in the same direction and at the same time and speed. It can help with grouping relevant information and linking actions with results. The disruption of a synchronised movement can grab users’ attention and direct it to a specific element or feature. It can also, establish relationships between different groups or states.

We can use the Common Fate principle in expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators.