15 pages 404 comme vous n’en avez jamais vues

Par , Le 17 septembre 2014 (Temps de lecture estimé : 7 min)

La page 404 est un élément indispensable de tout site internet. Elle permet d’indiquer à l’internaute qu’il s’est perdu. Certains apportent un soin tout particulier à la page 404 d’un site et font preuve d’une créativité débordante !

D’ailleurs, savez-vous pourquoi l’appelle-t-on ainsi ? L’erreur 404 est un code d’erreur du protocole HTTP. Le premier 4 indique une erreur venant d’une erreur d’URL ou d’une page n’existant plus. Le dernier 4 indique le problème causé par cette erreur : ressource introuvable. Pendant longtemps, la légende voulait que le numéro d’erreur 404 trouve ses origines au CERN : Des chercheurs auraient été lassés de se rendre sans cesse dans le bureau n° 404 pour relancer un serveur défaillant à cause d’un problème de connexion. En souvenir du dit serveur, ils auraient alors attribué le numéro du bureau à l’erreur du même nom. Toutefois, cette légende a été démentie début 2014 par Tim Berners-Lee, inventeur du web.

Mais retournons à nos pages 404 peu communes. En tant que prestataire, ce n’est pas quelque chose sur lequel j’estime qu’il est nécessaire de passer beaucoup de temps. Mais pour le plaisir, voici une petite sélection de pages 404 bien foutues. Certaines sont d’ailleurs suffisamment cossues pour se demander si les créateurs du site n’ont pas passé plus de temps dessus que sur le reste du site.

Do Hot Production

Hot Dot Productions a pour slogan « Là où le design rencontre la technologie » et leur page 404 est impressionnante en termes de technique. Celle-ci présente les trois numéros, composés de centaines de petits points colorés, qui changent de direction en réponse aux mouvements de la souris et se dispersent au moindre clic.
aetherconcept-pages-404-originales-1

ColRD

Cette page parlera surtout aux graphistes et aux développeurs web. Un immense « dallage » de couleurs entoure le vide formant le nombre 404. Chaque couleur s’anime au survole de la souris et est cliquable. Une fois cliqué, on arrive sur un nuancier permettant de régler des couleurs à valeurs hexadécimales.
aetherconcept-pages-404-originales-2

Hakim El Hattab

Cette 404 n’est pas sans rappeler le personnage bien vicelard de Selim Bradley du manga Full Metal Alchemist. Conçue pour le magazine .Net par Hakim El Hattab, cette page en HTML5 affiche des yeux effrayants qui suivent votre curseur tout en clignant. Aussi brillant que flippant.
aetherconcept-pages-404-originales-3

Team Coco

Les utilisateurs de Twitter reconnaitront sans mal la référence (à la limite du plagiat) de la page 404 de Twitter. Celle-ci est toutefois animée et ne contient aucune image, mais est entièrement codée.
aetherconcept-pages-404-originales-4

Lenny Rouanet

Qui dit 404 dit perdu sur un site… Une boussole animée à l’intérieur du zéro semble alors tenir de l’évidence. Très sympas !
aetherconcept-pages-404-originales-6

Mike Kus

Classique en somme, et pas très compliquée à mettre en place puisqu’il s’agit d’un simple GIF. Mais un GIF rendant hommage à Space Invader. Et pour un geek, ça fait la différence
aetherconcept-pages-404-originales-7

mass:werk

Mass:werk est une agence web autrichienne. Cette animation, générée en HTML5, est censée représenter ce qui s’appelle une transformation de Fourier. Et wep.
aetherconcept-pages-404-originales-8

Blizzard Entertainment

Le site de Blizzard nous accuse d’avoir cassé l’écran et flingué le menu de navigation qui s’est ramassé la tronche. Par ailleurs, on peut voir les « entrailles » du site en lieu et place d’où est censé se trouver le menu, qui demeure cliquable malgré le fait d’être tombé.
aetherconcept-pages-404-originales-9

iStockphoto

J’adore celle-ci et son côté totalement décalé. Avec une simple illustration aux allures trash et dans le style Happy Tree Friends, iStock fait à la fois simple et efficace.
aetherconcept-pages-404-originales-10

Huwshimi

Puisqu’on nous dit sous l’illustration qu’un ninja a volé la page qu’on cherche, c’est que ce doit être sans doute vrai !
aetherconcept-pages-404-originales-11

DropBox

La page de DropBox est également très classe. Simple et minimaliste, son illustration est en fait un de ces objets qu’il est impossible de concevoir en vrai. Un chouette méli-mélo visuel en somme.
aetherconcept-pages-404-originales-12

Tin Sanity

Cette page pourrait aussi être une publicité contre l’usage de la cocaïne. Donc je vous invite à baisser le son si vous êtes au bureau. Juste un gros WTF pour cette page aussi cool que débile
aetherconcept-pages-404-originales-13

Nouveller

Fan de Jurassic Park ? Vous allez adorer cette 404 de l’agence anglaise Nouveller. Vous vous retrouvez devant la console de contrôle de Jurassic Park qui attend vos instructions pour être redémarrée. N’oubliez pas de dire le mot magique !
aetherconcept-pages-404-originales-15

Daniel Karcher Film Design Studios

De loin ma préférée ! Ce site fait un excellent usage de l’animation et du son. Sa page 404 utilise une station de métro. Les affiches parlent d’elle-même sur le fait que vous êtes paumé et un train vide vient s’y arrêter. Cliquez pour monter dedans, vous verrez.aetherconcept-pages-404-originales-14

Pauline Pied

Une nouveauté 2020, qui m’a été proposée par la propriétaire du site concerné. Ici, vous tombez sur un mini-jeu, racontant une histoire de loup-garou et de féculents. Ce jeu n’est pas sans rappeler Sonic le Hérisson, sauf qu’en lieu et place des anneaux vous devez attraper de la nourriture. J’ignore ce qu’il en est du taux de conversion, mais l’originalité est assurément au rendez-vous. C’est bien fait et ça vaut le détour.

aetherconcept-pages-404-originales-16

Bon, de rédiger cette liste m’aura finalement donné envie de retravailler ma 404 prochainement ! Pour conclure, afin d’éviter tous problèmes liés à la suppression d’une page, d’un article ou bien au changement de votre nom de domaine, n’oubliez pas de penser à effectuer ce qu’on appelle des redirections 301. Ça vous évitera de perdre des visiteurs inutilement et permettra de préserver le référencement de votre site Internet.

Cet article vous a plu ? Partagez-le !

  

Sébastien DROUIN

Consultant en communication croisé zèbre, designer graphique, ingénieur de formation, AI prompt engineer. Je mange des IA au petit déjeuner et je permets aux entreprises de multiplier leurs ventes grâce au web 🤖

Rejoignez les 10 000 visiteurs mensuels du site et recevez Le Guide de Survie de la Communication d'Entreprise au format PDF.
136 pages d'une valeur de 23,90 € offertes !
En m'inscrivant, j'accepte de recevoir par e-mail les derniers articles du blog et je prends connaissance de la politique de confidentialité.