Design Examples
404 Page Design: Real Examples
Browse real 404 page examples from Claude, Figma, Mobbin, Codecademy and more, including how the best turn a dead end into a demo of the product.
Real world examples:
Updated: 23/09/2026, view all 1,476 examples
Examples on Built for Mars include
Figma's 404 is editable, like the real tool
Mobbin's 404 quiz is a designer in-joke
Codecademy's 404 game pitches a games course
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.
Dribbble's 404 page includes an interactive colour slider, which will show a collection of images in that colour.
Mobbin's 404 page is an interactive quiz for designers, repurposing their archive of content.
More context
This is a brilliant example of tribalism. Designers use Mobbin as a reference library, and this easter egg is a bit like an in-joke.
The Financial Times' 404 page lists "economical satire" to justify the missing content.
Medium have featured articles about being lost, on their 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
£8/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
Do creative 404 pages actually improve conversion?
Rarely. 404 pages usually have little or no effect on conversion or churn. Their value comes from being shared on social media, which spreads the brand rather than delivering direct value.
How can a 404 page show off what the product does?
The strongest examples turn the error into a small, working demo of the core product. For example, Claude writes a poem with its own models and lets visitors pick which model to use, so they see the differences between models firsthand.
Can a 404 page be built from existing content?
Yes. Repurposing content you already have keeps the page on-brand and cheap to build. For instance, Mobbin builds a quiz from its archive of app screenshots, Dribbble filters its images with a colour slider, and Medium features its own articles about being lost.
Does a 404 page need to be interactive to work?
No. Copy alone can carry the joke if it speaks the audience's language. As an example, the Financial Times explains the missing page with economic satire, using terms like stagflation and supply and demand.
How can a playful 404 page still lead somewhere useful?
Place a relevant next step next to the fun element. This is what Codecademy does: next to its Chrome-style minigame, a 'Build your own' button links to its game development course.
Should empty search results get the same treatment as 404 pages?
They can, since both are dead ends where some personality softens the moment. For example, Google Fonts shows a random font-themed error card when a search finds no fonts, with a clear filters button so the user can recover.