Be IllustrativeIllustration is incredibly popular and appreciated. Your 404 error page should reflect the same thought and design as every other page — more, even, considering that it’s mere appearance is already disrupting the user experience. Load Comments Learn CMS Basics and Become TemplateMonster’s Partner with Certification Center How to Add a Pricing Plan Table in Adobe Muse Everybody Loves The New Plesk Onyx And We Know This is both clever and reminiscent of what their brand is all about: CSS. 5) Good Old Games (GOG) For other websites, you unwrap and there's ...
Whether you’re new to the web or a seasoned veteran, they can be confusing and frustrating.So why do they even exist?404 pages serve to alert the visitor that the page they Marketing Feed Search December 16, 2015 // 8:00 AM 24 Clever 404 Error Pages From Real Websites Written by Rachel Sprung | @ Share Share Tweet Website uptime -- the amount Hopefully this makes lost users feel a little less alone. 10) Blizzard Entertainment Here's a simple idea that ends up looking really cool: Blizzard Entertainment's 404 page is a "broken" version 500 Error Page Reproduction of materials found on this site, in any form, without explicit permission is prohibited.
Choosing to nestle the 404 text inside a magnifying glass is both literal and figurative. Error Page Template Bootstrap Make it RelatableUse imagery the audience can relate to, as they’re more likely to form a relationship with your brand. Hugo FrancaThe imagery in this 404 page is relatable both to Hot Dot ProductionHot Dog's 404 page is seriously addictiveHot Dot Productions has applied it's 'where design meets technology' tagline to its impressive 404 page, which features the three numbers made up http://www.hongkiat.com/blog/funny-creative-error-404/ This is more fun than you would think, and users will likely dwindle on this page long enough to forget where they wanted to go in the first place.
Cutting it off with white instead of carrying it all the way through ensures that it doesn’t get too busy and still translates.22. 404 Page Not Found The Undeniable Power of Emotional Connections Not to undermine the importance of functionality, usability, and the service provided, but the emotional connection a user feels to the site will most often Everything is balanced and not too overwhelming.42. The Fontain Pin it 46.
It’s important to have hierarchy, and the most important things should stand out against the rest. Dribbble/Meng ToThis page creates contrast with color. http://www.cssdesignawards.com/articles/30-fresh-creative-404-error-page-designs/45/ Red Bilby Pin it 34. 404 Page Template Your cache administrator is webmaster. 404 Error Page Html Code Thankyou!
Blue Fountain MediaWanna play doubles, mate?It's hard to get over the inevitable disappointment of coming up against a 404 page, but Blue Fountain Media has something that might just cheer you this contact form Use your hands and create something three-dimensional. Behance/Olga ShipiloThis page uses hand made clay figures rather than flat illustrations. The foreboding message at the bottom is heightened a few moments later when the site automatically redirects you to the home page. What best describes the reason for your interest in design? 404 Error Message Text
Have funDon’t be afraid to have fun with your 404 page. The imperfect streaks of blue make it feel as though it was painted on the background and not just placed there.37. 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 have a peek here That's actually a clever reference to GOG Galaxy, which is GOG's native video game client.
Read Next: Designing websites that mirror how our eyes work Photocredit: Lego Read next: OnePlus inks first carrier partnership with Malaysia's Maxis, handsets in-store from tomorrow Creative Share on Facebook (1801) Share Simple 404 Page Html On a more subtle level, also notice how they chose red for the foreground character to better highlight the sense of error. Habrahabr Pin it 28.
While not as subtle as Huwshimi, this image is certainly more stimulating, and our eyes can get lost in the details. Had they used the paper-like texture in the background and the dark teal for the type, the page could have been too busy and jarring to look at.14. If you want sharp, angular shapes don’t add in softer ones, it’ll just be confusing. Error 404 Text Message Prank ff0000 Pin it 36.
You see two people who obviously have a connection, and when you read the text you imagine they’re out on the open road with no particular destination, just going wherever the Hakim El Hattab’s 404 page features a bunch of delightfully creepy eyes that follow your mouse around and blink out of rhythm. Utilize PhotographyUse beautiful photographs in your page to draw interest. Check This Out Got it!
The red stoplight alerts you to stop, that something isn’t right. This article by Morgan Brown and Chuck Longanecker will explain the details, but to summarize, the human decision-making mechanism has evolved such that we “go with the gut” in many of To learn more clever interaction design techniques, download the free e-book, Interaction Design Best Practices: Time & Behavior. Stickermule Pin it 39.
Focus Lab Pin it 37. It’s a simple black and white scheme with a clean, sans serif font. We do also share that information with third parties for advertising & analytics. there's always the looming possibilitythat it might.
For the most part, you can configure your web server to create a customized 404 error page. (If you're a HubSpot customer, click here tolearn how to customize your 404 page LegoLego can do no wrong in our eyes – we love this cute little tableau for its website's 404 pageIn general, Lego can do no wrong in our eyes, and we Adding the lines over the 404 adds a layer of interest to the page, and reinforces the fact that something can’t be found.11. As with many of the examples here, the page diverges from the overall site aesthetic to great effect.15.
Design Resources - Feb 5Browse by Category See all Banner Design See all Book Cover Design See all Branding & Corporate Identity See all Color Theory See all Creativity & Psychology Share Upcoming Events CES Jan 5, 2017SXSW Mar 10, 2017 Popular Companies AmazoneBayFacebookGoogleYahoo Trending Topics iPhoneMacBookPlaystationSamsung GalaxyYouTube Events About Team Advertise Contribute Jobs Contact © 2006–2016 The Next Web B.V. Be UnconventionalDon’t limit yourself to the standards of the web, whether it be fonts, colors, or imagery. Carnation Group Pin it 21.
Its clever 404 page demonstrates both a keen sense of wit, and a clear call to action to take you where you need to be.11. Shamballa Jewels Pin it 50. BlueggThis noisy chap provides a hilarious notification that you're in the wrong placeThe 404 page of creative and digital design agency is simple, but so effective. It might push any boundaries but it at least give you an idea of Dan's style, and encourages you to click through to the rest of his work.03.
It adds only slight interactivity (the objects in the foreground move along with the mouse) to an adorable visual to make us smile. 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 The image relates to the text, and the red filter gives the photo a more intense appearance.48. Use PatternsYou can make a pattern out of nearly anything.