Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Composition

How the parts are arranged on the whole surface, which determines where the eye goes and in what order.

Definition

Composition is the overall arrangement of elements within a frame. It brings together hierarchy, balance, alignment, grouping and space into a single structure that guides attention through the content.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Compositional patterns worth knowing
  3. Composition follows the task
  4. In practice
  5. Continue from here

Compositional patterns worth knowing

  • Single column: a linear read, ideal for content and mobile. The safest default.
  • Split: two areas of roughly equal weight, used for comparison or for content plus asset.
  • Sidebar and content: navigation or filters alongside a main area. The workhorse of product UI.
  • Three-pane: navigation, list and detail. Standard for mail, messaging and record-based tools.
  • Grid of equals: a set of comparable items with no internal ranking.
  • Feature and supporting: one dominant element with subordinate items, which is the strongest hierarchy available.

Composition follows the task

The right composition is a function of what the user is doing. Comparison wants a grid or a split. Sequential reading wants a single column. Working across a set of records wants three panes. Choosing a composition for visual interest rather than for the task is the most common cause of layouts that look good and work badly.

In practice

Three-pane to stacked

Mail clients

Navigation, list and message collapse into a navigable stack on small screens. The transition works because the hierarchy between the three panes was already explicit.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Dashboard

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.