Désolé pour ceci 40 exemples de 404 pages

Les 404 pages d'erreur sont une excellente occasion de montrer la personnalité d'un site Web tout en offrant de l'aide à des utilisateurs potentiellement confus. Si vous avez lancé un site Web sans avoir pris en compte les pages d'erreur, vous devez le résoudre immédiatement..

C'est un feu rapide, amusez-vous à regarder 404 pages de partout sur le Web et nous allons les classer comme suit:

  • Offrir de l'aide
  • L'art de la distraction
  • Fournir de l'amusement
  • Esthétique agréable
  • Excuses sincères
  • Une touche de personnalité

Quatre-o quoi?

Pour en savoir plus sur la gestion des pages d'erreur personnalisées, consultez le fichier .htaccess pour le reste de nous, de Dan Wellman. Pour WordPress en particulier, essayez comment créer une simple page d'erreur 404 pour les thèmes WordPress.

Offrir de l'aide

Parfaitement fonctionnel, exactement ce que vous voulez sur www.gov.fr/404.

Message limpide de www.designernews.co/404.

Functional à partir de Foursquare foursquare.com/404.

Netflix, montrant qu'ils n'ont pas besoin de s'embarrasser de cloches et de sifflets superflus www.netflix.com/404.

Être brutalement honnête; Je me serais attendu à ce que uxpin.com/404 propose un itinéraire pour continuer. Ils fournissent aux utilisateurs un moyen de signaler les liens rompus, ce qui est excellent, mais le flux est toujours interrompu par un manque d'entrée de recherche ou de lien d'origine.. 

Invision fait sans doute un travail plus approfondi de la même approche, y compris une voie à suivre au moins www.invisionapp.com/404.

La page 404 d’Airbnb propose tous les liens dont vous avez besoin à gauche, avec une animation simple et minimaliste à droite. Propre, clair et assez simple pour permettre à l'utilisateur de revenir sur le site. 

Une approche similaire mais minimaliste mais créative de Dropbox. dropbox.com/404

L'art de la distraction

Vous savez que ça s'en vient, mais je vous garantis que vous ferez encore plusieurs fois le mauvais ordre pour l'entendre nouveller.com/404 (bon travail @BenjaminReid et @ iamkeir - merci pour la suggestion David David).

Oh non, j'espérais trouver-attendre, est-ce que ces poignées de bézier?! www.figma.com/404.

Quoi qu’il en soit, la seule raison pour laquelle vous visitiez le site Web 1403 Vintage Mono Pro est de test, alors pourquoi ne pas tester la police de caractères si vous décollez? 1403.slantedhall.com/404.

Survolez ce hibou construit avec HTML et CSS…

Amazon a créé ce thème génial, Rencontrez les chiens d'Amazon et affiche ce lien vers son blog sur la page 404 du site amazon.com/404. Chaque fois que vous arrivez sur la page 404, c'est un chien différent. 

Fournir de l'amusement

Vincent Vega a du mal à trouver où il est supposé être sur 9gag.com/404.

Grande animation de marvelapp.com/404.

Si vous êtes fan de l'I.T. Foule (tu l'es, n'est-ce pas?) Je n'aurai pas besoin de te dire ce qui se passe dans ce GIF. Visitez www.larkef.com/404 pour l'original.

Zombie montre une belle main animée en décomposition. Très atmosphérique.

Plus de GIF, plus de violence, sur www.bloomberg.com/404. Merci à Luke Meehan pour cette suggestion.

Jure d'éléphants sur gradle.com/404.

Une copie amusante de la plateforme de bulletin d’information électronique www.getrevue.co/404.


Teehan + Lax ne sont plus actifs en tant qu'agences, mais heureusement, leur 404 vit toujours. T + L aimait injecter de l'humour dans ses produits personnels; cette page d'erreur ne fait pas exception et s'inspire des «photos de famille difficiles» www.teehanlax.com/404/.

Maintenant, dites-moi que ce message pixar.com/404 ne vous a pas fait sourire. 

Fidèle à l'identité de la marque, The New Yorker n'échoue jamais. newyorker.com/404 

Esthétique agréable

Calme et attrayant, de Tubik Studio.

Slack précise que cette délicieuse scène de défilement n'est probablement pas l'endroit que nous recherchions. Bien qu'avec ses lapins gambadants et sa flore joyeuse, je n'ai pas vraiment de problème à y être slack.com/404.

Magie GIF et Pacman d'Arthur MB.

La collection Emerald 404 pages comprend 24 variantes, qui sont toutes simples et vont droit au but..

RPZ est une collection de modèles de deux pages, chacun avec quatre couleurs alternatives. Simple et propre.

Excuses sincères

Excuses de la part de l'équipe de castle.io/404.

De même de Litmus litmus.com/404.

Des excuses avec la raison pratique de Lego lego.com/404

Starbucks s'excuse et donne une raison pour expliquer ce qui n'a pas fonctionné et ce que vous pouvez faire, laissez-le. starbucks.com/404

Une touche de personnalité

Biaisé? Peut-être, mais j'ai toujours aimé le terminal d'ordinateur animé que l'on voit sur notre propre site Web 404 webdesign.tutsplus.com/404. Gentil un jacob!

Fork CMS, tirant parti d'une combinaison classique marque / jeu de mots www.fork-cms.com/404.

Reconnaître ces empreintes? foundation.zurb.com/404

Ce billet d'avion très stylisé «perdu dans les nuages» est un excellent moyen de présenter une erreur 404.

Grand sentiment d'Adidas: qu'attendriez-vous de l'un des plus grands facteurs de motivation au monde? www.adidas.co.uk/404.

MailChimp, ces maîtres de la personnalisation des produits, utilise sa mascotte Frederick von Chimpenheimer IV en cas d'absence de campagne par courrier électronique us1.campaign-archive1.com/404.

Je pense que nous savons à qui appartient ce 404, non? www.facebook.com/404.

IMDb.com/404 a transformé certaines citations connues en citations de sites Web. Il y en a quelques-uns, donc chaque fois que vous atterrissez sur la 404, il s'agit d'une citation différente. 

Emballer

Ces exemples devraient vous inciter à faire preuve de créativité avec vos propres pages d'erreur 404. Rappelles toi:

  • Offrir une assistance - idéalement une voie à suivre, telle que des liens suggérés ou une entrée de recherche.
  • Utilisez la distraction si vous le jugez utile (vos utilisateurs peuvent être frustrés d’avoir atteint une erreur 404).
  • Amusez-vous (encore une fois, si nécessaire) et gardez le langage humain.
  • Offrez une touche de personnalité.