404 Page Design Patterns
Turn dead ends into delightful moments. A collection of battle-tested 404 page patterns that keep users engaged instead of bouncing.
Pattern 1 — The Minimalist
A single line of copy, one CTA, zero friction. Best for SaaS dashboards and utility products where speed matters more than personality. The magic is in the microcopy — “We looked everywhere” outperforms “Page not found” by 3x on click-through.
Pattern 2 — The Illustrated
Custom illustration paired with brand voice. Works for consumer-facing products where emotional connection drives retention. Keep the illustration lightweight — inline SVG under 15KB, no external sprite sheets.
Pattern 3 — The Search-First
For content-heavy sites: put search above the fold on the 404 page. Users who land on a broken link are often looking for something specific — give them a path to find it without navigating back.
Hmm, that page is missing.
Try searching for what you need.
Quick Rules
- Always include a clear path back — never dead-end a user.
- Match the 404 tone to your brand voice; inconsistency breaks trust.
- Log 404s server-side and fix high-traffic broken links weekly.
- Keep the page under 50KB total transfer for instant paint.