Comment créer une image de héros efficace

Une image de héros est essentiellement une grande image de bannière, souvent utilisée en conjonction avec des graphiques superposés, pour servir d'expérience d'introduction et d'ambiance pour le site.

"Image de héros" est un terme générique qui désigne des combinaisons de motifs de fond, d'images, de vidéos ou d'animations avec des teintes ou des effets flous. Tandis que le visuel crée l'ambiance et attire l'attention, les informations pertinentes et les éléments à prendre en compte sont placés dans aux alentours. Plus qu'un simple exercice de graphisme, un héros est un excellent moyen de commencer votre site Web, en explorant votre créativité à travers lui, dans le but ultime de faire une impression percutante et durable.

Le choix de l'image dépend clairement du contexte. Par exemple, un site Web sur l'exercice et l'entraînement intense se concentrerait sur la pose du corps, le mouvement et la tension du moment. Un blog personnel mélancolique se concentrerait sur les couleurs et les détails qui créent l'ambiance, comme une cigarette qui brûle, dans les mains sales et calleuses d'un solitaire absent.

Les mots utilisés sont les mêmes pour mieux illustrer la différence dans la stimulation émotionnelle du spectateur. De même que pour l'image, le type de police et le contraste des couleurs travaillent vers l’effet désiré. A partir de maintenant, les images divergeraient encore plus.

Ajoutons quelques effets de superposition. L’effet le plus communément utilisé est une teinte de couleur sur l'image, mais derrière n'importe quel texte:

On voit tout de suite que les images prennent une qualité surnaturelle. Il ne s'agit plus d'une situation réaliste, mais d'une idéalisation de leurs concepts originaux.

Bien qu'intéressant, il y a cependant quelque chose qui ne va pas avec le design. Comme les deux images ont perdu leur réalisme et leur clarté visuelle (principalement à cause des ombres et des couleurs fortes et maussades), le fait d'être le centre de l'attention du spectateur cause un inconfort visuel.

Bien que loin d'être complets, les résultats visuels sont nettement améliorés. Nos yeux sont déjà attirés par les titres et l'en-tête d'une manière naturelle. Bien sûr, il est impossible d'avoir une image de héros sans au moins un en-tête, mais il est important de réaliser que chaque composant est un élément constitutif qui donne naissance à des possibilités, et que chaque niveau introduisant de nouveaux éléments remet à zéro les règles du jeu.

Un autre effet populaire pour les images de héros est le flou:

Ici, vous pouvez immédiatement remarquer un gros problème. Les modèles dans l'image regardent directement le spectateur, mais à cause du flou, l'intense effet émotionnel varie maintenant de bizarre à comique, rendant l’effet inapproprié pour cette image.

Si l'on mettait de côté ce problème, nous pourrions cependant constater plusieurs avantages. La plupart des zones de l'image étaient déjà couvertes de couleurs très foncées, ce qui fait que les lettres blanches en gras sont un choix évident. Cependant, certaines parties, comme le mot Diary (Journal) sur le coude de la femme et le N de tension rencontrant les rayures blanches de la chemise de l'homme, tout en ne réduisant pas la clarté du texte, semblent gênantes. Tout le texte est centré sur le cadre, donc le déplacer n'est pas une option bienvenue. Grâce au flou, ce n'est plus le cas.

Pour terminer le chapitre, rappelez-vous que l'image du héros est la première impression de votre page: elle mérite beaucoup de votre attention et de votre temps. Soyez spontané et faites beaucoup d’expérimentations pour découvrir toutes sortes d'idées créatives.

Voici un test rapide avec une superposition de dégradés.


S'il vous plait, signalez toute lacune dans la documentation et nous la corrigerons dès que possible !

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.