The Conflict Matrix
Design principles don't exist in isolation — they compete. When two valid principles pull in opposite directions, knowing which to prioritise is where craft becomes judgment.
How to choose
-
Identify the user's goal in this moment
Not the business goal, not the brand goal — what is the user trying to accomplish right now?
-
Prioritise the principle that serves that goal directly
The principle that removes friction from the user's path takes precedence over the one that serves ambient concerns.
-
Look for an execution that satisfies both
It often exists. The conflict is usually one of defaults, not absolutes — a different execution resolves it without choosing a loser.
-
If you must choose, choose the one that fails less catastrophically
Not all failures are equal. An accessibility failure excludes users entirely. A brand inconsistency is recoverable. A broken interaction is a dead end. A missing animation is a missing enhancement.
Brand colours are chosen for visual impact and recognition — often at saturation levels that fail WCAG contrast requirements for text and interactive elements.
Resolution
Use brand colour for non-text elements: illustration, decoration, borders, and fills. Reserve accessible colour variants for text and interactive states. Signal brand through typography, spacing, and layout rather than relying on a single hue across every surface.
Generous whitespace aids comprehension and signals quality. High-density interfaces serve users who need to scan large amounts of data at a glance — dashboards, data tables, monitoring tools.
Resolution
Apply whitespace where users read; density where they scan. The distinction is content mode, not content type. Never set density globally: give each zone the spacing its use demands.
Ideal hierarchy uses large size differences — 40px heading, 16px body — that compress into an undifferentiated stack on small screens.
Resolution
Use fluid type scales that compress gradually. Supplement size with weight and colour at smaller sizes: a 22px bold heading reads differently from 18px regular body text even at a narrow size difference. Accept hierarchy compression on mobile; do not fight it with sizes that break the reading measure.
Animation communicates state changes, guides spatial attention, and improves perceived performance. It can also trigger vestibular disorders and is excluded by the prefers-reduced-motion setting.
Resolution
Treat motion as progressive enhancement. Design the static interaction first — it must be complete and communicative without animation. If removing the animation breaks comprehension, the design is accessible only with motion: that is the failure mode.
Proximity groups related elements with tight spacing. Rhythm requires consistent intervals throughout a layout. Applied at the same scale, they pull in opposite directions.
Resolution
They operate at different levels. Use proximity within groups — a label tight to its input. Use rhythm between groups — a consistent gap between form sections. One governs relationships; the other governs pace.
Consistent patterns reduce learning load and build confidence. The same pattern applied to different content types can be wrong — a data table laid out like a marketing card fails both.
Resolution
Keep behaviour consistent; let expression adapt. Interactive elements should behave identically everywhere — same hover, same focus, same affordance. Their visual treatment scales with context.
Grid alignment creates structural trust and professional quality. Strict adherence can produce rigidity in editorial and brand contexts where the grid itself becomes the visible thing.
Resolution
Break alignment only when breaking creates a clear focal point and the rest of the layout is structurally sound. Asymmetry in a poorly structured layout reads as error. In a well-structured layout, it reads as personality.
Plain language demands the clearest possible expression at every moment. Brand voice requires personality and tone that can complicate or slow that clarity.
Resolution
Clarity wins in functional moments — error messages, labels, instructions, calls to action. Brand voice wins in ambient moments — headlines, empty states, marketing copy. If a user is completing a task, every word must serve the task.
When a conflict is irreconcilable, be explicit. The cost of documenting a trade-off is low. The cost of an undocumented decision that a future designer reverses — not knowing why it was made — is high. Name what you traded and why.