Briefle words · UI design
Visual hierarchy
Arranging elements by importance, using size, weight, color and position, so the eye reads the most important thing first and the rest in a deliberate order.
Say it to an AI
Pro plan pricing card with a clear visual hierarchy: the price is the focal point (big, bold, with "/ user / month" small next to it), the plan name becomes a small eyebrow label, and there's one filled primary CTA. Features stay quiet.
How an expert would brief the stronger version of “Pricing card”.
See it
Try it as a puzzle →Pro plan pricing card for a project-management app.
Why: B makes the $12 price the largest, boldest element, with the plan name, features and button stepping down from it. A gives that top spot to the plan name and demotes the price to 15px grey.
More ways experts use it
Today summary card with revenue as the single focal point: a large hero metric with its delta and a sparkline underneath. Orders, conversion and average order value go in one quieter row below at a much smaller size, so the visual hierarchy is revenue first, everything else supporting.
Today's sales · UI designTask preview card for a board ticket. Use progressive disclosure: up front only the title, status, assignee, due date and priority (high priority in red); everything else sits behind a clearly labelled "Show 7 more details" toggle. Keep information density low so the visual hierarchy is obvious.
Task detail card · UI design
Related words
Room 1 · Essentials
Learn “Visual hierarchy” in a five-minute lesson