Common Structural Mistakes
The five structural failures that recur across most web interfaces — what they look like, why they happen, and how to fix them.
Most structural problems are not technical failures. They are the predictable result of building components before defining systems. These five mistakes appear across almost every web interface, at every level of visual polish.
1. Inconsistent spacing
Gaps between sections sized by eye rather than drawn from a defined scale. No two sections relate to each other spatially, and the layout feels assembled rather than designed — even when individual elements look polished in isolation.
Why it happens: No spacing system was defined before building began. Each gap was decided in the moment.
The fix: Define four or five spacing values before writing a line of CSS. Use only those values for all margins, padding, and gaps. Consistency makes the system invisible. Inconsistency is all the user sees. See Spacing as Structure.
2. Hierarchy without priority
Multiple elements compete for dominance — large headings, bold labels, prominent borders, coloured backgrounds — all at the same visual level. Nothing reads as the most important element because everything is styled as if it might be.
Why it happens: Visual decisions were made element by element, each styled to look good in isolation, with no single element declared dominant first.
The fix: Identify the one most important element on the page and make it unambiguously dominant. Build all other hierarchy downward from that decision. If you cannot identify the most important element, the page has not been structured yet. See Hierarchy and Attention.
3. Buried primary actions
The main action a user is meant to take — a purchase, a sign-up, a form submission — is visually subordinate to surrounding content. It is present, but it does not stand out. Users have to search for it.
Why it happens: Elements were arranged for visual balance rather than reading flow. Balance distributes attention equally. Flow directs it.
The fix: Place the primary action at the point in the reading sequence where users are ready to act, and make it visually dominant at that point. Never subordinate it to decorative elements in the name of visual balance. See Reading Flow.
4. Navigation that changes between pages
The navigation structure differs between pages — different items, different positions, different visual treatment. Users who have learned to navigate one page find that knowledge does not transfer to the next.
Why it happens: Pages were designed independently rather than as a system. Each page was considered finished in isolation.
The fix: Define navigation before designing any page, and hold it constant. Position, content, and visual treatment should be identical on every page. The only thing that changes is the current-location indicator. See Navigation and Flow.
5. No breathing room
Content packed into every available pixel. Margins are minimal, sections run directly into each other, padding is compressed. The layout communicates anxiety — as if space were a resource being conserved.
Why it happens: Space was treated as emptiness rather than structure. The desire to fit more content above the fold compressed everything until the layout lost its organisation.
The fix: When a layout feels crowded, the first intervention is almost always more space — not less content. Space is what separates sections, signals groupings, and gives individual elements room to read as significant. A generous layout is not wasteful. It is structured. See Spacing as Structure.