Dans le passé, un « header » dans la conception web se référait typiquement à la bande omniprésente en haut des sites web qui contenait le logo, la barre de navigation, et peut-être quelques détails de contact et la barre de recherche. Aujourd’hui, un « en-tête » fait plus souvent référence à l’ensemble de l’espace au-dessus du pli de la page d’accueil.
À moins que quelqu’un n’ait trouvé votre site par le biais d’un article de blog partagé sur les médias sociaux ou d’une référence sur un autre site, il y a de bonnes chances qu’il y entre par la page d’accueil. Et la première chose qu’il verra, c’est ce bien immobilier de premier choix en haut, mis à nu.
J’ai déjà écrit sur la façon dont les visiteurs répondent mieux au placement prévisible de certains éléments sur votre site Web (comme le logo et le CTA). En concevant un site Web dans le but de répondre à leurs attentes et d’améliorer leur confort en rendant l’expérience un peu plus prévisible, vous pouvez améliorer efficacement les taux de clics et de conversion.
Pensez maintenant à cet espace d’en-tête sur la page d’accueil.
La plupart des gens en sont venus à compter sur les pages d’accueil pour leur donner une vue d’ensemble de ce qu’est une entreprise ou un site Web, ce qui signifie que vous ne pouvez pas vous permettre de gaspiller cette occasion de répondre à cette attente. Bien sûr, la conception de l’en-tête de votre page d’accueil peut être propre à votre marque, mais les éléments qu’elle contient ne doivent pas l’être. Les visiteurs s’attendent à ce que le défilement ne soit pas nécessaire pour découvrir ce qu’un site peut leur apporter. Essentiellement, votre en-tête devrait être une histoire de 10 secondes qui prouve à vos visiteurs quelle valeur le site aura pour eux.
Alors, que ferez-vous de cet espace pour captiver l’intérêt de vos visiteurs ?
Parlons de certaines des tendances en matière de conception d’en-tête en 2017, de ce que vous pouvez faire pour utiliser cet immobilier très visible, et jetons un coup d’œil à quelques exemples intéressants d’en-têtes en cours de route.
14 Tendances en matière de conception Web d’en-tête en 2017
Ce n’est pas comme si vos visiteurs n’étaient pas conscients de leur capacité à faire défiler une page ou à cliquer sur une navigation afin d’en apprendre davantage sur la marque derrière un site. Mais pourquoi devraient-ils le faire ? Il y a suffisamment de place dans l’en-tête pour fournir un message succinct qui leur dit tout ce qu’ils doivent savoir. Et si 50 mots ou moins ne suffisent pas, l’image ou le design d’arrière-plan communiquera le reste de l’histoire.
Par-dessus tout, l’en-tête de la page d’accueil peut faire ou défaire les premières impressions de vos visiteurs, ce qui explique pourquoi il est si important de soigner cette section.
Si vous avez du mal à trouver un moyen de lancer votre site avec fracas, peut-être trouverez-vous de l’inspiration dans les tendances de conception d’en-tête suivantes de 2017 :
Oversized Hero Image
Grâce au style modulaire de conception des sites afin d’être responsive, la plupart des designs sont désormais décomposés en blocs et sections distincts. Il se trouve que ce style de conception se prête bien à ces images héroïques pleine largeur qui peuplent tant de sites web.
Prenez le site web de Cleverbird Creative, par exemple. Il fait usage d’une image singulière et frappante superposée à un texte simple pour accueillir les visiteurs. Il n’y a pas d’erreur sur ce qu’ils recherchent ici : une beauté simplifiée.
Images coulissantes
Je pense qu’il fut un temps, pas si lointain, où beaucoup d’entre nous remettaient en question le slider comme élément de conception viable. Cependant, de nombreux designers ont fait un excellent travail en l’utilisant dans les en-têtes. Il y a des images coulissantes qui défilent automatiquement d’une belle image haute résolution à la suivante et il y a celles, comme celle de Pierre, qui supplient les visiteurs de prendre eux-mêmes le contrôle de cette expérience.
Image parallaxe transformative
Le défilement parallaxe connaît toujours une forte croissance et l’en-tête s’est avéré être l’endroit parfait pour appliquer ce genre d' »illusion » visuelle aux conceptions Web. Ce que vous verrez le plus récemment, cependant, ce sont des designers donnant à leur défilement parallaxe un bord transformateur, probablement pour surprendre les visiteurs avec le résultat inattendu du défilement. C’est ce qu’a fait l’agence de design UX australienne August avec son en-tête.
Fonds vidéo
Le fond vidéo est une autre de ces tendances récentes qui fonctionne vraiment mieux lorsqu’il est appliqué à l’en-tête de la page d’accueil. Celui-ci de Le 28 fait un excellent travail pour mettre l’ambiance du site Web du restaurant, montrant des vidéos de l’avant et de l’arrière de l’établissement gastronomique.
Navigation cachée
Bien que l’on puisse soutenir que le menu hamburger appartient aux sites Web consultés sur des appareils mobiles (comme prévu à l’origine), il y a quelque chose à dire sur ce que ce genre de minimalisme de navigation fait pour l’en-tête. Le site Web de +rehabstudio en est un bel exemple. En repoussant la navigation, votre attention immédiate est attirée par les visuels excitants à l’intérieur du symbole du plus… et vous réalisez ensuite qu’il y a de petites touches d’animation qui l’entourent.
Mascotte de la marque
Si l’en-tête est l’endroit pour présenter les visiteurs de votre site, quelle meilleure façon de le lancer qu’en leur présentant les » personnages » qu’ils vont rencontrer en cours de route ? Si votre site utilise des mascottes de marque – comme le fait le site WPMU DEV – c’est le moment et l’endroit pour les mettre en valeur.
Typographie accrocheuse
Il y a beaucoup de choses à faire pour donner un coup de jeune à la typographie de votre site. Cela dit, parfois, il ne s’agit pas de choisir la police cursive la plus fantaisiste à jeter à la figure des gens. Si vous regardez l’exemple de Slack ci-dessus, vous verrez que tout est dans la taille de la police. La typographie choisie n’a rien de vraiment spécial, mais elle est si propre et claire. Cela associé à la taille du message principal est ce qui le rend si accrocheur.
Content First
Pour les sites Web dont l’objectif principal est de fournir des tas de contenus aux visiteurs (pensez à tout site d’information ou blog majeur), une stratégie content first pour l’en-tête sera la plus logique. Il n’y a vraiment aucune raison de mâcher les mots ici. Les gens sont venus sur votre site pour lire votre contenu, ils n’ont pas besoin d’être embourbés par une lecture supplémentaire sur la page d’accueil, vous pouvez donc aller droit au but comme le fait Glamour.
Produits d’abord
Dans le même ordre d’idées, les sites de commerce électronique n’ont pas besoin de s’embêter à utiliser l’en-tête pour écrire un titre accrocheur ou fournir une vidéo explicative sur l’entreprise. Les visiteurs savent ce qu’ils sont venus chercher sur le site, vous pouvez donc entrer dans le vif du sujet. Contrairement aux fournisseurs de contenu, cependant, les détaillants de produits peuvent utiliser cet espace immobilier de choix pour montrer leurs produits les plus vendus ou les dernières sorties pour attirer les visiteurs à partir comme Apple le fait.
CTA Front-and-Center
Il peut arriver un moment où votre site a quelque chose de vraiment spécial à montrer aux visiteurs, quelque chose que vous voulez qu’ils téléchargent ou achètent. Or, même si ce n’est pas l’attraction principale de votre site, vous pouvez utiliser l’en-tête de manière temporaire ou permanente pour mettre en avant cet appel à l’action spécial comme le fait la blogueuse Everywhereist avec son livre.
Couleurs et textures vibrantes
Peut-être que l’une des plus belles choses à sortir de Google Material Design est notre volonté d’utiliser des couleurs, des couches et des dégradés plus vibrants dans la conception web. Ils ne doivent plus être relégués aux boutons d’appel à l’action, ils peuvent être utilisés pour des blocs entiers sur le site Web, comme Stripe le fait avec son en-tête coloré et texturé.
Animation
Il n’y a absolument rien de mal à avoir un design d’en-tête de page d’accueil statique, surtout si vous voulez que le focus soit attiré vers un CTA ou une vidéo. Restez simple afin qu’il n’y ait pas de distractions empêchant les visiteurs de prendre l’action que vous leur destiniez. Mais pour les sites Web qui veulent un moyen intéressant de partager leur message avec les lecteurs, les animations peuvent être un choix judicieux. Le Baianat utilise une petite animation pour partager un certain nombre de messages dans le même espace, ce qui lui permet de ne pas avoir l’air encombré ou surchargé d’informations.
Designs géométriques
Le web design géométrique se trouve être vraiment très grand en ce moment car il se prête bien aux lignes logiques et propres nécessaires au responsive design. Il n’est donc pas surprenant de voir de plus en plus de sites Web, comme celui de Perspective API, intégrer des éléments géométriques dans le design de l’en-tête. Il y en a d’autres, comme Stripe et WPMU DEV, qui utilisent des lignes diagonales pour créer un paysage visuel unique et inattendu pour les visiteurs.
Expérimental
Enfin, nous arrivons aux conceptions d’en-tête expérimentales. La clé de ces derniers n’est généralement pas que l’en-tête soit outlandiquement étrange et inhabituel. Cela serait trop distrayant pour les visiteurs. Au lieu de cela, vous devez vous concentrer sur la création d’un effet inattendu causé par le simple mouvement à travers l’en-tête.
Prenez le design Teamgeek, par exemple. Vous pouvez voir qu’il y a quelque chose de « décalé » dans le logo et le message au sein du centre de la page, mais ce n’est que lorsque vous vous engagez avec lui que vous réalisez qu’il y a une tournure spéciale intégrée.
Wrapping Up
Comme vous pouvez le voir, il y a une variété de façons dont vous pouvez concevoir un en-tête pour un site WordPress. Si vous regardez attentivement les exemples ci-dessus, cependant, vous remarquerez que les concepteurs ont été très stratégiques quant au style d’en-tête qu’ils ont utilisé et aux éléments qui y ont été inclus. Lorsque le moment sera venu de concevoir un en-tête pour votre prochain projet de site Web, demandez-vous si vous aurez besoin des éléments suivants :
- Logo
- Traditionnel vs caché
- Section d’en-tête héroïque vs. aller directement au contenu
- La ligne d’accroche ou l’énoncé de mission
- Les informations de contact
- Les liens vers les médias sociaux
- La barre de recherche
- La bascule multilingue
- Le panier d’achat
- La mascotte de la marque
- La photographie d’inventaire vs. Photographie réelle de l’entreprise, des personnes ou du produit
- Image statique vs images coulissantes vs vidéo de fond
- Vidéo promo intégrée
- Bouton d’appel à l’action
- Formulaire de contact
- Barre d’accueil
Vous pouvez trouver d’autres éléments qui ont leur place dans cette section d’en-tête supérieure de votre page d’accueil, aussi. Tout se résume en fait à ce qui a le plus de sens pour votre site. En d’autres termes, quels éléments raconteront l’histoire de votre marque, éduqueront et engageront votre public dès le départ, et inspireront suffisamment de confiance pour les propulser en avant sur votre site.
Tags :
- design
- en-têtes
.