Si rien d'autre, 2017 a été une année de couleur dans la conception de sites Web. Les tendances des couleurs ont dominé la discussion sur le design, avec des teintes plus vives et plus audacieuses comme une grande partie du paysage.
Il existe une nouvelle tendance de couleurs qui combine beaucoup de ces options lumineuses dans des palettes de couleurs plus grandes que vous pouvez maintenant attendre - des motifs de couleurs arc-en-ciel. En effet, de plus en plus de concepteurs adoptent un changement avec beaucoup de couleurs et incorporent des couleurs dégradées arc-en-ciel et dégradées dans leurs projets de conception. Et c'est plutôt cool!
Voici un aperçu de la tendance et des idées sur la manière d’utiliser des couleurs vives qui ne sont pas criardes.
Rainbow Animation for Engagement
Presque depuis que Spotify est entré en scène, il a façonné les tendances du design et repoussé les limites du design cool. Le site musical met à jour et modifie constamment sa conception et utilise des microsites pour mettre en valeur des genres et des artistes spécifiques.
La conception du site Web London Grammar Moodmix utilise un blob de couleur qui rebondit pour attirer l’attention de l’utilisateur. L'animation est intéressante et donne envie de tendre la main et de la toucher. Et c'est l'objectif de cette animation aux couleurs de l'arc-en-ciel. Notez que l’appel à l’action se situe exactement au centre de toute cette couleur.
Le résultat est un design simple avec une animation intéressante qui conduit les utilisateurs directement au but du design. L'animation fonctionne avec beaucoup de couleurs à cause du mouvement. Le blob ne serait pas aussi intéressant dans une seule couleur.
Couleur Vs. Foncé
Les couleurs arc-en-ciel peuvent être difficiles à utiliser en raison de problèmes de contraste. Le fait de mettre des teintes vives de style arc-en-ciel sur un fond sombre peut résoudre la plupart de ces problèmes.
Les couleurs vives vont presque sauter d'un fond sombre.
Un autre nom bien connu dans la conception et le développement de sites Web, Github, utilise les couleurs de l'arc-en-ciel pour promouvoir sa conférence cette année. Le site Web simple utilise un logo amusant de style arc-en-ciel et des boutons d’appel à l’action pour la vente de billets. Ce design est différent de beaucoup d’autres esthétiques arc-en-ciel, c’est que le design est plutôt plat et qu’il n’est pas nécessaire d’utiliser un dégradé pour les couleurs. Chaque ligne du logo a une couleur différente de celle des lettres. Un dégradé est utilisé uniquement pour le bouton CTA.
Savee va dans une autre direction avec la couleur de l'arc-en-ciel sur un fond sombre, en utilisant de nombreuses images haute en couleurs pour créer une mosaïque avec une sensation d'arc-en-ciel. Bien que la plupart des utilisations de la couleur arc-en-ciel fournissent une graduation du rouge au jaune au vert au bleu, ce n'est pas toujours le cas. Les palettes de couleurs arc-en-ciel peuvent être n'importe quoi avec une large gamme de teintes.
Couleur subtile
Parfois, les meilleures utilisations des styles arc-en-ciel ne sautent pas directement de l'écran. Southwest utilise une palette plus subtile avec des tons d'arc-en-ciel à l'arrière-plan.
Le choix intéressant remplace presque bon nombre des autres tendances de couleurs de l’année et le résultat est rafraîchissant. Vous regardez la conception presque parce qu’elle est si différente de la plupart des autres conceptions de sites Web qui existent actuellement.
Même avec une palette de couleurs arc-en-ciel plus atténuée, mettez un accent particulier sur le contraste entre les éléments d’arrière-plan et d’avant-plan pour que chaque élément soit facile à voir et à lire. Il s’agit du problème le plus courant avec les conceptions de style arc-en-ciel: manque de contraste et lisibilité difficile.
Logo arc-en-ciel
Pensez à utiliser des couleurs arc-en-ciel pour créer un logo simple. Ceci est probablement l'utilisation la plus difficile de la couleur arc-en-ciel, mais peut avoir un effet saisissant.
C'est un défi en raison de tous les endroits - et les moyens - un logo peut être utilisé. Opter pour des couleurs arc-en-ciel conviendrait mieux aux petites marques qui n'utilisent pas le logo dans de nombreuses applications. Vous voudrez certainement une option secondaire également lorsque beaucoup de couleurs ne fonctionnent pas.
Richard Gazdik utilise un logo arc-en-ciel pour son portfolio - et pour la navigation ultérieure. Cela fonctionne presque parfaitement grâce à ses initiales - RGB - et au rapport avec les couleurs sélectionnées. Tout le monde n'aura pas cette chance, mais cela montre à quel point un logo en couleur peut être efficace dans un design simple.
La couleur comme point focal
La couleur arc-en-ciel peut être ce qui attire les utilisateurs dans une conception avec une première impression forte.
Mais il existe une fine ligne entre la couleur arc-en-ciel qui s’engage et la couleur arc-en-ciel qui peut détourner les utilisateurs. Vous souvenez-vous de certaines des conceptions de sites Web de la fin des années 1990 et du début des années 2000, lorsque presque tous les sites Web avaient des couleurs vives éclaboussées partout (et clignotant)? Ce type de traitement de couleur arc-en-ciel peut être désastreux et détourner les utilisateurs.
Lonsdale fait le contraire avec une vidéo en boucle de liquide arc-en-ciel qui est fascinante à regarder. Les changements de mouvement et de couleur sont audacieux et donnent envie de regarder. L'arrière-plan arc-en-ciel est compensé par des caractères de type blanc et des éléments de navigation afin de guider les utilisateurs dans le reste du dessin, qui colle à la couleur des images sur fond blanc.
Le code de couleur adopte une autre approche avec beaucoup de couleurs vives dans tout le dessin. La couleur est utilisée pour attirer l'attention sur le produit à l'écran - téléphones et montres affichant des applications.
Créer un fond engageant
Les gouttes arc-en-ciel pourraient presque être une tendance de couleur qui leur est propre - des animations liquides, un style d'encre, des bulles de couleurs en mouvement. En tant qu'élément d'arrière-plan, la couleur arc-en-ciel peut aider à donner le ton à un projet et à susciter l'engagement de l'utilisateur. (Imaginez à quel point votre couleur est plus attirante qu'un simple fond beige.)
Bien que bon nombre de ces éléments d’arrière-plan aient un certain mouvement sous forme d’animation ou de vidéo, ils ne le sont pas. Ce qui est commun aux sites Web avec des arrière-plans arc-en-ciel est qu’ils sont souvent contenus dans la page d’accueil ou au-dessus du défilement et que le reste du site Web est moins occupé.
C'est une excellente technique en matière d'engagement. Il y a tout de suite quelque chose avec lequel les utilisateurs peuvent se connecter, les amenant à un contenu qu'ils peuvent approfondir un peu.
Plus de techniques de dégradé
Les couleurs arc-en-ciel peuvent être une extension d'une autre tendance de couleur de cette année: le retour du dégradé.
Essayez un dégradé avec une sensation d’arc-en-ciel. Optez pour un changement de couleur à grande échelle du rouge au bleu, tel que SpicyWeb ou optez pour des couleurs un peu plus à la mode, telles que Talkd.
Dans les deux cas, l’utilisation d’un dégradé peut être une façon amusante d’ajouter de la couleur sans vous sentir accablé. Cela fonctionne en plein écran ou en éléments plus petits. Un dégradé peut également vous aider à incorporer les couleurs de la marque dans un jeu de couleurs de style arc-en-ciel sans une refonte complète du site Web.
Souligner quelque chose de différent
Utilisez la tendance de couleur arc-en-ciel pour mettre en valeur quelque chose d'inhabituel ou de différent dans votre conception. Parce que les couleurs arc-en-ciel attirent tellement l'attention, elles peuvent aider les utilisateurs avec un motif utilisateur non conventionnel, attirer l'attention sur un certain contenu ou une partie de l'écran ou aider à créer des clics et des conversions.
Jony Guedj utilise la couleur pour la navigation. Les éléments de menu ne sont pas composés de la manière habituelle, ils se trouvent en bas de l'écran et fonctionnent uniquement avec une action de défilement pour afficher différents clips vidéo. Bien que ce type de conception ne soit généralement pas conseillé, cela fonctionne ici. Les couleurs de l'arc-en-ciel incitent les utilisateurs à dialoguer avec eux et les aident à comprendre comment utiliser le site Web.
Conclusion
La tendance de la couleur arc-en-ciel est très amusante.
Il peut être difficile à utiliser si la couleur vous intimide un peu. Mais commencez petit avec un élément de couleur arc-en-ciel pour voir comment cela fonctionne. La plupart des concepteurs ne convertissent pas des sites Web entiers en conceptions arc-en-ciel; ils utilisent la couleur arc-en-ciel pour créer des effets visuels efficaces qui attirent les utilisateurs. C'est probablement pourquoi la tendance est apparue.