{"id":7559,"date":"2022-03-01T01:00:00","date_gmt":"2022-03-01T00:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=7559"},"modified":"2025-08-20T17:18:36","modified_gmt":"2025-08-20T15:18:36","slug":"hierarchie-visuelle-ameliorer-site","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/","title":{"rendered":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web"},"content":{"rendered":"<p>La hi\u00e9rarchie, c&#8217;est le respect de l&#8217;ordre.<\/p>\n<p>Mais vous \u00eates un graphiste, un communicant, un internaute, et dire &#8220;oui chef &#8221; sur commande n&#8217;est pas sp\u00e9cialement votre style.<\/p>\n<p>Pourtant, vous allez devoir apprendre \u00e0 jouer avec les r\u00e8gles de la hi\u00e9rarchie pour optimiser votre site. Voici les principales\u2026<\/p>\n<p>&nbsp;<\/p>\n<h2>Qu\u2019est-ce que la hi\u00e9rarchie visuelle\u00a0?<\/h2>\n<p>La hi\u00e9rarchie visuelle c\u2019est ce qui ordonne l\u2019information sur les pages de votre site.<\/p>\n<blockquote><p>La hi\u00e9rarchie visuelle est utilis\u00e9e pour classer les \u00e9l\u00e9ments de votre site dans l&#8217;ordre dans lequel vous souhaitez que vos utilisateurs les voient. Vous allez, gr\u00e2ce \u00e0 elle, mettre chaque \u00e9l\u00e9ment \u00e0 sa place et faire ressortir les \u00e9l\u00e9ments les plus importants \u00e0 vos yeux.\u00a0<\/p><\/blockquote>\n<p>La hi\u00e9rarchie visuelle consiste donc \u00e0 utiliser diff\u00e9rentes ressources comme\u00a0:<\/p>\n<ul>\n<li>La couleur,<\/li>\n<li>Le contraste,<\/li>\n<li>Les typographies,<\/li>\n<li>L\u2019espacement et d\u2019autres principes de base pour organiser et hi\u00e9rarchiser votre contenu.<\/li>\n<\/ul>\n<p>Vous vous sentez perdu\u00a0? Pas de panique, c&#8217;est plus facile qu&#8217;il n&#8217;y para\u00eet\u00a0!<\/p>\n<p>&nbsp;<\/p>\n<h2>Pourquoi la hi\u00e9rarchie visuelle\u00a0est-elle si importante\u00a0?<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-28518\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/kaleidico-26MJGnCM0Wc-unsplash.jpg\" alt=\"\" width=\"700\" height=\"467\" \/><\/p>\n<p>Votre site se visite. Du moins, c&#8217;est ce que vous d\u00e9sirez. Il suffit d&#8217;une petite analogie avec le <a href=\"https:\/\/graphiste.com\/blog\/formats-communication-tourisme\">tourisme<\/a> pour comprendre qu&#8217;un guide bien form\u00e9 am\u00e9liorera encore l&#8217;exp\u00e9rience de vos visiteurs. Et c&#8217;est l\u00e0 le r\u00f4le de la hi\u00e9rarchie visuelle.<\/p>\n<p>Naturellement, il y aura dans vos pages web des \u00e9l\u00e9ments plus importants que d&#8217;autres. En effet, le but est de tracer les grandes lignes, les points de rep\u00e8re qui indiqueront rapidement aux internautes les points sur lesquels ils doivent concentrer leur attention.<\/p>\n<p>Notre cerveau pr\u00e9f\u00e8re les informations quand elles sont bien ordonn\u00e9es. Et mieux encore&nbsp;: la hi\u00e9rarchie nous aide \u00e0 nous y retrouver, nous donne envie de rester un peu plus pour entendre les explications de votre guide. Et nous donnera envie de revenir en ce lieu si bien organis\u00e9.<\/p>\n<blockquote><p>La hi\u00e9rarchie visuelle vous permettra de mieux faire passer votre message, et donc de rendre votre site plus lisible. Si vous souhaitez vendre un produit ou un service, une bonne hi\u00e9rarchie vous permettra d\u2019augmenter votre taux de conversion.<\/p><\/blockquote>\n<p>\u00c7a y est, vous commencez \u00e0 comprendre l&#8217;int\u00e9r\u00eat de ce principe&nbsp;? Bien, passons aux choses pratiques.<\/p>\n<p>&nbsp;<\/p>\n<h2>Les r\u00e8gles de la hi\u00e9rarchie visuelle<\/h2>\n<p>La hi\u00e9rarchie visuelle s&#8217;appuie sur la science pour savoir ce qui attire automatiquement l&#8217;\u0153il. Et donc pour mieux aider les internautes \u00e0 voir ce que VOUS d\u00e9sirez qu&#8217;ils regardent.<\/p>\n<p>Pour cela, vous allez utiliser les astuces suivantes&nbsp;:<\/p>\n<p>&nbsp;<\/p>\n<h4>1. Jouer sur la taille des \u00e9l\u00e9ments<\/h4>\n<p>Plus un \u00e9l\u00e9ment est de grande taille, plus il interpelle. C&#8217;est la loi de la jungle&nbsp;: les petits mangent les gros.<\/p>\n<p>En design, cela implique que vous allez pouvoir utiliser des titres ou des phrases avec des typographies plus imposantes. Et cela vaut aussi pour les blocs d&#8217;image.<\/p>\n<p>Vous allez tr\u00e8s vite constater qu&#8217;en plus vos blocs de texte seront plus digestes. Mais vous allez faire encore mieux pour aiguiser l&#8217;app\u00e9tit des internautes.<\/p>\n<p>&nbsp;<\/p>\n<h4>2. Mettre de la couleur<\/h4>\n<p>Dans une rang\u00e9e uniforme, la petite partie en couleur se distingue tout de suite des autres. C&#8217;est le principe du mouton noir. Sauf que, vous, votre r\u00f4le sera plut\u00f4t d&#8217;injecter de jolies teintes au milieu du noir. Et si vous mettiez un seul mot en rouge au milieu de votre phrase&nbsp;?<\/p>\n<p>Trouvez diff\u00e9rentes mani\u00e8res pour jouer avec la colorim\u00e9trie afin de guider les regards, tout en pensant \u00e0 <a href=\"https:\/\/graphiste.com\/blog\/choisir-palette-couleurs\">s\u00e9lectionner des tons qui se marient bien entre eux<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h4>3. Limiter la typographie<\/h4>\n<p>Vous savez d\u00e9j\u00e0 qu&#8217;il ne faut pas multiplier les typographies sur votre document ou votre site. Deux ou trois suffisent.<\/p>\n<p>C&#8217;est d&#8217;autant plus le cas sur un support mobile&nbsp;: pour tout ce qui est smarphone, vous devrez vous contraindre \u00e0 n&#8217;utiliser que deux niveaux typographiques.<\/p>\n<p>Oubliez donc les sous-titres et condensez l&#8217;information. Ce n&#8217;est pas seulement une question d&#8217;esth\u00e9tique, mais aussi une mani\u00e8re de construire un outil pratique pour ses utilisateurs.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/regles-typographie\">15 r\u00e8gles d\u2019or pour ma\u00eetriser la typographie<\/a><\/p><\/blockquote>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-28519\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg\" alt=\"\" width=\"700\" height=\"467\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4>4. Trouver les bonnes places<\/h4>\n<p>L&#8217;espace blanc a du sens, quel que soit le support sur lequel vous l&#8217;appliquez. Il aide la hi\u00e9rarchie en mettant en avant certaines parties de la page, en les faisant ressortir du lot.<\/p>\n<p>Encore faut-il l&#8217;utiliser \u00e0 bon escient&nbsp;: si deux \u00e9l\u00e9ments sont cens\u00e9s \u00eatre li\u00e9s l&#8217;un \u00e0 l&#8217;autre, ne les \u00e9loignez pas trop, visuellement parlant.<\/p>\n<p>Penchez-vous aussi sur les grilles de lecture&nbsp;: de la classique en Z \u00e0 celle en F, qui s&#8217;applique de plus en plus sur le web, de mani\u00e8re intuitive, vous trouverez des pistes pour mieux construire vos pages et vos documents. Et pour placer chaque \u00e9l\u00e9ment \u00e0 l&#8217;endroit le plus ad\u00e9quat pour qu&#8217;il se fasse bien voir.<\/p>\n<blockquote><p> Lorsqu&#8217;il s&#8217;agit de lire des mots, la plupart des cultures lisent de haut en bas et de gauche \u00e0 droite. M\u00eame s\u2019il y a des exceptions, il y a fort \u00e0 parier que vous n&#8217;avez pas commenc\u00e9 cet article en bas de l&#8217;\u00e9cran. La lecture d&#8217;informations visuelles fonctionne presque de la m\u00eame mani\u00e8re et gr\u00e2ce au suivi oculaire. Nous savons maintenant comment sont appr\u00e9hend\u00e9es les pages web par les lecteurs. <\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h4>5. R\u00e9p\u00e9ter et refaire<\/h4>\n<p>Une fois que vous aurez trouv\u00e9 votre m\u00e9thode d&#8217;alignement et de pr\u00e9sentation, respectez-la.<\/p>\n<p>Ce n&#8217;est pas la peine de changer la mise en page sur chaque page. Parce que vous allez \u00e0 chaque fois perdre les internautes&nbsp;: la hi\u00e9rarchie, c&#8217;est aussi une mani\u00e8re d&#8217;assurer leur stabilit\u00e9. C&#8217;est un peu comme un refrain&nbsp;: on finit par le retenir sans s&#8217;en rendre compte. Et c&#8217;est le but que vous devez obtenir pour vos visuels.<\/p>\n<blockquote><p> Mais que faire si vous n&#8217;\u00eates pas s\u00fbr que votre hi\u00e9rarchie visuelle fonctionne comme vous le souhaitez&nbsp;? Il existe un moyen simple de tester son efficacit\u00e9, que vous pouvez le r\u00e9aliser \u00e0 tout moment, sans outils sp\u00e9ciaux. Il s&#8217;agit du fid\u00e8le &#8220;test du strabisme&#8221;.<\/p><\/blockquote>\n<p>Prenez un peu de recul par rapport \u00e0 l&#8217;\u00e9cran de votre ordinateur et louchez sur votre conception pour que tous les d\u00e9tails s&#8217;estompent et que vous ne voyiez que des formes g\u00e9n\u00e9rales et floues.<\/p>\n<p>Qu&#8217;est-ce qui ressort encore&nbsp;? Est-ce ce que vous voulez que les spectateurs regardent en premier&nbsp;? Si c&#8217;est le cas, vous \u00eates en bonne voie. Sinon, il est peut-\u00eatre temps de revenir en arri\u00e8re et d&#8217;essayer autre chose. <\/p><\/blockquote>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/webdesign-tendances-2021\">Les 10 grandes tendances 2019 du web design<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<p>Nous esp\u00e9rons que ce guide vous a montr\u00e9 l&#8217;importance d&#8217;\u00e9tablir une hi\u00e9rarchie visuelle claire dans tous vos projets de conception. Il est donc temps de mettre un peu d&#8217;ordre dans vos pr\u00e9sentations et vos sites web. Oui, finalement, on y vient aux ordres. Et vous allez ob\u00e9ir&nbsp;! Parce que c&#8217;est de cette mani\u00e8re que vous obtiendrez des sites qui feront campagne pour vous de mani\u00e8re efficace.<\/p>\n<p><strong>Faites appel \u00e0 un graphiste freelance professionnel pour vous aider \u00e0 hi\u00e9rarchiser votre site web sur <a href=\"https:\/\/graphiste.com\/\">Graphiste.com<\/a>&nbsp;!\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La hi\u00e9rarchie, c&#8217;est le respect de l&#8217;ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire &#8220;oui chef &#8221; sur commande n&#8217;est pas sp\u00e9cialement votre style. Pourtant, vous allez devoir apprendre \u00e0 jouer avec les r\u00e8gles de la hi\u00e9rarchie pour optimiser votre site. Voici les principales\u2026 &nbsp; Qu\u2019est-ce que la hi\u00e9rarchie visuelle\u00a0? La [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":28517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-7559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"La hi\u00e9rarchie, c&#039;est le respect de l&#039;ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire &quot;oui chef &quot; sur commande n&#039;est pas\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"La hi\u00e9rarchie, c&#039;est le respect de l&#039;ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire &quot;oui chef &quot; sur commande n&#039;est pas\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-01T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:18:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web\",\"datePublished\":\"2022-03-01T00:00:00+00:00\",\"dateModified\":\"2025-08-20T15:18:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\"},\"wordCount\":1253,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\",\"url\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\",\"name\":\"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg\",\"datePublished\":\"2022-03-01T00:00:00+00:00\",\"dateModified\":\"2025-08-20T15:18:36+00:00\",\"description\":\"La hi\u00e9rarchie, c'est le respect de l'ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire \\\"oui chef \\\" sur commande n'est pas\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"hierarchie visuelle site web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/totolazza.com\",\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog","description":"La hi\u00e9rarchie, c'est le respect de l'ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire \"oui chef \" sur commande n'est pas","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/","og_locale":"fr_FR","og_type":"article","og_title":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog","og_description":"La hi\u00e9rarchie, c'est le respect de l'ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire \"oui chef \" sur commande n'est pas","og_url":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-03-01T00:00:00+00:00","article_modified_time":"2025-08-20T15:18:36+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web","datePublished":"2022-03-01T00:00:00+00:00","dateModified":"2025-08-20T15:18:36+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/"},"wordCount":1253,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/","url":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/","name":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg","datePublished":"2022-03-01T00:00:00+00:00","dateModified":"2025-08-20T15:18:36+00:00","description":"La hi\u00e9rarchie, c'est le respect de l'ordre. Mais vous \u00eates un graphiste, un communicant, un internaute, et dire \"oui chef \" sur commande n'est pas","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/08\/une-graphiste-hierarchie-1.jpg","width":850,"height":423,"caption":"hierarchie visuelle site web"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/hierarchie-visuelle-ameliorer-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"6 astuces de hi\u00e9rarchie visuelle pour am\u00e9liorer votre site web"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/totolazza.com","https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=7559"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7559\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/28517"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=7559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=7559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=7559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}