🎯 1. Visual Hierarchy
Definition:
Visual hierarchy is the arrangement of elements to show their order of importance. It guides the user’s eyes to the most critical content first.
🔧 Key Techniques to Create Visual Hierarchy:
| Technique | How it Helps | Example (Web Page) |
|---|---|---|
| Size | Bigger = more important | Page title > Section title > Body text |
| Color & Contrast | High contrast draws attention | Call-to-action (CTA) buttons in bold colors |
| Typography | Font weight, style, and spacing matter | Bold for headings, light for descriptions |
| Position & Alignment | Top-left usually seen first (Z-pattern, F-pattern) | Navigation bar, search bar |
| Grouping | Related items placed together | Card layout with image, title, and action buttons |
🧠 Tip:
Use visual hierarchy to reduce cognitive load. A well-structured hierarchy = faster decision-making = better UX.
📐 2. Spacing Ratios in Web Design
Definition:
Spacing ratios are the consistent vertical and horizontal gaps between elements. They create rhythm, readability, and visual balance.
✅ Common Ratio System:
Designers often use multiples of 4 or 8 pixels. Known as the 8pt spacing system:
| Type | Typical Value |
|---|---|
| Base Unit | 8px |
| Small spacing | 4px, 8px |
| Medium | 16px, 24px |
| Large | 32px, 40px |
| XL / Sections | 64px, 80px |
🎯 Use Cases:
Between form fields: 16px–24px
Between paragraphs: 16px
Between section blocks: 40px–80px
Between button & card edge: At least 16px
📌 Tools:
Figma, Adobe XD, or CSS variables:
:root {
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--spacing-xl: 64px;
}
⚪ 3. Negative Space (aka White Space)
Definition:
Negative space is the empty space around elements. It's not wasted space — it creates focus, balance, and breathing room.
✅ Where to Use Negative Space:
Around cards and sections
Between headings and paragraphs
Inside buttons and form fields
Around logos and hero images
🎨 Good Practice:
Allow 32–80px margin between major sections (hero → features → footer)
Keep padding inside buttons (e.g.,
padding: 12px 24px)Never clutter elements — use whitespace to separate unrelated content
📏 Measurement Format (for Spacing & Layout):
Most UI design follows the 8pt grid system:
| Element | Recommended Measurement |
|---|---|
| Grid Columns | 12-column grid (desktop) |
| Column Gutter | 16px–24px |
| Margins (Desktop) | 80px–120px |
| Line Height | 1.5–1.6x font size |
| Container Width | Max 1140px–1280px |
✅ For Mobile: Reduce spacing to 16–24px on edges
✅ Always use consistent spacing tokens in your design system
✏️ Real Example: Homepage Layout
Header (80px padding)
|
Hero Section
- Title (48px)
- Subtitle (24px)
- CTA Button (32px spacing)
- Image on right
Spacing between sections: 64px
Card grid: 3 columns, 32px gutter
Card content spacing: 16px padding inside
Footer: 80px top spacing, 40px bottom padding