40 Clever 404 Error Pages From Real Websites

Operating a profitable web site means staying alert for errors like damaged pages or sluggish efficiency. Nonetheless, generally there are issues that you simply simply can’t keep away from, and 404 errors are one in every of them.

A 404 happens when a consumer requests a web page in your web site that doesn’t exist, thus throwing a 404 error web page prompting customers to return to the proper place. Irrespective of what number of assets you place into guaranteeing your web site by no means goes down … there’s at all times an opportunity that customers might find yourself right here.

It is inconvenient, however a reality of life. And the response of holiday makers after they land on a nonexistent web page can vary from “taking it in stride” to “completely dropping their minds.”

Whereas there’s nothing you are able to do concerning the latter, you can make issues rather less of a ache by having a artistic error 404 message. This could do wonders to make your web site guests crack a smile in an in any other case irritating scenario.

To get your web site design juices flowing, this submit will showcase a few of our favourite web site error pages. Hopefully, you’ll take away a couple of concepts to snazz up your individual 404 message.

What’s a 404 Error?

A 404 error is a regular HTTP error message code which means the web site you had been attempting to achieve could not be discovered on the server. It is a client-side error, that means both the webpage was eliminated or moved and the URL wasn’t modified accordingly, or the particular person simply typed within the URL incorrectly.

For probably the most half, you possibly can configure your server to create a personalized 404 error web page. (In case you’re a HubSpot buyer, click on right here to discover ways to customise your 404 web page in HubSpot.)

Some personalized 404 error pages embody a hero picture, witty description, website map, search kind, or primary contact data.

The Greatest 404 Internet Web page Examples

Over time, web sites have discovered other ways to tell guests of a 404 error and channel them again to the proper place, some merely, some creatively, and a few hilariously. Let’s begin by taking a look at some artistic 404 pages, then take a look at some humorous examples which can be positive to please anybody who comes throughout them.

Web page Not Discovered: TK Artistic 404 Error Pages

1. Pipcorn

Whereas a 404 web page can simply stand out from a web site, Pipcorn’s error web page aligns completely with the remainder of the location’s branding. There’s a pleasant animated background, a pleasant textual content immediate directing guests to go looking the web site (full with a intelligent pun), and a bit of popcorn used because the “0” in “404.”

2. Spotify

Music streaming big Spotify has lined its bases with a intelligent 404 web page. With a witty pun off Kanye West’s album “808s and Heartbreak” and a report animation, the web site briefly entertains after which sends guests again to the web page they got here from.

3. Genially

One easy method to ease the strain in your 404 web page is so as to add a fast “Oops!” message — it helps your website really feel extra personable as you information customers again to the proper place. Within the case of Genially’s website, the web page additionally features a nifty illustration paired with some playful copy.

4. Adobe

As you’d anticipate, Adobe’s 404 error web page is each helpful and visually pleasing. It lists out fashionable hyperlinks that guests would possibly need alongside some cool digital art work serving as a visible metaphor for a damaged or misplaced web page. Actually, web sites ought to use visible metaphors extra typically.

5. Clorox

The 404 web page for Clorox cleansing merchandise rotates between three lighthearted photographs to sign to guests that they’ve made a misstep. It’s a wise use of branding so as to add a short delight second whereas serving to out misplaced customers.

6. Duma Collective

Different occasions, you won’t want a witty blurb — simply inform guests that there’s no web page on the deal with and allow them to transfer on. Leisure consulting company Duma Collective does simply this with its error web page, although it’s complemented by a background picture for some minor aptitude.

7. Chillhouse

Talking of aptitude, self-care model Chillhouse has put within the further work to reroute its guests in type. The 404 web page is branded appropriately and even takes guests on a little bit journey via a couple of picture stills earlier than they return to the homepage.

8. Bitly

In case you enter an incorrect Bitly hyperlink, you’ll be taken to Bitly’s 404 web page. We assume this occurs a good quantity, which is why the 404 web page will get straight to the purpose. It explains what may need gone unsuitable and prompts customers to go to the Bitly homepage if that’s what they’re after.

9. Ikea

Ikea’s 404 web page is equally minimalist however nonetheless manages to sneak some good branding in there. This instance exhibits that your error pages don’t should be elaborate to get the purpose throughout, however there’s nothing unsuitable with injecting some enjoyable both.

10. Moxie Design Co.

Certain, “blew up the Web” is perhaps a bit hyperbolic, however it tells guests that Moxie Design Co. doesn’t take itself too significantly with small slip-ups like this one. Additionally, a search bar is conveniently positioned on the backside to ship you in your means.

11. McKissack & McKissack

Ah, the traditional “we misplaced the web page” trick. Once more, a straightforward method to current a 404 with out alienating your viewers. In case you’re an company like McKissack & McKissack that manages many shopper interactions, clear and concise copy is crucial for your entire website’s pages, together with error pages.

12. CSS Tips

Ever ripped away a web site’s wrapping to see what’s beneath? That is the idea that CSS Tips was going for of their 404 error web page. That is each witty and paying homage to what the web site is all about: good use of web page styling.

13. Good Previous Video games

For different web sites, you unwrap the entrance finish and there is … simply the huge vacancy of area. This web page is a intelligent reference to GOG Galaxy, which is Good Previous Video games’ native online game shopper. Fortunately, a little bit online game character is there to provide guests a spot to report an error if they need.

14. Canva

For one thing a little bit totally different, take a look at Canva’s 404 web page. It contains not simply an error message, however a nifty tile puzzle guests can play for some temporary leisure. There’s no hurt in letting your guests slack off for a few minutes, proper?

15. Innotech

Just like Canva’s method, Innotech contains a Pong-esque sport on its 404 web page to supply some temporary leisure. Chances are high you’ll bear in mind a web site like this. Plus, the enjoyable detour enhances a very spectacular web site — significantly, whenever you’re completed enjoying, head to the house web page and take all of it in.

16. Myriad

Video company Myriad has opted for a unusual, on-brand 404 web page design that mimics the traditional SMPTE shade bars that seem on previous tapes and TVs. It’s a humorous throwback to older applied sciences whereas representing the extra fashionable downside of a nonexistent internet web page.

17. KonMari

Recognized for her fashionable cleansing and group strategies and model, Marie Kondo has introduced the same really feel to her web site’s 404 web page. The copy briefly and humorously harkens again to her tidying philosophy — a small however well-branded element that followers will acknowledge.

18. BrandCrowd

Not solely is the illustration on this error web page detailed and interesting — the copy is intelligent, too. We love the reference to the Semisonic music “Closing Time”: “You possibly can click on wherever else, however you possibly can’t click on right here.”

19. Scorching Dot Productions

Scorching Dot’s error web page stays true to its tagline, “the intersection of latest applied sciences and design.” The web page is animated by a whole bunch of tiny dots that change route in response to the place you progress your cursor. It is mesmerizing and an incredible showcase of the company’s design capabilities.

20. OrangeCoat

If you are going to give an error message, why not entertain the consumer for a couple of seconds when you assist them out? Following a pleasant greeting, OrangeCoat provides a flowchart that really helps customers work out why they reached an error web page within the first place.

21. Ervin & Smith

This 404 web page does greater than redirect customers again to energetic pages. As a substitute, Ervin & Smith’s 404 web page invitations you to scroll down and be taught why you want a digital advertising and marketing company, and why to decide on Ervin & Smith specifically, capped off with a contact kind. True to its mission, this company exhibits that any web page is usually a conversion alternative.

22. DayCloud Studios

… or, your 404 can simply be a spot to waste time for a minute, as will be seen on the web site for DayCloud Studios. Transferring the cursor across the display screen reveals a 404 message illuminated by lasers capturing from a cat’s eyes. As a result of why not?

23. Headspace

One other occasion of a web site neatly incorporating its model messaging right into a 404 web page — guided meditation app Headspace makes the hassle to calm customers, encouraging us to take a deep breath, then return to the primary website.

24. Wildwood Bakery

Some web sites up to now have built-in intelligent branded copy of their pages, whereas others have hosted full-blown on-line video games on theirs. However, there’s nothing unsuitable with a short push again in the proper route. Wildwood Bakery’s beautiful website retains issues quick and candy (actually).

Web page Not Discovered: TK Humorous 404 Error Pages

25. Astuteo

Design company Astuteo’s 404 web page is an ideal stability of stylish visuals, humor, and helpfulness. The minimal structure provides customers the knowledge they want alongside one other amusing visible metaphor, a sinking cargo ship and a fleeing determine.

26. LEGO

There’s few phrases wanted on LEGO’s 404 error web page — the character’s expression makes the whole lot clear. Plus, followers of the LEGO film franchise will benefit from the enjoyable reference within the copy.

27. Magnt

On this humorous error message, Magnt pokes enjoyable at the truth that, sure, they may have damaged one thing — or, you simply cannot sort. The visible serves as a fast method to rapidly illustrate their level.

28. IconFinder

IconFinder’s error web page is straightforward however pleasant. The corporate’s mascot carrying a gown and showing weary is a relatable nod to misplaced guests. No worries although, because the website lists a few of its hyperlinks to go to down beneath.

29. Candy Goals

Apparently, the staff at sleep assist firm Candy Goals took too a lot of its merchandise in line with the web site’s 404 web page. Not solely is that this web page humorous — it additionally blends properly with the remainder of the location’s front-end aesthetic and messaging for a cohesive really feel.

30. GitHub

The road “These aren’t the droids you are in search of” refers to Obi-Wan Kenobi’s Jedi thoughts trick on Stormtroopers in Star Wars Episode IV, and it is turn out to be a well known phrase used to inform somebody they’re pursuing the unsuitable plan of action. GitHub performs on this well-known line of their 404 error message.

31. Patagonia

Patagonia’s customized 404 web page captures the model’s vibe completely, full with a boomerang video of a frisbee twirler, a intelligent pun combining “404” and “aloha,” and hyperlinks to its product pages. It’s a pleasant and humorous method to greet guests who wound up within the unsuitable place.

32. Cloud Sigma

Test it out: Cloud Sigma’s letting us in on some behind-the-scenes motion. Their 404 error web page pretends to be a “junior developer’s homepage” — that junior developer being, properly, a cat.

33. AMC Theatres

You may need been to an AMC movie show earlier than, however you’ve hopefully by no means seen their web site’s 404 web page. The web site makes use of a fast, humorous, and related one-liner earlier than it sends you again to the proper place.

34. Bruno

It’s no coincidence that artistic businesses are nice at developing with cool 404 pages. Right here’s one other one from the creatives at Bruno that performs off the 2000 cult comedy traditional Dude, The place’s My Automotive? No, it has nothing to do with the corporate or web site, however it’s positive to get a chuckle.

35. NPR

At first, NPR’s error web page looks like nothing particular. However maintain studying and you may see how they cleverly hyperlink to a few of their nice tales about misplaced folks, locations, and issues, like a bit on Amelia Earhart and one on Waldo. This would possibly simply make misplaced customers really feel rather less alone.

36. Medium

Medium takes the same method to NPR’s 404 web page, recommending articles about getting misplaced and dropping issues. Examine these articles out when you have time — they’re fairly good reads.

37. HomeStarRunner

HomeStarRunner.com, dwelling to a Flash-animated cartoon collection, has had a collection of hilarious 404 error pages through the years. The latest options characters from the cartoon collection in a scene that might’ve come straight out of one in every of their episodes. In case you flip the sound on whenever you load the web page, you may hear their character Sturdy Unhealthy — recognized for yelling phrases out loud — saying, “404’d!”

38. Blizzard Leisure

Here is a easy concept that finally ends up wanting slick: Blizzard Leisure’s 404 web page options an animated character misplaced in an precise blizzard and a few humor that World of Warcraft followers will admire.

39. Hiya Large Thought

A fast journey round advertising and marketing and social media specialists Hiya Large Thought’s web site will let you know what it’s good to learn about its daring and blunt type of copy. And, after all, its 404 error web page is not any exception.

40. HubSpot

It occurs to us, too! That is the message we put as much as inform our website guests that there are some web site points. Our objective was to remain true to HubSpot’s model voice by being as lovable, empathetic, and useful as potential.

Flip a 404 Error Web page Right into a Delight Second

No person desires to land on a 404 web page — they’re annoying and sudden. Nonetheless, you possibly can’t actually keep away from them, so it’s at all times a good suggestion to have a 404 web page to fall again on on your web site.

And, from a consumer expertise perspective, your 404 web page needs to be a small velocity bump, not a brick wall. The appropriate design will be the distinction between a annoyed bounce and a potential conversion, so why not make it enjoyable?

Editor’s word: This submit was initially printed in December 2015 and has been up to date for comprehensiveness.