You would have likely stumbled upon a 404 page at least once (or a hundred times) when browsing through the world wide web. These pages are marked as errors or “404 not found”, signaling that a page on a website no longer exists on their server.
However, there are other reasons a 404 error page may pop up - it can be because the content was deleted off the page, the URL was incorrect, the server connection encountered an issue, or that the domain does not exist anymore.
404 error pages were often overlooked but nowadays, these landing pages have evolved with design. Without design, it would simply be a blank page with a generic 404 error message that can come off as boring or frustrating for the user, causing them to bounce out.
This is why more brands are putting thought into the way their 404 error pages are designed. These days, 404 pages are reimagined with elements such as animation and quirky copies that allow users to engage with the brand better, or simply be entertained.
Make 404 pages fun and engaging with animation
Great design has been a common theme when it comes to 404 pages, but many brands are taking it up a notch with animation. The smart use of 404 animations turns a dull error page into a brand piece to engage the user, or drive them to other web pages.
You can also add additional tools such as a search bar, page links, or a call-to-action to lead them around the site, rather than out of it.
So, here are 12 examples of 404 error landing page designs that are anything but boring.
1. Using humor in relation to the error narrative
Humor has always been a great tool for brands when used correctly. In this example, the copy itself pokes fun at the error with a headline and narrative that playfully states that the user has stumbled upon “the edge of the universe”. This copy is accompanied with animation of an astronaut floating in space holding a mobile phone, indicating that the page is unreachable.
2. Airbnb stays cute with simple animation
Airbnb's 404 landing page uses simple animation here, where the girl’s ice cream falls off the cone and her facial expression changes from happy to shocked. The page also links to other pages on the website to help navigate the user around.
3. Smart 3D animation to drive interest
This 404 animation is made with 3D elements that turn the numbers into something resembling a satellite station. This 404 animation uses elements of transportation and white domes that look like satellite dishes - this could be interpreted as data being moved around in line with the error page.
4. Mailchimp is embarrassed
Isn’t this adorable? Mailchimp places their copy front and center to admit that they lost a page, followed by an animation of a horse (or a donkey?) sticking its head underground from embarrassment.
5. Turning 404 into characters
This would work well with travel websites. The animation aptly starts with a search bar showing a travel inquiry. Before it can finish typing, it transitions to the 404 scene where the zero is a sunset and a number four chases after the other. This is as though they are on a tropical getaway - a well-played move on the travel element.
6. Keeping it simple but interactive
See the Pen Daily UI #008 - 404 Page by Rafaela Lucas (@rafaelavlucas) on CodePen.
This is a pretty simple but engaging one - the cylindrical blobs behind the numbers are animated to move left and right. As you move the cursor over the 404, the elements move about - it almost looks like a petri dish of creatures trying to configure their way through.
7. Keeping it fun with a caveman
See the Pen 404 page by Jen (@affectionatelettuce) on CodePen.
This shows a caveman biting a cable that indicates he is the reason why the page cannot be found. The use of a caveman is apt as his curiosity probably led him to break the cable because they did not exist in his time. Fun animation like this always entertains.
8. The 404 is lost in the dark
See the Pen error page 404 by Swarup Kumar Kuila (@uiswarup) on CodePen.
We know without light, a ton of things are bound to be lost. This uses that to its advantage as the page cannot be found. The light is animated to swing back and forth to shine light on the almost hidden 404 message.
9. Making 404 into an unknown galaxy
See the Pen 404 galaxy not found by Rémi Denimal (@remid) on CodePen.
This is a minimalist, yet eye-catching 404 page. The use of animation with the number four and zero floating in zero gravity imitates an unknown galaxy - a galaxy which you are bound to be lost in if explored. The copy is also in line with this as the call-to-action asks the user to “go back to earth”.
10. Sketch’s 404 abduction
What is web browsing without our cursors? Nothing, and this plays on that. Sketch’s 404 page playfully implies that because the cursor is gone, the page cannot exist to be browsed. It follows with two call-to-actions where one is to a support section, and another to the homepage.
11. Spotify stays on-brand
Music is a way to experience emotions and here, it plays on that narrative. The copy “404 and heartbreaks” next to an animated spinning record showcases what music means to most people. Simple, but definitely on-brand for Spotify.
12. Blizzard Entertainment entertains with a murloc lost in a blizzard
Blizzard Entertainment’s 404 page is clever. Being a gaming company, it uses an animated murloc (a character in World of Warcraft) lost in an actual blizzard as a play on its brand name. It also lines up with the “page not found” messaging. The call-to-action itself uses another in-game reference – a murloc is also known as a gmmmlmrmrgmg.
Create 404 pages easily with Lottie animations
Creating animated 404 pages is hard – if you are creating animations from scratch, that is. But you can make an animated 404 page even if you have no knowledge of motion design.
Lottiefiles offers free customizable 404 animations that you can use for your page. These Lottie animations work on both web and mobile platforms to make it easier for you to integrate your 404 pages seamlessly for iOS, Android and the web.
You can also customize the animation according to your brand or the desired visual aesthetics. Once you land on a Lottie animation you want, you can toggle the animation speed, background color, color palettes and more.
To add animation to a web page with Lottiefiles, check out our guide on adding Lottie animation to a web page.
