{"id":11366,"date":"2020-07-31T09:00:25","date_gmt":"2020-07-31T07:00:25","guid":{"rendered":"https:\/\/www.printoclock.com\/blog\/?p=11366"},"modified":"2024-04-11T14:14:30","modified_gmt":"2024-04-11T12:14:30","slug":"15-exemples-pages-404-inspiration","status":"publish","type":"post","link":"https:\/\/www.printoclock.com\/blog\/15-exemples-pages-404-inspiration\/","title":{"rendered":"15 exemples de pages 404 pour votre inspiration"},"content":{"rendered":"\n

La cr\u00e9ation de pages d\u2019erreur 404 ne figure peut-\u00eatre pas en t\u00eate de liste lors de la conception d’un site web, mais les meilleures d’entre elles servent \u00e0 v\u00e9hiculer l’identit\u00e9 de la marque et \u00e0 divertir les visiteurs. Bien s\u00fbr, l’id\u00e9al serait que les utilisateurs ne voient pas du tout une page 404, mais vous pouvez tourner la situation \u00e0 votre avantage en y r\u00e9fl\u00e9chissant un peu et en utilisant ces pages d’erreur comme ambassadeurs de votre marque.<\/p>\n\n\n\n

Les pages 404 personnalis\u00e9es 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\u2019un site web. Il peut s’agir d’une animation CSS bien pens\u00e9e, d’un effet de parallaxe sympa ou d\u2019une illustration dr\u00f4le, autant de moyens d’animer vos pages d’erreur 404.<\/p>\n\n\n\n

Nous avons s\u00e9lectionn\u00e9 nos pages d’erreur 404 pr\u00e9f\u00e9r\u00e9es et les avons pr\u00e9sent\u00e9es ici. N\u2019h\u00e9sitez pas \u00e0 jeter un coup d’\u0153il et laissez-vous inspirer pour sortir des sentiers battus pour vos propres pages 404. Si vous avez des exemples de pages 404 r\u00e9ussies, vous pouvez nous les proposer en commentaire de cet article.<\/p>\n\n\n\n

Marvel<\/h2>\n\n\n
\n
\"Marvel<\/figure><\/div>\n\n\n

Le site de Marvel a plusieurs versions de ses pages 404, qui sont toutes ax\u00e9es sur le MCU. Nous avons rep\u00e9r\u00e9 des r\u00e9f\u00e9rences \u00e0 Hydra et \u00e0 l’\u0153il d’Utau, pour n’en citer que quelques-unes.<\/p>\n\n\n

\n
\"page<\/figure><\/div>\n\n\n

Lego<\/h2>\n\n\n
\n
\"page<\/figure><\/div>\n\n\n

La page 404 de Lego  est assez simple, mais elle d\u00e9gage une certaine personnalit\u00e9. L’expression horrifi\u00e9e de l’homme Lego, plus la pression sur un slogan de la marque (\u00ab\u00a0Everything is STILL AWESOME!<\/em> \u00ab\u00a0) cr\u00e9e une exp\u00e9rience de page d’erreur dans laquelle vous ne regrettez pas d’\u00eatre tomb\u00e9.<\/p>\n\n\n\n

Pixar<\/h2>\n\n\n
\n
\"Pixar<\/figure><\/div>\n\n\n

Certaines personnes peuvent prendre les choses un peu trop \u00e0 c\u0153ur. La page 404 de Pixar, qui pr\u00e9sente Tristesse du tr\u00e8s populaire film d\u2019animation Vice-versa sorti en 2015, est simple, directe et fonctionne bien.<\/p>\n\n\n\n

Figma<\/h2>\n\n\n
\n
\"Page<\/figure><\/div>\n\n\n

M\u00eame si vous disposez d’Illustrator CC sur votre ordinateur, et que vous pouvez jouer avec les points d’ancrage et les courbes \u00e0 tout moment, vous pouvez passer un moment d\u2019amusement avec la page 404 de Figma. Le texte 404 surdimensionn\u00e9 est rendu en vecteurs que vous pouvez remodeler comme vous voulez\u2026<\/p>\n\n\n\n

Airbnb<\/h2>\n\n\n
\n
\"Airbnb<\/figure><\/div>\n\n\n

Cette page 404 d’Airbnb pr\u00e9sente une animation simple mais amusante d’une fillette malchanceuse qui fait tomber sa glace sur le sol. Airbnb a b\u00e2ti sa r\u00e9putation sur sa personnalit\u00e9 et sa convivialit\u00e9 et cette page 404 convient parfaitement \u00e0 son image de marque.<\/p>\n\n\n

\n
\"Airbnb<\/figure><\/div>\n\n\n

GitHub<\/h2>\n\n\n
\n
\"Github<\/figure><\/div>\n\n\n

On s’attendrait \u00e0 un peu de magie technique de la part d’un site web consacr\u00e9 au versionnage de code. La page 404 cible un autre type de geeks avec une simple parodie de Star Wars rehauss\u00e9e par un effet de parallaxe intelligent lorsque vous bougez votre souris. GitHub a \u00e9galement une belle page 500<\/a> pour les cas de rupture de serveur.<\/p>\n\n\n\n

CSS Ninjas<\/h2>\n\n\n
\n
\"erreur<\/figure><\/div>\n\n\n

Le monde du web adore les ninjas. Souvent dans le cadre d’un titre de poste autoproclam\u00e9. S’inscrivant dans la tendance et en r\u00e9f\u00e9rence \u00e0 son nom, la page 404 de CSS ninjas pr\u00e9sente une illustration nette et stylis\u00e9e qui refl\u00e8te l’approche g\u00e9n\u00e9rale du site en mati\u00e8re de design.<\/p>\n\n\n\n

MailChimp<\/h2>\n\n\n
\n
\"page<\/figure><\/div>\n\n\n

La page d’erreur de Mailchimp pr\u00e9sente des illustrations na\u00efves autour desquelles s’articule la strat\u00e9gie de marque de MailChimp. Un \u00e2ne avec la t\u00eate dans un trou semble \u00e0 la recherche de la page perdue.<\/p>\n\n\n\n

Gymbox<\/h2>\n\n\n\n

Gym Box est une salle de sport qui vise \u00e0 offrir \u00ab\u00a0les cours uniques et les plus vari\u00e9s de Londres\u00a0\u00bb. Les limites de cette affirmation pourraient \u00eatre le genre de magnifique spectacle de fitness des ann\u00e9es 80 qui figure sur sa page 404. Shorts courts, hauts moulants et pouss\u00e9es pelviennes – que demander de plus \u00e0 une page d’erreur 404 ?<\/p>\n\n\n\n

Slack<\/h2>\n\n\n
\n
\"page<\/figure><\/div>\n\n\n

Il n’est que l\u00e9g\u00e8rement exag\u00e9r\u00e9 de dire que la mise \u00e0 jour du logo de Slack en 2019<\/a> a \u00e9t\u00e9 accueillie avec une horreur g\u00e9n\u00e9ralis\u00e9e, et sa page 404 au style na\u00eff est s\u00fbre d’avoir sa part de haine aussi. Si vous vous trompez dans Slack, vous serez dirig\u00e9 vers un paysage magique de feuillages luxuriants, de montagnes et d’arcs-en-ciel, o\u00f9 papillons, poulets et petits cochons errent en libert\u00e9. La sc\u00e8ne d\u00e9file horizontalement avec le mouvement de votre souris.<\/p>\n\n\n\n

DropBox<\/h2>\n\n\n
\n
\"page<\/figure><\/div>\n\n\n

DropBox a remplac\u00e9 la bo\u00eete impossible de style Escher qui a orn\u00e9 sa page 404 pendant des ann\u00e9es, par une illustration tout aussi excentrique. Il s\u2019agit peut-\u00eatre d\u2019une repr\u00e9sentation abstraite de tout ce qui va mal – les roues qui se d\u00e9tachent. Cette belle illustration simple, dessin\u00e9e \u00e0 la main, fait bien passer le message, avec de nombreux liens de navigation utiles pour une exp\u00e9rience utilisateur de qualit\u00e9.<\/p>\n\n\n\n

Starbucks<\/h2>\n\n\n
\n
\"Starbucks<\/figure><\/div>\n\n\n

Starbucks fait bon usage de son produit principal pour illustrer son message 404. Ici, les traces d’une tasse de caf\u00e9 manquante sont utilis\u00e9es pour raconter l’histoire. Il y a \u00e9galement des textes simples pour aider l’utilisateur \u00e0 trouver ce qu’il cherchait.<\/p>\n\n\n\n

Blizzard Entertainment<\/h2>\n\n\n
\n
\"Blizzard<\/figure><\/div>\n\n\n

Avec sa page 404, le d\u00e9veloppeur de jeux vid\u00e9o Blizzard fait preuve de simplicit\u00e9 et de respect pour la marque. Un personnage anim\u00e9 capte l’attention avec un message disant aux visiteurs \u00ab\u00a0Nous avons envoy\u00e9 un murloc de sauvetage pour vous guider vers la s\u00e9curit\u00e9\u00a0\u00bb. Vous ne savez pas ce que signifie \u00ab\u00a0Mmmrrgmgrrrgmmll !\u00a0\u00bb sur le Call to action ? Il vous suffit de cliquer pour retourner \u00e0 la page d’accueil.<\/p>\n\n\n\n

Pur\u00e9e Maison<\/h2>\n\n\n
\n
\"Page<\/figure><\/div>\n\n\n

Pur\u00e9e Maison est une agence de communication, son site web est plein d’animations qui m\u00e9ritent un coup d’\u0153il. Nous sommes particuli\u00e8rement fans de cette page 404 surr\u00e9aliste, retranscrit parfaitement la douleur de se heurter \u00e0 un mur num\u00e9rique.<\/p>\n\n\n\n

IMDb<\/h2>\n\n\n
\n
\"Page<\/figure><\/div>\n\n\n

Une autre page d’erreur 404 impressionnante, bas\u00e9e sur des r\u00e9pliques de film, se trouve sur le site web de l’IMDb. Cette base de donn\u00e9es compl\u00e8te de faits cin\u00e9matographiques a enrichi sa page 404 de citations iconiques de films c\u00e9l\u00e8bres, subtilement modifi\u00e9es pour coller au contexte de l\u2019erreur 404.<\/p>\n","protected":false},"excerpt":{"rendered":"

Une page d’erreur 404 personnalis\u00e9e permet d’adoucir l’effet n\u00e9gatif d’une erreur 404 sur votre site web tout en travaillant votre image de marque. Printoblog vous propose une s\u00e9lection de page d’erreur 404 originales et cr\u00e9atives pour votre inspiration.<\/p>\n","protected":false},"author":36,"featured_media":11387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"15 exemples de pages 404 pour votre inspiration","_seopress_titles_desc":"Une page d'erreur 404 personnalis\u00e9e est la petite touche d'originalit\u00e9 qui marque les esprits et rend votre marque attachante, 15 exemples de pages \u00e0 d\u00e9couvrir.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"facebook_10227655330001852_196003483236":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[710],"tags":[],"class_list":{"0":"post-11366","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-webdesign"},"_links":{"self":[{"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/posts\/11366"}],"collection":[{"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/comments?post=11366"}],"version-history":[{"count":14,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/posts\/11366\/revisions"}],"predecessor-version":[{"id":14787,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/posts\/11366\/revisions\/14787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/media\/11387"}],"wp:attachment":[{"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/media?parent=11366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/categories?post=11366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.printoclock.com\/blog\/wp-json\/wp\/v2\/tags?post=11366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}