Home > Error Page > Custom 404 Error Page Design

Custom 404 Error Page Design

Contents

The contrast between the dark red and black adds more dimension, separating itself from the rest. 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. It’s broken, visually showing that the link you were trying to find is also, in fact, broken.09. Get HubSpot's latest marketing articles straight to your inbox. this contact form

The foreboding message at the bottom is heightened a few moments later when the site automatically redirects you to the home page. Gross, and pretty uncomfortable. Step Outside of the ComputerSimilar to the previous tip, step away from the programs for a little bit. You don’t have to use something in its pure, raw form. http://www.creativebloq.com/web-design/best-404-pages-812505

404 Error Page Template

Using robots.txt File Robots.txt file is useful when there are frequently changing sections on your webpage. Common Errors with a 404 Custom Error Page The most common error you will find is related to the URL. Powered by

Stay tuned Treat yourself Sit back and let the hottest tech news come to you by the magic of electronic mail. 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 personalizes the page a little bit, and ensures that visitors know what their brand does.23. POST is to tell the server that the data is following. Don’t Limit YourselfJust because you’re creating a page that will end up on a computer screen doesn’t mean you have to design it for the computer screen. 404 Error Page Html Code Even though it’s a bit odd at first glance, it works well.

It should tell users that there is an error (obviously) and what options they have to move forward from this page.What a 404 page should not have is a bunch of You must have access to the host server to do this. (That is not something we will go into here, but you can learn more about it from A List Apart.)Good It makes the decision making process much easier.Over to youNow that you’ve seen a ton of awesome examples of 404 pages, there’s no reason you shouldn’t have one as well. It's mesmerizing, cool, and a great showcaseof their design capabilities. 23) HomeStarRunner.com HomeStarRunner.com, home to a Flash-animated cartoon series, has had a series of hilarious 404 error pages over the years.

Often, the .htaaccess file is accompanied by an .hpasswd file for storing valid usernames and respective passwords. 404 Page Not Found The trail it left buzzing behind looks as though it was drawn by the end of the pencil (or the stinger). Bret VictorThis is not a page. Have Layers of InformationIf you provide lots of options on how to remedy the problem or where to go next on your 404 page, break it up so it’s less daunting.

Error Page Template Bootstrap

Consider thinking outside of the box and using a more tangible medium. Behance/Todd GoldsteinThis page uses different embroideries with various images on them. https://designschool.canva.com/blog/404-page-design/ Use your hands and create something three-dimensional. Behance/Olga ShipiloThis page uses hand made clay figures rather than flat illustrations. 404 Error Page Template If your design allows for it, you can even include both a search bar and a link to recommended content. 404 Error Message Text This is the message we put up to tell our site visitors that there are some website issues.

Source: Magnt The 404 page for Magnt is, essentially, a visual gag. weblink Makes you think, no?20. What is the 'this' that this apparent non-page is referring to? The inner child in us emerged and we must admit to playing this repeatedly, while crying a little with laughter. 500 Error Page

You will be displayed with the Internet Options dialog box. Likely this will happen as a design element that includes a header or footer that matches the rest of the site.Minimal information otherwise. The graphic is simple and the concept -- a missing link on a milk carton -- is fun and clever. 18) Moveline As if the graphic on Moveline's 404 error page navigate here AirbnbIf you drop ice cream on the floor, clean it up, right?This 404 page from couch-surfing behemoth Airbnb features a delightful animation that holds lessons for us all about ice cream

The pigeon making direct eye contact speaks to you, giving you options of what you can do from this point.07. Error 404 Text Message Prank The flat colors and simple shapes work well together and create a scene. 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

It creates a theme and can simplify your design process by restricting yourself from using too many colors. Behance/Alessandro CeporinaThis page uses various shades and tints (darker and lighter tones) of

Another added element is the factor of surprise — this kind of out-of-the-blue reference is sure to be remembered if you weren’t expecting it. This training will add the web’s most popular programming language to your resume TNW Deals Pixel Pals are the perfect stocking stuffer for the geek in your life Bryan Clark Watch Go to Tools Menu in the Internet Explorer and click the Internet Options. 2. Simple 404 Page Html Rather than having something super technical, the sheep is the one responsible for the mishap, having pulled the plug (figuratively) on the page you were trying to find.10.

This code will send an email notice whenever the error page loads. Replace "yourdomain.com" with the URL of your website. 3. Experiment with how things change once parts are missing or added. Dribbble/Fabricio Rosa MarquesThis 404 page is simple. http://digitalezines.com/error-page/creative-error-page-design.html Hakim El Hattab’s 404 page features a bunch of delightfully creepy eyes that follow your mouse around and blink out of rhythm.

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 Don’t Overthink ItJust because you want a unique 404 page doesn’t mean you have to pull out all the stops and create something completely innovative. For Instance, Support instead of Support 404 Error Pages Overview HTTP Status Code Origin of Status Codes List of Status Codes Meaning of 404 Content of a 404 Error Instead of treating the page as an end all, they used it to its full advantage, and are more likely to keep the visitor than deter them.15.

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 IconFinder'serror page is simple, but delightful.