Disposition correcte de l'en-tête - Examen de 6 sites Web différents

Quand tu penses à l'en-tête d'un site Web, tu penses à la barre en haut où se trouvent le logo et le menu ? Tu n'as pas tort, mais depuis peu, certains pensent que l'en-tête est tout ce qui se trouve au-dessus du pli. Cela signifie que lorsque tu visites un site Web, si tu ne fais pas défiler l'écran vers le bas, toute la section qui s'affiche est l'en-tête.

Jetons un coup d'œil à plusieurs sites Web qui ont une variété d'en-têtes et discutons de ce que nous voyons que chaque site Web vise avec leur conception.

Box.com

L'en-tête de Box.com n'est pas seulement un logo et un menu, mais plutôt un aperçu complet de leur produit avec un appel à l'action en avant et au centre. Si tu as un produit spécial ou nouveau, ce type d'en-tête est un excellent moyen pour tes visiteurs de le trouver facilement et d'en savoir plus. Pour les nouveaux produits, tu n'es pas obligé de garder l'appel à l'action (CTA) en avant et au centre, tu peux utiliser cet emplacement temporairement et passer ensuite à un autre style d'en-tête.

Box fait un excellent travail en rendant ses boutons d'action faciles à trouver. Le style simple et épuré est agréable à regarder. Cet en-tête est conçu pour obtenir des informations sur les visiteurs par le biais d'un essai gratuit ou d'un formulaire de contact.

 Apple.com

Le style de l'en-tête d'Apple est axé sur le produit. Au lieu de montrer toutes les caractéristiques du nouvel iPhone sur leur en-tête, ils te montrent simplement le produit. Cela suscite la curiosité. L'en-tête est axé sur une vente qu'ils organisent pour les fêtes. C'est simple et propre, et cela incite l'utilisateur à cliquer pour en savoir plus. Cet en-tête s'articule autour du désir des visiteurs de s'informer sur les technologies les plus récentes et les plus performantes (et de les acheter).

BearsBeans.com

Bear's Beans a un en-tête très simple. Il communique très clairement ce qu'est la marque, tout en faisant appel à la curiosité. Dès le départ, le logo, le petit menu et l'appel à l'action très clair te donnent envie d'essayer une gorgée de leur café. Dans ce cas, ils n'utilisent que quatre éléments au total : un logo, un titre, un bouton et un menu. La taille du texte permet au site Web d'attirer l'attention. Comme tu peux le voir, il n'y a pas de section définie entre la barre de menu et le CTA du bas. C'est pourquoi nous appellerions toute cette section un en-tête. L'en-tête adopte une approche simple et détendue pour éduquer le client.

BestBuy.com

Best Buy utilise son premier en-tête pour aider les visiteurs à trouver des informations sur les cartes-cadeaux, les magasins locaux, les paniers d'achat, les produits, les comptes, les statuts des commandes et une barre de recherche. Dans ce cas, toute la section au-dessus du pli ne serait pas appelée un en-tête, car elle est clairement séparée par un défilement où les ventes et les produits sont mis en évidence. Cet en-tête permet aux visiteurs de conclure facilement une vente. Best Buy réussit très bien à faire tenir beaucoup d'informations dans un espace réduit sans que cela ne paraisse trop encombrant.

GettyMusic.com

L'en-tête de Getty Music est simple à sa manière. Non seulement les éléments du menu occupent la majeure partie de la barre, mais ils ont également utilisé une simple photo avec un peu de texte en dessous. Cette image n'appelle pas à l'action, elle est plutôt placée pour la reconnaissance de la marque. Bien que Getty Music ait une boutique, ils n'ont pas d'icône de panier d'achat dans leur menu. Cela enlève une partie du côté commerce électronique de leur site Web et le rend plus informatif. Cet en-tête donne aux fans et aux visiteurs une ouverture pour s'engager dans la musique et les événements décrits à l'intérieur.

WissmannFamily.com

L'en-tête de la famille Wissmann est un moyen moderne de faire connaître la marque et de stimuler les ventes de leur musique. La palette de couleurs combinée aux couleurs du CD et du logo donne une impression de détente. Les icônes du menu et leur emplacement indiquent que le site Web est axé sur les ventes et la connexion avec les visiteurs via les médias sociaux.

Qu'avons-nous appris ?

Après avoir examiné ces six sites Web, qu'avons-nous appris sur la bonne disposition des en-têtes ? Est-ce qu'un seul en-tête convient à tous les styles de sites Web ? De toute évidence, non. Voici ce que j'ai appris :

• L'en-tête du site web peut s'étendre jusqu'au pli du site web.
• Les types d'icônes utilisés dans un en-tête peuvent exprimer l'objectif général du site Web
• Toutes les images d'en-tête ne doivent pas nécessairement être utilisées pour les appels à l'action, mais peuvent également être utilisées pour la reconnaissance de la marque.
• Si tu as une boutique sur ton site Internet, il n'est pas obligatoire d'avoir une icône de panier d'achat dans l'en-tête.
• Ces six exemples ont un point commun : ils ont tous des en-têtes simples et épurés. Les couleurs sont assorties au reste du site Web et tout le contenu est fluide.

Qu'as-tu appris ? Quel que soit ton niveau d'expertise en matière de conception, le fait de passer du temps à examiner des sites Web réussis peut t'aider à approfondir tes connaissances sur la disposition correcte des en-têtes de sites Web.