“PAGE NOT FOUND” — is probably the most annoying thing to look at, on a screen. This is a page nobody wants to land into. For the longest time this page echoed the words ‘disappointment’ and had always been notoriously referred to as the ‘last page of the internet’.
The idea of 404 came about from, you guessed it, a room numbered 404 that housed the web’s very first servers at CERN.
Just to give you some (not so pleasant) nostalgia here is one of the older 404 error pages we must have all visited at some point.
Surely, we have come a long way since then. Web designers have been adding colour to the world wide web both figuratively and literally. Now we live in a world where 404 pages are made to be creative and fun. These pages sometimes even act as a mascot to your main website and direct traffic to it.
Conveying serious messages in funny and innovative ways certainly sells and that’s exactly what web designers are wrapping their error pages with to give the user a rather pleasant experience.
Here are 10 examples of 404 error pages that we think have been brilliantly designed.
The Concept here resonates with the name of the website which is FlippingBook. This 404 error page tells you a story of a married couple that lost a page from a book in a chaotic household. Reminds you of a ‘Marley and Me’ kind of situation. The simple blue and white colour contrast with a few subtle colour variations do not seem too heavy.
Simple wordplay is used in the text that is perfectly woven around the concept. The navigation text is also simplified to the point. Navigation from the error page is shown at the bottom without driving too much focus on it. It provides a number of options to enter into the main website.
Overall this page serves its purpose along with being creative and definitely proves to be an escape from a usual error page that makes you go Sigh!
2. Behance.net
This page is not the error page of a particular website but is one of the designs made by a Visual designer, Michael Tsiraki.
But can we just talk about the marketing brilliance here? Designing an error page inspired from one of the most popular and loved TV shows of recent times is already a masterstroke.
For any stranger things fan, this page would take them back to the ‘the upside down’, and make them feel like they belong in a community that is quite universal. And everyone loves to ‘belong’ somewhere.
For someone without an idea of the show, (yes they exist), the page, in spite of using words like demogorgan and eggos, manages to convey the error message with a great design and makes apparent, the eerie/horror based theme of the page.
Run home is a great navigational CTA for a horror themed website and i always appreciate good wordplay. :)
3. CSS- Tricks
This error page is one of my favorites. You can see there are no words like 404, error, not found etc. In fact there is no text at all in the normal sense. Yet not a single person using a website like CSS tricks would fail to get the meaning of this page. It is a very domain specific error page and is reminiscent with what the website stands for, which is the web styling language CSS.
The concept of this page is to bring to light the fact that when a website link is broken, the developer has to look into the CSS coding which is the “behind the scenes” of a webpage. Hence the ripped webpage to show what is underneath it, is extremely clever.
4. Kwarter
Kwarter is a real-time mobile gamification platform and
I might be a little biased here because of my love for table tennis, but for a mobile gaming app, this page does it all right.
The error page first starts with making you feel guilty about landing into a broke page by asking you in bold letters — ARE YOU HAPPY NOW? But immediately takes a turn by taking the blame upon themselves, evident from the phrase — Our bad!
In table tennis, topspin is a very aggressive stroke, and it is ‘theoretically’ possible for the topsin to be aggressive enough to break the bat into two pieces. Hence this page has the perfect text and illustration. The navigational CTA is in context with the whole theme. It does not exactly make it obvious as to where the SERVE AGAIN button will take you, but leaves you with a curiosity to find out yourself.
5. Magnt
This is one of the very few error pages that has made me spend some time with it. Their first 404 error page with just the Venn Diagram went viral, and they decided to redesign it keeping the same concept intact. This page with the help of a Venn Diagram explains the concept of 404, then goes on to explain what a Venn diagram is for the non-math lovers. The overuse of text on this page is compensated by the bountiful information provided.
The CTA for homepage navigation is kept very basic and you are provided with a number of options for navigating to any part of the website.
Finally in the bottom paragraph, they pose a challenge for you to figure out the error in the error page.
Overall this is quite an unconventional and creative error page and we aren’t surprised it went viral.
6. Marvel
I know you are thinking of the Avengers, but this Marvel is a prototyping web and mobile app.
In last decade we have moved from simple text to GIFs and from simple images to videos, but in terms of communication, one of the most effective methods has got to be animation.
With a cute, captivating animation and simple text, marvel has managed to create a great error page for their website.
This site’s visitor is given two options. He can either go back or choose to play a version of the legendary game Pacman. The game is appropriately shaped in the number 404.
I would definitely play at least one game (and certainly get addicted) before I leave the site. Simple colour scheme and ample options for navigation are a great add on.
Email center uk got really innovative with their 404 error page. As soon you land on their website, you can navigate to other parts of the site, or, hold your breathe, you can virtually fire a member of the development team. Evidently an ongoing joke, this is a great way to encourage user engagement on their website. There is a message that helps you go back to the homepage if you’re in a forgiving mood. But what’s the fun in that?
This page doesn’t focus much on CTA, however the gimmick they pulled off here can certainly forgive that.
Are you curious to know what happens when you fire someone ?
Here it is,
9. Amazon
This article would be incomplete without an adorable dog picture.
Soju the Shih Tzu is here to apologize to you for not being able to find your page. Emphasising on the SORRY.
You can Navigate back to the homepage, search for something on the website.
Oh also forgot to mention, you can meet all the dogs of Amazon. Again a great user engagement method.
10. Medium
How could we leave behind our favorite website and daily dose of early morning reading material. Medium uses bold font for emphasising on 404, lets you search for choice of articles that you want to read.
Also for no apparent reason, you can read a few popular articles about being lost in general because why not?
CONCLUSION
The traditional error pages are definitely a snooze fest and new innovative designs for these pages are a must to be updated with new trends in the website world.
The list of 404 error pages mentioned above are indeed an answer to the question, how to keep visitors of a website more engaged?
Do you know of websites you stumbled upon that had a great error page? Maybe you loved the design, maybe it made you chuckle.
I would love to know your favorite error pages. Feel free to comment your thoughts below.
Like this blog? Share it with your friends as much as you can.
Build “pixel-perfect” 404 pages
Like Visual Inspector? Your friends would love it too.
Share this article as much as possible. This will help us grow organically and we will be thankful.
Siftery brings you lifetime subscription of Visual Inspector for just $49 — https://www.canvasflip.com/visual-inspector/siftery/
