Visual hierarchy
Visual hierarchy is the organization of visual elements by perceived importance through differences in prominence that guide attention and interpretation.
Design for Developers
Visual hierarchy is the ordering of visual elements to indicate their relative importance and guide perception.
- How it is used
- Guides page scanning and content relationships while visual design is layered onto website and application structure.
- How deep it goes
- Explains hierarchy through layout and design principles, with contrast and readable image-text treatment; defers detailed typography and color coverage.
- Examples
- Uses planned-house layouts, a contrasting diamond among circles, and white hero text over unsuitable or darker image backgrounds.
- What you can do after
- Apply it through layout and strong contrast to create scannable pages, readable content, and clearer next steps.
Everyday Data Visualization
The organization of visual elements so that their relative importance guides attention and interpretation.
- How it is used
- Guides attention through data visualizations by signaling the story, starting point, and noteworthy content.
- How deep it goes
- Explains hierarchy through contrast, type size, weight, proximity, and repeated styles, without prescribing tool-specific implementation.
- Examples
- Uses payroll and gender pay-gap visualizations, chart labels, callouts, donut charts, and hotel-dashboard tooltips.
- What you can do after
- Apply it by varying type size, weight, spacing, and repeated styles to direct attention without overwhelming users.
Read how Everyday Data Visualization explains visual hierarchy →
Related concepts
- headinguses · A heading is a textual or semantic label that introduces a section of content and, when structured, indicates its level in the document hierarchy.
- contrastproduced by · Contrast is the perceptual or measurable difference in visual properties, such as luminance or color, that makes elements distinguishable.
- font pairingproduced by · Font pairing is the selection of multiple typefaces that work together to create a clear and coherent typographic system.
- typographyproduced by · Typography is the design and arrangement of written text, including typeface, size, spacing, alignment, and layout, to support readability and visual communication.
- consistencyproduced by · Consistency is the property of related data, behavior, outputs, or states agreeing with one another or conforming to defined rules across relevant instances or operations.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.