Designers need to make sure users are engaged, content is well presented, navigation is consistent and the interface is slick. But no matter how bulletproof our projects are, it’s likely that users will eventually stumble upon a broken link.

This may not be the end of the world, and it may seem quite trivial, but what if we could use this moment to give users a better experience or even engage them to take new actions?

Although 404 error pages are generally disliked and overlooked by companies that think they shouldn’t ever occur, you’re better off treating the 404 page as another opportunity to surprise and delight your audience.

I hope this collection will inspire you to design a beautiful 404 page and give you a few ideas of things you can do to reinforce your brand when they hit the 404 wall.

Use Illustrations

404



This 404 shows characters lost in the illustration. It works well because it’s funny, and the consistent style and color palette make you feel like you’re not lost at all.

Tell users where to go

404
Airbnb’s 404 communicates the error in a humorous way, and it gives the user helpful links to other areas of the site, helping them find their way back.

Let users find where to go

Credit: MailChimp



MailChimp keeps its 404 simple. It has a similar functionality to Airbnb’s, but it offers a search field instead, so users can keep trying to find what made them get lost in the first place.

Keep the experience immersive

Credit: Red Bull TV



If someone gets lost in your extreme sports streaming, why not show them short extreme video clips?

Make fun of the situation

Credit: Bluegg



Creativity and humor are often connected, so the use of a funny viral video is perfect for a creative company.

Make fun of yourself


Making fun of yourself is a great way to ensure users feel good about having made mistakes of their own. Also, the way it calls the user to volunteer gives the page an extra purpose.

Use momentum



This 404 uses a trending meme to communicate the message in a very creative way. It’s a good example of using a meme’s momentum, but it means the idea may become obsolete after a short time, and require updates.

Use pop culture

Credit: Dennis Kramer



The use of iconic elements can be appealing to a large group of people, and make the experience fun.

Use variation

Credit: Shirley Wong



Having multiple options is a way to make the experience playful. The varying experiences can engage the user to hunt for other hidden messages or easter eggs on the site.

Be simple and concise

Credit: Braden Kowitz



You can still be creative even if the brand is too corporate for jokes. The audience may be too mature for illustrations or maybe humor doesn’t apply to the context, but that doesn’t need to prevent you from creating a nice experience.

Turn errors into opportunities with your 404s

For users to end up at a 404 is never ideal, but it happens. So don’t perceive it as a loss. Every engagement that you have with users is an opportunity to impress them, and 404s are no different.

The above examples prove that 404s can become an opportunity to strengthen your site’s impression on users. Depending on your site’s needs, you can design your 404 to express a brand’s sense of humour, redirect users in a specific way, or entertain them with surprise content.

About the author

Jônatas Vieira, United Kingdom
member since October 23, 2015
Jônatas is a Brazilian designer and digital art director with a focus on UI, UX, visual, and motion design. His passion is to design digital projects and interfaces that make technology simple for everybody. For the past six years, Jônatas has worked on a diverse range of projects and teams of all sizes. He lives for colors and forms, is obsessed with every tiny detail, and never stops working until the pixels are perfect. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in October 2017

Comments

Andrei Müller
Very nice (and funny) tips! When I encounter a 404 error like these, they always draw my attention!
Eqbal
Nice article, thanks for sharing. I would recommend using toptal 404 error page for `Tell users where to go` section. It's more descriptive ..
Victor Nogueira
Nice! There's also a GitHub repo keeping track of all those cool 404 error pages, check it out: https://github.com/lnfnunes/404-PageNotFound
Desmond Lai
Nice and clear enough to get the concept even just a brief glance
Petr Mlčoch
Nice examples , I like GIthub 404 too https://github.com/lnfnuness/404-PageNotFound
Jennifer Walker
I got a kick out of this one!
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Jônatas Vieira
Designer
Jônatas is a Brazilian designer and digital art director with a focus on UI, UX, visual, and motion design. His passion is to design digital projects and interfaces that make technology simple for everybody. For the past six years, Jônatas has worked on a diverse range of projects and teams of all sizes. He lives for colors and forms, is obsessed with every tiny detail, and never stops working until the pixels are perfect.