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 plate
Reach for this when
- Starting a new screen or page type.
- Reviewing whether a layout matches the task.
- Planning responsive behaviour.
- Starting a screen, before any component decisions are made.
Common mistakes
- Choosing a composition before understanding the task.
- Designing the desktop layout first and discovering the priorities do not survive.
- Mixing several compositional patterns on one page.
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.
Common shells, and what each is for
| Shell | Suits | Breaks down when |
|---|---|---|
| Single column | Reading, forms, checkout | The task needs two things visible at once |
| List and detail | Mail, records, any browse and inspect task | The list is long and the detail is deep |
| Sidebar and canvas | Editors and tools | The sidebar accumulates unrelated controls |
| Three pane | Dense professional tools | Narrow screens, where it must collapse to one |
| Dashboard grid | Monitoring at a glance | Every tile claims equal importance |
In practice
- i.
Three-pane to stacked
Mail clientsNavigation, list and message collapse into a navigable stack on small screens. The transition works because the hierarchy between the three panes was already explicit.
- ii.
The sidebar that became a drawer of everything
Shell decayNavigation, filters, a help panel and an account menu all arrived in the same sidebar over two years. The shell was still correct and the content inside it no longer had one meaning.
Local chart
FND·014 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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
Related concept
Connected closely enough to change how you apply this.
- Design Brief to Wireframe DirectionAI·008 · AI workflow
- AlignmentFND·003 · UI foundation
- BalanceFND·011 · UI foundation
- BreakpointsFND·045 · UI foundation
- ContainersFND·041 · UI foundation
- GridsFND·039 · UI foundation
- Responsive LayoutFND·043 · UI foundation
- Visual HierarchyFND·001 · UI foundation
- WhitespaceFND·015 · UI foundation