Beklager om dette 40 Eksempler på 404 sider

404 feilsider er en flott mulighet til å vise frem en nettside personlighet, samtidig som det gir hjelp til potensielt forvirrede brukere. Hvis du har lansert et nettsted uten å ha vurdert feil sider, bør du adressere det med en gang.

Dette er en rask brann, morsomt se på 404 sider fra hele nettet, og vi skal kategorisere dem som følger:

  • Tilbyr hjelp
  • Kunsten av distraksjon
  • Tilbyr underholdning
  • Tiltalende estetikk
  • Oppriktige unnskyldninger
  • En berøring av personlighet

Fire-O Hva?

Hvis du vil vite mer om hvordan du serverer egendefinerte feilsider, kan du se på .htaccess-filer for resten av oss av Dan Wellman. For WordPress spesifikt, prøv hvordan du oppretter en enkel 404-feilside for WordPress-temaer.

Tilbyr hjelp

Perfekt funksjonell, akkurat det du vil ha fra www.gov.uk/404.

Krystallklar melding fra www.designernews.co/404.

Funksjonell fra Foursquare foursquare.com/404.

Netflix, som viser at de ikke trenger å plage med fremmede klokkene og fløyter www.netflix.com/404.

Å være brutalt ærlig; Jeg ville ha forventet uxpin.com/404 å tilby noen rute for å fortsette videre. De gir en måte for brukerne å rapportere ødelagte koblinger, noe som er flott, men strømmen er fortsatt avbrutt av mangel på søkeinngang eller hjemmekobling. 

Invision gjør nok en grundigere jobb med samme tilnærming, inkludert en vei fremover i det minste www.invisionapp.com/404.

Airbnbs 404-side tilbyr alle linkene du trenger til venstre med en enkel og minimalistisk animasjon til høyre. Ren, klar og enkel nok til å hjelpe brukeren tilbake til nettsiden. 

En lignende minimalistisk, men kreativ tilnærming fra Dropbox. dropbox.com/404

Kunsten av distraksjon

Du vet at det kommer, men jeg garanterer at du fortsatt vil slå i feil kommando et par ganger for å høre det nouveller.com/404 (god jobb @BenjaminReid og @ iamkeir-takk for forslaget David Darnes).

Å nei, jeg håpet å finne-vent, er de bézier håndtakene ?! www.figma.com/404.

Det er egentlig bare én grunn til at du besøker 1403 Vintage Mono Pro-nettstedet uansett, så hvorfor ikke teste ut skrifttypen hvis du kommer unstuck? 1403.slantedhall.com/404.

Hold musen over denne uglen bygget med HTML og CSS ...

Amazon skapte dette fantastiske temaet, Møt hundene til Amazon og viser denne linken til bloggen deres på 404-siden, amazon.com/404. Hver gang du lander på 404-siden, er det en annen hund som er omtalt. 

Tilbyr underholdning

Vincent Vega har problemer med å finne hvor han skulle være på 9gag.com/404.

Flott animasjon fra marvelapp.com/404.

Hvis du er en fan av I.T. Crowd (du er, ikke sant?) Jeg trenger ikke å fortelle deg hva som skjer i denne GIF. Sjekk ut www.larkef.com/404 for originalen.

Zombie viser en fin, animert, råtnende hånd. Veldig atmosfærisk.

Flere GIF, mer vold, fra www.bloomberg.com/404. Takk til Luke Meehan for dette forslaget.

Sverige elefanter på gradle.com/404.

Noen morsomme kopi fra epost nyhetsbrev plattform www.getrevue.co/404.


Teehan + Lax er ikke lenger aktiv som et byrå, men lykkelig bor deres 404 på. T + L elsket å injisere humor i sine personlige produkter; Denne feilsiden er ikke noe unntak, og tar inspirasjon fra "ubehagelige familiebilder" www.teehanlax.com/404/.

Fortell meg nå, denne pixar.com/404-meldingen fikk deg ikke til å smile. 

Holder seg til merkeidentitet, The New Yorker mislykkes aldri. newyorker.com/404 

Tiltalende estetikk

Rolig og attraktiv, fra Tubik Studio.

Slakk påpeke at denne herlige rullende scenen sannsynligvis ikke er stedet vi var ute etter. Selv med gambolling kaniner og munter flora har jeg egentlig ikke noe problem å være der slack.com/404.

GIF magi og Pacman fra Arthur MB.

Den Emerald 404 sider samlingen består av 24 varianter, som alle er rett frem og komme til poenget.

RPZ er en samling av tosidedesigner, hver med fire fargevalg. Enkelt og rent.

Oppriktige unnskyldninger

Unnskyldninger fra laget på castle.io/404.

Likeledes fra Litmus litmus.com/404.

En unnskyldning med den praktiske grunnen fra Lego lego.com/404

Starbucks sier beklager og gir en grunn til hva som gikk galt og hva du kan gjøre la. starbucks.com/404

En berøring av personlighet

Forutinntatt? Kanskje, men jeg har alltid elsket den animerte datorterminen sett på vår egen 404 webdesign.tutsplus.com/404. Hyggelig en Jacob!

Fork CMS, dra nytte av en klassisk merkevare / punk kombinasjon www.fork-cms.com/404.

Erkjenn disse fotsporene? foundation.zurb.com/404

Denne svært stiliserte flybilletten "tapt i skyene" er en fin måte å presentere en 404 feil på.

Flott følelse fra Adidas - hva mer ville du forvente av en av verdens største motivatorer? www.adidas.co.uk/404.

MailChimp, de mestre av å legge personlighet til produkter, bruker deres maskot Frederick von Chimpenheimer IV i tilfelle en manglende e-postkampanje us1.campaign-archive1.com/404.

Jeg tror vi vet hvem 404 dette er, ikke sant? www.facebook.com/404.

IMDb.com/404 viste noen velkjente filmnotater til nettstedkvitene. Det er noen der, så hver gang du lander på 404 er det et annet tilbud. 

Innpakning

Disse eksemplene bør inspirere deg til å bli kreativ med dine egne 404 feilsider. Huske:

  • Tilbyr hjelp - ideelt en vei videre, for eksempel foreslåtte koblinger eller en søkeinngang.
  • Bruk distraksjon hvis du føler det er riktig (brukerne kan godt bli frustrert etter å ha nådd en 404 feil).
  • Gi underholdning (igjen, hvis det er hensiktsmessig) og hold språket menneske.
  • Tilbyr et preg av personlighet.