Visual Hierarchy, Contrast & Typography
Visual hierarchy guides the user's eye across a page in order of importance. Using deliberate font scale ratios, contrasting weights, and intentional whitespace creates effortless readability.
The 60-30-10 Color Rule
- 60% Dominant Color: Background or canvas.
- 30% Secondary Color: Cards, sidebars, structural elements.
- 10% Accent Color: Call-to-action buttons, key links, highlights.
html Example
<!-- Example of clear visual hierarchy -->
<div class="hero-section">
<span class="badge text-uppercase">Featured Course</span>
<h1 class="display-4 fw-bold">Master UI/UX Design</h1>
<p class="lead text-muted">Create products users love with research-backed user interfaces.</p>
<a href="#" class="btn btn-primary btn-lg">Get Started</a>
</div>