Comment faire en sorte que les superpositions de couleurs fonctionnent dans votre conception

La couleur est une partie importante de presque n'importe quel design. Que vous aimiez les couleurs vives et audacieuses ou que vous préfériez un noir et blanc plus minimaliste, l’utilisation de la couleur peut avoir un impact important sur la conception.

Une façon d'utiliser la couleur pour faire une déclaration consiste à utiliser un motif comportant une superposition de couleurs. Cela signifie que vous couvrez une image ou une vidéo avec une zone colorée semi-transparente. L'effet peut ajouter du sens à une image, attirer l'attention sur un dessin et vous aider à tirer le meilleur parti de choix artistiques limités.

Aujourd'hui, nous allons examiner différentes superpositions de couleurs afin de nous inspirer pour créer le vôtre.

Essayez un dégradé

Les dégradés sont cool à nouveau. Ils constituent également une option intéressante (et attrayante) lorsque vous souhaitez travailler avec une superposition de couleurs.

Ce qui est particulièrement intéressant avec un dégradé, c'est que vous pouvez utiliser plusieurs couleurs (pensez à votre marque ici) ou utiliser une seule couleur pour créer le focus. Des combinaisons lumineuses peuvent aider à attirer les utilisateurs dans la conception et donner une étincelle aux images.

Une grande partie de cette tendance peut être reliée à Spotify, qui a commencé à utiliser des superpositions en dégradé et en duo pour mettre en évidence les sélections. La couleur a donné une nouvelle vie aux images que les utilisateurs avaient l'habitude de voir (photos de presse de musiciens).

C'est un concept facile à reproduire également.

  • Choisissez une photo.
  • Créez un dégradé avec les couleurs de la marque.
  • S'amuser!

Couleurs unies Donner un ton

Une superposition de couleur unie peut être tout aussi frappante qu'un motif de dégradé, mais a souvent une signification plus distincte pouvant être associée au choix de la couleur. Prenons l'exemple d'une superposition sépia. Cela suscite immédiatement des sentiments du passé et de l'histoire.

La même chose peut être dite de la sélection d'un choix de couleur à la mode. En utilisant l’une des couleurs vives et saturées associées au design plat ou matériel, vous pouvez évoquer des sentiments de modernisme ou de haute couture.

Lorsque vous utilisez une seule couleur en superposition, réfléchissez au degré de saturation et à la transparence de la couleur. Ces éléments peuvent également ajouter une signification. Des combinaisons de couleurs plus lourdes - moins transparentes et plus saturées - mettent davantage l'accent sur la couleur elle-même que l'image derrière elle. Des combinaisons plus claires et plus subtiles mettent davantage l'accent sur l'image.

Considérez Dark ou Light

Il n'est pas toujours nécessaire d'utiliser une couleur en soi pour créer une superposition. Parfois, il peut être noir, blanc ou gris. L'utilisation de ces nuances peut vraiment changer l'ambiance d'un projet.

Comme vous vous en doutez probablement, les superpositions plus sombres créent un environnement plus sombre. Les superpositions plus légères sont associées au plaisir. L’image elle-même est un autre facteur qui contribue à ces sentiments et au noir et blanc. Comment ça marche avec la teinte ou le ton? Est-ce que l'image, la couleur et la messagerie fonctionnent ensemble?

Call me Ish (ci-dessus) utilise une superposition blanche pour aider à faire la mise au point sur les mots à l'écran au-dessus d'une photo en noir et blanc. Mais remarquez l'expression sur le visage du photographe: il sourit avec un large sourire. La combinaison de couleurs et de photos invite et vous donne envie d'interagir avec le photographe, voire même de l'embaucher pour un travail.

Optez pour des images à contraste élevé

Lors de la planification d'une superposition d'images dans un projet de conception, la composition de la photo (ou de la vidéo) est importante. Une image fade vous laissera un résultat de superposition de couleurs fades. Vous obtiendrez de meilleurs résultats si vous démarrez avec une photo très contrastée avec des espaces sombres et clairs.

Si le contraste de votre image est insuffisant, envisagez d'ajouter un contraste dans le logiciel de retouche photo ou de choisir une autre image. Sinon, l’effet d’image pourrait tomber à plat.

Une autre astuce pour obtenir cet effet est de commencer par une photo en noir et blanc. En particulier pour les débutants, il peut être plus facile de voir et d’améliorer le contraste d’une image en noir et blanc. Just Actions fournit un excellent exemple d'image noir et blanc à côté des images avec superposition de couleurs. (De plus, c’est un effet intéressant de jumeler des images sans couleur et avec un contraste très coloré.)

Les images doivent paraître naturelles (ou non)

Quand il s’agit de travailler avec des superpositions de couleurs, vous avez deux options:

  1. Les images doivent quand même paraître naturelles. La couleur, l'éclairage et les ombres doivent apparaître à un endroit naturel. La superposition est quelque peu subtile, telle que Abednego Coffee (ci-dessus).
  2. Les images ont l'air complètement modifiées. Il n'y a aucune raison de penser qu'une couche de couleur a été utilisée (comme dans la plupart des exemples de cet article).

Il n'y a pas vraiment de terrain d'entente ici. Si les images ne tombent pas dans l'un de ces "extrêmes" ,? les utilisateurs peuvent penser trop aux choix de couleurs et ne pas se concentrer sur le contenu du site. Vous ne voulez pas distraire avec une technique de superposition de couleur; cela devrait améliorer la conception.

Essayez un accent de superposition

Bien que les exemples précédents montrent comment utiliser une superposition de couleurs pour les grandes images, telles que les options de style d'en-tête de héros, ce n'est pas la seule façon de tirer le meilleur parti de cette technique. Les effets de superposition de couleurs peuvent également très bien fonctionner comme accents.

Les deux exemples ci-dessus montrent différentes manières de le réaliser efficacement.

Knot Clothing (en haut) utilise une barre de navigation vert clair avec transparence. Il est en outre mis en évidence par le trait solide au-dessus. L'effet aide à conserver la palette de couleurs de la marque tout au long du design, tout en présentant les articles dans une variété d'autres couleurs. L'effet est simple, aide la page à paraître un peu plus douce que si la navigation était dans une couleur unie et attirait l'œil vers le bas de la page et à travers le dessin.

Nuts and Woods adopte une autre approche. La conception utilise une superposition de couleurs en tant qu'effet de survol pour vous informer davantage sur des éléments spécifiques du site Web. Tout élément qui obtient une superposition rouge est également un élément cliquable. Ce qui est remarquable à propos de cette conception, c’est que la superposition de couleurs sert de repère visuel aux utilisateurs, leur indiquant exactement ce qu’ils veulent savoir et offrant un chemin vers des liens dans le contenu.

Conclusion

L'utilisation d'une superposition de couleurs fait partie de ces techniques qui ne fonctionnent pas tout le temps. La plupart des designers estiment qu'ils ne peuvent s'en tirer que pour un ou deux projets avant que cela ne semble exagéré. (C'est là que la superposition d'accent pourrait être une meilleure option.)

Comme pour toute technique de conception, veillez à l'appliquer dans le bon contexte. Vous ne devez jamais utiliser une superposition de couleurs simplement parce que vous avez été inspiré par un autre projet. enregistrer l'idée et l'utiliser pour le bon design.