{"id":748,"date":"2014-04-27T10:00:14","date_gmt":"2014-04-27T08:00:14","guid":{"rendered":"https:\/\/www.internetcommunication.fr\/?p=748"},"modified":"2022-07-21T14:51:51","modified_gmt":"2022-07-21T14:51:51","slug":"notre-selection-graphisme-affordance-refonte-dun-site","status":"publish","type":"post","link":"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html","title":{"rendered":"Notre s\u00e9lection graphisme et affordance pour la refonte d&#039;un site"},"content":{"rendered":" http:\/\/www.what-the-fox.com\/\n<h2><span class=\"ez-toc-section\" id=\"Tendances_du_design_web_et_revolution_des_arborescences\"><\/span>Tendances du design web et r\u00e9volution des arborescences<span class=\"ez-toc-section-end\"><\/span><\/h2><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Pour gagner du temps<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html\/#Tendances_du_design_web_et_revolution_des_arborescences\" >Tendances du design web et r\u00e9volution des arborescences<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html\/#Si_vous_en_avez_assez_du_Up_Down\" >Si vous en avez assez du Up \/ Down<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html\/#Affordance_quand_tu_nous_obliges\" >Affordance quand tu nous obliges<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html\/#Single_page_a_tuer_mon_referencement\" >Single page a tuer mon r\u00e9f\u00e9rencement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.internetcommunication.fr\/+\/notre-selection-graphisme-affordance-refonte-dun-site.html\/#Experience_utilisateur_et_experience_ludique\" >Exp\u00e9rience utilisateur et exp\u00e9rience ludique<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p>Si vous en avez assez de la navigation traditionnelle,du menu lin\u00e9aire avec des multiples filtres, cat\u00e9gories pour acc\u00e9der au contenu, nous vous invitons \u00e0 red\u00e9couvrir les mod\u00e8les <strong>One page ou Single page<\/strong>. Le concept est simple, <strong>tout se trouve sur la page d&rsquo;accueil<\/strong>. Il va falloir \u00eatre synth\u00e9tique&#8230;<br \/>\nLa navigation haute ou lat\u00e9rale vous permet d&rsquo;acc\u00e9der directement au contenu dans la page, sans ouvrir de nouvelle page. Ce qui g\u00e9n\u00e8re une certaine volupt\u00e9 dans la navigation. Un plaisir retrouv\u00e9, on se laisse guider avec l&rsquo;espoir d&rsquo;aller de surprise en surprise. C&rsquo;est ce qui est la force du Single Page, c&rsquo;est que <strong>chaque navigation peut \u00eatre innovante<\/strong> m\u00eame si le <a title=\"Cr\u00e9ation de site et responsive design\" href=\"https:\/\/internetcommunication.fr\/+\/+\/creation-de-site-et-responsive-design.html\">site a \u00e9t\u00e9 con\u00e7u \u00e0 partir d&rsquo;une m\u00eame template ou th\u00e8me<\/a>. Outre la navigation dans la page, le d\u00e9filement du site permet de proposer des visuels sp\u00e9cifiques \u00e0 votre domaine d&rsquo;activit\u00e9, votre environnement, vos r\u00e9f\u00e9rences culturelles&#8230; Un mod\u00e8le texte sur images !<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Si_vous_en_avez_assez_du_Up_Down\"><\/span>Si vous en avez assez du Up \/ Down<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le Single Page est un concept de site, de navigation dans le site qui offre une <strong>profondeur in\u00e9puisable<\/strong>. Et parfois un peu de <strong>temps d&rsquo;attente<\/strong> : t\u00e9l\u00e9chargement de la page et affichage de la page. On se rapproche des \u00e9ventuelles sanctions de Google&#8230;<br \/>\nAlors, il est temps d&rsquo;opter pour une <strong>navigation horizontale<\/strong>. Plus qu&rsquo;un design web, il s&rsquo;agit d&rsquo;un mouvement soci\u00e9tal, philosophique, une expression de l&rsquo;\u00e8re du temps&#8230; Fini le mod\u00e8le pyramidal et des \u00e9lites !<br \/>\nDans cette vision, ce voyage propos\u00e9 horizontalement, il va falloir \u00e9duquer vos clients, les Internautes. En effet, cette <strong>navigation reste surprenante<\/strong> et beaucoup de sites pr\u00e9f\u00e8rent conserver le petit message \u00e0 l&rsquo;attention des visiteurs :<\/p>\n<blockquote>\n<p style=\"text-align: center;\">Utilisez les fl\u00e8ches&#8230;<\/p>\n<\/blockquote>\n<p>Mais il y a les puristes, courageux, qui veulent faire vivre une exp\u00e9rience \u00e0 leurs lecteurs !<\/p>\n<blockquote>\n<p style=\"text-align: center;\">D\u00e9placez-vous avec les fl\u00e8ches !<\/p>\n<p style=\"text-align: center;\">D\u00e9placez-vous en faisant rouler votre souris ! Scroll, Scroll !!!<\/p>\n<\/blockquote>\n<p>Un sc\u00e9nario de navigation cela peut \u00eatre aussi une exp\u00e9rience nouvelle. \u00c9videmment, il y a toujours une prise de <strong>risque \u00e0 faire diff\u00e9remment des autres<\/strong>. Mais cette prise de risque peut-\u00eatre aussi source de satisfaction voire de plaisir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Affordance_quand_tu_nous_obliges\"><\/span>Affordance quand tu nous obliges<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Nous n&rsquo;essaierons pas de vous persuader de l&rsquo;importance de l&rsquo;affordance. L&rsquo;affordance c&rsquo;est souvent une grande n\u00e9gligence au non d&rsquo;une <strong><a href=\"https:\/\/www.internetcommunication.fr\/+\/creation-de-site-internet\/charte-graphique\">ergonomie<\/a> st\u00e9rile<\/strong>. Mais les utilisateurs sont exigeants&#8230; Si, ils sont pr\u00eats \u00e0 vivre une nouvelle exp\u00e9rience, il faudra tout de m\u00eame les m\u00e9nager. Songez \u00e0 la pertinence de Windows qui nous a impos\u00e9 un bouton d\u00e9marrer pour \u00e9teindre son ordinateur durant presque 20 ans. Et panique \u00e0 bord, Windows 8 abandonne la marque de fabrique : Un <strong>crime contre l&rsquo;affordance<\/strong> mais un conditionnement r\u00e9ussi si on pense aux critiques des utilisateurs et aux rumeurs du retour du bouton d\u00e9marrer.<br \/>\n&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Single_page_a_tuer_mon_referencement\"><\/span>Single page a tuer mon r\u00e9f\u00e9rencement<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>C&rsquo;est toujours sympa de <strong>refaire son site<\/strong> ou c&rsquo;est le pire moment, qui revient si souvent&#8230; Choisir le bon th\u00e8me, la bonne exp\u00e9rience graphique c&rsquo;est aussi prendre des risques avec l&rsquo;autre partie de nos utilisateurs : les robots&#8230;<br \/>\nEn effet, que penser des sites <strong>Single Page pour le <a href=\"https:\/\/www.internetcommunication.fr\/+\/seo\">r\u00e9f\u00e9rencement naturel<\/a><\/strong>. Comment miser sur un site avec une page unique quand Google nous demande <strong>toujours plus de contenus<\/strong> (textes, images, vid\u00e9os, commentaires, avis, g\u00e9olocalisation&#8230;). Par exp\u00e9rience, le Single Page n&rsquo;est pas forc\u00e9ment un probl\u00e8me de r\u00e9f\u00e9renceur. On privil\u00e9giera malgr\u00e9 tout, la navigation Single Page avec ouverture de page compl\u00e9mentaires pour d\u00e9couvrir le produit, le contenu dans le d\u00e9tail et s&rsquo;assurer un <strong>r\u00e9f\u00e9rencement Google friendly<\/strong>&#8230;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Experience_utilisateur_et_experience_ludique\"><\/span>Exp\u00e9rience utilisateur et exp\u00e9rience ludique<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le site de Diesel reste un mod\u00e8le du genre. Alors, il n&rsquo;y a qu&rsquo;une chose \u00e0 faire, red\u00e9couvrir le site.<br \/>\nMais Diesel semble pourtant avoir abandonn\u00e9 l&rsquo;audace. Tant pis pour nous&#8230;<br \/>\nEt heureusement, il y a des sites o\u00f9 on ose, on se moque des mises en garde de Google et les autres&#8230;<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/everylastdrop.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/everylastdrop.co.uk\/<\/a><\/p>\n<p style=\"text-align: center;\">http:\/\/www.evanshalshaw.com\/more\/effects-of-drug-driving\/<\/p>\n<p>Envie de changement et tout de suite ? <a title=\"Contacter Internet Communication\" href=\"https:\/\/internetcommunication.fr\/+\/+\/contact-internet-communication\"><span style=\"color: #00ccff;\">Contactez-nous !<\/span><\/a> :<a href=\"https:\/\/internetcommunication.fr\/+\/+\/contact-internet-communication\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tendances du design web et r\u00e9volution des arborescences Si vous en avez assez de la navigation traditionnelle,du menu lin\u00e9aire avec des multiples filtres, cat\u00e9gories pour acc\u00e9der au contenu, nous vous invitons \u00e0 red\u00e9couvrir les mod\u00e8les One page ou Single page. Le concept est simple, tout se trouve sur la page d&rsquo;accueil. Il va falloir \u00eatre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,72],"tags":[160,161,145,146],"class_list":["post-748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualite","category-creation-de-site","tag-affordance","tag-creation-de-site-2","tag-ergonomie-web","tag-graphisme-web"],"_links":{"self":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":0,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/posts\/748\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/media\/5383"}],"wp:attachment":[{"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/media?parent=748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/categories?post=748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.internetcommunication.fr\/+\/wp-json\/wp\/v2\/tags?post=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}