Creative 404 pages: examples to learn from (and mine)

Nobody remembers the 404 page of a site whose everything else they have forgotten. Yet it is one of the few moments when visitors stop, puzzled, and really look at what is on the screen. That is why some sites have turned it into a small business card: an illustration, a joke, sometimes a game.

In this article I show you a few well-known examples of successful 404 pages, explain what makes them work and how to build one without losing visitors. And I show you mine: try it here, there is a game.

Why a 404 deserves some care

A 404 error is the moment the site has to "disappoint" the visitor: the page they were looking for is not there. It is a small friction, and like every friction it can make people leave or stay. A bare page with grey text and no links says the site did not care about you. A cared-for page says the opposite: the site was expecting you here too.

It is not just about charm. A good 404 does practical work: it explains what happened, spares the visitor any guilt and immediately offers somewhere to go. The creative part makes all this more pleasant, not a substitute for it.

For the technical side (status codes, redirects, SEO), see 404 errors: what they are, why they matter and how to handle them. Here we talk about design.

Some examples to learn from

Roundups of 404 pages keep coming back to the same names. Here are some of the most cited examples, as the sources describe them. Error pages change over time: before taking an example for granted, open it and look with your own eyes.

• Lego. A Lego minifigure with a worried look and a pun: the tone is the brand's, playful, and the error becomes a chance to remind you whose site you are on.
• Pixar. The page uses a character from Inside Out, Sadness, and suggests the page got lost in long-term memory. It shows how a reference fans recognise turns the error into almost a gift.
• GitHub. Cited as proof that simplicity, combined with developer humour, can be enough.
• Mantra Labs. An animated astronaut floating towards the number 404, with an automatic redirect to the home page after about ten seconds.
• Dan Woodger. The illustrator's site shows a hamburger on roller skates holding an apology sign: humour consistent with his work.
• Novak Djokovic. The page asks whether you are looking for lost tennis balls: a theme tied to who owns the site.

For more examples you can browse the roundups from IONOS, UX Planet and Speckyboy.

What they have in common

Looking at these examples, the same three choices keep coming back.

• The theme belongs to the site, not to anyone. Lego does Lego, Pixar does Pixar, a tennis player talks about tennis. A joke that suits everyone makes nobody laugh.
• The error is not your fault. None of these examples says "you got the address wrong". The tone is always "something happened, we will help you start again".
• There is always a way out. Even the wildest page leaves a link or a button to go back.

My 404: a video game

On my site I took a more developer-like route: the 404 page is a small video game, Bug Invaders. Anyone who mistypes an address does not find a line of text but an invasion of bugs to shoot down: you move with the arrow keys, shoot with the space bar, and on a phone you drag your finger. There are a score, waves, lives and a high score.

The theme matches my trade, that of someone who fights bugs. And it gives the lost visitor something to do while deciding where to go, instead of a dead end.

Above the game, though, are the things that really matter: a clear message, buttons to go back to the home page or see the services, and the site menu always visible. The game is the fun, not the only thing there.

If you want to see it, open my 404 page. And if you manage to beat the high score, send me a message.

How to design a creative 404 that works

If you want to build one for your site, this is the list I follow.

1. Keep the basics. Clear message, menu, button back to the home page. If the site is large, add a search or links to the most useful pages.
2. Pick a consistent tone. Humour suits a playful brand, not every industry. When in doubt, stay sober and polished.
3. Do not blame the visitor. Better "this page no longer exists" than "you typed the address wrong".
4. Make it really return 404. An error page that returns 200 is a "soft 404" and confuses search engines.
5. Keep it light. Optimised images and, if there is a game, loaded only there and only in the browser. A 404 must not slow down the rest of the site.
6. Think of keyboard and phone. A game or animation must be ignorable without losing the buttons to move on.
7. Check it now and then. A 404 page that breaks unnoticed is worse than a plain one.

The most common mistakes

• A 404 that is not a 404: it returns 200 or redirects everything to the home page.
• A pretty picture with no links to move on.
• A joke that has nothing to do with the site.
• Heavy animations that slow down loading.
• Text that blames whoever clicked.

Why hire me

I have been programming since 1999, with more than 300 projects delivered and about 30 agencies as an external developer. When I build a site I also look after the details that are not obvious at first glance, such as error pages, messages and exit paths, because that is where you see how thoroughly a site was thought through.

If you want a site where even the error is done well, write to me: a chat of about 20 minutes, no strings attached, then a written, free proposal. The service is in websites that bring clients.