| name | visual-hierarchy-ui-aesthetics |
| description | Applies visual hierarchy, readability, and UI color best practices for aesthetically pleasing interfaces. Use when reviewing or designing UI for layout, typography, color, contrast, grouping, and scannability; complements usability-heuristics and baseline-ui for full UI/UX review. |
Visual Hierarchy & UI Aesthetics
Guides UI toward clear visual hierarchy, readable content, and effective color use. Sources: Visme, Nielsen Norman Group, IxDF Visual Hierarchy, Tubik Studio, Tubik Readable UI, IxDF UI Color Palette.
When to Use
- UI/UX reviewer flows: Invoke this skill when running or supporting ui-ux-reviewer tasks (accessibility, usability heuristics, motion, layout, design consistency). It adds visual hierarchy, readability, and color-palette criteria to the review.
- UI/UX review: layout, emphasis, and visual order
- Designing or refining screens for scannability and clarity
- Choosing or auditing color palettes and contrast
- Improving typography, spacing, and content structure
- Working alongside usability-heuristics and baseline-ui
1. Visual Hierarchy
Definition: Organize elements so the eye is guided to consume each in order of intended importance. If users struggle to know where to look first, hierarchy is weak.
Tools (apply deliberately; overuse flattens hierarchy)
| Tool | Rule |
|---|
| Size | Larger = more important. Use at most 3 sizes (e.g. header, subheader, body). Make the most important element biggest; limit to ~2 big elements so they stand out. |
| Scale | One object has no scale until compared to another. Use scale to create balance and focus on dominant elements. |
| Color & contrast | Bright/saturated draws attention; muted recedes. Contrast in value and saturation with context matters more than the raw color. Don’t rely on color alone (accessibility). |
| Typography | Vary size, weight, spacing. Primary = headlines (biggest); secondary = subheaders/captions (scannable); tertiary = body/supporting. On mobile, consider 2 levels only. |
| Negative space | Space around content singles it out. More space = perceived as one group and often more emphasis. Clutter reduces clarity. |
| Proximity | Related items close together = perceived as a group. Use to chunk content (e.g. label + field, heading + paragraph). |
| Alignment | Shared margins and alignment create order and direct the eye. Left alignment supports F-pattern; center for simple, balanced layouts. |
| Repetition | Same style (font, color, shape) suggests related content and unity. Use consistently for similar roles (e.g. all links, all section titles). |
| Common region | Borders or backgrounds group elements explicitly when proximity isn’t enough; use sparingly to avoid clutter. |
Scanning patterns
- F-pattern: Text-heavy; top horizontal scan, then down the left, scanning right when something relevant appears.
- Z-pattern: Image- or CTA-heavy; top left → top right → diagonal → bottom left → bottom right.
- Place key information along these paths; break the pattern deliberately for a single strong focal point (e.g. centered stat with space).
Squint / blur test
Squint or apply a light blur (e.g. 5–10px). What stands out? If it’s not the intended primary focus, adjust size, contrast, or grouping. Strong content (e.g. a vivid image) can override template hierarchy—consider content when judging.
2. Readability & Legibility
Legibility: How well users see and distinguish elements (characters, words, blocks).
Readability: Ease of understanding and scanning (structure, simplicity, clarity). Both matter for UI.
Background & contrast
- Background color affects perceived size and clarity (e.g. black on light can look larger than white on dark). Ensure sufficient contrast (WCAG: ≥4.5:1 normal text, ≥3:1 large text).
- Avoid absolute white/black for large areas; prefer off-white/off-black to reduce strain. Test in different lighting.
Typography for readability
- White space: Space between elements (and line/letter spacing) directly affects readability. Too little = tense, hard to scan.
- Line length: Restrain characters per line for body text so blocks stay digestible.
- Hierarchy: Headline → subheader → body. One main idea per block; short paragraphs.
- Lists: Use bullets or numbers to break up text and improve scannability.
- Emphasis: Bold, italic, or color for key phrases; use sparingly. Links must be visually distinct (e.g. color + underline or weight).
- Numbers: Numerals often attract fixations during scanning; use for facts and stats where appropriate.
- Consistency: One term per concept (e.g. “Delete” everywhere, not “Remove” on some screens). Short, consistent labels.
Copy
- Clear, concise, useful, consistent. Prefer “Pay” over “Make a payment” for buttons. Support scanning with headlines that state the insight (e.g. “58% drop at checkout” not just “Key findings”).
3. Color & UI Palettes
- Role of color: Create hierarchy, group elements, signal importance, and support brand. Contrast with context drives attention more than the hue alone.
- Primary: Most frequent, guides to key UI and brand (e.g. main CTAs, key nav).
- Secondary: Supports structure and variety.
- Accent: Highlights important actions or states; use sparingly.
- 60-30-10: Rough balance—60% dominant, 30% secondary, 10% accent (guideline, not rigid).
- Limit variety: In common UIs, 2 primary + 2 secondary colors reduce overwhelm. No more than ~3 contrast levels for type (e.g. header, subheader, body).
- Accessibility: Sufficient contrast; don’t convey meaning by color alone (add labels, icons, or patterns). Test in grayscale. Avoid combinations that are problematic for color vision.
- Warm vs cool: On dark backgrounds, warm colors advance, cool recede; on light, the opposite. Use to suggest depth if needed.
4. Review Checklist
Use when auditing a screen or flow for visual hierarchy and aesthetics:
Hierarchy
Readability
Color
Consistency
5. Quick Fixes
- Everything looks equal: Increase size or weight of the single most important element; add space around it; reduce emphasis on secondary elements.
- Cluttered: Increase negative space between groups; reduce number of strong colors or font weights; one idea per block.
- Hard to scan: Add subheadings, bullets, or numbers; shorten paragraphs; strengthen typographic hierarchy.
- Color chaos: Reduce to 2 primary + 2 secondary; use one accent for CTAs; check contrast.
- Weak focal point: Use squint/blur test; adjust size, contrast, or position so the intended focal point wins.
When reporting, name the principle (e.g. “Visual hierarchy – proximity”) and give a short, actionable change. Use with usability-heuristics and baseline-ui for full UI/UX reviews.
