THE MIRROR OF MEDIA

21 Examples to Get Inspired By


A 404 error web page is one you hardly ever need your web site guests to run into. Particularly once they’re simply attending to know your model.

Whereas it’s unimaginable to utterly cease that from taking place, what you are able to do is to be sure that your 404 web page doesn’t give them a nasty impression of your small business.  

Higher but? Your error web page may go away your viewers with a smile and confidence that they’re, in spite of everything, in the appropriate place.

How’s that potential? That’s what you’ll discover out from this text.

Under, we’re that includes a few of the most fascinating 404 pages we’ve seen on the net together with professional feedback from fellow entrepreneurs who we’ve reached out to for assist.

However first, let’s shine some gentle on what 404 pages are.

Desk Of Contents

What’s a 404 web page?

A 404 web page is an online web page that customers see when their request generates a 404 error – an HTTP standing code indicating that the web page they had been making an attempt to achieve couldn’t be discovered on the server.

Most frequently, customers see 404 pages as a result of they’ve both typed within the incorrect URL tackle or clicked on a damaged hyperlink that leads them to a web page that doesn’t exist. Another excuse for this could possibly be that the web site proprietor determined to take away the web page or moved it elsewhere, however forgot to redirect it to a brand new URL.

404 error page displaying information that the page you've searched for couldn't be found on the server.
Instance of a normal 404 error web page

Whereas most 404 pages merely inform customers that the content material they’re in search of couldn’t be discovered, many entrepreneurs select to make their error pages enjoyable and pleasurable to go to.

That stated, let’s now have a look at a few of these superior examples of 404 pages internet together with some insights from entrepreneurs that reviewed them. As you’re about to see, they’re all about altering the poor buyer expertise and retrieving misplaced guests by some inventive, enjoyable, and galvanizing ways.

Do you know? With GetResponse Website Builder you can construct your 404 web page and a whole web site as properly! It comes filled with ready-made templates and an AI Wizard that’ll create an whole web site for you in a matter of clicks. Take a look at this fast video to be taught extra concerning the device and begin constructing your personal 404 pages right now.

Spectacular 404 pages and what makes them nice

1. 404 web page instance: Final Guitar

404 page example from Ultimate Guitar.
To view the animation go to the source web page.

The very best a part of their 404 pages are the visualization that matches proper in line and tone with the web site.

The web site shares music tabs and sheet music (written types of studying find out how to play songs), both by professional documentation and notation, or by consumer submissions. All of that are reviewable so a consumer can see which one is taken into account high-quality, and provides their very own suggestions on accuracy (or inaccuracy).

They’ve premium add-ons to see extra of the professional content material, together with how-to movies and step-by-step guides, even “official” tabs so a consumer can be taught the literal precise manner a sure track (or instrument in a track) is performed.

Their 404 pages rotate, from a man taking part in guitar and leaping off an amp to look cool (and falling) to a different guitarist making an attempt to point out off by swinging his guitar round his neck and having it fly off stage (and sure, getting damaged).

Habeab Kurdi, GetResponse Senior Copywriter

Key takeaways: 

  • They maintain it participating, while not having to depend on copy. Having a guitarist making an attempt to look cool, but stumbling and falling to the bottom, or dropping their guitar, resonates with musicians and showcases a enjoyable, engaged vibe in keeping with the web site, and with musicians (for essentially the most half).
  • The whimsy of the movies lets customers know that hey, no massive deal that they went to the incorrect web page or to a damaged web page. Yeah, you wish to be taught a brand new track (for your self, to look cool, or each). However music is tough, trying cool is tough, doing each is fairly exhausting too, so don’t be afraid to fall or fail. Simply rise up and maintain rockin’!
  • About that replicate. It’s easy, and to the purpose. Oops! is a basic line. Then they provide a hyperlink to get again to the homepage (straightforward navigation) in addition to a hyperlink to “report an issue” simply in case one thing is damaged. Lastly, they provide you two CTAs, which replicate the hyperlinks within the above copy, however give the consumer an excellent straightforward manner for anybody to simply go straight to the place they wish to get.

2. 404 web page instance: Wizarding World

404 pages often break the immersion of the positioning’s expertise. The 404 web page from Wizarding World manages to maintain it – and fairly masterfully so.

First, there’s a picture of Harry’s first-time use of the Floo community to journey. It’s the time he obtained misplaced and as a substitute of touchdown in Diagon Alley, he wound up inside a darkish wizard’s store (Borgin and Burkes) in some shady again road.

This picture is filled with clues for true Harry Potter followers, the likes of that are most probably to be discovered looking the Wizarding World web site.

Second, there’s a query beneath that claims “Oh expensive, are you misplaced?” “Oh expensive!” is one thing Mrs. Weasley tends to say loads when she’s anxious and preoccupied about one thing, and naturally, Mrs. Weasley is entrance and middle on this picture, accompanied by most of her household.

So, the immersion expertise is saved and this 404 web page virtually looks as if it’s an integral a part of the positioning, just like the consumer is meant to be there.

Lastly, there’s a button on the backside that claims “Again to the Wizarding World” which. Mockingly, barely breaks the immersion as a result of it makes it seem to be being on that web page is like being stranded within the Muggle world.

Which as I described above doesn’t really feel prefer it in any respect:)

Nikola Roza, Proprietor of Nikola Roza – web optimization for the Poor and Decided 

Key takeaways:

  • Make your 404 web page extremely immersive
  • Preserve it on model
  • Ensure it’s intuitive and straightforward to go away by way of a button

3. 404 web page instance: Wendy’s

As an alternative of resorting to a generic 404 design and duplicate, the worldwide fast-food chain’s 404 web page exhibits their model’s persona to the fullest. The copy is filled with meals puns, reminding the consumer subtly that Wendy’s burgers are contemporary. The positioning offers you three choices – to view Wendy’s menu, discover jobs, or keep and play a cute and easy Wendy’s-themed platformer sport that, I’ll admit, made me need some nuggets and fries. It’s not a boring 404 web page – it’s memorable, and an ideal instance of a model being their fun-loving, burger-eating selves.

Ada Durzyńska, GetResponse Content material Advertising Specialist 

Key takeaways:

  • Embrace your model’s identification on each nook of your web site
  • Whereas operating right into a 404 could be disappointing, the expertise of being there doesn’t need to be

4. 404 web page instance: Omelet

404 error page from Omelet agency.
To view the animation go to the source web page

Although the inventive company is finest described as marketing-oriented, its newest web site design challenge was significantly intelligent. It launched a web page that routinely pops up a vibrant crimson warning with the phrases ‘this web page is eggstinct’ as animated egg cracks over the display screen, drawing consideration to the phrase selection. Brilliant crimson, the colour of warnings, signifies that this can be a important discover while the egg theme harmonizes with Omlet’s title.

The message is utilized in content material advertising campaigns too, with Omlet coining the phrase ‘eggstinctly good’ to explain its companies. The inventive company’s web site says, “Generally you need to crack open a nasty thought, fry it up and serve it with a facet of sarcasm.” Appears like Omlet is a inventive company with a distinction. They take a standard factor or state of affairs and switch it on its head to create genuinely hilarious campaigns which might be designed to make individuals assume (and snicker).

Ronald Samson, Analysis Analyst at CreditDonkey 

Key takeaways:

  • Match the tone with the remainder of your web site
  • Preserve it enjoyable and fascinating

5. 404 web page instance: Canva

404 page from Canva.
To view the animation see the source web page

Canva is a graphic design platform, and their 404 web page could be very easy, but fairly participating. If you encounter this web site, you possibly can both go to the homepage or keep and play a puzzle sport. And while you play, you’re reminded of what makes Canva an amazing device – their templates and the attractive designs you can also make with them. Whereas not designed for conversion, this 404 web page achieves the objective of being a enjoyable and fascinating one. The simplicity of it takes away the dilemma of “the place to go from there” and makes it straightforward to return to the homepage and proceed designing. The issues I’m not a fan of right here is the marginally uninspired copy and lack of navigation. It additionally looks as if the web page hasn’t been up to date in a very long time, maybe with extra trendy designs.

Ada Durzyńska, GetResponse Content material Advertising Specialist  

Key takeaways:

  • The easier the 404 web page, the higher – however don’t neglect concerning the navigation
  • Don’t be afraid to point out off your strongest belongings on the 404
  • Keep in mind to replace your 404 web page now and again

6. 404 web page instance: Slack

Slack is a enterprise communication platform that understands the necessity of steadiness in life. That’s why their 404 is an ideal instance of what they stand for. The copy on this web page sounds calm and comforting and redirects you to the Assist Middle. There are common navigation sections on this web page, too. However what stands out right here is the idyllic animated panorama within the background. It’s a picturesque scene crammed with butterflies, flowers, and rainbows. What’s extra – it’s interactive. You possibly can discover the scene from left to proper and “pet” the chickens and little pigs you encounter. It’s positively probably the most soothing 404 error pages on the market.

Ada Durzyńska, GetResponse Content material Advertising Specialist 

Key takeaways:

  • Present helpful navigation in your 404 error web page
  • If potential, lend a serving to hand and counsel options or redirect to your assist web page
  • As glitches and expired hyperlinks could be tense, attempt to cut back the customer’s unfavorable feelings through the use of a relaxed tone in your error message

7. 404 web page instance: Airtable

Airtable 404 page.
Source

In a world obsessive about scrolling, your web site’s backside footer is prime actual property.

I like that Airtable hasn’t reinvented the wheel right here with their 404 pages and caught with navigation that they know is acquainted to their clients/web site guests. Providing their clients the flexibility to talk on to somebody is the right CTA for “misplaced customers”. Providing help entrance and middle helps remove any negativity constructed up throughout this means of misdirecting a buyer.

Tom Barragry, GetResponse Product Advertising Supervisor  

Key takeaways: 

  • Good use of the footer navigation
  • Clear and actionable subsequent step CTAs
  • Suggestion: it might be nice to supply extra related solutions primarily based on the final web page the consumer visited

8. 404 web page instance: Ueno

Great 404-page example from Ueno.
Source

There’s nothing like a operating sizzling canine to make you do a double take! Ueno makes use of some lighthearted enjoyable to assist level you in the appropriate route. And that sizzling canine is reminding us that the site owners most likely by no means obtained the memo to appropriate the web page. Thanks for the snicker, Ueno!

Brooks Conkle, Proprietor at BrooksConkle 

Key takeaways:

  • Touchdown on the incorrect web page could be irritating, so do your finest to vary that have
  • Humor all the time wins

9. 404 web page instance: Figma

Figma interactive 404 page example.
Source

Figma, a graphic design and prototyping platform, had a inventive method to designing their 404 web page. If you enter the 404, it appears to be like similar to a normal error web page. However, the 404 numbers are totally editable vector graphics, and you’ll spend hours on this web site customizing their form and look. Even for those who come right here accidentally, understanding nothing concerning the firm, you possibly can nonetheless work out what the device is for by interacting with the web page. There’s additionally an everyday navigation bar on the highest that may take you anyplace you wish to go on the web site. The black “enroll” CTA button stands out on this easy, white web page design. This 404 error web page instance is certainly one of my favorites due to how properly it introduces what their device is all about.

Ada Durzyńska, GetResponse Content material Advertising Specialist 

Key takeaways:

  • Think about the 404 web page is the consumer’s first contact together with your model – possibly you possibly can introduce your services or products right here in a inventive manner

10. 404 web page instance: Seer Interactive

Inspiring 404 page from Seer.
Source

I like this 404 web page as a result of it’s distinctive, and never just like the common ones on the market.

It has a catchy headline, which prompts anybody who stumbles on the web page to pause and try the data on it.

There’s additionally a call-to-action prompting the reader to both seek for the data they want utilizing the search bar straight away or use the navigation menu on the web site’s header.

In addition they subtly promote their neighborhood web page, which highlights how they’re giving again as an organization.

AbdulGaniy Shehu, Lead Content material Strategist at Your Content Mart 

Key takeaways:

  • Don’t be afraid to attempt one thing totally different.
  • You possibly can redirect readers to a different key web page in your web site from the 404 pages
  • Be strategic together with your 404 pages by letting readers know different methods they’ll discover the data they’re trying to find (for instance, by way of search bar)

11. 404 web page instance: Nextiva

Our dev group truly took the time to construct an interactive 404 web page. I all the time discover myself watching it for a number of seconds as a result of it’s enjoyable to take a look at and I recognize the work. It’s the little issues like this that make our model stand out.

Devin Pickell, Progress Advertising Supervisor at Nextiva 

Key takeaways:

  • Don’t be afraid to make your 404 web page enjoyable
  • Your 404 web page can replicate your model voice
  • If potential, embrace interactiveness

12. 404 web page instance: Zillow

The net actual property market, Zillow, makes you’re feeling at dwelling on their 404 web page. The animation of a cat purposefully knocking over a plant, mixed with the “Uh oh, one thing broke” is each hilarious and cute. It’s easy and allows you to return to the homepage (or go anyplace on their web site through the use of the navigation bar). What’s nice about it’s that as a substitute of constructing you’re feeling pissed off that the web page shouldn’t be discovered, it places a real smile in your face.

Ada Durzyńska, GetResponse Content material Advertising Specialist  

Key takeaways:

  • Don’t shrink back from being a bit extra informal in your 404 web page. In actual fact, that’s the web page the place you possibly can showcase your model’s enjoyable and witty facet essentially the most!
  • Once more, simplicity is the important thing

13. 404 web page instance: Mailtrap

When a web site customer is trying to find a particular web page and made mistake, we’ll present them our 404 web page. On this web page, we’re making an attempt to pay attention consideration on a clear CTA – return again to the house web page. On the identical time if a consumer was trying to find a particular web page/characteristic – he may discover the reply in our Assist Middle. Offering two choices is a superb thought to get well misplaced web site guests. Moreover, we’re recording failed URL paths. It’s one of many suggestions channels for us, generally it might be a sign for you what guests are looking out/anticipating to see in your web site.

Andriy Zapisotskyi, Progress Supervisor at Mailtrap 

Key takeaways:

  • Present a brief and transient clarification of what went incorrect
  • Clarify potential causes for a difficulty
  • Add a transparent call-to-action to the house web page
  • Provide an opportunity to go to your Assist Middle to seek out extra information concerning the product
  • Deal with your 404 web page as a suggestions channel and observe the damaged hyperlinks

14. 404 web page instance: Templatemonster

Templatemonster 404 page.
Source

The TemplateMonster 404 web page options their model mascot to maintain it on model. It additionally distracts guests from an undesirable state of affairs whereas exhibiting a few of the firm’s persona. Moreover, these illustrations work finest to make the 404 web page witty with out too many phrases given.

The brief but concise copy with an inside hyperlink encourages the customer to go to different pages on the web site as a substitute. It makes it clear that the 404 web page shouldn’t be the dead-end for them to allow them to proceed their journey. Due to this fact, it helps to lower the bounce price and premature exit from the positioning. General, the design is straightforward, easy, and avoids making an attempt too exhausting to jest.

Andre Oentoro, CEO and Founding father of Breadnbeyond 

Key takeaways:

  • Present straightforward navigation to the homepage
  • Use illustrations to remove the necessity for technical jargon and make the web page straightforward on the eyes
  • Write your copy in a easy and informal method to offer guests the utmost use of all of the choices out there on this 404 web page

15. 404 web page instance: Giphy

The GIF search engine GIPHY welcomes you on their 404 web page with what I’d describe as a 3D cool-but-sad cowboy emoji. They may have left it at that, however they comply with it up with some encouraging copy and an infinite provide of trending GIFs. So, even for those who’re unhappy that the GIF you had been in search of doesn’t exist, you don’t need to go anyplace else to nonetheless take pleasure in hundreds of creations on GIPHY. It’s tremendous helpful and handy for the consumer. There’s additionally a search bar and a button that redirects you to the homepage. The web page doesn’t characteristic the “404 error” message, nevertheless it doesn’t need to – the ‘oops’ is simply sufficient to know the place we’re and what’s happening.

Ada Durzyńska, GetResponse Content material Advertising Specialist  

Key takeaways:

  • The 404 web page doesn’t need to be a lifeless finish. Preserve the web page helpful by suggesting options to the issue the consumer may be right here to unravel

16. 404 web page instance: Bouncer

404 page from Bouncer.
Source

This 404 web page shouldn’t be an bizarre one, for positive.

After we land there, we instantly know that we’re within the incorrect place.

Bouncer’s mascot presents himself in a fairly intimate state of affairs, and with a humorous twist which informs us about that.

Then we’re offered with two calls-to-action:

1) To return to the primary web page

2) An emphasised one, of a better trigger – to undertake a gorilla with WWF

Then, beneath the fold, Bouncer presents hyperlinks to their newest weblog posts, in case we’d wish to spend a while and be taught one thing extra about e mail deliverability.

All that’s positively in keeping with Bouncers’ branding and tone of voice.

— Radek Kaczynski, CEO at Bouncer 

Key takeaways:

  • Present clear calls to motion
  • Assume exterior the field, e.g. supply help for a better trigger
  • Use your model mascot to make the web page and your model extra human
  • Match your 404 web page together with your model’s tone and voice
  • Make use of the beneath the fold part to offer hyperlinks to different helpful content material (e.g. widespread posts)

17. 404 web page instance: Sprout Social

404 error landing page.
Source

What for those who may take your 404 web page and switch it right into a full-blown touchdown web page? That’s precisely what Sprout Social has completed with theirs. As per typical 404 web page requirements, Sprout Social begins out with a type of cheeky little error messages indicating that you simply’re within the incorrect spot. Nonetheless, that’s not what units it other than different 404 error pages. It’s every thing else.

The very first thing you’ll discover is a CTA in the midst of the display screen directing you to be taught extra about their service by an precise demo – discuss maximizing your web site conversions. And for those who’d fairly obtain their firm information by e mail, there’s a sign-up type on the web page for his or her publication. However that’s not the actual kicker. They really have their dwell chat help open on the web page, so you possibly can converse on to somebody who can get you the place you wish to be! This isn’t actually a 404 web page, however an amazing instance on find out how to convert misplaced souls into paying clients.

Robert Bernal, GetResponse US web optimization Supervisor  

Key Takeaways:

  • Provide a number of alternative ways to show an unlucky error right into a objective conversion
  • Present dwell chat help availability to make sure buyer satisfaction

18. 404 web page instance: NASA

404 page from NASA.
Source

NASA has a smooth, skilled but intelligent 404 web page. Its copy (“The cosmic object you’re in search of has disappeared past the occasion horizon”) and galactic background picture could be very on-brand for an area company. There’s no gimmick to this web page, and you’ll discover NASA’s web site by clicking on the simply seen navigation bar. It doesn’t make you keep there longer than essential and retains you immersed in space-themed exploring.

Ada Durzyńska, GetResponse Content material Advertising Specialist  

Key takeaways:

  • If there’s a solution to maintain the copy and design in your 404 associated to your small business, do it! By retaining a secure theme all through your web sites, you retain guests engaged and invested in your story.

19. 404 web page instance: GetResponse

GetResponse 404 error page.
Source

With out tooting our personal horn an excessive amount of, I genuinely assume this 404 web page is an efficient one.

The tone and look of this web page matches the brand new visible identification that we’ve been going for. You possibly can see it within the shade scheme, the yellow spotlight, the fonts used, and all through the entire copy.

Though this clearly is an error web page, we wished our guests to go away with a smile. That’s why we made use of this comic-like illustration to elucidate what went incorrect.

We additionally wished to verify our guests know what to do subsequent. That’s the place the hyperlink to the homepage got here in, together with the delicate trace to double-check if the URL tackle they’ve typed in appears to be like OK.

On the very backside of the web page, we additionally added some further sections to assist improve our guests’ expertise (and doubtlessly enhance our conversions, too). We added hyperlinks to our prime articles, a hyperlink to the web page the place the guests can be taught extra about our options, and the signup web page.

Now, if we wished to additional optimize this web page, I’d most likely go for a search bar characteristic subsequent to the homepage hyperlink. Whereas it might not be the perfect for conversions and getting new signups, I think it’d enhance our guests’ expertise by serving to them retype their question and discover the piece of knowledge they’ve been trying to find.

Michal Leszczynski, GetResponse Head of Content material Advertising & Partnerships  

Key takeaways:

  • Ensure to replace the web page for those who’re altering your visible identification
  • Make the web page enjoyable, pleasurable, and straightforward to navigate
  • Consider how the web page performs each when it comes to conversions and optimistic consumer interactions

20. 404 web page instance: Ahrefs

Source

It might sound like a straightforward play for an web optimization firm, however not all of them have used their 404 pages as successfully as Ahrefs has completed right here.

It’s enjoyable, academic, and I wouldn’t be shocked if it converts properly, too.

Since Ahrefs’ web site guests are most probably enthusiastic about web optimization, they’ll most likely recognize what the group has completed right here – they defined what damaged hyperlinks are, and hinted that you could determine such pages by yourself web site utilizing their free damaged hyperlink checker device.

And though the web page is lacking the weather we’re used to seeing – like a hyperlink again to the homepage, search bar, or different helpful content material – their audience will most probably know their manner round.

Michal Leszczynski, GetResponse Head of Content material Advertising & Partnerships  

Key takeaway:

  • Don’t neglect the web page’s potential to drive signups
  • Use the 404 web page to point out what your model is about
  • Don’t be afraid to take a distinct route

21. 404 web page instance: Lego

Source

Generally the product you seek for shouldn’t be there anymore. That’s unhappy. Whereas most corporations acknowledge this reality and generally apologize, Lego then again reminds customers that they shouldn’t fear, as a result of every thing is STILL AWESOME. In addition they present a transparent resolution with the “Begin buying” CTA.

Irek Klimczak, GetResponse Senior Content material Mission Supervisor

Key takeaways:

  • Empathize with the consumer
  • Assist them maintain their calm
  • Present a clear resolution

Time to create your personal 404 web page

As you’ve now witnessed, lacking pages aren’t the tip of the world. As a matter of reality, loads of web site house owners use their 404 pages strategically.

Many attempt to flip the unhealthy expertise right into a optimistic one – both by including a humorous message or interactivity to their error web page, retaining their guests entertained.

Others concentrate on offering help – serving guests the most useful hyperlinks, a direct solution to attain the positioning’s homepage, or a search bar to assist them discover the piece of content material they’re enthusiastic about and in search of.

Lastly, there are entrepreneurs who use their error pages to spice up income and drive conversions. 

Hopefully the error pages we confirmed you on this article will function a design inspiration that’ll show you how to create an exquisite, eye-catching, and highly-effective 404 web page of your personal.

Now, if that is the start of your journey and also you don’t but have a full-fledged web site, you’ll profit from studying our information on how to build a website from scratch.

There, we clarify the step-by-step course of and the elements you’ll wish to contemplate when constructing your personal web site – whether or not it’ll be a strong WordPress web site that requires tons of guide configuration or a web site constructed with an intuitive drag-and-drop builder just like the one provided by GetResponse.

Lastly, for those who’ve not but heard about this new cutting-edge resolution, go forward and watch this fast video overview to get a greater really feel for what you’ll get out of the field.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *