22 Awesome 404 Page Not Found Examples

No matter how well a website is built and maintained, 404’s will always pop up now and again. External sites and individuals may also link to non-existent pages which will throw up the dreaded page not found error.

Creating a custom 404 error page is a great way to showcase a brand and retain visitors that otherwise might bounce out of the site.

Explore the best 404 error pages we could find on the web in 2018:

 

#1 Gifted Geek’s Best 404 Page

https://giftedgeek.co.uk/

 

We think our 404 page not found is the best of the bunch, but we would say that wouldn’t we?.

Source

#2 Make it Funny

A humorous 404 page will make your visitors giggle and they’ll be more likely to remember your site.

In addition to the “return to mainland” link, we would add a custom search field.

Source

#3 Keep it Simple

We love the simplicity of this concept by Grant Burke, the link graphic on the carton of milk is a neat finishing touch.

Source

#4 Display Popular Links

Displaying popular links on the 404 page is good practice, as you can see here with AirBnB. We think 3-5 links works best, along with a custom search field.

Source

#5 Make a Statement

The Liberal Democrats, a UK political party, take a swipe at their political rivals with customised 404 error pages.

Source

#6 Dedicate Your 404 Page to a Good Cause

There are many charities and good causes that you could promote on your 404 error page. European webmasters and site owners can sign up to Notfound.org and then display information about missing children.

Source

#7 Go Geeky

Marvel has created an unusual 404 page with one of their characters holding an eyeball that rolls when the cursor is moved around the page.

Source

#8 Use Your Mascot or Character

We love the Lego 404 error page. It’s simple and humorous but also promotes their mascot and brand.

Source

#9 Deploy a Call to Action

Deploying a call to action, such as an app download, is a great way to keep your visitors interested in your brand. This example works because the page doesn’t overwhelm the visitor with excessive information. The page design is clear, concise and is a great way to increase app downloads.

Source

#10 Display a Gif

A Gif image can be used to convey some movement on the screen. The example above is of a game of table tennis.

Source

#11 Use a Popup/Exit Popup

Optinmonster suggests deploying an exit intent popup that’s customised for 404 pages. This is a great idea if you want to maximise conversions on your site. Just set the popup to trigger when the user tries to navigate away from the page.

Source

#12 Use Cute Animal Photos

Animals have been used in successful marketing campaigns all over the world and for good reason, people just love cute, cuddly pets.

Source

#13 Check Out Various Dating Websites

Dating websites have a reputation for creating unusual custom 404 error pages. Zoosk’s is playful, on brand, clear and concise.

Source

#14 eHarmony

The eHarmony dating site is another one that keeps the 404 page focused on the brand but also adds a punchline and a call to action.

Source

#15 Keep it On Topic & Simple

We love the simplicity of Nasa’s somewhat geeky custom 404 page.

Source

#16 Screaming Frog SEO Spider

Screaming Frog offers an SEO spider that can scan a site and detect broken links. It’s only fitting that they should have a unique 404 error page.

Source

#17 Think Big and Vast

This 404 error page looks like it’s just come straight out of a movie. It’s eye-catching and creative.

Source

#18 Display a Job Advert For a New Employee

Limpfish created this fitting job advert for a new web designer on their 404 error page.

Source

#19 Dog Studio

Dog studio is another site that matches cuteness with humour. We really loved this one!

Source

#20 Batman 3D

This 404 stood out for several reasons, it was quirky, on topic and the flashlight followed any curser movements on screen. A thumbs up from us geeks here at Gifted Geek.

Source

#21 Convey a Feeling of Being Lost

Jackrabbit is just one of many sites that convey a feeling of being lost. They also provide a download so visitors can use the image as a wallpaper.

Source

#22 Simple But Clear and Direct

We love Pluralsight’s custom 404 error page. It’s clear and direct.

Source

What Makes a Great 404 Error Page?

A good web designer of course!

If you’ve been struggling to come up with ideas for your site’s 404 error page, we hope the examples on this page prove to be helpful.

When creating your own custom 404 page do consider the following:

Branding – try to maintain brand awareness within the page content, use logos, colours or mascots if possible.

Make it funny – if you can make the visitor laugh, they’ll probably remember your brand.

Keep it practical – display your most popular links or even a search field.

Deploy a call to action – this is a great way to get email sign-ups, app downloads or anything else you want from the visitor.

Declutter – the best 404 error pages are those that don’t look cluttered with too many elements, links and distractions. Get the message across clearly and concisely.

Where Next?