Organisation and Structure

A page is not a collection of components. It is a set of zones. Define the zones before placing anything inside them.

What it is

Page organisation is the division of screen space into functional regions — each with a specific structural role — before any content is inserted. These regions are not aesthetic choices; they are architectural ones. Most interfaces share the same major zones: the header (identity, global navigation, and persistent controls), the primary content area (the main task or information the page exists to deliver), any supporting context (filters, secondary navigation, related content), and the footer (auxiliary links and legal information). Each zone has rules about what belongs inside it.

What it does

Defining zones first gives every element a home before it exists. When a designer asks “where does this go?” they answer by referencing the zone map, not by eyeballing the current layout. This eliminates the most common source of spatial inconsistency: elements placed where they currently fit rather than where they structurally belong. A component introduced into the wrong zone creates misalignment, hierarchy confusion, and visual noise that cannot be resolved at the component level — because the problem is structural.

What changes

Design moves from assembly to architecture. Each component is introduced into a predetermined region with a defined role. The spatial problems that arise from inside-out design — misaligned elements, inconsistent margins, regions that grow unpredictably — largely disappear because a system where structure precedes content has nowhere for them to come from.

The mistake

Building components before defining zones — assembling buttons, cards, and form fields and then trying to impose structure over the result. This produces layouts where the structure is implicit and fragile rather than explicit and stable. Elements look correct in isolation and incorrect together. The structure is discovered rather than designed, which means it is different on every page.

The takeaway

Before opening a design tool, sketch the zones. Plain labelled rectangles: header, content, support, footer. Decide what belongs in each zone and what never belongs there. Only once the zone map is resolved — and tested against the content it must hold — should any element be designed. The zone map is the design. Everything else is execution.