Force est de constater que les sites web se ressemblent beaucoup dans leur structure. On retrouve en général un header avec un menu de navigation facilement lisible, une « section héros » avec un grand visuel et une accroche courte et efficace puis en dessous le contenu traditionnel (présentation de l’offre, de l’équipe, des points forts etc…). Je ne jette la pierre à personne et d’ailleurs notre site Mission Internet est construit de la même façon. Ce modèle de site a fait ses preuves.

Tendance de fond : le header minimaliste

Il n’empêche ! Il est encore possible de proposer des choses originales ET efficace. Aujourd’hui, je m’attarde un peu sur le header. J’ai glané de ci de là quelques exemples de header originaux pour inspiration. Au fil de mes recherches, je me suis rendu compte qu’une tendance de fond s’impose de plus en plus : le header minimaliste. Poussé dans ses retranchement, le header disparaît même complètement pour laisser sa place à un simple menu hamburger. Cette évolution est rendue possible par le fait que ce type de menu est largement reconnu par les internautes qui y trouvent de façon intuitive un menu caché. Gain de place propice à l’utilisation de beaux visuels, les sites n’en sont que plus expressifs.

1- August : têtière minimaliste et menu hamburger déroulant

Le meilleur exemple de header minimaliste est pour moi celui de August. Il n’y a tout simplement pas de header sur ce site et je trouve que c’est un régal. Le site devient ainsi plus immersif, plus simple et plus direct. Le menu hamburger dévoile un menu déroulant lui aussi assez simple composé de 6 icônes. Simple, efficace, rapide et pourtant parfaitement ergonomique.

2- Houndstooth : minimalisme et menu animé

Le site de Houndstooth partage la même philosophie que celui de August : pourquoi faire compliqué quand on peut faire simple ? Aussi, le header du site est-il uniquement composé d’un bouton « menu » qui déroule différents sous-menus emboités avec une chorégraphie originale. C’est beau, simple et ça change du bon vieux menu en ligne et en haut de page.

3- Menu iconique pleine page

Autre tendance du design minimaliste, l’utilisation de simples icônes en guise de menu en haut de page. le site The Everywhereist en est un bon exemple. 4 icônes représentatives suffisent à composer la structure de base du site. Une séparation en vaguelette vient couronner l’ensemble pour conférer un aspect sympathique et bon enfant. le logo est ultra-présent au centre mais sans être très original il permet de bien répartir l’espace de chaque côté avec un équilibre d’ensemble agréable et confortable.

4- Header flottant

Alternative au menu masqué à dévoiler avec un bouton, le header transparent a sa carte à jouer. A manier avec précaution car l’image de fond peut rendre le texte du premier plan moins lisible quand il est ton sur ton, ce qui est d’ailleurs un peu le cas ci-dessous. Pour éviter cela, on peut ajouter en CSS un léger fond sombre et transparent pour améliorer le contraste des éléments.

5- Header e-commerce minimaliste : droit au but

En matière de e-commerce, je trouve que le header devrait être la partie du site sur laquelle on s’attarde le plus, j’irais même jusqu’à dire qu’il faut passer au moins 30% de son budget temps dans sa conception, les 70% restants dévolus aux fiches produit (40%) et au tunnel de vente…

Le header du site Beasty Bike est simple et assez compact mais il contient pourtant tout ce qu’il faut sans alourdir l’interface. On y retrouve de la réassurance (nos magasins, livraison offerte, contact…) , le panier, l’accès client, le formulaire de recherche matérialisé sous forme de petites icônes discrètes et bien sûr le menu pour accéder aux différentes rubriques du shop.