Books UI Typography Layout

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.

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.

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.

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

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.

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

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.

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

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.

The content makes two rectangles and creates a 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.

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.

Prev

Next

Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors