Overview
Visual hierarchy is the most consequential design decision in a UI — and the one most often made by accident. When hierarchy is absent, every element competes for attention equally. The user scans the screen, finds no clear entry point, and either reads everything (slow) or reads nothing (disengaged). When hierarchy is intentional, the user's eye moves through the screen in the sequence the designer intended — from the most important information to the supporting detail to the action.
The Visual Hierarchy & UI Layout System Prompt builds a systematic approach to hierarchy: the typographic scale that creates clear levels of importance, the spacing logic that groups related elements and separates unrelated ones, the grid structure that creates predictable rhythm, and the contrast rules that direct attention without relying on color alone.
What you get: - Typographic scale: the size and weight relationships that create 4–5 clear hierarchy levels - Spacing system: the logic that determines margin, padding, and gap values - Grid structure: the column and row system that creates layout predictability - Contrast hierarchy: how to use size, weight, color, and position to direct attention - Attention flow analysis: how to evaluate whether a screen's hierarchy matches the intended reading sequence - Hierarchy failure patterns: the 5 most common hierarchy mistakes and how to identify them - Application to complex screens: how to maintain hierarchy when a screen has many competing elements
Built for: UI designers and product designers who want to move from intuitive hierarchy decisions to a systematic approach that produces consistent, scannable interfaces.