Partager la publication "15 exemples de pages 404 pour votre inspiration"
La création de pages d’erreur 404 ne figure peut-être pas en tête de liste lors de la conception d’un site web, mais les meilleures d’entre elles servent à véhiculer l’identité de la marque et à divertir les visiteurs. Bien sûr, l’idéal serait que les utilisateurs ne voient pas du tout une page 404, mais vous pouvez tourner la situation à votre avantage en y réfléchissant un peu et en utilisant ces pages d’erreur comme ambassadeurs de votre marque.
Les pages 404 personnalisées utilisent une UX intelligente, de l’humour ou un design original pour adoucir l’irritation que peut provoquer une erreur 404 lors de la visite d’un site web. Il peut s’agir d’une animation CSS bien pensée, d’un effet de parallaxe sympa ou d’une illustration drôle, autant de moyens d’animer vos pages d’erreur 404.
Nous avons sélectionné nos pages d’erreur 404 préférées et les avons présentées ici. N’hésitez pas à jeter un coup d’œil et laissez-vous inspirer pour sortir des sentiers battus pour vos propres pages 404. Si vous avez des exemples de pages 404 réussies, vous pouvez nous les proposer en commentaire de cet article.
Marvel
Le site de Marvel a plusieurs versions de ses pages 404, qui sont toutes axées sur le MCU. Nous avons repéré des références à Hydra et à l’œil d’Utau, pour n’en citer que quelques-unes.
Lego
La page 404 de Lego est assez simple, mais elle dégage une certaine personnalité. L’expression horrifiée de l’homme Lego, plus la pression sur un slogan de la marque (« Everything is STILL AWESOME! « ) crée une expérience de page d’erreur dans laquelle vous ne regrettez pas d’être tombé.
Pixar
Certaines personnes peuvent prendre les choses un peu trop à cœur. La page 404 de Pixar, qui présente Tristesse du très populaire film d’animation Vice-versa sorti en 2015, est simple, directe et fonctionne bien.
Figma
Même si vous disposez d’Illustrator CC sur votre ordinateur, et que vous pouvez jouer avec les points d’ancrage et les courbes à tout moment, vous pouvez passer un moment d’amusement avec la page 404 de Figma. Le texte 404 surdimensionné est rendu en vecteurs que vous pouvez remodeler comme vous voulez…
Airbnb
Cette page 404 d’Airbnb présente une animation simple mais amusante d’une fillette malchanceuse qui fait tomber sa glace sur le sol. Airbnb a bâti sa réputation sur sa personnalité et sa convivialité et cette page 404 convient parfaitement à son image de marque.
GitHub
On s’attendrait à un peu de magie technique de la part d’un site web consacré au versionnage de code. La page 404 cible un autre type de geeks avec une simple parodie de Star Wars rehaussée par un effet de parallaxe intelligent lorsque vous bougez votre souris. GitHub a également une belle page 500 pour les cas de rupture de serveur.
CSS Ninjas
Le monde du web adore les ninjas. Souvent dans le cadre d’un titre de poste autoproclamé. S’inscrivant dans la tendance et en référence à son nom, la page 404 de CSS ninjas présente une illustration nette et stylisée qui reflète l’approche générale du site en matière de design.
MailChimp
La page d’erreur de Mailchimp présente des illustrations naïves autour desquelles s’articule la stratégie de marque de MailChimp. Un âne avec la tête dans un trou semble à la recherche de la page perdue.
Gymbox
Gym Box est une salle de sport qui vise à offrir « les cours uniques et les plus variés de Londres ». Les limites de cette affirmation pourraient être le genre de magnifique spectacle de fitness des années 80 qui figure sur sa page 404. Shorts courts, hauts moulants et poussées pelviennes – que demander de plus à une page d’erreur 404 ?
Slack
Il n’est que légèrement exagéré de dire que la mise à jour du logo de Slack en 2019 a été accueillie avec une horreur généralisée, et sa page 404 au style naïf est sûre d’avoir sa part de haine aussi. Si vous vous trompez dans Slack, vous serez dirigé vers un paysage magique de feuillages luxuriants, de montagnes et d’arcs-en-ciel, où papillons, poulets et petits cochons errent en liberté. La scène défile horizontalement avec le mouvement de votre souris.
DropBox
DropBox a remplacé la boîte impossible de style Escher qui a orné sa page 404 pendant des années, par une illustration tout aussi excentrique. Il s’agit peut-être d’une représentation abstraite de tout ce qui va mal – les roues qui se détachent. Cette belle illustration simple, dessinée à la main, fait bien passer le message, avec de nombreux liens de navigation utiles pour une expérience utilisateur de qualité.
Starbucks
Starbucks fait bon usage de son produit principal pour illustrer son message 404. Ici, les traces d’une tasse de café manquante sont utilisées pour raconter l’histoire. Il y a également des textes simples pour aider l’utilisateur à trouver ce qu’il cherchait.
Blizzard Entertainment
Avec sa page 404, le développeur de jeux vidéo Blizzard fait preuve de simplicité et de respect pour la marque. Un personnage animé capte l’attention avec un message disant aux visiteurs « Nous avons envoyé un murloc de sauvetage pour vous guider vers la sécurité ». Vous ne savez pas ce que signifie « Mmmrrgmgrrrgmmll ! » sur le Call to action ? Il vous suffit de cliquer pour retourner à la page d’accueil.
Purée Maison
Purée Maison est une agence de communication, son site web est plein d’animations qui méritent un coup d’œil. Nous sommes particulièrement fans de cette page 404 surréaliste, retranscrit parfaitement la douleur de se heurter à un mur numérique.
IMDb
Une autre page d’erreur 404 impressionnante, basée sur des répliques de film, se trouve sur le site web de l’IMDb. Cette base de données complète de faits cinématographiques a enrichi sa page 404 de citations iconiques de films célèbres, subtilement modifiées pour coller au contexte de l’erreur 404.
Après avoir suivi un cursus en communication visuelle, j’ai choisi de poursuivre ma formation par une licence en Arts Appliqués.
Aujourd’hui, je continue le graphisme sur tous les supports je suis également pigiste pour certains sites traitant de design et j’écris sur Printoblog.