Tips and Examples for Designing Engaging Error Pages


Web designers and programmers spend half their life connected to the Internet. So, for us, it is not easy to grasp the idea that there are hundreds of millions of people out there who do not understand what a 404 Error message is. Sure, even most non-technical people who comes across 404 error messages, but they simply hate it without really understanding it. Usually, these messages are the browsers way of saying to the users, “Sorry, I cannot find anything on the address you have entered.” But this is what far too many users see: “This website sucks. What are you doing here?”

Whether the website has gone down or the user has typed in an invalid address, you don’t want him to hate your website when he sees the error message. So, just how do you make 404 Error interesting, fun and useful for the visitor? Here, we shall take a look at funny and creative error messages and graphic designs that make the readers laugh and/or inspire them to check out other parts of the website.

1. A List Apart

A list apart: best error pages.

The error page for this site serves two opposite purposes at the same time – it provides fun and entertainment to users through a slightly annoying but apt GIF, and at the same time the content swiftly tells the readers what the can do to find pages that they actually want to view. I also love how they are making money by placing an ad even on the error page.

Tip: Funny always works (but avoid it when designing for the neighborhood undertaker!)

2. Lark News

Lark news 404 error page explanations.

Lark News is a funny website. Most people visiting this website are looking for something funny. And not just general funny stuff – the site satirizes evangelical Christianity and most of its readers are, naturally, atheists. So, when they see this error page they are going to love it.

Tip: Any page can be an opportunities to hook readers to you website.

3. Homestar Runner

Homestar Runner contains a creatively designed error page.

If you are selling cartoons and comics, it is nice to have an error page that your audience can relate to. While this error message may freak some people out, it has an awesome tone. And it is an error pages the most visitors will read at least once.

Tip: Sometimes, you can jump out of the box and impress your audience with outlandish designs.

4. Expansion Broadcast

Expansion Broadcast

This one is an in-your-face error message that gels well with the personality of the website. While you cannot follow a similar approach for a business website that you are designing, you can learn a lot from the form underneath the message. Another impressive aspect of the message is the consistence of the tone – it is rough and funny at the same time.

Tip: Rude error pages don’t work, but for some clients they do (if they are a bit funny).

5. Fluther

Fluther has a creatively designed illustration on 404 error page.

This is a site that helps people find answers to personals problems through the power to collective thinking. A large part of the websites audience comprises teens and preteens. The error page does a great job of creating an image of a kid lost in a vast place. The clear and simple buttons that take users back Home or to the Contact Us sections are well placed too.

Tip: Error page designs can even be used to show a benevolent attitude (or inspire any emotion).

6. Retard Zone

Funny error message in the 404 page.

The wacky and crazy image, in conjunction with over-the-top content is a perfect fit for a comedy site. What I love about this page is that although it is an error message, it seems like a natural part of the website.

Tip: Consistency in design and style is a good thing – even when it is carried over to error pages.

7. Under Consideration

Simplicity always works in error pages.

Most websites forget that even error messages can be pretty useful for promotional purposes. After all, the visitor is already there on the page. On the right hand, you have a well-designed banner that takes users to a other, interesting destinations. This ensures that at least a few visitors get funneled to sites affiliated with the website.

Tip: A useless page can still be used to funnel visitors to useful pages.

8. Lileks


There is an important lesson to learn from the error message on this websites – it is always a good idea to keep the tone of the content and design for the error page consistent with what you have on the original website. The error message on the page, coupled with the simple back button, is bound to bring a smile to the faces of the interested visitors.

Tip: Funny and retro stuff is hot as long as it matches the general tone of your website

9. Zivity

Sometimes, you have to do something out of the ordaniry in error page designing.

I love the message on this page. “Something bad happened (but we still love you).” Apart from the attractive graphics and the engaging message, the prominence of the bars in the banner also impress me. This makes it very easy for the user to quickly go to whichever part of the website he wants to go to.

Tip: Punchlines and repeatable, human images are not only for the home page – they affect the viewer positively no matter where she is.

10. CSS Tricks

Error pages don't get better than CSS Tricks.

This one is my favorite. I couldn’t stop smiling when I came across this error message. While it doesn’t offer any useful information to the uninitiated, it doesn’t matter as this website is visited only with tech-savvy people. I especially love the message that is displayed when you hover above the tab in the browser, “You’ve Ripped a Hole in the Fabric of Internet.” This is the kind of error page I don’t mind at all.

Tip: You don’t needs rules, really – just know your audience and design to impress!

In conclusion, I would like to take inspiration from the creativity and uniqueness of all these error page designs. As web designers, we need to keep on thinking hard on every project for every page, to offer a good experience to users. If we can do it with creativity and uniqueness, like the creators of these pages have done, we can engage more visitors and turn challenges into opportunities.

create free website wix below post

Further Related Readings

  1. lionleaf llc June 5, 2013 at 1:36 am

    You should strive, above all, to be both clear and engaging in every aspect of web design.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved