404 / Error Page
Designed error page that recovers users rather than abandoning them.
Layout
Centered single column, 480px max. Optional illustration (brand-appropriate, not generic). Error type clear. Useful navigation links. Search option. Vertically centered on screen.
Content Slots
Error code
404, 500, or human-readable equivalent — clearly stated but not the headline.
Headline
Human, not technical. "Page not found" > "404 Error". On-brand personality.
Explanation
1–2 sentences explaining what likely happened. Avoid blaming the user.
Primary action
Go home, or most likely recovery path for this error type.
Search
For 404: let users search for what they were looking for.
Useful links
3–5 links to popular sections. Don't just send everyone to the homepage.
Illustration
Brand-appropriate visual that maintains the brand voice even in error states.
Hierarchy Rules
- Recovery path is the primary element — make it impossible to miss
- Peak-End Rule: error pages are remembered — a good error page can improve brand perception
- Tone must match brand voice — not robotic, not over-apologetic
- Never show a stack trace or technical error to end users
- Search + popular links reduces pogo-sticking back to referring site
Examples
- 404: "Hmm, that page doesn't exist." + Search bar + links to popular sections
- 500: "Something went wrong on our end." + Status page link + Retry button