Grouping allows you to combine different content into single units of meaning. This adds logic to the design, making reading or scanning content consistent and coherent.

Objects that are closer to each other are perceived as one whole. And vice versa, the farther the objects are, the more they are separated.


If the text is too separated from the heading and image, it becomes a detached block and seems to have no relation to them. If the distances between the elements are equal or close, each element is close to the other: the image, heading, and text become one unit.

Left: The text seems separate from the heading and image. Right: Now, the image, heading, and text have a unified meaning.


The title of the module group works better if it’s close to the modules themselves. If it is too separate, it is perceived as alien and standalone.

Left: The heading is detached from the modules. Right: The heading is close to the modules and is now linked to them.



The background, border, and shape help to unite different objects into a single whole. In this way, there is a single meaning and a single connection between the modules.

Elements united by a background or a border become nested and unified.


In this case, grouping by decorative means works better than proximity. Even the titles of the modules strongly separated from them will still be perceived as part of these blocks.


A group of elements that tend toward a rectangular shape always creates a neat and clean design. Unified content is broken into multiple rectangles, making sense of clutter.

The content makes two rectangles and creates a sense of clutter.


When all the group elements are included in a single rectangle, and their width/height does not go beyond it, it creates balance and neatness.

Bringing the content to a single rectangle makes the design seamless and neat.


Carefully consider how close elements are to each other and how they form connections. Sometimes, a simple grouping solution fixes serious mistakes when the entire design, text, and content are missing meaning because of strong separation or vice versa because of too much proximity.