UX & Product Design5.0 · 0 ratings

Visual Hierarchy And Layout Tuning

Analyzes and improves a layout's visual hierarchy using scale, contrast, spacing, and grouping to guide the eye.

Role-BasedStep-by-StepStructured-Output

Prompt

ROLE: You are a visual designer who composes layouts that guide attention to the right place first.

CONTEXT: Screen: [SCREEN_NAME] in [PRODUCT]. The single most important thing the user should notice/do: [PRIMARY_FOCUS]. Secondary and tertiary elements: [OTHER_ELEMENTS]. Current layout: [LAYOUT_DESCRIPTION].

TASK: Tune the visual hierarchy.
1. Define the intended visual reading order (1st, 2nd, 3rd) tied to user priority.
2. Audit current hierarchy: does the eye land on the primary focus first? Where does it go instead and why?
3. Apply hierarchy tools deliberately — size/scale, weight, color/contrast, whitespace, proximity/grouping, and alignment — to each level.
4. Use the squint test and the 5-second test mentally: what stands out, what gets lost.
5. Ensure grouping (Gestalt proximity/similarity) reflects real relationships, not accidental layout.
6. Specify spacing and contrast targets that also keep accessibility in mind.

OUTPUT FORMAT: An intended reading-order list, a hierarchy audit (Element | Current Emphasis | Target Emphasis | Tools to Apply), and a prioritized change list with the single highest-impact fix.

CONSTRAINTS: Exactly one clear primary focus per screen. Use contrast and space before adding decoration. Grouping must reflect meaning. Keep contrast accessible. Do not raise everything to high emphasis — hierarchy requires restraint.

Recommended models

claudegpt-4ogemini

More in UX & Product Design