Ledsen om detta 40 Exempel på 404 sidor

404 fel sidor är ett utmärkt tillfälle att visa upp en webbplats personlighet, samtidigt som det hjälper till potentiellt förvirrade användare. Om du har lanserat en webbplats utan att ha beaktat fel sidor, bör du adressera det direkt.

Det här är en snabb eld, roligt titta på 404 sidor från hela webben, och vi kommer att kategorisera dem enligt följande:

  • Erbjuder hjälp
  • Distraktionskonst
  • Ger nöjen
  • Glädjande estetik
  • Uppriktiga ursäkter
  • En beröring av personlighet

Fyra O Vad?

Om du vill veta mer om hur du tjänar anpassade felsidor kan du titta på .htaccess-filer för resten av oss av Dan Wellman. För WordPress specifikt, försök att skapa en enkel 404-felsida för WordPress-teman.

Erbjuder hjälp

Perfekt funktionell, exakt vad du vill ha från www.gov.uk/404.

Kristallklart meddelande från www.designernews.co/404.

Funktionell från Foursquare foursquare.com/404.

Netflix, som visar att de inte behöver stör med externa klungor och visselpipor www.netflix.com/404.

Att vara brutalt ärlig; Jag skulle ha förväntat uxpin.com/404 att erbjuda någon väg att fortsätta framåt. De ger ett sätt för användarna att rapportera trasiga länkar, vilket är bra, men flödet avbryts fortfarande av brist på sökinmatning eller hemlänk. 

Invision gör förmodligen ett mer noggrant jobb med samma tillvägagångssätt, inklusive en väg framåt åtminstone www.invisionapp.com/404.

Airbnb 404-sida erbjuder alla länkar du behöver till vänster med en enkel och minimalistisk animering till höger. Ren, tydlig och enkel att hjälpa till att navigera användaren tillbaka till webbplatsen. 

En liknande minimalistisk men ändå kreativ inställning av Dropbox. dropbox.com/404

Distraktionskonst

Du vet att det kommer, men jag garanterar att du fortfarande stannar i fel kommando några gånger för att höra det nouveller.com/404 (bra jobb @BenjaminReid och @ iamkeir-tack för förslaget David Darnes).

Åh nej, jag hoppades att hitta-vänta, är de bézierhandtag ?! www.figma.com/404.

Det finns egentligen bara en anledning att du skulle besöka webbplatsen 1403 Vintage Mono Pro ändå, varför varför inte prova typsnittet om du kommer undan? 1403.slantedhall.com/404.

Håll över denna ugg byggd med HTML och CSS ...

Amazon skapade detta fantastiska tema, träffa hundarna i Amazon och visar den här länken till sin blogg på 404-sidan, amazon.com/404. Varje gång du landar på 404 sidan är det en annan hund som presenteras. 

Ger nöjen

Vincent Vega har problem med att hitta var han ska vara på 9gag.com/404.

Stor animation från marvelapp.com/404.

Om du är en fan av I.T. Crowd (du är, eller hur?) Jag behöver inte berätta vad som händer i denna GIF. Kolla in www.larkef.com/404 för originalet.

Zombie visar en fin, animerad, ruttande hand. Mycket atmosfärisk.

Fler GIF, mer våld, från www.bloomberg.com/404. Tack till Luke Meehan för detta förslag.

Svärande elefanter på gradle.com/404.

Något underhållande kopia från plattformen för e-nyhetsbrev www.getrevue.co/404.


Teehan + Lax är inte längre aktiva som en byrå, men lyckligtvis bor deras 404 på. T + L älskade att injicera humor i sina personliga produkter; denna fel sida är inget undantag, inspirerar från "besvärliga familjefoton" www.teehanlax.com/404/.

Nu berätta det här meddelandet pixar.com/404 gjorde dig inte le. 

Att vara trogen mot varumärkesidentitet, misslyckas New Yorker aldrig. newyorker.com/404 

Glädjande estetik

Lugnande och attraktiv, från Tubik Studio.

Slack påpekar att denna härliga rullningsplats förmodligen inte är den plats vi var efter. Men med sin gambolling kaniner och glada flora har jag egentligen inte ett problem att vara där slack.com/404.

GIF magi och Pacman från Arthur MB.

Emerald 404 sidor samlingen omfattar 24 varianter, som alla är raka framåt och komma till saken.

RPZ är en samling av två siddesigner, var och en med fyra färgalternativ. Enkelt och rent.

Uppriktiga ursäkter

Ursäkta från laget på castle.io/404.

På samma sätt från Litmus litmus.com/404.

En ursäkt med den praktiska orsaken från Lego lego.com/404

Starbucks säger förlåt och ger en anledning till vad som gick fel och vad du kan göra låt. starbucks.com/404

En beröring av personlighet

Partisk? Kanske, men jag har alltid älskat den animerade datorterminalen sett på vår egen 404 webdesign.tutsplus.com/404. Trevlig en Jacob!

Fork CMS, dra nytta av en klassisk kombination av brand / punk www.fork-cms.com/404.

Erkänna dessa fotspår? foundation.zurb.com/404

Denna mycket stiliserade flygbiljett "förlorad i molnen" är ett utmärkt sätt att presentera ett 404-fel.

Stora känslor från Adidas - vad skulle du förvänta dig av en av världens största motivatorer? www.adidas.co.uk/404.

MailChimp, de här mästarna att lägga personlighet till produkter, använder sin maskot Frederick von Chimpenheimer IV i händelse av en saknad e-postkampanj us1.campaign-archive1.com/404.

Jag tror att vi vet vilka 404 det här är, eller hur? www.facebook.com/404.

IMDb.com/404 gjorde några välkända filmer citat till webbplats citat. Det finns några där så varje gång du landar på 404 är det ett annat citat. 

Avslutar

Dessa exempel bör inspirera dig att bli kreativ med dina egna 404 felsidor. Kom ihåg:

  • Erbjuda assistans - idealiskt ett sätt att vidarebefordra, till exempel förslag till länkar eller en sökinmatning.
  • Använd distraktion om du tycker att det är lämpligt (dina användare kan väl vara frustrerade när de har nått ett 404-fel).
  • Ge nöjen (igen, om det är lämpligt) och behåll språket mänskligt.
  • Erbjud en touch av personlighet.