A designer wants to create a strong visual hierarchy on a landing page. They make the headline large and bold, the subheadline medium weight, and the body copy small and light. Then they also make the call-to-action button bright red, all secondary links orange, and the footer text dark blue. What problem have they introduced?
AThe hierarchy is too subtle — more contrast is needed between levels
BToo many competing emphasis cues are working against each other, flattening the hierarchy
CThe color choices violate WCAG contrast requirements
DBody copy should never be smaller than subheadline text
The designer has correctly established a typographic hierarchy through scale and weight, but then introduced a competing color hierarchy that fights it. When multiple elements are strongly emphasized through different channels simultaneously, the viewer's attention is pulled in several directions at once. Hierarchy requires a clear ordering of visual weight, not maximum stimulation at every level — each additional high-emphasis element dilutes the emphasis of the others.
Question 2 True / False
In Western reading cultures, placing an element in the upper-left region of a layout gives it a natural hierarchy advantage even before any scale, contrast, or color differences are applied.
TTrue
FFalse
Answer: True
Western readers are conditioned by years of reading left-to-right, top-to-bottom. The eye therefore arrives at the upper-left region first, giving elements placed there an inherent priority in the reading sequence before any other visual cues take effect. Designers can use or subvert this default, but they must account for it. A large bold element placed at the lower-right will compete against spatial positioning; a modest element at the upper-left may punch above its visual weight.
Question 3 Short Answer
Explain why the 'squint test' is an effective diagnostic tool for evaluating visual hierarchy, and what a designer should do if the squint test reveals the wrong element at the top of the hierarchy.
Think about your answer, then reveal below.
Model answer: The squint test works by reducing visual acuity so that only the highest-contrast, highest-weight elements remain perceptible, revealing the actual hierarchy the viewer's visual system processes first. If the wrong element dominates, the designer should either increase the visual weight of the intended primary element (through larger scale, higher contrast, or stronger color) or reduce the weight of the competing element that is incorrectly dominating.
The squint test is a practical application of the concept that hierarchy is perceived pre-attentively — before conscious reading begins, the visual system assigns priority to high-contrast, high-scale elements. A hierarchy that only becomes apparent when you read carefully is a textual hierarchy, not a visual one. The designer's job is to make the intended sequence legible at the pre-attentive level.