Call us 7am to midnight (GMT)
02037453658

Website Trends: Custom 404 Pages

  (by )

Custom 404 pages are one of the latest trends in web design.  404, or error, pages are often overlooked by web designers, with the majority of site owners defaulting to standard pages. However, custom 404 pages are becoming increasingly common, and more and more site owners are creating unique error pages for their personal and professional websites.

Custom 404 pages vary from simple and informative to abstract and irreverent. Whilst looking for examples of custom 404 pages, I found a clear difference between the pages for professional websites and personal sites:   404 pages for professional sites, though often quite creative, usually offer solutions to help users find the pages they’re looking for, while the error pages for personal sites tend to be more humorous or abstract.

To help inspire you to create your own custom error page, I’ve rounded up several examples of custom 404 pages from live websites.  I’ve also included links to tutorials to help you create your own custom error page for your site, even if you use Joomla, WordPress, and Magento.  Plus, I’ve found some templates you can customise to make your own 404 page!

Error 404 Page Examples

Free Association

free association 404 page example

This custom 404 page from Free Association uses a humorous image and a quote from the technical director to express the frustration broken links can cause.  This 404 page includes an explanation of what may have happened, as well as links to the home page, portfolio, and an email address for help.

Electric Pulp

electric pulp 404 page example

Electric Pulp’s simple 404 message is humorous and straight to the point, and it scores extra points for offering a link to go back to the homepage.

SVN2FTP

svn2ftp 404 page example

This custom error message from SVN2FTP gives quite a random explanation of what went wrong, and the layout is similar to the rest of the site, which helps with usability and branding.

6Wunderkinder

6wunderkinder 404 page example

By turning the rocket on their homepage upside down on their 404 page, 6Wunderkinder comically alludes to the ‘disaster’ of going to a broken link while using the error page to extend and reinforce their branding.

Barley’s

barleys 404 page example

Priding themselves on their large beer selection, it is only fitting that Barley’s error page includes several bottles of beer! With some anonymous quotes to add to the amusement, this 404 page also offers solutions to users.

V Travelled Blog

v travelled blog 404 page example

The  text and imagery of this 404 page is an extension of Virgin’s branding, while the ‘correction’ adds some humour to the page.

Yellow Bird Project

yellow bird project 404 page example

The Yellow Bird Project continues their quirky style onto their error page. A simple message with their logo and a link to the home page is all that is needed.

Shopify

shopify 404 page example

By adding an annotated error message, this relatively straight-forward page from Shopify offers some dry humour to visitors.

Toggle

toggle 404 page example

Toggle’s 404 page contains an image and text likening a broken link to mixing colours and whites in the wash, making their error page an opportunity to show off their design skills and offbeat approach.

Lord Likely

lord likely 404 page example

Written by Lord Likely in the same manner that appears across the rest of the website, this 404 page provides an amusing  take on what may have happened.  By using the same layout on the error page as the other pages of the site, users can easily navigate to the home page or search the archives.

Get Finch

get finch 404 page example


Finch‘s 404 page uses the same simple style found on the rest of their site.  While accepting blame for the error, they offer a link to get users back to the homepage.

Good

good 404 page example

The 404 page for Good includes an ASCII art image and message to tell users they’ve clicked on a broken link.

Simon Collison

simon collison 404 page example

Simon Collison‘s error page includes a compass and an message to communicate that the user is lost.  By providing links to the homepage, journal and archives, this 404 page should help a wayward visitor find their way.

Tasty Planner

tasty planner 404 page example

Staying true to their website, Tasty Planner‘s 404 page continues their cooking theme with this cute illustration, and they even include a link to recipes for cookies as consolation for the error!


Elitist Snob

elitist snob 404 page example

This 404 message from Elitist Snob keeps with the tone of the website’s content, and it tells users what may have happened and how to get back to the homepage.

Spoon Graphics

spoon graphics 404 page example

This unique image from Spoon Graphics is fun and gives the site owner another chance to show their talent. The image does the talking with a simple message underneath to help direct visitors back to where they want to go.

An Idea

an idea 404 page example

An Idea features a quirky illustration on their 404 page, which makes this site’s error page stand out from the rest.

Doejo

doejo 404 page example

Doejo‘s 404 page features their rocket icon, as well as a witty header to grab users’ attention, but they also offer options to help solve the problem.

Trent Walton

trent walton 404 page example

Trent Walton‘s 404 page includes a simple amusing message, as well as a promise to make the page more interesting in the future.

Biggest Apple

biggest apple 404 page example

This mock dictionary definition feature on Biggest Apple‘s 404 page is very original, and the attention to detail adds to the comic effect.

Custom 404 Page Tutorials

To help you create your own custom 404 page, I’ve rounded up links to tutorials that explain exactly what you need to do. I’ve even found some tutorials on creating custom error pages for Joomla, WordPress, and Magento, so you don’t need to have an HTML site to have a custom 404 page!

Creating an Error 404 Page

This tutorial is designed to help WordPress users make custom error pages for their blogs and websites.

Creating a Custom 404 Error Page
From the Joomla Documentation website, this tutorial offers clear instructions on how to create a custom 404 page.

Customising Magento’s Error Messages
MageBase is a website aimed to help Magento users, and this blog explains how to customise the default Magento error message.

How To: Create a Great 404 Page Not Found Error Page
This is a great tutorial from Conversation Marketing, and it includes screenshots as well as easy to follow steps.

Custom 404 Error
HTML Source doesn’t offer a step-by-step process, but it does include a lot of detail to help users understand what they need to do to create custom error pages.

How to Create your own Custom 404 Pages
This tutorial by Web Design Library is aimed at beginners using Dreamweaver, and it offers clear instructions.

5 Error 404 Page Templates

Fresh 404 Error Template

fresh error page 404 website template

This custom 404 page template from Design 3 Edge features a simple design with a fun image. The search bar helps users find what they’re looking for, and this template even includes a place for social media icons.

Error Template

error template 404 page website template

Another great template from Design 3 Edge, this time with the opportunity to include custom text.  This template also includes the option to link directly to popular pages, which should help users find what they’re looking for.

design 3 edge 404 page website template

This template from The Sweet Themes Co includes a great original design, using the the London Underground Tube map to communicate how far a user is from their desired location! Again, this template doesn’t offer a lot of information, but it’s still a fun 404 page template for personal websites.

Thanks to Rob from Pixel King Web Design for suggesting this post!

Are you looking for UK web hosting?  Check out our UK web hosting plans!

15 Comments

  1. On January 19, 2012 at 1:26 pm

    Festklanningar online said:

    Nice samples of 404 pages. I like the Tasty Planner! 🙂

  2. On January 18, 2012 at 7:40 am

    metformin dosage said:

    My favorite is the one with the subway map.Its always nice to see designers have a funny creative side when seeing these 404 error pages on serious company sites

  3. On October 28, 2011 at 11:28 am

    Julie said:

    This has to be my favourite one – if a bit on the creepy side (move your mouse):
    http://www.netmagazine.com/404

    It’s built in javascript/ rendered in canvas: http://creativejs.com/2011/08/creepy-404/

  4. On October 27, 2011 at 12:14 am

    Alan Gaver said:

    I love the “you are here” one from Sweet Themes.

    I have come across several amusing ones online, but I think its very important to think of the user. Humour is good, but menus should be made available and/or a search box as someone said above.

  5. On October 18, 2011 at 1:04 pm

    Baz said:

    Considering they’re always talking about creating sites for users and offering great user experiences, I’ve always found Google’s 404 page to be one of the most unhelpful on the web. Try visiting to see what I mean.

  6. On September 18, 2011 at 12:19 pm

    Patcelweb said:

    404 page can be personalized for SEO and can include search box to help visitors !

  7. On September 16, 2011 at 2:35 pm

    Promo Merchandise said:

    Some great ideas and inspiration to work from to build a custom 404 page. Its always nice to see designers have a funny creative side when seeing these 404 error pages on serious company sites

  8. On September 14, 2011 at 8:32 pm

    Elin@Klänningar online said:

    These are simply hilarious! Do you think I can borrow some of them for my websites? I don’t think I’m capable of coming up with these things. My favorite is the one with the subway map. It makes you go, “whaaaat?”

  9. On September 13, 2011 at 10:53 am

    commercial cleaning in Glasgow said:

    I experienced opening a site and there’s a pop up screen that says “Error 404”. I don’t think putting adsense on the page is good too because of the ERROR word itself.

  10. On September 8, 2011 at 7:02 pm

    Randall Murrow Wedding Photography said:

    Lots of great inspiration here! I’m imagining the “Oh no….” guy from Family Guy but he just wouldn’t work as a visual without accompanying audio.

  11. On September 8, 2011 at 2:36 pm

    Personalised Pens said:

    Some very good 404 pages, they are always funny to see. Its nice to see people taking the time and effort to be creative with their error pages

  12. On September 6, 2011 at 6:14 pm

    Bloggign Tips said:

    Putting Adsense on a 404 page is not recommended, it violates Google’s TOS. Adsense can only be placed on pages containing relevant content.

    This is why it can’t be placed on login pages etc.

  13. On September 2, 2011 at 9:09 am

    Dan said:

    Some are pretty cool – like the Arrrggghhh one 🙂 Just stumble + reddit this

  14. On September 1, 2011 at 10:29 pm

    Adobe Flash said:

    This might sound a little ignorant but can you or is it wise to put adsense on a 404 page?
    Adobe Flash
    please respond!

    Adobe Dude

    • On September 2, 2011 at 9:00 am

      Cat M. said:

      It’s technically possible to put adsense on a 404 page, but I’m not sure if Google would have a problem with it. It’s probably best to check with them first to avoid any problems.