{"id":19300,"date":"2020-06-24T10:30:15","date_gmt":"2020-06-24T08:30:15","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=19300"},"modified":"2025-08-20T17:23:35","modified_gmt":"2025-08-20T15:23:35","slug":"web-design-meilleures-pratiques-exemples-header","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/","title":{"rendered":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header"},"content":{"rendered":"<p>Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir.<\/p>\n<p>Il faut 50 millisecondes \u00e0 un utilisateur pour se forger une opinion d\u00e9finitive sur votre site web. Il va sans dire que votre header doit \u00eatre optimis\u00e9 et attractif&nbsp;!<\/p>\n<p>Voici les meilleurs pratiques et exemples pour r\u00e9ussir le <a href=\"https:\/\/graphiste.com\/blog\/concevoir-header-newsletter-design\">design de votre header<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Le Header, c\u2019est quoi exactement\u00a0?<\/h2>\n<p>Avant toute chose, une bonne compr\u00e9hension de votre Header de site internet s\u2019impose. Le <a href=\"https:\/\/graphiste.com\/blog\/reussir-header-site-web\" target=\"_blank\" rel=\"noopener noreferrer\">header<\/a>, c\u2019est ni plus ni moins que le haut de la page d\u2019un site internet.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-19317 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/0ybB4u6PQLbEkeZCb.gif\" alt=\"header menu animation inspiration de header et menu pour graphiste freelance\" width=\"600\" height=\"450\" \/><\/p>\n<p>Si auparavant le header se contentait de prendre une petite place sur le haut des sites web, maintenant il s\u2019affiche en grand, prenant parfois tout l\u2019espace jusqu\u2019\u00e0 la ligne de flottaison.<\/p>\n<blockquote><p><strong>La ligne de flottaison<\/strong> est cette ligne imaginaire qui d\u00e9limite ce que vous voyez d\u2019un site avant de scroller. Il est l\u00e0 pour s\u00e9duire au premier coup d\u2019\u0153il et inviter les internautes \u00e0 poursuivre sur votre site web.<\/p><\/blockquote>\n<p>Son contenu doit \u00eatre captivant et informatif. Il doit renseigner le visiteur sur votre offre instantan\u00e9ment. Vous pouvez adopter un en-t\u00eate diff\u00e9rent de votre page d\u2019accueil, sur les autres pages de votre site, mais veilliez \u00e0 \u00eatre coh\u00e9rent\u00a0!<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/web-design-guide-animations-css\">Web design&nbsp;: 90 ressources pour vos animations CSS<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>1. Les \u00e9l\u00e9ments indispensables dans le Header<\/h2>\n<p>L\u2019en-t\u00eate de votre site internet a la double fonction de transmettre votre identit\u00e9 visuelle en quelques secondes et de susciter une UX (exp\u00e9rience utilisateur) optimale pour inciter les internautes \u00e0 parcourir votre site.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-19319 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/0t6LrzggtZCykRKWN-e1592561403497.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"700\" height=\"525\" \/><\/p>\n<p>Les \u00e9l\u00e9ments indispensables sont\u00a0:<\/p>\n<ul>\n<li>votre logo\u00a0;<\/li>\n<li>un texte de pr\u00e9sentation ou un titre\u00a0;<\/li>\n<li>une barre de navigation\u00a0;<\/li>\n<li>un Call-to-Action\u00a0;<\/li>\n<li>une section de recherche selon la taille de votre site.<\/li>\n<\/ul>\n<p>Vous pouvez ajouter des sections suppl\u00e9mentaires telles que des infos de contact, des liens vers vos r\u00e9seaux sociaux ou encore un panier pour les sites E-commerce. Attention n\u00e9anmoins \u00e0 ne pas surcharger votre en-t\u00eate sous peine de faire brouillon et de voir votre visiteur partir pour la concurrence\u00a0!<\/p>\n<blockquote><p>n\u2019oubliez pas que votre site doit \u00eatre parfaitement adapt\u00e9 \u00e0 la lecture sur mobile, s\u2019il vous para\u00eet a\u00e9r\u00e9 sur l\u2019ordinateur, il ne l\u2019est peut-\u00eatre plus dans sa version mobile&nbsp;!<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>2. Comment hi\u00e9rarchiser les \u00e9l\u00e9ments du Header&nbsp;?<\/h2>\n<p>Hi\u00e9rarchisez vos \u00e9l\u00e9ments en fonction de leur importance. Le <a href=\"https:\/\/graphiste.com\/blog\/reussir-mise-en-forme-graphique\" target=\"_blank\" rel=\"noopener noreferrer\">lecteur suit une structure en F<\/a> lorsqu\u2019il parcourt un site. C\u2019est-\u00e0-dire que son \u0153il part toujours du c\u00f4t\u00e9 gauche.<\/p>\n<p>Il est donc judicieux de mettre votre logo \u00e0 gauche\u00a0! Suivront votre titre ou votre pr\u00e9sentation, votre barre de navigation et votre <a href=\"https:\/\/graphiste.com\/blog\/5-regles-boutons-call-to-action\" target=\"_blank\" rel=\"noopener noreferrer\">Call-to-Action.<\/a><\/p>\n<p><a href=\"https:\/\/www.august.com.au\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-19309 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-exemple-2-video-menu-burger-animation.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"376\" \/><\/a><\/p>\n<p>Pour a\u00e9rer votre header, privil\u00e9giez le menu hamburger, vous savez ces trois bandes horizontales qui ouvrent sur un menu&nbsp;! Il va vous faire gagner une place folle&nbsp;!<\/p>\n<p>En r\u00e9sum\u00e9 on retrouve la suite logique de tout contenu\u00a0: qui, que, quoi, comment\u00a0?<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/web-design-menu-hamburger\">Web design&nbsp;: faut-il opter pour un menu hamburger&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>3. Comment dynamiser le Header&nbsp;?<\/h2>\n<p>Vous avez plusieurs possibilit\u00e9s pour rendre votre en-t\u00eate plus vivant et donc plus captivant\u00a0:<\/p>\n<p><a href=\"https:\/\/feely-evenements.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-19306 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-exemple-1.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"387\" \/><\/a><\/p>\n<ul>\n<li><strong>L\u2019illustrer&nbsp;:<\/strong> photo de fond, animation ou m\u00eame vid\u00e9o vont rendre votre header attractif. L\u2019image doit v\u00e9hiculer une information et une \u00e9motion et \u00eatre de grande qualit\u00e9. <a href=\"https:\/\/graphiste.com\/blog\/infographies-ajouter-animation\" target=\"_blank\" rel=\"noopener noreferrer\">L\u2019animation<\/a> a ce c\u00f4t\u00e9 ludique, qu\u2019elle va vous permettre d\u2019emmener l\u2019internaute l\u00e0 o\u00f9 vous le voulez.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.starfishprojects.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-19307 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-exemple-2-video.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"318\" \/><\/a><\/p>\n<ul>\n<li><strong>Utiliser la vid\u00e9o&nbsp;:<\/strong> c\u2019est un support qui remporte beaucoup de succ\u00e8s, elle va vous permettre de pr\u00e9senter votre entreprise ou une id\u00e9e pendant que le visiteur parcourt votre page.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-19308 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-exemple-2-video-menu-burger.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"395\" \/><\/p>\n<ul>\n<li><strong>Animer le menu hamburger&nbsp;:<\/strong> il peut se d\u00e9ployer au passage de la souris, s\u2019ouvrir en sous-menus en cascade, etc. De nombreuses possibilit\u00e9s s\u2019offrent \u00e0 vous pour rendre votre en-t\u00eate \u00e0 la fois original et pratique.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.takeagander.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-19310 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-exemple-2-menu-sticky.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"390\" \/><\/a><\/p>\n<ul>\n<li><strong>Opter pour un header ou un menu collant&nbsp;:<\/strong> il va suivre l\u2019utilisateur tout au long de sa progression, id\u00e9al pour les sites E-commerces puisqu\u2019il rend le panier imm\u00e9diatement accessible.<\/li>\n<\/ul>\n<p>Le site web Gander a su optimiser son menu, il vous suit \u00e0 la trace et son d\u00e9ploiement aux quatre coins de l\u2019\u00e9cran ne le rend pas envahissant.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/creer-mega-menu-efficace\">Web design&nbsp;: 5 r\u00e8gles pour cr\u00e9er un m\u00e9ga menu efficace<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>4. Optez pour un design \u00e9pur\u00e9<\/h2>\n<p>La tendance est au minimalisme, pour une meilleure exp\u00e9rience utilisateur ne surchargez pas votre header de site web&nbsp;:<\/p>\n<ul>\n<li>Choisissez une typographie sobre et lisible pour votre contenu. Vous pouvez vous permettre une \u00e9criture fantaisiste sur les grands en-t\u00eates, mais privil\u00e9giez toujours la lisibilit\u00e9.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-19311 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-site-epuree.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"387\" \/><\/p>\n<p>La sobri\u00e9t\u00e9 n\u2019emp\u00eache nullement la cr\u00e9ativit\u00e9 et le site web\u00a0Arche68 en est le parfait exemple\u00a0!<\/p>\n<p><a href=\"https:\/\/www.nymark.co\/\" target=\"_blank\" rel=\"noopener noreferrer\"><\/a><a href=\"https:\/\/www.nymark.co\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-19312 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/header-epuree-minimaliste.png\" alt=\"inspiration de header et menu pour graphiste freelance\" width=\"750\" height=\"385\" \/><\/a><\/p>\n<ul>\n<li>Laissez des espaces vides, ils vont vous permettre de mettre l\u2019accent sur un \u00e9l\u00e9ment en particulier et offrir un repos aux yeux. Ils v\u00e9hiculent une image d\u2019\u00e9l\u00e9gance et de raffinement et deviennent partie int\u00e9grante du design de votre header.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Concevoir un header de site peut \u00eatre p\u00e9rilleux sans l\u2019\u0153il expert d\u2019un professionnel, vous trouverez sur <a href=\"https:\/\/graphiste.com\/\">Graphiste.com<\/a> le graphiste qui saura vous aider \u00e0 mettre votre site en valeur\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50 millisecondes \u00e0 un utilisateur pour se forger une opinion d\u00e9finitive sur votre site web. Il va sans dire que votre header doit \u00eatre optimis\u00e9 et attractif&nbsp;! Voici les [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":19322,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[40,42,43],"class_list":["post-19300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-booster-agence","tag-creer-marque","tag-developper-entreprise"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50\" \/>\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\/web-design-meilleures-pratiques-exemples-header\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\" \/>\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=\"2020-06-24T08:30:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:23:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-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=\"Laura Michaud\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header\",\"datePublished\":\"2020-06-24T08:30:15+00:00\",\"dateModified\":\"2025-08-20T15:23:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\"},\"wordCount\":895,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg\",\"keywords\":[\"Booster votre agence\",\"Cr\u00e9er votre marque\",\"D\u00e9velopper son entreprise\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\",\"url\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\",\"name\":\"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg\",\"datePublished\":\"2020-06-24T08:30:15+00:00\",\"dateModified\":\"2025-08-20T15:23:35+00:00\",\"description\":\"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#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\":\"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header\"}]},{\"@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\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog","description":"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50","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\/web-design-meilleures-pratiques-exemples-header\/","og_locale":"fr_FR","og_type":"article","og_title":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog","og_description":"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50","og_url":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2020-06-24T08:30:15+00:00","article_modified_time":"2025-08-20T15:23:35+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header","datePublished":"2020-06-24T08:30:15+00:00","dateModified":"2025-08-20T15:23:35+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/"},"wordCount":895,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg","keywords":["Booster votre agence","Cr\u00e9er votre marque","D\u00e9velopper son entreprise"],"articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/","url":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/","name":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg","datePublished":"2020-06-24T08:30:15+00:00","dateModified":"2025-08-20T15:23:35+00:00","description":"Votre header joue un r\u00f4le important, voire le plus important, sur votre site. Et pour cause, c\u2019est la premi\u00e8re chose que l\u2019internaute va voir. Il faut 50","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2020\/06\/une-graphiste-webdesign-menu-pratique-et-exemple-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/web-design-meilleures-pratiques-exemples-header\/#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":"Web design\u00a0: 4 bonnes pratiques et exemples pour votre Header"}]},{"@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\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/19300","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=19300"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/19300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/19322"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=19300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=19300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=19300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}