Make It Cohesive

Fundamentals of interface design

Interfaces that look cohesive feel easier to use.

That’s because our brains are wired to trust symmetry. When an environment feels harmonious, we’re more likely to relax and deeply engage with what we’re doing.

What makes a UI cohesive? It’s about composition: How each element relates to the others, and how they come together to form a larger whole.

Even if individual UI elements look and feel outdated, the larger UI can still be made to feel cohesive.

Align Elements

If the UI reads left to right, then align the left edges of elements. This way the user’s eye can follow a straight line down the left edge of page instead of zig-zagging.

One way to do this is to set up a grid or keylines against which to align things.

Use Consistent Spacing

Space elements in consistent increments rather than haphazardly. The smallest increment of spacing is called the baseline. Every other spacing value should be a multiple of the baseline.

A baseline establishes vertical rhythm, meaning you could draw evenly spaced horizontal lines all the way down the UI, and every element would sit on a line.

This lining up of things sends a signal to our brains that’s interpreted as familiarity and trust.

Add Whitespace

Spacing also make it clear if elements are related or distinct. Closely spaced elements are seen as related, while those spaced far apart are seen as distinct.

If elements are too close together, they can all blend into one block of content, which can make the UI feel overwhelming and hard to scan.

Put enough space between each area of content so that they are perceived as distinct from one another.

Consolidate Styles and Apply Them Consistently

Don’t use three styles when one style will do.

Styles should support levels of hierarchy in the UI (e.g. headings and paragraphs, primary and secondary actions). Remove styles that aren’t serving this purpose. Add styles only to fill gaps in hierarchy. Then apply them consistently across the UI.

This goes for text and interactive elements.

This is post is part of a series on the fundamentals of interface design.

The series summarizes technical knowledge and best practices that make it easier for humans to interact with software on screens.

More Writing
  1. How to Design and Implemenent Theming

    Theming in design systems

  2. Why Implement Theming?

    Theming in design systems

  3. 2023 Year In Review

    Reflecting on what happened in 2023

  4. How I’ve Been Using AI

    A look back at how I used AI in 2023