Sorry hierover 40 voorbeelden van 404 pagina's

404 foutpagina's zijn een geweldige kans om de persoonlijkheid van een website te laten zien en tegelijkertijd mogelijk verwarde gebruikers te helpen. Als je een website hebt gelanceerd zonder rekening te hebben gehouden met foutpagina's, zou je dat meteen moeten aanpakken.

Dit is een snelvuur, leuke kijk op 404 pagina's van overal op het web - en we gaan ze als volgt categoriseren:

  • Hulp bieden
  • De kunst van afleiding
  • Amusement aanbieden
  • Aangename esthetiek
  • Oprechte excuses
  • Een vleugje persoonlijkheid

Four-O What?

Voor meer informatie over het weergeven van aangepaste foutpagina's, bekijkt u de .htaccess-bestanden voor de rest van ons van Dan Wellman. Probeer voor WordPress hoe u een eenvoudige 404-foutpagina kunt maken voor WordPress-thema's.

Hulp bieden

Perfect functioneel, precies wat u zoekt op www.gov.uk/404.

Kristalhelder bericht van www.designernews.co/404.

Functioneel van Foursquare foursquare.com/404.

Netflix, waaruit blijkt dat ze zich niet hoeven te bekommeren om externe bellen en fluitjes www.netflix.com/404.

Om brutaal eerlijk te zijn; Ik had verwacht dat uxpin.com/404 een route zou aanbieden om verder te gaan. Ze bieden een manier voor gebruikers om gebroken links te melden, wat geweldig is, maar de stroom wordt nog steeds onderbroken door een gebrek aan zoekinvoer of koppeling naar huis. 

Invision doet aantoonbaar een grondigere taak met dezelfde aanpak, inclusief een weg vooruit op zijn minst www.invisionapp.com/404.

De 404-pagina van Airbnb biedt links alle links die een eenvoudige en minimalistische animatie aan de rechterkant bieden. Schoon, duidelijk en eenvoudig genoeg om de gebruiker terug naar de website te helpen navigeren. 

Een vergelijkbare minimalistische en toch creatieve aanpak door Dropbox. dropbox.com/404

De kunst van afleiding

Je weet dat het eraan komt, maar ik garandeer je dat je nog steeds een paar keer de verkeerde opdracht in de wacht sleept om het nouveller.com/404 te horen (goed gedaan @BenjaminReid en @ iamkeir - bedankt voor de suggestie David Darnes).

Oh nee, ik hoopte te vinden - wacht, zijn die bézier handvatten ?! www.figma.com/404.

Er is eigenlijk maar één reden waarom je de 1403 Vintage Mono Pro-website zou bezoeken, dus waarom zou je het lettertype niet testen als je er niet uitkomt? 1403.slantedhall.com/404.

Beweeg de muis over deze uil, gebouwd met HTML en CSS ...

Amazon heeft dit geweldige thema gemaakt, Meet the dogs of Amazon en toont deze link naar hun blog op de 404-pagina, amazon.com/404. Elke keer dat je op de 404-pagina terechtkomt, is er een andere hond te zien. 

Amusement aanbieden

Vincent Vega heeft problemen met het vinden van waar hij hoort te zijn op 9gag.com/404.

Geweldige animatie van marvelapp.com/404.

Als je een fan bent van de I.T. Menigte (u bent, toch?) Ik hoef u niet te vertellen wat er gaande is in deze GIF. Kijk op www.larkef.com/404 voor het origineel.

Zombie laat een leuke, geanimeerde, rottende hand zien. Zeer sfeervol.

Meer GIF's, meer geweld, van www.bloomberg.com/404. Dank aan Luke Meehan voor deze suggestie.

Vloeken van olifanten op gradle.com/404.

Een grappige kopie van het e-mailnieuwsbriefplatform www.getrevue.co/404.


Teehan + Lax zijn niet langer actief als agentschap, maar gelukkig leeft hun 404 verder. T + L hield ervan om humor in hun persoonlijke producten te injecteren; deze foutpagina is geen uitzondering, geïnspireerd door "lastige familiefoto's" www.teehanlax.com/404/.

Vertel me nu dat dit pixar.com/404-bericht je niet liet lachen. 

Trouw aan de merkidentiteit mislukt de New Yorker nooit. newyorker.com/404 

Aangename esthetiek

Kalmerende en aantrekkelijk, van Tubik Studio.

Slack wees erop dat deze heerlijke scrollscene waarschijnlijk niet de plaats is waar we naar op zoek waren. Hoewel het met zijn vrolijke konijnen en vrolijke flora niet echt een probleem is om er slack.com/404 te zijn.

GIF magic en Pacman van Arthur MB.

De Emerald 404-paginacollectie bestaat uit 24 varianten, die allemaal ongecompliceerd zijn en ter zake komen.

RPZ is een verzameling van twee pagina-ontwerpen, elk met vier kleurenalternatieven. Eenvoudig en schoon.

Oprechte excuses

Excuses van het team op castle.io/404.

Evenzo van Litmus litmus.com/404.

Een verontschuldiging met de praktische reden van Lego lego.com/404

Starbucks zegt sorry en geeft een reden voor wat er mis ging en wat je kunt doen. starbucks.com/404

Een vleugje persoonlijkheid

Bevooroordeeld? Misschien, maar ik heb altijd van de geanimeerde computerterminal gehouden die ik heb gezien op onze 404 webdesign.tutsplus.com/404. Leuk Jacob!

Vork CMS, gebruikmakende van een klassieke merk / woordspeling combinatie www.fork-cms.com/404.

Herken je deze voetafdrukken? foundation.zurb.com/404

Dit zeer gestileerde vluchtticket "lost in the clouds" is een geweldige manier om een ​​404-fout te presenteren.

Geweldig sentiment van Adidas - wat zou je anders verwachten van een van 's werelds grootste motivators? www.adidas.co.uk/404.

MailChimp, die meesters van het toevoegen van persoonlijkheid aan producten, gebruiken hun mascotte Frederick von Chimpenheimer IV in het geval van een ontbrekende e-mailcampagne us1.campaign-archive1.com/404.

Ik denk dat we weten wiens 404 dit is, toch? www.facebook.com/404.

IMDb.com/404 heeft enkele bekende filmquotes omgezet in citaten van websites. Er zijn er een paar, dus elke keer dat je op de 404 komt, is het een ander citaat. 

Afsluiten

Deze voorbeelden zouden u moeten inspireren om creatief te worden met uw eigen 404-foutpagina's. Onthouden:

  • Bied hulp - idealiter een manier om verder te gaan, zoals voorgestelde links of een zoekopdracht.
  • Gebruik afleiding als u vindt dat dit gepast is (uw gebruikers zijn mogelijk gefrustreerd omdat ze een 404-fout hebben bereikt).
  • Geef amusement (opnieuw, als het gepast is) en houd de taal menselijk.
  • Biedt een vleugje persoonlijkheid.