Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Advertisement

Le concept d’utiliser des couleurs sourdes dans votre design n’est certainement pas nouveau. Lorsque vous le comparez à la tendance des couleurs vives que nous avons presque partout, il semble sûrement quelque chose de nouveau.

Tout concepteur UX moderne sait que la tendance minimaliste et plate a pris de la vitesse au cours des dernières années.

Il y a des entreprises comme Microsoft, Apple et Twitter, et elles tirent toutes profit de ce style émergent lorsqu’elles conçoivent leurs produits numériques.

Le design plat va de pair avec l’approche minimaliste.

Le design plat va éliminer la profondeur en n’utilisant pas d’ombrage et de gradient, et favorise la géométrie unidimensionnelle.

FireShot-Capture-1789-BO Couleurs sourdes : Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Rendre les choses trop simples a en fait eu l’effet inverse de ce qui était nécessaire, et les utilisateurs ont plus de mal à comprendre où ils peuvent cliquer, et pourquoi.

Heureusement, il y a une troisième tendance pour aider cela. Les couleurs sourdes ont également repris du poil de la bête.

exploration-pastel-color-2- Les couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

exploration-pastel-color-2- Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Les couleurs sourdes sont partout dans la publicité imprimée. Cependant, dans une campagne imprimée, vous n’avez pas besoin d’un design minimaliste ou d’un effet plat, car l’utilisateur n’interagit pas avec une feuille de papier, mais au contraire, il doit seulement regarder.

Cependant, la palette de couleurs sourdes a en fait pris un nouveau rôle en dehors de son rôle principal dans les pratiques fonctionnelles UX.

FireShot-Capture-1776-Air Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Si vous essayez de trouver une définition des couleurs sourdes, vous constaterez que la meilleure réponse à la question  » Que sont les couleurs sourdes ?  » réside dans le fait que ces couleurs représentent le moderne, l’efficacité et le progressif.

Elles transmettent au spectateur que quelle que soit la substance qu’il regarde, elle est pertinente et n’est pas dépassée. Par exemple, vous pouvez voir des couleurs sourdes dans la vidéo « Hotline Bling » de Drake.

FireShot-Capture-1778-Rot Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Ces couleurs et ces pastels sourds étaient très intentionnels, et ils parlent à la culture des temps modernes et aux masses. Elles signifient également quelque chose du moment. Étant beaucoup plus faciles à regarder que les couleurs dures et tranchantes, elles sont aussi très conceptuellement à la mode.

FireShot-Capture-1780-Vic Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Publicité

De nos jours, les concepteurs UX devraient savoir que leurs choix de couleurs sont en fait leurs choix de conception, et que la couleur peut indiquer beaucoup de choses, tout comme le flux, le contenu, la convivialité et la fonction.

Choisir entre un vert vibrant ou des tons sourds de vert peut faire la différence entre l’utilisateur qui reste sur le site, et celui qui le quitte instantanément. Tout comme la façon dont une interface utilisateur maladroite peut sembler un peu analogique, ces couleurs vives et vibrantes peuvent ressembler à une explosion du passé.

Les couleurs sourdes apparaissent comme elles le font à cause de :

FireShot-Capture-1781-VR- Les couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

  1. Valeur plus faible
  2. Saturation plus faible
  3. Mélange avec des couleurs adjacentes
  4. Combinaison de l’une ou l’autre des caractéristiques ci-dessus

Il existe des variations de la palette de couleurs plates que vous avez vues des milliers de fois, et souvent, elles ne correspondent tout simplement pas à l’esthétique de conception que vous visez. Même lorsque tout le reste y fait appel.

C’est là qu’une option de couleur sourde peut faire des merveilles, car lorsque vous l’utilisez avec une esthétique plate, c’est un look classique et poli qui est suffisamment différent pour qu’il se distingue de tous les autres projets plats.

animal-800-x-600-large-1 Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

animal-800-x-600-large-1 Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Mais, qu’est-ce qu’une palette de couleurs sourdes ?

Pour les besoins de cette conversation, c’est toute teinte très saturée à laquelle on ajoute un ton, une teinte ou une nuance pour la rendre tamisée et moins vive. Vous obtenez souvent une couleur plus douce et plus calme comme résultat, plus facile à travailler, ainsi qu’à assortir au design global.

FireShot-Capture-1784-AMA Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

« Couleur » est en fait un terme très imprécis que nous utilisons quotidiennement. Elle se compose de trois éléments principaux, à savoir la teinte, la saturation et la valeur.

Si vous avez un ballon où l’équateur est la teinte sur 360 degrés, l’axe vertical est la valeur, et l’horizontal est la saturation, les couleurs peuvent être visualisées sur le volume intérieur.

FireShot-Capture-1785-Des couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Il existe d’autres concepts qui peuvent aider à répondre à cette question, comme l' »ombrage » et la « teinte ». Par exemple, le mélange de n’importe quelle couleur avec du noir est connu sous le nom de « shading », et donne une couleur un peu plus atténuée.

Par contre, ajouter du blanc à une couleur est connu sous le nom de « tinting », et résulte en une couleur plus brillante. Cependant, toutes les couleurs ne peuvent pas devenir claires ou foncées, comme le jaune par exemple. Le rendre plus foncé le transformera en marron.

Les teintes en couleurs sourdes

FireShot-Capture-1783-Tim Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Ajouter du blanc à une couleur, ou teinter, vous donne une couleur nettement plus claire que l’original, et généralement connue comme un pastel. Elles peuvent aller de presque blanches, à un peu plus claires que la couleur entièrement saturée.

FireShot-Capture-1786-Kve Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Leur sensation est plus légère, plus douce, et vous donne une esthétique plus apaisante par rapport aux options plus audacieuses et plus vives.

Elles sont très populaires avec les illustrations et font également des merveilles sur les photos. Elles s’éloigneront de l’esthétique principale, et elles sont le plus souvent utilisées lorsque vous avez un autre point focal par opposition à l’esthétique principale.

Des nuances de couleurs sourdes

FireShot-Capture-1787-Céd Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Les nuances, en revanche, font paraître la couleur plus lourde à l’œil, et vont d’une couleur presque noire, à une touche plus sombre que l’originale. Elles fonctionnent bien dans une variété d’environnements, surtout lorsqu’elles sont utilisées avec moins de noir.

story-app-exploration-large Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Il existe des projets vraiment sombres et comportant beaucoup de noir qui s’accompagnent de problèmes de lisibilité, à moins que vous ne les exécutiez exceptionnellement bien. Les gens supposent souvent à tort que les nuances doivent ressembler à du noir, mais lorsque vous faites évoluer l’une des couleurs des schémas traditionnels de conception plate, ce n’est pas le cas.

Tons en couleurs sourdes

FireShot-Capture-1782-Wha Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Combiner le noir et le blanc avec une couleur pour la faire paraître plus douce vous donne des tons. La plupart des couleurs sont en fait réalisées à l’aide de tons, car ce sont des couleurs complexes à l’attrait presque universel.

Cela est dû au fait qu’elles tirent parti de quelques parties différentes du spectre des couleurs, et c’est pourquoi les tons sont le premier choix des artistes et des designers pour la plupart de leurs projets.

unsplash-app-exploration-la Couleurs sourdes : Définition et comment les utiliser dans les sites web et les applications

unsplash-app-exploration-la Couleurs sourdes : Définition et comment les utiliser dans les sites Web et les applications

Pensées finales sur les couleurs sourdes

Que vous vous éloigniez ou non de certaines couleurs traditionnelles du design plat, choisir l’une des techniques de couleurs ci-dessus n’est pas votre seul choix. Vous pouvez combiner des nuances, des teintes et des tons pour créer quelque chose de différent et d’absolument engageant.

La leçon avec ces études simples est que vous ne pouvez pas être pris à devoir utiliser une tendance « par le livre ». Utilisez un autre type de technique pour créer votre propre tendance. La palette de couleurs et le fait de la changer peuvent être merveilleux, et vous pouvez toujours obtenir un design plat.

Si vous avez aimé cet article sur les couleurs sourdes, vous devriez également consulter ceux-ci :

  • Site web de photographie : Conception, idées, comment en créer un
  • Création de sites Web sportifs : Conseils, inspiration et meilleures pratiques
  • Conception de sites Web de restaurants : Conseils, inspiration et meilleures pratiques

Téléchargements illimités : 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.