Loading
Design Examples
404 Page Design: Real Examples
Teardowns of real 404 pages, including Claude's model-picked poem, Dribbble's colour slider and Ahrefs turning a dead link into a product demo.
Real world examples:
Updated: 21/08/2026, view all 1,462 examples
Examples on Built for Mars include
Ahrefs' 404 demos its broken link checker
Claude's 404 writes a poem worth sharing
Codecademy's 404 game sells its game course
The Financial Times' 404 page lists "economical satire" to justify the missing content.
Claude's 404 page uses one of their LLM models to create a poem.
More context
I love that you can also select the model—this allows people to functionally buy into the differences between them.
Medium have featured articles about being lost, on their 404 page.
Dribbble's 404 page includes an interactive colour slider, which will show a collection of images in that colour.
Searching for a Google font that doesn't exist, will show a random font-related 404 page.
There are more than 1400 UX Bites like this
See the benefits
There are more than 1400 UX Bites like this
See the benefits
There are more than 1400 UX Bites like this
Subscribe to BFM+
If features can be coded in minutes, thoughtful design is what wins
- Unlock the entire library
- Create custom UX courses
- Access our AI tools
£12 per monthbilled annually
or, wait for the free stuff
Join the free newsletter
Get the free content when it's released, straight to your inbox, no account required
"An exceptional resource for learning how to build habit-forming products that people love."
"I’d never met anybody who looks at usability and UX the way I do until I met Peter. Only he’s smarter."
"The completest view of the psychological underpinnings of human behaviour that I’ve ever seen."
"What a nice idea! Christopher Alexander would be proud to see patterns collected like this."
FAQs
Should 404 pages be judged on conversion?
Rarely worth it, because dead ends move neither conversion nor churn much. What they do get is screenshotted and shared, which is why Claude's poem generator and IMDB's edited movie quotes earn their place.
How can an error page actually sell the product?
By treating the broken link as the teaching moment. Ahrefs explains what a broken link is, then hands over its free Broken Link Checker — reactive onboarding, triggered by the mistake itself. Codecademy pairs its minigame with a CTA for a Phaser.js game development course.
What makes people screenshot a 404?
Something unexpected and slightly personal. Claude lets you pick which model writes the poem, which quietly sells the differences between them, and the Financial Times fills the page with "economical satire" to justify the missing content.
Can a 404 page recover the visit rather than lose it?
Yes, by turning the page into a browsing entry point. Medium surfaces articles about being lost, e.g., "Getting Lost in Canada", and Dribbble's colour slider loads shots in whichever colour you drag to.
Do empty search results need the same treatment as 404s?
They behave identically, so they get designed the same way. Searching Google Fonts for a font that doesn't exist returns random font-related error cards alongside a clear-filters button, rather than a blank results grid.