Design Trend Palettes de couleurs sombres et animation

Avez-vous pris note de tous les modèles de conception super sombre récemment? Les concepteurs expérimentent certains modèles de conception funky et sombres qui comportent une animation dans le même jeu de couleurs.

Ces animations incluent tout, des simples mouvements qui se produisent seuls aux effets de vol stationnaire en passant par des expériences cinématographiques complètes. Explorons cette tendance en matière de conception de sites Web et explorons quelques moyens de le faire fonctionner pour vos projets.

A propos de la tendance

L'animation sombre est une tendance qui combine deux éléments de manière distincte: une palette de couleurs monochrome sombre et une animation cool. Le résultat est un superbe design en couches à la fois subtil et sombre.

Cela semble fonctionner, car cela évoque un sentiment de mystère. Et les utilisateurs veulent résoudre le puzzle.

Bien que la tendance puisse être difficile à réussir - et ne donne pas toujours une expérience utilisateur mobile exceptionnelle - ce qui motive ce modèle visuel est son intérêt. En raison de tous les éléments sombres, l'utilisateur est obligé de regarder le dessin.

Il existe un véritable élément de mystère qui motive l’engagement dans ces projets alors que l’utilisateur est fasciné par la vision de ce qui va se passer avec l’élément animé et par la recherche de changements et d’effets subtils. Que va-t-il se passer ensuite?

Chacune de ces conceptions est composée d'une manière différente. Aucun type d'animation particulier ne fonctionne le mieux et aucune couleur définie ne doit être utilisée, bien que bon nombre de ces conceptions utilisent une palette de noirs et de gris riches.

Les animations peuvent être aussi simples qu'un effet de survol ou aussi élaborées qu'une forme de moulage ou une vidéo produite.

Cela semble fonctionner, car cela évoque un sentiment de mystère. Et les utilisateurs veulent résoudre le puzzle.

Pourquoi ça marche

En réalité, il est difficile d'expliquer précisément pourquoi cette tendance de conception fonctionne. Lorsque vous y réfléchissez sans voir les projets de conception de sites Web, vous ne penserez pas que des motifs animés sombres réussiraient.

  1. Il n'y a pas beaucoup de couleur.
  2. Il y a très peu de contraste.
  3. Les dessins sont presque trop simples.

Mais peut-être que c'est pourquoi cette tendance Est-ce que travail. Cela brise suffisamment les règles pour attirer les utilisateurs dans la conception.

L'autre facteur contributif est que l'obscurité et le mystère vont de pair. Et les gens aiment juste un bon mystère. Ils vivent en étant capables de voir des éléments cachés ou de résoudre un problème complexe. La palette de couleurs sombres avec un effet animé offre aux utilisateurs un moyen de résoudre un mystère.

Ces projets ont également un attrait émotionnel distinct. Les couleurs sombres sont de mauvaise humeur. Les variations de couleur dans ces palettes sont complexes et intéressantes (du point de vue du design, en tout cas). Il y a un élément de profondeur difficile à articuler, mais fascinant à explorer.

Additionnez toute l'émotion et le mystère et vous comprendrez pourquoi les utilisateurs sont attirés par ce schéma visuel.

Il n'a pas à être noir

Bien que la plupart de ces conceptions comportent des palettes de couleurs noires, elles ne le sont pas.

D'autres teintes sombres peuvent également être efficaces et donner aux concepteurs la possibilité de créer un motif de conception animée sombre et de rester fidèle à la marque grâce à la palette de couleurs.

Quelle que soit la couleur, la richesse de la sélection des couleurs est la clé du bon fonctionnement de ces palettes de couleurs avec les animations. Une gamme de tons (mélange d'une couleur avec des gris) et de nuances (mélange d'une couleur avec du noir) peut fournir une plage variable pour une palette de couleurs monochrome. (Il suffit de regarder les différents motifs dans la conception de FedEx ci-dessus.)

Bien que le contraste ne soit pas au centre de cette tendance de conception, il est important. Sans assez de contraste dans la conception monochrome, l'animation se perdra à l'arrière-plan, rendant la conception inefficace.

Quelques précautions

Cette tendance en matière de conception ne convient pas à tout le monde et il est très difficile de la réussir efficacement. Les motifs animés de couleur foncée ont des défauts:

  • Ne rend pas tout cela bien sur les appareils mobiles.
  • Il existe certains problèmes d'accessibilité inhérents.
  • L'intérêt visuel de certains utilisateurs pourrait être insuffisant.
  • La navigation et l'appel à l'action peuvent être difficiles.
  • Les conditions environnementales - éclairage, etc. - peuvent rendre la conception plus difficile à voir.
  • Certains utilisateurs n'apprécieront pas le ton de mauvaise humeur.
  • Les utilisateurs peuvent se lasser de la conception rapidement, en diminuant le temps passé sur le site.

Conseils pour essayer cette tendance de la conception

Si vous n'êtes pas effrayé par les défis présentés par cette tendance en matière de conception et si vous avez un modèle de contenu qui correspond au ton sombre d'un schéma de conception animé de couleur sombre, vous pouvez procéder de différentes manières pour assurer le succès du projet.

  • S'en tenir à une conception d'une page: Trop d'éléments de design géniaux peuvent être accablants. Si vous envisagez d'utiliser ce concept, limitez-le à une conception d'une page ou à une page de la conception.
  • Utilisez une couleur contrastante: Le texte blanc fonctionne exceptionnellement bien sur les arrière-plans sombres. La même chose vaut pour les autres éléments. Assurez-vous que les boutons, les éléments de navigation, la messagerie et l'appel à l'action sont faciles à voir et à lire. Bien que l'animation et l'arrière-plan puissent ne pas contraster de manière significative, d'autres éléments doivent être faciles à identifier.
  • Simplifier l'animation: Des animations trop complexes peuvent submerger ce design. S'en tenir à un mouvement simple et un mouvement qui n'est pas trop rapide.
  • Design en couches: Ce concept fonctionne grâce à la conception en couches. Créez une séparation entre l'arrière-plan et les éléments animés pour obtenir un effet à la fois tactile et réel. La superposition vous aidera également à planifier le contraste nécessaire pour rendre les éléments visibles.
  • Utilisez une typographie audacieuseRemarque: non seulement les éléments de texte doivent comporter beaucoup de contraste de couleurs, mais vous devrez probablement utiliser une police de caractères forte et audacieuse pour éviter que le texte ne tombe dans le dessin. Il devrait en sortir. Recherchez des polices de caractères avec un lettrage plus épais et des traits simples pour assurer une lisibilité maximale.

Et après?

Comme pour toute tendance en matière de design, cette esthétique continuera d'évoluer.Bien que nous ne puissions pas vraiment prédire ce qui va se passer par la suite, certaines conceptions fournissent un indice.

La couleur sombre et l'animation pourraient être une conception vedette dans le monde de la réalité virtuelle. La réalité virtuelle est un terrain de jeu pour les jeux et la vidéo, qui utilise déjà beaucoup de couleurs sombres.

Cette tendance en matière de design pourrait parfaitement convenir à ces types de projets, tels que le nouveau site Web de bande-annonce / jeu vidéo de Blair Witch Project, ci-dessus.

Conclusion

Les combinaisons de couleurs sombres existent depuis un certain temps, mais cette nouvelle variante avec des animations de couleurs similaires est intéressante. Il s’agit en général d’une de ces choses que les concepteurs adorent absolument - en partie pour ce qui est déprimant - ou de la haine à cause des défis que cela représente pour les utilisateurs.

Quoi qu'il en soit, ce style est utilisé plus fréquemment. Bien que cela fonctionne mieux pour certains types de projets (notez le nombre de sites d'agences et de portefeuilles dans les exemples), cela peut être un moyen intéressant de mélanger une conception. Essayez-le avec une seule diapositive ou une seule page et découvrez ce que les utilisateurs pensent avant d’investir dans un motif de conception animée de couleur entièrement sombre.