Philip Westfall, November 13, 2017
Creative 404 pages are all rave these days.
Seems like web designers are constantly trying to one-up each other by making better and better versions of what used to be a generic error message.
A simple search on Google, Pinterest or Dribbble will bring up thousands of examples to help get your creative juices flowing.
...But wait - beautiful aesthetics are only half the battle!
The one thing that really sets a 404 page apart from the rest is the way it ties into your brand, products, services, and direct calls-to-action that re-engage your visitors so they continue exploring your site.
The following brands did a great job of producing custom 404 pages that check all the boxes.
Marvel puts their superheroes front and center on their 404 page. They did a great job at tying the error message back to a specific character. Added bonus, the page has subtle animations, and can be refreshed to view other characters. Genius.
So simple, yet so smart. 20th Century Fox leverages scenes from their movies to poke fun at the dreaded 404 page, as they do with this scene from ‘Revenge of the Nerds’. You can even get a little revenge of your own - by purchasing the movie at a discounted rate!
Why not showcase your product in action? Specialized uses one of their riders to explain their 404 page. Everybody makes mistakes, why not showcase one on your custom page?
Blizzard, a popular video game producer, takes the broken page to a whole other level. The menu, the screen - everything is broken. And it’s all your fault! Bonus points for a menu that still works and allows visitors to re-engage.
Dating sites are known for having great 404 pages. Eharmony’s is another great example of how a simple image and cheeky copy can turn frustrated visitors into potential customers.
The animated film giant has one of the most on-brand 404 pages online today. Sadness from their hit movie ‘Inside Out’ is used to explain the error message using concepts straight from the movie. Also, props for a beautiful design with lots of white-space!
Distilled’s 404 page takes a completely different route. Instead of going for minimal copy and hoping for a click, the page showcases two very dapper cartoon characters discussing the 404 error and what visitors can do next. So simple, yet so creative.
Yes, even website builders need a 404 page! The PageCloud 404 page aligns brand, product and context together as one. You're on a broken page, why not create one instead? Oh yeah, there is also a cloud in the background. Get it? PageCloud.
You can’t help but feel bad for airbnb’s animated girl who drops her ice cream in this 404 page. You don’t want to leave right away, that wouldn’t be nice! Instead why not click on a help link instead?
9GAG is known for funny videos, images, and gifs. Their 404 page showcases a well-known scene from Pulp Fiction, where a confused Vincent (John Travolta) is looking around for Mia (Uma Thurman). The subtitle: “There’s nothing here” and download our app to find what you’re looking for ties everything together perfectly.
The popular freelance illustrator, whose creations have been used by giants like McDonald's, adds one of his friendly burgers holding a sorry flag to his clever 404 page. Bonus? The subtle call-to-action, sending visitors to check out his other illustration work.
Talk about poking fun at the “error” message. It has to be someone's fault, right? Emailcenter’s 404 page asks you to choose which one of their developers should be fired for the mistake. Whoever you pick, you’ll see a funny group picture and relevant copy. Maybe next time they will add a redirect and save their jobs.
IMDb is one of the largest sources of movies, TV and celebrities. Their 404 page pulls several quotes from popular movies that have been altered to fit the context. Hit refresh and you’ll see a new quote with a strategic link to more information about the film.
Orange Coat’s 404 page has a clever flowchart to guide the “Happy Internet Traveler” to the information they were looking for. All you need to do is answer their YES/NO questions and you’ll be on your way. Bonus: their URL even ends with /dear-happy-internet-traveler - much friendlier than /error, right?
LEGO’s 404 page is another example that shows how your page can be: attractive, efficient and on brand without having to be overcomplicated. A picture, a line of text and a button to send users home. That’s it that’s all - and it still makes you smile every time you see it.
Because they offer scheduling software, TSheets decided to commemorate one the great scenes from Back To The Future where Dr. Emmet Brown achieves precisely 88 mph in the Delorean using his Flux Capacitor. Just like TSheet's software, this scene showcases the importance of accuracy and efficiency so you don't run OUTATIME.
What do you think of these designs? Which one is your favorite?
If you’re feeling inspired, why not learn how to create your own 404 page today? It’s easier than you think!