La prochaine grande tendance en matière d’image de conception Web est bien là, elle est dynamique, colorée et magnifique!
Grâce à Spotify, la popularité du duo gagne presque quotidiennement en popularité. L'effet, qui utilise une paire de couleurs sur une photo, est saisissant, amusant et dynamique. C'est aussi assez branché, avec de nouveaux sites changeant presque quotidiennement en format bichromie. Voici quelques façons de tirer le meilleur parti de cette technique de conception en vogue.
Qu'est-ce que Duotone?
Tout d’abord, un peu d’amorce: Duotone est l’utilisation de deux couleurs.
Le nom et la technique proviennent des presses à imprimer. Les tirages Duotone sont réalisés en deux nuances de la même couleur ou en noir et une teinte. Le processus utilise deux plaques de couleur fabriquées avec l’écran placé à des angles différents.
Le concept de deux couleurs est grand. Pantone a nommé la paire «Couleur de l’année». Le minimalisme a amené les concepteurs à penser à des palettes et à des tons limités qui sont visuellement intéressants et assez faciles à créer. Vous pouvez créer l'effet à l'aide d'Adobe Photoshop et d'un dégradé de deux couleurs ou d'un outil tel que Colofilter.css pour l'appliquer dans le code.
Mais ce qui a sans doute le plus contribué à faire en sorte que le duo soit le plus efficace est son utilisation par Spotify. Les jeux de couleurs Duotone sont utilisés dans l'application de lecture de musique et pour divers micro-sites promotionnels. Duotone ajoute un élément de design unique aux images d'artistes connus et largement utilisés.
Cette technique, qui était autrefois un élément de base de l’impression imprimée, a trouvé une nouvelle vie en ligne et constitue une tendance que nous verrons probablement davantage au cours des prochains mois.
En tant qu'image dominante
Utilisez deux couleurs pour créer une image dominante.
Le visuel principal de New Deal Design frappe par son choix de couleurs audacieux et décalé, grâce à ses images amusantes et à ses couleurs. N'ayez pas peur de sortir de votre confort lorsqu'il s'agit de travailler avec des images bicolores; il est possible d'apparier des teintes qui pourraient ne pas correspondre. L’objectif est de créer un visuel exigeant de l’attention et comportant beaucoup de contraste pour que l’image transparaisse.
Voici quelques conseils pour un impact maximum:
- Choisissez deux couleurs contrastantes ou une paire de couleurs de marque.
- Sélectionnez une photo avec une zone d'image focalisée. Un paysage peut être difficile à utiliser.
- Commencez avec une image de haute qualité. Les images floues ou médiocres et les deux couleurs ne se mélangent pas.
- Jouer le contraste.
- Considérez des espaces pour les boutons ou la typographie.
- Choisissez des couleurs qui reflètent l'ambiance de la photo.
- Désactivez une image bicolore avec une bordure colorée ou combinez les options de couleur avec un curseur de défilement ou des effets de parallaxe.
En tant que palette de couleurs simple
Duotone ne doit pas être compliqué. Parfois, les projets bicolores les plus frappants sont simples.
Assurity Life Insurance utilise une paire de rouges et une typographie nette. Le parchemin inclut également un style plus de demi-teintes. Les couleurs sont vives et attrayantes. Le rouge est le genre de couleur qui fait presque regarder les utilisateurs.
L'astuce ici est que c'est juste assez simple pour être efficace. L'utilisateur n'est pas submergé d'éléments. Le rouge vous attire afin que les mots à l'écran deviennent le focus. Ce type d’effet bicolore est presque fait pour les sites Web qui ont une apparence plus formelle, car il permet d’utiliser une tendance sans se sentir forcé ou écrasant.
Pour augmenter la lisibilité
Utilisez du double ton pour agir en tant que stabilisateur de couleur qui donne au texte beaucoup d’espace et de contraste. Une superposition de couleurs bicolores peut aider? Aplatir? variations de couleur dans une image afin que le texte puisse être placé en utilisant une seule couleur presque n'importe où sur l'image tout en restant lisible.
Les choix de couleurs Duotone ne seront pas aussi brillants pour cet usage et apparaîtront probablement plus atténués, mais ils peuvent être très utiles. Holm Marcher & Co. le fait avec un duo corallien et bleu intéressant, qui crée un fond très lisible pour le lettrage. De plus, les éléments de navigation utilisent des nuances de bleu de la palette de couleurs pour faciliter les déplacements sur le site.
Comme un accent
Bien que les effets bichromiques se prêtent aux grandes images, ils peuvent également fonctionner dans des endroits plus petits. Considérez un accent double dans la navigation, pour les images secondaires ou pour des types de contenu spécifiques.
Ce qui est bien avec les petites zones de jeu à deux voix, c’est que vous avez un peu plus de liberté de jeu si vous êtes intimidé par la technique ou si vous ne savez pas exactement comment le faire fonctionner pour vous. Lorsqu'il est utilisé dans des espaces plus petits, il peut être intéressant visuellement de jouer avec plusieurs paires de couleurs pour différents éléments de la conception.
Envisagez des éléments doubles pour les éléments de style de carte, en tant que superposition de liens pour des vidéos ou pour souligner des appels à l'action. Les accents en bichromie peuvent également être des outils efficaces pour une palette de couleurs minimale ou noir et blanc en raison du contraste de couleur qu'ils créent.
Comme fond
Rien de tel qu'un effet bicolore subtil pour créer une image de fond ou un motif intéressant. Ceci est une utilisation idéale pour les couleurs de marque ou comme moyen d’incorporer une teinte ou une technique à la mode dans votre conception sans refonte complète.
Le fond bichrome progressif de Join Radio est la perfection. Le changement de couleur est presque imperceptible et se fond parfaitement dans les autres éléments de l'interface utilisateur de la conception. Il y a une animation simple se déplaçant à travers les couleurs qui est apaisante et qui a un mouvement semblable à de l'eau. Le passage de la lumière à l'obscurité suit les schémas naturels de lecture des yeux et de la lecture qui vont du haut à gauche de la page d'accueil au bas à droite, où l'utilisateur est encouragé à faire défiler et cliquer.
Conclusion
Il est difficile de trouver une technique de conception plus amusante que la couleur. Les duotones sont tout aussi attrayants pour les concepteurs. L'effet peut pimenter une image surutilisée, ajouter un élément amusant en cas de manque et simplement aider à engager les utilisateurs visuellement.
De plus, le concepteur a vraiment la possibilité d’expérimenter lorsqu’on utilise des effets bichromiques. Vous pouvez associer des couleurs que vous n'auriez peut-être pas imaginées pour un impact majeur ou combiner des couleurs avec des variations subtiles pour un petit élément de surprise.Quoi qu'il en soit, la création de cet effet de couleur est presque toujours personnalisée et peut être amusante à utiliser.