Grouping

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

Proximity

If the objects are close to each other, they appear to be a single whole, something that is united by a common meaning. Elements separated by distance become distinct objects with different meanings.

Text too separated from the heading and image 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.

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

Nesting

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.

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

Rectangle

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.

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

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.