Conception d'en-tête de site Web en 2021 : exemples et meilleures pratiques

Lorsque vous visitez un site Web pour la première, la deuxième ou même la dixième fois, quelle est la première chose que vous voyez ? Pour beaucoup d'entre nous, c'est l'en-tête.

L'une des raisons est que nos yeux sont naturellement attirés par la partie supérieure de la page. C'est comme regarder un film ou lire un article de journal. Vous voulez commencer au tout début de l'histoire, pas au milieu de celle-ci.

Et, soyons honnêtes, en tant que concepteurs et en tant que consommateurs, vous pouvez en dire beaucoup sur un site Web à partir de son en-tête. Vous y trouverez son image de marque. Vous obtiendrez un aperçu de haut niveau de son contenu. Vous pouvez également trouver une incitation à l'action et des informations supplémentaires sur l'entreprise, entre autres.

Même si l'en-tête occupe une petite quantité d'espace, c'est l'une des parties les plus importantes du site et, en tant que tel, va probablement susciter plus d'engagement que la plupart des contenus du site.

Alors, comment le concevez-vous pour maximiser cet engagement ?

Pour commencer, vous ne voulez pas utiliser la conception d'en-tête de base fournie par votre thème ou modèle WordPress. C'est un bon point de départ, mais il y a tellement plus à penser quand il s'agit de ce qu'il faut inclure, comment le présenter et comment le concevoir pour une utilisation ultime.

Tout au long de cet article, vous trouverez également de superbes exemples d'en-têtes de sites Web et des conseils pour les créer. Donc, que vous soyez ici pour vous inspirer de la conception ou pour aider à créer l'en-tête de site Web parfait, vous aurez de nombreux exemples visuels à consulter.

L'en-tête du site Web est la partie supérieure d'un site Web où se trouvent le logo, la navigation et parfois d'autres informations, liens et boutons.

Par exemple, voici l'en-tête du site Web Elementor :

L'en-tête est un élément précieux de chaque site Web car il :

• Sert d'accueil pour le logo de la marque (et pourrait être le seul endroit où les visiteurs le rencontrent)
• Offre aux visiteurs une première impression du site Web
• Fonctionne comme une table des matières pour le site
• Facilite l'exploration du site en un clic ou une requête de recherche
• Comprend des boutons d'action rapide pour les personnes prêtes à passer à l'étape suivante
• Offre des informations supplémentaires relatives à l'entreprise, comment la contacter et plus encore

Bien que l'en-tête ait un objectif similaire d'un site à l'autre, vous pouvez créer différents types d'en-têtes. Tout dépend du type de site Web que vous créez, du style de la marque et de la quantité d'informations que vous souhaitez y stocker.

Cet en-tête sur le site Web de The Dog Bar est la conception d'en-tête de site Web la plus courante :

Le logo se trouve à l'extrême gauche de l'écran et le menu de navigation, l'icône de commerce électronique et le CTA sont à l'extrême droite.

HubSpot nous montre à quoi ressemble l'en-tête typique d'un site Web mobile :

Encore une fois, le logo est à l'extrême gauche. Dans ce cas, cependant, la navigation et d'autres liens sont cachés sous une icône de hamburger.

Alors que les frontières s'estompent entre mobile et ordinateur de bureau, il n'est pas surprenant de voir des sites Web adopter une conception d'en-tête hybride comme YOTEL :

Cela ressemble à l'en-tête typique d'une seule ligne. Cependant, une icône de menu hamburger contient des liens de navigation supplémentaires pour les visiteurs du bureau.

Les sites Web avec une tonne de contenu ne peuvent pas toujours se permettre de choisir les catégories ou les pages qui se retrouvent dans l'en-tête. C'est pourquoi vous obtenez un méga menu comme celui sur le site Web du Digital Agency Network :

Sous le menu de niveau supérieur « Agences », nous voyons une liste d'emplacements d'agences organisés par emplacement et, très probablement, par popularité ou par taille.

Lorsque vous regardez sous le menu de niveau supérieur « Flux », nous voyons une structure de méga-menu similaire mais pas identique :

Le flux est divisé en catégories d'actualités, d'études de cas et de blogs. De plus, ce menu comprend quelques « messages en vedette » accrocheurs sur la droite.

Soit dit en passant, si vous avez besoin d'en créer un, vous pouvez facilement le faire avec Elementor et JetMenu.

Le restaurant étoilé Michelin The Inn at Little Washington utilise une barre latérale alignée à gauche pour stocker son en-tête :

Cette conception d'en-tête vertical a tendance à être un choix populaire sur les sites Web pour l'hôtellerie et d'autres entreprises basées sur les services.

Certains sites Web peuvent apposer une barre d'utilitaires en haut de l'en-tête, comme le fait Subway :

Ceci est utile pour les entreprises qui souhaitent fournir l'emplacement, le contact, l'accessibilité, les médias sociaux et d'autres informations sur l'entreprise ou des liens qui ne rentrent pas facilement dans le menu principal.

Certains sites Web peuvent attacher une barre de promotion ou de notification à l'en-tête. Cet exemple d'Urban Outfitters nous montre comment inclure à la fois une barre promotionnelle et une barre utilitaire :

Bien que des barres promotionnelles puissent apparaître sous l'en-tête, il est plus courant de les placer au-dessus et de les rendre invisibles avec un « X » dans le coin droit.

Les sites Web qui font partie d'une famille de sites - ce qui est courant dans le commerce de détail - peuvent ajouter une barre supplémentaire au-dessus de l'en-tête avec des liens rapides vers leurs autres magasins, comme le fait Gap :

Plutôt que de créer une barre séparée pour la navigation multi-sites, ces liens apparaissent dans la barre d'utilitaires de Gap.

Jetons un coup d'œil à ce qui appartient exactement à la conception de l'en-tête de votre site Web.

Vous voulez développer la notoriété de votre marque ? Ensuite, le logo devrait être la toute première chose que les visiteurs voient sur un site Web.

Cosmopolitan est un bon exemple à suivre :

La conception du logo se démarque magnifiquement du reste de l'en-tête avec sa couleur vive et ses grands personnages. Et parce que le logo est correctement dimensionné pour l'espace, il ne submerge pas les autres éléments et n'oblige pas l'en-tête à prendre un excès d'espace blanc.

Apprenez à concevoir un logo magnifique et mémorable ici.

La navigation devrait améliorer la compréhension de vos visiteurs sur ce qui se trouve sur le site ainsi que sur la façon dont chaque page est liée les unes aux autres. S'ils peuvent facilement avoir une vue d'ensemble de ce qui se passe, ils se sentiront plus confiants lorsqu'ils exploreront ce qui s'y trouve.

Selon la taille de votre site Web, vous devrez décider du nombre et des types de navigations dont vous avez besoin. Il y a la navigation principale, comme celle que vous voyez ici dans l'en-tête de Dollar Shave Club :

Mais notez que DSC a également un menu de hamburgers sur la gauche. Voici ce que les visiteurs trouvent sous cette navigation secondaire :

Les liens au-dessus de la ligne sont plus ou moins les mêmes que ceux de la navigation principale, mais cette fois ils incluent des liens de deuxième niveau.

Les liens sous la ligne permettent à DSC de rendre toutes les autres pages accessibles depuis la navigation sans l'encombrer. De plus, en les plaçant sous l'icône hamburger, les utilisateurs n'ont pas besoin de faire défiler jusqu'au pied de page pour trouver des pages utiles telles que Contactez-nous, Carrières et FAQ.

Chaque site Web a une action ou un objectif vers lequel il conduit les visiteurs. Bien que le site Web inclue des appels à l'action accrocheurs sur toutes ses pages, il est judicieux de garder le CTA en tête des visiteurs en le mettant également dans l'en-tête.

Massage Envy fait ça ici :

Le CTA doit être conçu tel qu'il est sur le site. Si vous utilisez les paramètres globaux du site d'Elementor pour définir la conception de votre bouton global, cela s'appliquera également ici.

Votre CTA doit également être placé à l'extrémité droite de l'en-tête. Non seulement ce lien accrocheur apportera un équilibre visuel à l'en-tête, mais il fonctionnera comme un raccourci utile pour la conversion.

Cela s'explique par le principe de conception de l'effet de position en série, qui dit que les gens se souviennent plus du premier et du dernier élément d'une série que des autres. Ainsi, lorsqu'ils seront prêts à se convertir, ils n'auront pas à rechercher le CTA dans le contenu du site. Ils sauront qu'ils peuvent accéder directement à l'en-tête pour le faire.

Les sites Web avec des archives massives de contenu ou des inventaires de produits gagneraient grandement à avoir une barre de recherche dans l'en-tête.

Mashable est l'une de ces publications numériques qui fait ceci :

Il y a quelques choses à noter ici.

La première est que la barre de recherche n'est pas seulement représentée par une loupe. Il est associé au mot « Rechercher ». Bien que cela puisse être une icône suffisamment reconnaissable pour beaucoup, il vaut mieux ne pas supposer que tout le monde sait ce que c'est. Il peut également être trop petit pour que les gens le trouvent facilement.

Notez également que Mashable ne pousse pas les utilisateurs vers une nouvelle page pour effectuer leur recherche. La barre de recherche remplit automatiquement les résultats en fonction de la requête, ce qui peut améliorer l'expérience utilisateur.

Les sites Web dotés d'une fonctionnalité de commerce électronique doivent toujours avoir des éléments de commerce électronique dans l'en-tête principal ou dans sa barre d'utilitaires. Voici comment Sephora procède :

Il y a trois éléments de commerce électronique dans le coin le plus à droite :

1. Connexion/Compte (icône de persona)
2. Liste de souhaits (icône coeur)
3. Panier (icône de panier)

Plusieurs fois, ces liens de commerce électronique ne sont représentés que par des icônes. Cependant, si vous ne savez pas si les icônes que vous avez conçues sont facilement reconnaissables ou si elles gagneraient à être associées à une étiquette, testez-les A/B.

L'en-tête est un élément de confiance d'un site Web. Bien que vous souhaitiez lui donner une touche personnalisée, vous ne voulez pas trop vous écarter des normes établies.

Voici quelques conseils pour trouver le bon équilibre :

Nous nous concentrons souvent sur la façon d'utiliser les espaces blancs pour améliorer la conception et le contenu de la page. Mais l'espace blanc est également un atout précieux dans la conception des en-têtes de sites Web.

Regardons l'impact de l'espace blanc sur l'en-tête BBC :

Pour commencer, il y a un espace substantiel entre le bouton de connexion et la navigation. Cela donne au logo la possibilité de briller tout en encourageant les visiteurs à optimiser leur expérience en se connectant.

Ensuite, vous avez la navigation avec neuf liens également espacés et avec de fines lignes de séparation entre eux. Il peut y avoir beaucoup de catégories parmi lesquelles choisir, mais l'espacement aidera les visiteurs à se concentrer sur chacune d'elles.

Ensuite, vous avez l'espace intégré dans la barre de recherche. Ceci est utile à des fins pratiques. En concevant une large barre de recherche, il sera plus facile pour les utilisateurs de la trouver et de l'utiliser.

Ce choix de conception est également intelligent car il attire l'attention des visiteurs sur le gros bloc blanc au bout de la barre noire. En substance, la barre de recherche joue le rôle du CTA.

Vous pouvez contrôler l'espacement en créant un en-tête personnalisé avec Elementor :

Vous pouvez modifier les marges et le remplissage autour de chacun des éléments de votre en-tête ainsi que le remplissage autour de chaque élément dans le bloc (comme dans l'exemple de navigation ci-dessus).

Généralement, Google suggère que la version mobile et la version de bureau d'un site Web contiennent le même contenu. Je ne discute pas avec ça. L'en-tête sur le bureau doit avoir le même logo, les mêmes liens et les mêmes informations que celui sur le mobile.

Cela dit, la façon dont ils sont conçus devrait être différente.

Utilisons Chick-fil-A comme exemple. Voici à quoi ressemble l'en-tête du bureau lorsque la sous-navigation Menu a été ouverte :

Il existe quatre liens de navigation de niveau supérieur. Lorsque l'un d'eux est ouvert, une sous-navigation apparaît sous la forme d'une ligne horizontale en dessous d'eux.

Peu importe qu'il s'agisse de 4 liens ou de 14. Cette navigation ne rentre pas dans l'en-tête d'un site mobile. C'est pourquoi le site mobile fait ceci :

L'icône de hamburger dans le coin gauche s'ouvre pour révéler un en-tête vertical de taille normale. La barre de recherche, les liens de navigation, l'espace membre Chick-fil-A One et le CTA vivent ici.

C'est tout le même contenu d'en-tête à partir du bureau, juste avec une présentation plus adaptée aux mobiles.

Vous pouvez utiliser le générateur d'en-tête personnalisé Elementor pour ce faire :

Basculez simplement votre mode réactif vers la vue smartphone ou tablette et personnalisez la mise en page, l'alignement, l'animation et tout ce dont vous avez besoin pour ces petits écrans.

Il existe un certain nombre de raisons pour lesquelles quelqu'un utiliserait l'en-tête sur un site Web. Plutôt que de les faire faire une pause et de considérer leurs options lorsqu'ils organisent l'en-tête, il est donc facile de trouver exactement ce qu'ils recherchent - et rapidement aussi.

Voyons comment Asana procède :

Le logo Asana se trouve dans le coin le plus à gauche de l'en-tête. Juste à côté se trouve la navigation. L'espacement équidistant entre le logo et tous les liens de navigation suggère que le logo (c'est-à-dire le lien d'accueil) et la navigation doivent être considérés comme un tout. Ceci est basé sur le principe de conception appelé loi de la région commune.

Sur la droite, nous avons l'icône du sélecteur de langue, "Contacter le service commercial", "Connexion" ainsi que le CTA "Essayer gratuitement". C'est un méli-mélo d'options, mais il est logique qu'elles soient reléguées à l'autre extrémité de l'en-tête.

Ce n'est pas la seule façon pour Asana d'organiser correctement le contenu de son en-tête. C'est ce que le "Pourquoi Asana?" la sous-navigation ressemble à :

Le méga-menu est formaté de la même manière que vous formateriez une page Web. La structure ressemble à ceci :

• Balise H2 : Pourquoi Asana ?
• Balises H3 : APERÇU, CARACTÉRISTIQUES, TOUS LES PLANS
• Balises H4 : En-têtes en gras sous les H3

Les icônes colorées ne sont pas vraiment nécessaires ici. La structure de navigation et la façon dont elle est présentée dans la liste déroulante facilitent incroyablement la lecture du contenu de l'en-tête.

Soit dit en passant, vous pouvez également appliquer cette idée d'ordre et de hiérarchie lors de la conception de barres supplémentaires pour accompagner l'en-tête. Voici un bon exemple du site East Bay Inn :

La barre d'en-tête principale est la plus grande et la plus lumineuse du groupe. Les polices sont également plus épaisses et plus grandes que les autres. En le concevant de cette façon, l'accent sera mis sur l'en-tête, puis les visiteurs pourront se référer aux autres bannières pour obtenir des informations supplémentaires si nécessaire.

L'en-tête n'est pas l'endroit pour faire preuve de créativité avec vos choix de polices. Sauf pour le logo, bien sûr.

Prenez Dribbble, par exemple :

La police manuscrite est un excellent choix pour le logo. C'est unique, mémorable et vous en dit long sur la nature artisanale du travail trouvé sur le site.

Cependant, une police manuscrite - ou toute police très stylisée, pour être honnête - sera difficile à lire dans un espace aussi petit que l'en-tête. Il est donc préférable de choisir une police Web avec ou sans empattement pour vos liens de texte et vos informations.

Deux autres choses à garder à l'esprit :

En ce qui concerne la taille, visez un minimum de 16 pixels - cela vaut pour l'en-tête principal ainsi que pour toutes les barres qui y sont attachées.

Quant à la couleur, attention au contraste des couleurs. Il devrait y avoir un rapport de 4,5:1 au minimum entre vos polices et l'arrière-plan. Encore une fois, cela vaut pour l'en-tête ainsi que pour toute information secondaire incluse autour de celui-ci.

Si vous créez un en-tête entièrement personnalisé, vous pouvez définir ces polices sous l'éditeur de style dans Elementor. Si vous souhaitez simplement adopter la typographie et les couleurs du reste de votre site, assurez-vous simplement que vos paramètres généraux les ont définis exactement comme vous en avez besoin :

Lorsqu'il s'agit d'utiliser des éléments visuels comme des icônes, des images et des vidéos dans la navigation, vous devriez avoir une bonne raison de le faire.

Comme nous l'avons vu dans quelques exemples ci-dessus, les icônes peuvent être utiles pour les éléments d'en-tête de site Web tels que la barre de recherche, le panier, le localisateur, le sélecteur de langue, etc. Faites juste attention à ne pas utiliser d'icônes qui sont rares ou qui ont des interprétations ambiguës.

En ce qui concerne les images et les vidéos, vous pourriez être mieux sans ces éléments encombrants. Si vous avez déjà du mal à maintenir le chargement de votre site Web à une vitesse maximale, l'ajout de fichiers image à votre en-tête (à part le logo, bien sûr) n'est probablement pas la meilleure idée.

Cela dit, il existe quelques cas d'utilisation où les images peuvent réellement améliorer la rapidité avec laquelle un visiteur peut obtenir ce dont il a besoin à partir de l'en-tête et, en particulier, de la navigation.

Voici un très bon exemple de MINI USA :

Bien sûr, MINI aurait pu simplement énumérer les noms de chacun de ses modèles. Cependant, les visuels qui l'accompagnent faciliteront grandement la sélection d'un élément parmi le groupe.

D'autres bons cas d'utilisation des images dans la navigation sont les méga-menus et les blogs ou les sites d'actualités.

La seule chose à éviter serait les vidéos. Les vidéos sont destinées à être visionnées et l'en-tête n'est tout simplement pas l'emplacement idéal pour de longs engagements (même s'il ne dure que 30 secondes).

Les animations ne doivent pas toujours être exagérées pour être efficaces. De petites animations appliquées à la navigation, par exemple, peuvent en fait améliorer la concentration et l'engagement si elles sont effectuées correctement.

Regardons quelques exemples.

Ceci provient du site Web de l'Aquarium de Floride :

Lorsqu'un visiteur survole l'un des principaux liens de navigation, les autres s'estompent. C'est le premier effet d'animation qui aide les utilisateurs à se concentrer sur le contenu disponible.

Ensuite, lorsqu'ils survolent le niveau secondaire ou tertiaire des liens, la page survolée prend une couleur différente du reste.

Target est un autre site Web qui utilise l'animation pour mettre l'accent sur sa navigation :

Avec celui-ci, nous obtenons une animation fluide à mesure que les diapositives de navigation de deuxième niveau s'ouvrent. Nous obtenons également un effet de décoloration. Cependant, celui-ci s'applique à la page et non à la navigation.

Vous pouvez facilement appliquer une animation à votre navigation, que vous conceviez un modèle d'en-tête personnalisé ou insériez un menu de navigation dans la page à partir de votre générateur de page Elementor :

Vous trouverez ces animations sous Mise en page. Bien que des effets de mouvement soient également disponibles sous Avancé, ils animeront tout le menu de navigation à la fois. Il est préférable d'utiliser l'animation à petites doses pour donner vie à la page sélectionnée.

À moins que vous ne conceviez des pages Web avec très peu de contenu, l'ajout d'un en-tête collant à votre site Web est probablement une bonne idée. Les sites Web longs d'une seule page, ainsi que les sites Web avec de longs flux (comme les sites d'actualités et de commerce électronique), en bénéficieraient certainement. De cette façon, les visiteurs auront toujours l'en-tête à portée de main, quelle que soit la distance parcourue dans la page.

NNG a quelques conseils utiles sur la façon de concevoir des en-têtes collants afin qu'ils ne gênent pas vos visiteurs ou ne nuisent pas à leur expérience :

1. Réduisez-les lorsque le visiteur commence à défiler.
2. Créez un fort contraste entre l'en-tête et le contenu afin que les visiteurs sachent où l'un se termine et l'autre commence.
3. Gardez l'animation petite.

Le site Web Champion suit ces règles et vous pouvez voir comment cela pourrait aider à améliorer l'expérience d'achat :

Si vous voulez essayer cet effet collant, vous devrez être à l'aise avec l'édition de votre code (juste un peu).

NNG avait de très bonnes choses à dire sur les navigations verticales :

• Vous pouvez ajouter autant de liens que vous le souhaitez sans qu'ils n'encombrent l'en-tête.
• Vous pouvez facilement redimensionner les pages de votre site Web et ne pas affecter sérieusement la conception de l'en-tête du site Web.
• Ils sont plus faciles à numériser car les visiteurs sont habitués à regarder le long du rail gauche du site Web.
• Les utilisateurs connaissent bien la navigation verticale depuis tout le temps qu'ils passent sur les réseaux sociaux et dans les applications Web.
• Une navigation verticale créera une expérience cohérente entre le bureau et le mobile.

Mais il y a la question de l'espace à laquelle il faut penser.

L'en-tête horizontal est généralement conçu pour être mince. Quoi qu'il en soit, de nombreux en-têtes collants rétréciront au fur et à mesure que les visiteurs feront défiler la page, de sorte qu'ils ne finiront pas par occuper beaucoup d'espace.

Les navigations de style barre latérale n'ont pas vraiment ce luxe à moins qu'elles ne soient conçues pour apparaître uniquement lorsque quelqu'un clique sur l'icône du menu hamburger. Comme celui-ci pour The Alfond Inn :

Cela dit, si vous pouvez rendre votre menu latéral collant suffisamment compact, vous pouvez l'empêcher de perturber l'expérience utilisateur. Voici un bon exemple de la façon de procéder depuis l'hôtel Delaney :

La barre latérale ne fait que 250 px de large par rapport aux 1200 px du site.

Ce didacticiel vous guidera tout au long du processus de création d'une barre latérale de navigation collante pour votre site Web.

Les en-têtes transparents sont ceux où les éléments sont toujours là - le logo, la navigation, le CTA, etc. - mais il n'y a pas d'arrière-plan solide derrière eux. Comme vous pouvez l'imaginer, cela peut être un choix de conception délicat à réaliser avec certains sites.

L'une des principales raisons est que le texte peut être très difficile à lire s'il apparaît devant un arrière-plan chargé ou avec un faible contraste de couleur. Ainsi, à moins que l'en-tête ne disparaisse complètement de la vue lorsque le visiteur fait défiler, vous courez le risque que la navigation et les autres textes qu'il contient deviennent illisibles lorsqu'ils défilent sur certaines parties.

Cela dit, il existe certains sites Web où ce choix de conception fonctionne.

Voici comment le Conti di San Bonifacio résout ce problème :

L'en-tête se compose uniquement d'un logo blanc dans le coin gauche et d'une icône de menu hamburger blanche dans le coin droit. En haut de chaque page se trouve une vidéo ou une image riche en couleurs qui contraste bien avec le blanc. Et comme le site est si lourd en visuels, il est très rare que la visibilité de l'en-tête soit compromise.

Si vous aimez ce style de conception d'en-tête de site Web minimal et que votre thème ne vous fournit pas automatiquement un arrière-plan transparent, apprenez à en configurer un par vous-même avec ce didacticiel Elementor.

L'en-tête est l'un des éléments les plus importants de votre site Web, car le rapport entre l'espace qu'il prend et les avantages qu'il procure est sans précédent.

Les en-têtes ont plusieurs objectifs. Ils offrent un aperçu de l'ensemble du site Web et une navigation facile via des liens, des méga menus bien conçus et la barre de recherche. Ils sont également un excellent endroit pour promouvoir votre marque avec des logos d'entreprise et la bonne typographie et les bons schémas de couleurs. Enfin, ils peuvent maximiser l'engagement via des CTA, un accès rapide au commerce électronique et des animations qui mettent en évidence ces éléments.

Nous avons discuté des différents types d'en-têtes et des meilleures pratiques pour créer un en-tête personnalisé et nous avons fourni des exemples. Alors, suivez ce guide et créez votre propre en-tête unique pour de meilleurs engagements et une meilleure notoriété de la marque.