UX Hierarchy Framework
A decision model for visual hierarchy that applies across interfaces, content types, and screen sizes.
('The problem with instinctive hierarchy', "Most designers apply hierarchy instinctively — making things bigger, bolder, or more contrasty when they want them to feel important. This works until it doesn't. When every element has been given importance treatment, nothing has priority. The UX Hierarchy Framework replaces instinct with a decision sequence.")
('The five hierarchy signals', 'Visual hierarchy is communicated through five independent channels: size, weight, colour, position, and space. Each channel can carry roughly the same amount of priority signal. Most designers overuse size and weight and underuse position and space. A system that distributes hierarchy signal across all five channels is more legible and more flexible than one that relies on two.')
('The decision sequence', 'Apply hierarchy decisions in this order: (1) identify the primary action or content on each screen; (2) assign it a hierarchy level (1–4, where 1 is highest); (3) allocate hierarchy signals — no level should use more than two channels; (4) verify that your hierarchy is still readable when colour is removed. If it collapses without colour, your hierarchy depends on a single channel and will fail in low-contrast environments.')
('Hierarchy vs emphasis', 'Hierarchy is structural — it governs the reading order of an entire layout. Emphasis is local — it draws attention to a single element within an established hierarchy. Confusing the two is a common source of visual noise. Use emphasis sparingly and only after the hierarchy is established.')
Field Notes in your inbox
Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.