Home > Error Page > Good 404 Error Page Examples

Good 404 Error Page Examples

Contents

Example #29 – Hakim Takeaways from Hakim's 404 page: Creepy eyes that follow the cursor, wherever it goes, seem to be a innovative touch to a custom 404. A 404 error is a standard HTTP error message code that means the website you were trying to reach couldn't be found on the server.It's a client-side error, meaningeither the webpage You broke it" followed by "This page doesn't exist or some other horrible error has occurred." 11) Tin Sanity We couldn't stop chuckling at the at the animation on Tin Sanity's You can configure a web server to display a branded page with a better description and a search form. http://imagextension.com/error-page/funny-error-page-examples.php

That's the concept CSS Tricks was going for in their 404 error page. Interaction Design · September 13, 2016 For people who make websites. Search Bar: Provide a prominent search bar and describe what can be found in it, like in this case it says Find code, projects and people on GitHub. The colors relate to one another, further indicating that it’s supposed to be a bee.46.

404 Error Page Template

Example #5 – Heinz Takeaways from Heinz custom 404 page: Navigation Menu: Navigation menu must be kept consistent with the main website. Do you have a good Error 404 pages? Source: eHarmony Similarly, the 404 page for eHarmony uses interesting visuals while promoting the site’s theme of love (or lack thereof). Create DimensionLayer up different elements within your composition to create dimension and escape the flatness the web can often have. Behance/Dariusz SIn this page, the slicing knife reveals elements below the

You have an entire page you can do whatever you want with, why not tell a story? PostboxThere is cute little scene in this 404 page. They are: It doesn’t convey any information to your visitor about why he was shown the error page It fails to match with the other pages of your site It doesn’t Keep it ConciseYou can have a beautiful 404 page that is ridiculously simple. 500 Error Page revacsystems.com - - [18/June/2008:12:13:03 -0700] GET /download/windows/happiness.zip HTTP/1.0 200 9887 http://www.payoneer.com/ Mozilla/4.7 [en]C-SYMPA (Win95; U) Address or DNS revacsystems.com RFC931 - AuthUser - TimeStamp [18/June/2008:12:13:03 -0700] Access Request GET /download/windows/happiness.zip

Example #10 – HootSuite Takeaways from HootSuite's Custom 404 Page: Funny depiction of missing brand mascot on a milk carton. 404 Page Examples BlueDaniel What makes it good? Get request is for a document or program. http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/ Apart from matching visually with the rest of the website, it’s very original in that it provides a chart that may find an explanation for the encountered error.

First, you’ll need to set up a few variables: var strReferrer=document.referrer.toLowerCase(); var blnSearchReferral = false; var blnInsiteReferral = false; var str=""; var strSite = ""; Now, how are we going to 404 Page Not Found A mysterious image of the sheep appearing while rolling over the mouse at the center, intrigues the user conveying that something is wrong. What do you do now? His audience might find it funny and really unique that would make them actually remember this site in the long run or even share them on social media.

404 Page Examples

the galaxy. http://www.makeuseof.com/tag/build-a-great-website-404-page-20-examples/ This further enforces the brand and lends a creative touch.12. 404 Error Page Template Enter a keyword(s) in the search field above or try one of the links below. 404 Error Message Text To learn how to master the art of persuasive design, download the free e-book Interaction Design Best Practices: Time & Behavior.

Tweet534 Share1.2K Pin632 Share998Close Design SchoolBlogTutorialsTeaching MaterialsDesign courses About CanvaTourStoryJoin the Canva teamMediaEducationDesign CommunityCanva for Work ResourcesCanva for Nonprofits TemplatesFlyersPostersBannersInfographicsBook coversCd coversPresentationsSocial graphicsBusiness cardsLetterheadsPostcardsDesktop wallpapersRésuméCollagesGift certificatesMagazine coversMenus Create a designCardseCardsLogoFlyersPostersBannersResumesBrochuresPostcardsInfographicsLetterheadsPhoto CollagesBook http://imagextension.com/error-page/good-error-404-pages.php a cat. About Authors Masthead Style Guide Contact Sponsorships Follow us: RSS · Email · Facebook · Google+ · Twitter A Book Apart Mobile First & Responsive Web Design bundle. His audience might find it funny and really unique that would make them actually remember this site in the long run or even share them on social media. Error Page Template Bootstrap

There is no guiding text or video for the user, however, this animation makes the 404 error lighthearted and memorable. GitHub plays on this famous line in their 404 error message. 17) Grant Burke Freelance graphic designer Grant Burke shows off his design skills even on his 404 page. It doesn’t have to be too over the top, just be sure to find the balance that works best for you. Dribbble/Mitchell GeereThis 404 page for a dating website is the More about the author Thankfully, a little video game character is there togive visitors a place to go report an error if they want. 6) Magnt In this funnyerror message, Magnt pokes funat the fact

We’ll need to add some more conditions: if (!blnSearchReferral) { strSite = strReferrer; strSite = strSite.split("/"); strSite = strSite[2]; document.write("

You were incorrectly referred to this page by:

Win a Tinkerbots Advanced Builder Set! Links to the homepage. Apart from that it’s original in providing drink recipes. 4. Generic 404 Error Pages The generic 404 error pages, as you can see in the sample screenshot above, generally do not direct the web surfer on what to do next.

Source: Lego The Lego 404 page, for example, uses humor and a funny visual, but it also uses its iconic characters. links to social media channels and contact phone number.

© 2017 imagextension.com