30 Creative and Clever 404 Error Pages
Most 404 error pages suck, but these company error pages prove they don’t have to.
An error notification is still a web page associated with your brand. Why not make the most of the opportunity to continue your brand’s messaging?
We’ve found 30 unique 404 pages that go beyond the basics. But, before we get into the list, let’s narrow down three elements that set these pages apart from the rest. These three insights can even be applied to your own 404 error page.
It seems standard practice for any 404 to blandly say “Sorry, the page you’re looking for is unavailable. Try X, Y, or Z again.”
While that copy is certainly polite, it’s expected and boring. Boring doesn’t grab attention.
If your brand has a particular voice, opt for copy that continues that voice. For example, if your brand uses characters (like Solodev’s does), add that voice into a 404 page. If your website uses largely informal copy, a 404 page with a formal tone will jar them rather than add to their overall experience.
Visuals stick with web users, even in inconvenient situations. Take the opportunity to find a fun image or visual element that both expresses your brand value while also adding more to a potentially boring page.
Copy and a visual slapped on the middle of a white 404 page is the customer service equivalent of having an insincere, unenthused waiter apologize for the delay in your food. The overall message might’ve been delivered, but the packaging of the message was lackluster. Break from the mold of traditional design and opt for unexpected elements on a 404 page. This could range from actual layout of the page itself to gamifying the error page.
These 30 error pages go above and beyond in one, two, or all three of the previous categories. Here’s our list if you need inspiration:
Spotify
Spotify uses a simple animation with its record player, adding both a relevant visual and a unique design element. Like a record scratch sound that indicates something isn’t quite working, the animated record stops spinning after a few seconds. The copy also references Kanye West’s signature “808 and Heartbreak,” keeping on trend with some of music’s biggest titles.
LEGO
Speaking of icons, this popular toy has an ‘iconic’ 404 page. The tone is happy, helpful and not frustrating. It looks like you can just talk to your friendly customer service LEGO man and get your problems solved! It does a great job of fitting in with the company’s overall branding message and imaginative marketing strategy. The traditional LEGO website also boasts a pretty hilarious 404 error page.
DashThis
Oh, DashThis, you know exactly how to please the Lord of the Rings fandom. This 404 page makes our nerdy hearts smile and laugh off the inconvenience. It’s so clever and so detailed, even the top of Mount (404) Doom reaches 404 on the y axis. It doesn’t take itself as seriously as the Fellowship did, and it does a great job of combining copy with smart design.
GitHub
Of course there are more fandom-related 404s on this list! GitHub transforms one of cinema’s most iconic phrases into a clever 404 page. And if you have no idea who Obi Wan Kenobi is or you’re not a Star Wars fan? Then “this is not the web page you are looking for.”
IMDb
Speaking of famous lines, leave it to the Internet Movie Database (IMDb) to have one of the best 404 pages possible. It might be a simple set up, but it features a movie quote about either something being lost, trying to find something, or quite literally talking about the internet. We can’t imagine how long it took to find all these options, but we certainly appreciate the creativity.
NASA
Nasa’s 404 is exactly what you’d expect from Nasa; it’s relatively lighthearted if you’re a fan of cosmic humor and it also fits in really well with the organization’s tone and branding. It’s a simple reminder that there are bigger problems in the galaxy outside of a lost web page.
Romain Braiser
This 404 page from French developer Romain Braiser is one of the best examples of gamification we’ve ever seen. Wow. If you stay too long on the page, you risk sacrificing 404 lemmings… unless you’re skilled enough to save more of them with tiny yellow parachutes.
imgur
Imgur doesn’t take itself too seriously given that it’s one of the resident gif and meme capitals of the internet. This error page plays off of Scooby Doo silliness with the roaming eyes of the animals in the paintings watching your cursor. It’s a fun, simple animation that adds something extra to the page.
Videotron
French company Videotron tapped into another universal truth: you can never go wrong with unicorns. Sometimes eccentric and irrelevant copy works if it’s to lighten the mood. This is one of those instances.
NPR
Educational and witty, this 404 page is visually what you’d expect from NPR. However, the real surprise is if you dig into the unexpected humor of the copy. That slight joking tone from a relatively “serious” news outlet is a refreshing change of pace.
Amazon
Sure, Amazon’s 404 might be visually somewhat plain, but Amazon does what it does best and that’s give the public what they want. And they offset the inconvenience of hitting a 404 with puppies. Really, really cute puppies. Seriously, if you refresh the 404, you get more puppies. All of these 404 puppies belong to Amazon employees and come with additional (and adorable) descriptors of them.
Huffington Post
Again with the puppies. It’s something to make us smile when a 404 page would rather make us frown. And just like Amazon’s puppy post, Huffington Post gives you a new happy pup with each refresh.
Modcloth
The online vintage clothing retailer uses ‘vintage’ copy and maintains the old-school and carefree vibes echoed throughout the website. The simple, text-based design also leads readers to check out a featured dress or special item further down the page.
The Australian
The Australian’s 404 error page is not afraid to get slightly political. The news outlet cleverly reconstructed their 404 error to sound exactly like a bumbling politician’s quote. Each time you visit the page, you’re promised a new and laughable quote.
PIXAR
It’s one of the most creative groups in film. Of course their 404 page reflects a bit of that creativity. And with a bevy of characters from which to choose, Pixar could leverage any character they wanted to be the face of their 404. Using Sadness from Inside Out seems like the perfect pairing.
Umbro
Umbro uses a clever look to say “something is broken” not with words but in design.
Distilled
Distilled’s brilliant error page uses copy and a simple design to give users a laugh. The haughty copy tone isn’t what you expect, and that’s what makes this page so effective. Also, bonus points for the subtle inclusion of Distilled’s logo coming out of the pipe.
Kualo
Gamifying 404 pages are a smart way to keep people engaged with your website. Kualo not only offers up a version of Galaga (or Space Invaders or Galaxian), they also give a discount code to those who make it to certain point threshholds. (And this is easily one of the most addictive, simple games we’ve come across in a very long time.)
MailChimp
404 Errors are like unexpected monsters to user experience. MailChimp tapped into that feeling of unease with their 404 page which features a zombified incarnation of their signature chimp. The rolling fog animation is a nice touch.
G2Crowd
Like MailChimp, G2 Crowd includes a signature company character in its error message. It’s cute, simple, and a great way to unexpectedly involve storytelling and literal character in a website asset.
Playbill
Playbill’s 404 page maintains the iconic design of its brochures while maintaining the highly-theatrical tone woven throughout their branding.
Shutterstock
A simple showcase of how even stock photos can be used to spruce up a 404 page. Rather than have a separate image behind or beside the copy, the image becomes the copy. It proves that the look of everything is up for grabs — even how your web visitors visualize numbers.
Hugo Ware
Sometimes, you feel like your request got lost in the 404 vortex, and that feeling is precisely what Hugo Ware brought to life in this page. The animation isn’t anything too complicated, but the idea is so simple that it gives web visitors a chuckle while also leaving them saying “hey, that’s cool.”
Fandango
Minions might be some of the most “ugh”-inducing characters of recent films, but they certainly grab attention. And it doesn’t take much imagination to conjure up a story that a few minions goofing off ultimately led to a 404 error.
‘Jurassic World’
Dinosaurs took out your chances of finding the correct webpage. It’s a great visual paired with clever copy that reflects the creativity found throughout the franchise. It’s simple, urgent, and makes you want to get out of there as fast as you can.
AMC Theaters
The copy is simple, but it reads like a director giving feedback. And in a sense, that’s exactly what 404 pages are meant to do — direct website visitors back to where they need to be.
Email Center UK
Sure, this 404 page is hilarious if you’re not one of the four developers on the “chopping block” at this UK-based company. Clicking on each name gives you a bit more detail about the developer and the company as a whole.
Blizzard Entertainment
The team behind the enormously popular Warcraft games showcases an impressive design and funny content that turn a traditional error page on its head. Rather than apologize for the issue, the Blizzard group put the blame on the user. And, given that 404 errors often occur as a result of user error, it’s a pretty smart flip of the script.
Star Wars
Of course they have a great 404 error page. The Star Wars franchise is so detailed and massive, that it only makes sense they would’ve built a website empire as expansive as its cinematic empire. It’s a great combination of design, images, and copy all unifying to further brand tone and messaging. This is definitely the 404 page we’re looking for.
Solodev
We wouldn’t take a critical eye at other companies’ 404 pages without turning that gaze on ourselves! We wanted to have a bit of fun with our 404 page by including the most mischievous Solodev crew member — Code Monkey. He won’t break your code, but he might be responsible for other things breaking… It’s a fun way for us to combine thematic copy with a visual element found elsewhere on our site.
What other great 404 error pages have you come across? Leave links to your favorites in the comments!
Need help tracking your 404 events? We have a tutorial for that! Check out our post on how to use Google Analytics and Tag Manager to track them and ultimately what tricks help reduce your web visitors’ run ins with 404s (and heartbreak).
Originally published at www.solodev.com.
Originally published at www.solodev.com on February 7, 2018.
