Créer l'image du héros parfait en utilisant le contraste
Vous voulez faire une bonne première impression? Cela commence par l'en-tête de votre site Web. L'image que voit un utilisateur laisse une impression bonne ou mauvaise et détermine si cet utilisateur clique et continue, ou quitte le site.
C'est un défi de taille pour une seule image.
L'élément clé de la création d'une image de héros qui attirera les utilisateurs et les maintiendra en mouvement est le contraste. (Sérieusement! Tout revient à la théorie du design 101.) Une tête comportant des éléments de taille, de couleur et d'échelle contrastés fournit le bon mélange d'intérêt visuel et indique aux utilisateurs comment interagir avec le design. Voici quelques moyens d'optimiser le contraste sur le chemin de création d'une image de héros parfaite.
Crop Stratégiquement
L'image de héros ne doit pas remplir le "premier" écran sur les appareils. Ne soyez pas pris dans ce piège.
Recadrer l'image pour l'impact en fonction du contenu. Considérez les autres éléments importants pour les utilisateurs lorsqu'ils arrivent sur la page et apportez des aménagements à ceux-ci. Selon ce cadre, cela peut signifier que l'image du héros est plus grande ou plus petite que la fenêtre du navigateur (considérons simplement d'autres résolutions standard pour des raisons d'argumentation).
Avant de reculer devant l'idée, réfléchissez un moment.
- Une image superficielle aidera à prévisualiser d'autres contenus.
- Une image inhabituellement profonde encouragera les utilisateurs à faire défiler pour plus.
- Toute forme inhabituelle attirera l'attention.
Considérer l'animation
Vous n'avez pas besoin de créer une expérience cinématographique complète pour ajouter des images animées à l'en-tête du héros. Les plus petites touches de mouvement créent juste assez de contraste pour attirer l'œil.
Les mouvements subtils, tels que l’avion survolant l’image de Bar Z Winery, fournissent cet élément de contraste sans être écrasant. C'est une alternative simple à certains des en-têtes vidéo les plus voyants qui sont devenus populaires. L'élément de contraste est double: le design est différent de ce que beaucoup d'autres utilisateurs sont exposés et le mouvement subtil est délicieux et plutôt inattendu.
D'un autre côté, vous pouvez aller avec animation ou vidéo pour une image de héros. Le mouvement peut être particulièrement attrayant et constitue une option populaire. Utilisez-le de la même manière que vous le feriez avec une image fixe pour ajouter des effets tels que la typographie et les appels à l'action.
Think Bold Typography
La typographie dans l'image du héros devrait impressionner l'utilisateur. Il doit être audacieux, percutant et mémorable.
Vous pouvez créer ceci avec la sélection de caractères et les mots à l'écran. (Pas d'en-têtes Arial qui disent "Bonjour" ici.)
La combinaison du style de lettrage et de la messagerie doit avoir un impact et un attrait directs sur l'utilisateur. Vous avez entendu que les gens ont une durée d'attention plus courte que les poissons rouges; c'est votre travail de les attraper avec de belles lettres et de la langue.
En ce qui concerne les caractères gras, les principaux éléments de contraste sont la couleur et la taille.
- Le type doit être une couleur qui se démarque de l'arrière-plan. La lumière dans l'obscurité ou l'obscurité à la lumière sont les meilleures options en matière de lisibilité.
- Bold est une digression de la norme. Considérez la typographie surdimensionnée ou insuffisante sur l’en-tête du héros pour l’impact.
- Choisissez des mots avec un sens. Sauf si c'est la clé de votre message, vous n'avez pas besoin d'un paragraphe dans l'en-tête. Optez pour quelques mots clés qui incitent les utilisateurs à en apprendre davantage. (Le nombre de mots aura un impact sur la taille des lettres.)
Choisissez la couleur avec soin
Une image de héros peut ne pas être une image du tout. Cela pourrait être un bloc de couleur ou une texture fraîche.
Choisissez une couleur qui dépeint exactement le sens que vous souhaitez. Un en-tête de héros en couleur audacieuse peut impressionner les utilisateurs, mais la mauvaise couleur peut être désactivée.
Des options lumineuses et à la mode sont une bonne alternative. La bonne chose à propos de cette option est que vous pouvez le mélanger de temps en temps simplement en changeant la couleur de fond. Un grand arrière-plan de couleur peut également contribuer à renforcer l'identité de la marque, en particulier si elle est fortement associée aux couleurs et se prête à la lisibilité en raison de la simplicité de la conception.
La couleur est également une considération importante lorsqu'elle est utilisée avec une autre image ou une autre vidéo. De la typographie colorée aux éléments d'interface utilisateur colorés, il est important de s'assurer que les choix de couleur dans l'image correspondent au reste du dessin. Cela revient en grande partie à la théorie des couleurs et à la compréhension de la roue chromatique afin que les choix d'image et de couleur fonctionnent ensemble dans la conception.
Mais que se passe-t-il si l'image du héros et les couleurs de la marque ne sont pas liées? Pensez de manière créative à la manière d'utiliser les parties de l'image du héros ensemble. Essayez une superposition de couleur sur la photo; Considérez noir et blanc pour l'image ou le texte. Déplacez les éléments haut en couleur dans une barre de navigation blanche ou noire pour les garder hors de l’image réelle. Lorsque l'image et les couleurs obligatoires ne fonctionnent pas correctement, la meilleure option est d'éliminer ou de séparer la couleur.
Pensez aux espaces clairs et sombres
La comptabilisation d'espaces sombres et clairs dans une image peut être la tâche la plus difficile lors de l'ajout d'éléments pour créer un contraste dans une image de héros. En particulier avec les formats réactifs et les points d'arrêt, le placement de texte ou de boutons sur une image peut changer et vous ne pouvez pas toujours trouver un emplacement idéal.
Qu'est-ce qu'un designer à faire?
- Choisissez une autre image
- optez pour un type de famille, une taille ou une couleur différente;
- ajouter une superposition de couleur;
- Faites-en de ce qui en à de meilleur.
Chacune de ces réponses est une option viable. La meilleure option peut varier selon le projet.
La société inc. La solution dans le curseur d'image de héros - avec beaucoup de variations entre les espaces clairs et sombres - consistait à inclure un logo avec un texte blanc dans une forme noire. Cela n'enlève rien aux images et est beaucoup moins gênant que vous ne le pensez en entendant cette idée. Le logo dans le centre contribue également à établir la marque et l'identité visuelle.
Inclure un appel à l'action distinct
N'oubliez pas le CTA!
Que voulez-vous que les utilisateurs fassent après avoir regardé votre image de héros cool? Dis leur.
L'appel à l'action doit être clair, que ce soit pour remplir un formulaire, faire défiler pour plus de contenu ou pour cliquer sur un lien vers une autre page. Il devrait inclure suffisamment de définition et de contraste pour qu'il soit facilement visible sur le fond de l'image. (Quel est le point dans un CTA si personne ne le voit?)
La couleur et la taille sont particulièrement importantes ici. La couleur du bouton (un repère CTA commun) doit se distinguer du reste de l'image. Les mots indiquant aux utilisateurs ce qu’il faut faire doivent être extrêmement lisibles, simples et clairs.
Conclusion
Le contraste est l'une des techniques clés pour tout bon design. Cela crée une séparation entre les éléments et aide à guider les utilisateurs vers l'action souhaitée.
Faites particulièrement attention à créer suffisamment de contraste lors de la conception d'une image de héros afin que les utilisateurs sachent exactement quelles actions effectuer sur la page. Jetez un coup d'œil à vos indicateurs et, si ces conversions ne se produisent pas, repensez à la quantité de contraste de la conception. Il est peut-être temps de l’amplifier encore plus.