Comment créer une « hero image » efficace

‍Une « hero image » est essentiellement une grande image de bannière, souvent utilisée avec des éléments graphiques superposés, pour offrir une expérience d’introduction et installer l’ambiance du site.

‍« Hero image » est un terme un peu fourre-tout pour des combinaisons de motif d’arrière-plan, image, vidéo ou animation avec des teintes ou des effets de flou. Tandis que le visuel installe l’ambiance et guide le regard, des informations pertinentes et des éléments actionnables sont placés autour. Plus qu’un simple exercice graphique, la « hero image » est une excellente façon de commencer votre site, d’y explorer votre créativité, avec pour objectif final de produire une impression marquante et durable.

‍Le choix de l’image dépend évidemment du contexte. Par exemple, un site sur l’exercice et l’entraînement intensif mettrait l’accent sur la posture du corps, le mouvement et la tension de l’instant. Un blog personnel mélancolique se concentrerait sur des couleurs et des détails qui construisent l’ambiance, comme une cigarette qui se consume, dans les mains sales et calleuses d’un solitaire distrait.

‍Les mots utilisés sont les mêmes afin d’illustrer au mieux la différence de stimulation émotionnelle du spectateur. De même que pour l’image, le choix de la police et le contraste des couleurs œuvrent dans le sens de l’effet recherché. À partir d’ici, les visuels divergeraient encore davantage.

‍Ajoutons quelques effets de superposition. L’effet le plus couramment utilisé est un voile coloré par-dessus l’image, mais placé derrière tout texte :

‍On voit immédiatement que les images prennent une qualité presque surnaturelle. Elles ne parlent plus d’une situation réaliste, mais d’une idéalisation de leurs concepts d’origine.

‍Même si c’est intéressant, quelque chose cloche toutefois dans la composition. Puisque les deux images ont perdu à la fois leur réalisme et leur lisibilité visuelle (principalement à cause des ombres et des couleurs intenses et chargées), le fait qu’elles restent au centre de l’attention du spectateur crée une gêne visuelle.

‍Bien que loin d’être abouti, le résultat visuel est bien meilleur. Nos yeux sont déjà attirés naturellement par les titres et l’en-tête. Bien sûr, on n’aurait pas de « hero image » sans au moins un en-tête, mais il est important de comprendre que chaque composant est un bloc de construction qui ouvre des possibilités, et que chaque palier qui introduit de nouveaux éléments redistribue les cartes.

‍Un autre effet populaire pour les « hero images » est le flou :

‍Ici, on remarque immédiatement un gros problème. Les modèles sur l’image regardent droit vers le spectateur, mais à cause du flou, cet effet émotionnel intense vire désormais de l’embarrassant au comique, rendant le procédé inadapté à cette image.

‍Si l’on met de côté ce problème toutefois, on peut noter plusieurs avantages. L’image comportait déjà de larges zones très sombres, ce qui fait des lettres blanches en gras un choix évident. Certaines parties cependant, comme le mot Diary sur le coude de la femme et le N de tension rencontrant les rayures blanches de la chemise de l’homme, sans nuire à la lisibilité du texte, paraissaient maladroites. Tout le texte est centré dans le cadre, donc le déplacer n’est pas une option idéale. Grâce au flou, ce n’est plus le cas.

‍Pour conclure, souvenez-vous que la « hero image » est la première impression de votre page : elle mérite beaucoup de votre attention et de votre temps. Soyez spontané et expérimentez beaucoup pour découvrir toutes sortes d’idées créatives.

‍Voici un essai rapide avec un dégradé en superposition.

‍