Home > Error Page > 404 Error Page Examples

404 Error Page Examples

Contents

We’ll introduce you to a variety of tools and techniques born from human-centered principles. And the reaction of visitors when they land on your temporarily unavailable website can run the gamut -- from "taking it in stride" to "totally losing their minds." While there's nothing All data collected in the survey is anonymous. Source: Hakim El Hattab Emotional connections don’t always need to cute and cuddly. navigate here

The roundness of the clouds is carried into the typeface. The visual serves as a quick way to illustrate their point for those unwilling to read the description. 7) Bitly Remember Twitter's fail whale? The trail it left buzzing behind looks as though it was drawn by the end of the pencil (or the stinger). To get your designjuices flowing, this post will display some of our favorite website error pages.

404 Error Page Examples

Give Users the Power of Interaction Can’t make them laugh or impress them with your artistry? The orange color works so well because it relates to the orange image in the 404. Upon loading, you're greeted by a goat, who lets out the most almighty high-pitched scream, alerting you that the page doesn't exist. Shares Page 1 of 2: Page 1 Page 1 Page 2 If you're working on how to start a blog or website, don't forget the all-important 404 page – a standard

I'm good for now. 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 Just looking at this page brings back memories. 500 Error Page The foreboding message at the bottom is heightened a few moments later when the site automatically redirects you to the home page.

Box it InExperiment with boxing in your letters and numbers. 404 Error Page Template Red Bilby Pin it 34. Include a Search Bar — In the same vein as the above tip, include a search bar to help your user continue browsing without too much interruption. DotSilo Pin it More Load More Posts © 2007‐2016 Hongkiat.com (HKDC).

One more option is to make an error 404 page your little playground and creative space, where you can implement any your outstanding ideas. 404 Error Page Html Code Quite often 404 pages can be overlooked and treated as an afterthought. It makes light of an unfortunate situation and can point users to a place where they might get some help.Here’s how you can create an awesome 404 page for your site:01. This 404 page has all the right elements: fun, interactivity, and still some baseline functionality to get the user back on track.

404 Error Page Template

If they had spaced them out, the outer space effect would have been lost (the stars melting into the black).38. The colorful illustration is carried down into the text and creates little windows to peak through. 404 Error Page Examples The Venn diagram made us chuckle, and that’s a pretty clear emotional connection. Error Page Template Bootstrap The symbol could be literal or figurative as long is it makes sense. Dribbble/Ron EvgeniyThis page uses a broken pencil as symbolism for the broken link that brought you there in

Marketing Sales Where Marketers Go to Grow Subscribe Marketing Sales Agency Subscribe Please enter a valid email Please make a selection Thanks for subscribing! check over here This time, it's rabbits nibbling the cables -- a nod to their rabbit logo. 21) IconFinder Don't you hate it when webpages get lost in space? Fastcentrik Pin it 45. Use PatternsYou can make a pattern out of nearly anything. 404 Error Page Not Found

Here’s more – 50 Nice and Creative Error 404 Pages. Apart from design and writing, she loves all things beauty. Like many other 404 pages on this list, this brand is poking fun at the fact that getting a 404 error isn't that big a deal. 12) OrangeCoat If you're going http://comscity.net/error-page/500-error-page.html Creative Bloq ART AND DESIGN INSPIRATION Search How to Inspiration Advice News Reviews Features Magazines net ImagineFX Computer Arts 3D World Creative Pro Paint and Draw Topics Graphic Design Illustration Art

Specialized Pin it 20. 404 Error Message Text To learn more clever interaction design techniques, download the free e-book, Interaction Design Best Practices: Time & Behavior. Seriously cool.08.

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

They can go back home, enter in a search query, or visit the brand’s social media pages. William Csete Pin it 22. The character isn’t a fully developed and rendered masterpiece, but it’s fun and fits the situation at hand. Error 404 Text Message Prank One project, nine websites!

It’s simple, cute, and it reaffirms brand awareness. Don’t forget that Maslow’s Hierarchy of Emotional Needs still applies — make sure your brand assets complement the functionality and personality of the interface. But first, you might want to check out some of these posts: Creative Error 404 Pages – Part I Creative Error 404 Pages – Part II WordPress Error 404 Pages: Essential http://comscity.net/error-page/custom-404-error-page.html It adds only slight interactivity (the objects in the foreground move along with the mouse) to an adorable visual to make us smile.

Image Credit: Crayon 19) LEGO No copy needed on LEGO's 404 error page: They let their characters do the talking. Bret VictorThis is not a page.