La couleur dans le design UX/UI (+ feuille de style de couleur Figma) | Christine Vallaure | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

La couleur dans le design UX/UI (+ feuille de style de couleur Figma)

teacher avatar Christine Vallaure, UI/UX DESIGN, FIGMA + CODE

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Promo

      1:12

    • 2.

      Introduction

      0:51

    • 3.

      Matériel de cours

      1:42

    • 4.

      Pantone CMYK HEX & Pantone ?!

      4:03

    • 5.

      Convertir les couleurs de la conception de l'impression à l'impression en écran et au dos

      2:54

    • 6.

      Mélanger et assortir les couleurs comme un Pro

      4:02

    • 7.

      Inspiration des couleurs

      2:34

    • 8.

      Variantes de couleurs dans la conception de UI

      4:58

    • 9.

      Nommer les couleurs de la bonne manière

      2:12

    • 10.

      Couleurs de retour

      1:04

    • 11.

      Documenter les couleurs

      5:02

    • 12.

      Distribution de règle des couleurs

      1:42

    • 13.

      Résumé de la couleur dans la conception de UI

      0:45

    • 14.

      Merci

      0:36

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 706

apprenants

17

projets

À propos de ce cours

Dans ce cours, vous apprendrez tout sur la couleur (ou la couleur pour les pots). Je vous aborderai toutes les bases de la façon de coller. Nous allons ensuite mélanger et assortir des couleurs et nous passerons ensuite un peu plus plus plus puis mettre en place notre propre stylesde couleurs accessible pour avoir des valeurs pick, des variables de couleurs et une documentation solide pour le développement.

Si vous passez à la conception de graphiques ou à la conception déjà en ligne mais jamais jamais compru comment traiter les couleurs en ligne, alors ce cours pour vous cours.

Points abordés :

  • Hex, RBG, Pantone et CMYK
  • Convertir entre l'impression et l'écran et l'inverse
  • Comment choisir, mélanger et assortir les couleurs dans la conception de UI
  • Variantes de couleurs. Ce qu'ils sont et comment les mettre en place
  • Nommer les couleurs de la bonne manière
  • Couleurs de système
  • Comment documenter les couleurs du développement
  • 60, 30, 10 Règle pour une grande distribution de couleurs

Vous pouvez créer votre propre stylesheet de couleurs en même temps que vous pourrez réutiliser tous vos projets de futurs projets et gagner beaucoup de temps !

© moonlearning.io avec l'apprentissage de moonlearning.io

Rencontrez votre enseignant·e

Teacher Profile Image

Christine Vallaure

UI/UX DESIGN, FIGMA + CODE

Enseignant·e

Hi, I'm Christine Vallaure, founder of moonlearning a UX/UI design Figma learning hub. . moonlearning is my pet project that has turned into a full-time job, and I couldn't be happier about it. I love talking, teaching, and writing about UX/UI design and Figma, always encouraging UI designers and developers to be curious about each other's work.

Besides video tutorials, I also offer live and online workshops and speak at conferences and meetups. Connect with me on Twitter, LinkedIn, YouTube and via my newsletter, so I can keep you updated on future moonlearning adventures.

You will find a small selection of some of my original moonlearning courses here on skillshare. Content is shortened and adjusted to the skillshare format. Enjoy!

www.moonlearning.io

Voir le profil complet

Compétences associées

Design Design UI/UX Web design
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Promo: Dans cette classe, nous allons tout apprendre sur la couleur dans la conception de l'interface utilisateur UX. Nous allons commencer par toutes les bases sur la façon de choisir, mélanger et assortir les couleurs, puis plonger un peu plus profondément et mettre en place nos propres feuilles de style. Au cours de la classe, nous aborderons les sujets suivants. Techniques courantes, conseils et astuces sur la façon de combiner les couleurs. Conversion des couleurs entre l'impression et la conception d'écran. Valeurs de couleur telles que hexadécimal, RVB, Pantone et CMJN. Qu' est-ce qu'ils sont et quand les utilisons-nous ? Covariance, qu'est-ce qu'ils sont et comment les mettre en place ? Nommer les couleurs font bon chemin. Nous allons à la règle des 60, 30, 10, une très bonne façon de distribuer vos collègues pour une hiérarchie solide. Nous allons examiner l'accessibilité. Et à la fin, nous allons nous assurer de documenter ces colliers pour le développement. Et je vais vous montrer une très bonne façon de faire ça. À la fin de ce cours, vous serez en mesure d'utiliser les couleurs dans la conception de l'interface utilisateur UX en toute confiance. C' est un cours par dose d'apprentissage très IM. 2. Introduction: Parlons de la couleur dans la conception de l'interface utilisateur. Et ensemble, nous allons jeter un oeil aux sujets suivants. Nous allons commencer par les bases et apprendre ce qui est hexadécimal sur Pantone et CMJN, et lesquels utilisons-nous pour notre conception de l'interface utilisateur ? Nous allons ensuite parler de la conversion de ces couleurs de l'impression à l'écran. Et l'inverse. Nous allons parler de la façon de choisir les couleurs et comment les mélanger et les assortir comme un pro, nous allons apprendre quelles variantes sur la façon de les créer, comment nommer les couleurs de la bonne façon. Nous allons parler d'un système de couleurs et comment documenter vos couleurs pour la programmation. Et nous allons aussi parler de la règle dite des 60, 30, 10, une façon très pratique de distribuer vos couleurs de la bonne façon. Commençons donc avec notre premier sujet. 3. Matériel de cours: Vous voudrez peut-être travailler à mes côtés, alors j'ai préparé quelques fichiers à télécharger dans le cours que vous suivez simplement naviguer vers le projet et les ressources. Et là, vous trouverez toutes les informations et le lien que nous pouvons télécharger le matériel ou vous pouvez naviguer vers mon profil. Eh bien, vous trouverez également un lien direct vers la page de téléchargement. Et cette page vous trouverez une variété de téléchargements. Vous pouvez simplement choisir la cause que vous prenez actuellement, puis cliquez sur Télécharger. Et il téléchargera automatiquement le fichier pour vous. Pour ouvrir un fichier Figma pour le télécharger, il est important que vous ayez un compte Figma. Dans votre compte, accédez à nouveau, impressionner Importer. Vous pouvez ensuite choisir un fichier que vous souhaitez ouvrir. Cela peut prendre un moment car ils sont assez volumineux, mais une fois que vous les avez importés, ils seront sur votre compte et vous n'avez pas besoin de répéter ce processus. Je travaille avec des polices Google pour la plupart de mes designs. Donc, si vous travaillez avec l'application Figma, vous n'avez pas besoin de faire quoi que ce soit. Toutes les polices Google sont préchargées automatiquement. Si vous voulez travailler avec Figma dans le navigateur, alors vous avez juste besoin de rechercher la police qu'il vous montre comme manquante. Par exemple, Poppins, j'utilise beaucoup. Et puis vous pouvez télécharger directement cette police installée sur votre ordinateur et vous êtes prêt à partir. Ou les ressources sont gratuites pour les étudiants existants et vous n'avez pas besoin d'entrer d'informations supplémentaires. Vous pouvez, bien sûr, télécharger tous les autres fichiers au cas où vous seriez intéressé. Donc, en général sont toujours ajouter Tout ce que je pense pourrait être utile. Il y a donc, par exemple, un modèle Bootstrap, puis une liste avec des liens pour les livres d' inspiration et les blocs qui sont vraiment parfaits pour la conception de l'interface utilisateur UX. Cette liste de téléchargements ne cesse de croître, alors assurez-vous de revenir et de jeter un coup d'œil de temps en temps. 4. Pantone CMYK HEX & Pantone ?!: Ainsi, les couleurs peuvent être pas assis de différentes manières. Les plus courants que vous rencontrerez probablement, notre Pantone, CMJN, hex et RVB. Les deux premiers, Pantone et CMJN, sont généralement utilisés pour l'impression. Maintenant, la différence entre les deux est que Pantone est ce mélange spécifique d'encre, donc c'est 100% de la même couleur partout dans le monde. Vous ne pouvez désormais pas imprimer une couleur Pantone sur votre imprimante domestique. C' est quelque chose que dans l'imprimerie, ils obtiendraient cette encre spécifique, puis l'ajouteraient à votre impression. Cependant, vous pouvez aller dans une imprimerie et jeter un oeil à un soi-disant livre Pantone, ou vous pouvez même en acheter un vous-même. Dans ce livre, vous voyez toutes les différentes couleurs, montres, et un code correspondant. L' UE à la fin du numéro correspond au papier non couché. Et vous pouvez voir un siège pour le papier couché ou d'autres versions. Donc, même si vous pourriez recevoir une couleur Pantone parce que c' est le moyen le plus fiable de référencer une empreinte couleur. Vous ne l'utiliserez probablement que pour un logo ou pour les grandes entreprises pour les couleurs de leur marque car il est assez cher à imprimer avec Pantone. Donc, la plupart du temps, vous utiliseriez CMJN et CMJN et Pantone correspondent. Donc CMJN est cyan, magenta, jaune, et K est pour noir. Donc, avec ces quatre couleurs, imprimés se mélangent à la couleur que vous recherchez. Maintenant, il est important de comprendre les valeurs d'impression et ce qu'elles sont, en particulier Pantone si vous devez regarder la référence, mais vous ne pourrez pas utiliser ces valeurs en ligne. Ce que nous utilisons pour notre conception d'interface utilisateur est des valeurs dites hexadécimales et RVB. RGB signifie rouge, vert et bleu. Donc, notre écran mélange ces trois couleurs pour créer une couleur tout comme dans l'impression, nous avons mélangé CMJN. C' est donc un système très différent pour créer une couleur, c'est pourquoi l'impression et l'écran ne seront jamais exactement les mêmes. Hex est aussi une forme de RGB. C' est juste une façon beaucoup plus courte de noter. Hex signifie hexadécimal et c'est un code à six chiffres avec un hachage devant lui. C' est donc très court et facile à manipuler. Vous pouvez afficher la même couleur avec un RVB ou une valeur RGBA à un signifie par la présente pour l'opacité. Donc vous pouvez modifier ça. Par exemple, si vous mettez ni 0,5 vue à 50 pour cent d'opacité, C'est exactement le même. Ainsi, vous pouvez utiliser hex ou RVB. Cependant, je recommande d'utiliser hex car il vient dans un format de chaîne qui est plus court et plus facile à manipuler, copier, coller et partager. Donc pour vous, j'ai conçu juste donner la valeur hexadécimale pour toutes vos couleurs sera plus que suffisant. Maintenant, il y a une chose dont vous devez vraiment être conscient quand il s'agit de la référence de couleur et de couleur dans la conception de l'interface utilisateur. Maintenant, nous avons appris que dans la conception d'impression, nous avons les soi-disant couleurs Pantone. C' est notre référence universelle sur la façon dont cette couleur devrait ressembler. Maintenant, cela ne se produit pas avec des colliers à l'écran. Maintenant, même si nous avons nos valeurs hexadécimales, elles seront assez différentes sur différents écrans. Ne va pas être une couleur complètement différente si vous choisissez un rouge, il ne va pas se révéler un vert, mais ce sera un peu différent. Ce que vous pouvez faire est d'ouvrir cette présentation sur, par exemple, votre bureau et votre téléphone. Et vous verrez qu'il y a très probablement une légère différence dans les couleurs. Maintenant, c'est exactement comme ça que les choses fonctionnent dans la conception d'écran. Et tant que vos couleurs ont assez de contraste et un harmonieux entre elles, alors ce n'est pas non plus de problème. Il est juste important que vous en soyez conscient parce que parfois votre client n'en est pas conscient. Et si, par exemple, ils vous ont donné une référence Pantone, ils s'attendent à ce que votre design soit exactement le même, ce qui n'est tout simplement pas possible. 5. Convertir les couleurs de la conception de l'impression à l'impression en écran et au dos: Donc, dans certains cas, il peut vous être demandé de convertir vous-même de l'impression à l'écran, ou de simplement trouver la valeur correspondante. Alors regardons comment on pourrait faire ça. Maintenant, si vous donnez une valeur RVB et que vous voulez hexadécimal ou l'inverse. C' est super facile. Dans n'importe quel logiciel de conception, vous pouvez simplement ouvrir la couleur et ensuite vous obtiendrez généralement une roue de couleur ou quelque chose comme ceci. Et c'est, par exemple, dans Figma, vous avez juste un petit menu déroulant. Et puis vous pouvez choisir votre couleur RVB, puis vous verrez la différence ici. Si vous avez un RGBA, il vous suffit de mettre le dernier chiffre. Disons que ce n'est pas 0,5 ici, et ça vous donnera l'opacité. Maintenant, si on vous a donné une couleur d'impression et qu'on vous a demandé de la convertir en un web coloré, c'est un peu plus délicat. Il y a des convertisseurs en ligne, mais la plupart d'entre eux ne sont pas très bons. Celui que j'aime utiliser est le convertisseur officiel de site Web Pantone. Maintenant, vous pouvez l'utiliser à tout moment que vous convertissez Pantone CMJN ou n'importe quoi, de l'impression à la conception d'écran. Et l'inverse, ce que vous faites est de monter ici pour trouver une couleur Pantone et ouvrir l'outil de recherche de disque. Donc, si j'ai donné une valeur Pantone, je vais à Pantone, pantone, et puis je colle ma valeur ici. Et je le choisis. Et NIC ici me donne l'échantillon. Et si vous sélectionnez une nuance, vous voyez sur la valeur Swatch to RVB cet hexadécimal et la valeur CMJN. Si vous avez ces échantillons physiques ici, il y en a un qui s'appelle Color Bridge. Et vous pouvez également voir un directement sur les nuanciers. Maintenant, cela fonctionnerait aussi dans l'inverse. Disons que nous n'avons que nos valeurs hexadécimales et que nous voulons trouver une valeur d'impression correspondante parce que nous sommes très gentils et que nous voulons aider les concepteurs d'impression. Donc, dans ce cas, nous allons à RVB CMJN en convertisseur hexadécimal. Cliquez ici, puis vous pouvez choisir ici la valeur que vous voulez entrer. J' ai Hex, j'entre ma valeur, je la recherche. Et encore une fois, vous entrez dans les échantillons et il va faire quelques suggestions et le meilleur match et cueillir à nouveau. Et vous pouvez voir que je trouve ma nuance correspondante ici. Maintenant, c'est un excellent moyen de convertir les couleurs, et je recommande fortement d'utiliser ces convertisseurs Pantene. Cependant, il ne sera jamais 100% identique à l' impression et à l'écran car il s'agit de quelques gammes de couleurs très différentes. Mais c'est probablement le meilleur résultat que vous obtenez. Et toujours rappelé que ces convertisseurs sont là pour vous aider et ne pas créer un obstacle. Donc, si vous sentez que la valeur hexadécimale que vous lui donnez doit être ajustée un peu. C' est très bien. 6. Mélanger et assortir les couleurs comme un Pro: Parlons de la façon de choisir les couleurs et de les mélanger et de les assortir comme un pro. Vous pourriez avoir un flair naturel pour la cueillette et le mélange de couleurs, et c'est absolument bien d'aller de l'avant et de l'utiliser. Si vous êtes cependant, vous vous sentez un peu inquiet quant à la configuration de vos propres couleurs de marque. Je vais vous montrer quelques techniques que vous pouvez utiliser. Sur l'écran, vous voyez une roue de couleur RVB, qui est ce que nous utilisons pour la conception de l'écran. Il y a 12 couleurs principales dans cette roue. Ils peuvent être divisés en couleurs fraîches et chaudes. Dans votre logiciel de conception, cela ressemblera à ceci et vous pouvez choisir des couleurs à partir d'ici. Je vais utiliser une version simplifiée pour mes exemples. De cette façon, nous pouvons voir les différents segments de couleur un peu mieux. Un excellent point de départ pour choisir les couleurs pour votre marque est également fait palette de couleurs Google. Sur le site Web Material Design, vous pouvez naviguer jusqu'à la couleur, puis appeler un système. C' est un excellent système en général à explorer. Et ici vous trouvez les palettes de couleurs et il peut voir différentes couleurs et il rend juste un peu plus facile de commencer et comme choisir vos premières couleurs. Maintenant, je vais revenir à la roue de couleur et vous montrer comment combiner ces couleurs. Notre première approche est donc l'approche monochromatique. Ça veut dire que tu choisis ta couleur. Par exemple, il y a une nuance rouge, orange, puis marcher vers le centre de la roue de couleur. Donc, vous obtenez une très belle ombrage. Vous pouvez utiliser à peu près n'importe quelle couleur, cependant, le jaune et le vert clair est un peu plus délicat. L' écran fonctionne généralement à merveille si vous venez de commencer et que vous voulez quelque chose de très sûr pour travailler avec. Maintenant, vous pouvez entendre beaucoup parler de l'association avec la couleur, comme le bleu est apaisant et le rouge est très dynamique. Mais pour être honnête, je me concentre plutôt sur la façon dont je les combine parce que c'est là que je crée le ton. Comme vous l'avez vu dans une approche monochromatique, rouge et le bleu ont eu un effet calmant assez doux. Regardons notre deuxième approche, qui est l'approche analogue, par laquelle nous choisissons des couleurs qui sont les unes à côté des autres. Donc, ils n'ont pas besoin d'être exactement sur la même peau juste dans un angle d'environ 90 degrés. De cette façon, vous pouvez créer un peu plus dynamique, mais vous avez toujours ce look très professionnel et élégant. Si vous cherchez quelque chose d'encore plus dynamique, alors vous devriez utiliser l'approche complémentaire. Donc je recommence avec mon bleu, mais ensuite j'ajoute la couleur du côté opposé de la roue. Et je peux le desserrer un peu en ajoutant d'autres formes. Maintenant, vous pouvez pousser cela encore plus loin. Et au lieu de descendre la roue de couleur, vous pouvez utiliser la soi-disant approche complémentaire split, qui mélange fondamentalement cette approche avec l'approche analogue. Et vous choisissez juste une couleur à côté de lui. Si je veux quelque chose de très vivant, c'est l'approche que j'utilise parce que je mélange chaud et froid et j' ai une dynamique de couleurs mais tout le monde travaille magnifiquement ensemble. Notez simplement que lorsque vous utilisez une approche split, je vous recommande de rester à la même distance du centre pour choisir vos couleurs. Sinon, il peut devenir un peu désordonné à nouveau. Résumons. Nous avons examiné l'approche monochromatique, qui consiste à descendre à la roue de couleur et à obtenir un look très doux et sophistiqué. Vous pouvez utiliser l'approche analogue, qui est l'endroit où nous choisissons les couleurs les unes à côté des autres. Ici mon, nous ajoutons un peu plus de vibrance, mais nous avons encore cette sensation très calme et douce à ce sujet. Si vous cherchez un peu plus dynamique dans votre design, alors je vous recommande d'utiliser l' approche complémentaire gratuite ou split où vous mélangez des couleurs complémentaires. Il y a plus de façons de mélanger les couleurs, mais c'est vraiment les trois approches que vous pouvez commencer. Et vous aurez quelque chose avec lequel vous pouvez travailler gentiment et facilement. 7. Inspiration des couleurs: Donc, mettre en place un système de couleurs et toutes les choses techniques qui l'entourent est vraiment génial. Mais parfois, vous voulez juste un peu d'inspiration pour avoir une bonne humeur. Parfois, il est aussi le cas qu'il n'y a pas de couleurs de marque établies, mais il y a déjà un produit, images impressionnantes ou des plans de pack autour d'un produit. Alors voyons ce qui donne cette image, ce que nous pouvons faire est alors simplement ajouter cela à notre logiciel de conception et juste choisir les couleurs de l'image pour créer notre schéma de couleurs. Nous pouvons ensuite adapter ce schéma de couleurs et utiliser un sélecteur de variantes ou adapté un peu dans notre système pour trouver quelques couleurs complémentaires. Ce que vous pouvez également faire si vous voulez juste quelques idées générales pour les humeurs, vous pouvez aller à Pinterest et juste mettre dans la palette de couleurs. Et puis tu auras des idées vraiment géniales. Généralement, il y a des choses fantastiques qui sont liées aux images de la nature, puis il suffit de choisir des couleurs à partir de là. C' est donc vraiment de grands mouvements que vous pouvez également utiliser sur une planche d'humeur. Par exemple, si vous aimez l'un d'eux, vous pouvez simplement cliquer sur Ajouter et ensuite vous obtiendrez plus d'images similaires comme elle. Un autre grand endroit est les palettes de couleurs. Cela vous donne également une grande variété de palette et d'inspiration différentes. Un autre que j'aime utiliser est l'espace colorimétrique. Avec l'espace colorimétrique, vous pouvez ajouter votre couleur ici, puis vous pouvez cliquer sur Générer. Et il sera juste généralement c'est un vraiment sympa, donc montres pour aller ensemble pour vous. Et ici, ce que j'aime particulièrement, c'est l'outil dégradé. Donc, vous pouvez choisir deux couleurs. Vous pouvez également évidemment les ajuster. Et puis vous pouvez mettre le dégradé, et ensuite vous pouvez voir le dégradé ici. Et vous pouvez changer les directions du dégradé. Et puis ici, vous arriverez au code CSS tout de suite et un dégradé que vous pouvez simplement configurer dans votre système de conception avec les couleurs que vous êtes donné ici. Et un dernier que vous pourriez vouloir sortir est les couleurs d'esprit double o dans l'orthographe. Et il y a aussi un juste génère des nuanciers de couleur pour vous. Donc ici, vous pouvez voir cela dans n'importe quelle couleur. Vous pouvez vraiment faire beaucoup avec ça. Donc vous pouvez, vous pouvez voir toute la variance ici. Vous pouvez télécharger des images. Et vous pouvez aimer en avoir un qui s'ajuste ou tout simplement vraiment, vraiment aller et jouer avec. Parce que vous pouvez vraiment faire beaucoup dans cet outil. 8. Variantes de couleurs dans la conception de UI: Jetons un coup d'oeil aux variantes, ce qu'elles sont, et comment les configurer. Donc, une variante est fondamentalement une version plus claire ou plus foncée de cette couleur. Donc, une chose qui pourrait venir à l'esprit est d'utiliser la transparence. De cette façon, vous pouvez créer des nuances plus claires de la couleur. Cependant, ce n'est le cas que sur un fond clair parce qu'ils sont visibles à travers eux. Donc, c'est quelque chose que vous pouvez utiliser pour une superposition ou un effet différent, mais ce n'est pas vraiment une variante. Une toute fin est une version complète d'une couleur dans un ton plus clair et plus foncé. Voyons comment on pourrait trouver ça. Vous pouvez créer vos propres variantes en modifiant la valeur de teinte. Mais je trouve qu'il est beaucoup plus pratique d'utiliser un convertisseur en ligne. Il y a beaucoup de convertisseurs différents là-bas et vous pouvez simplement ajouter la couleur que vous avez choisie, puis cela créera un tas de variantes pour vous. n'y a pas de règle sur le nombre de variantes dont vous avez besoin pour votre conception. Et vous pouvez toujours en ajouter plus au fur et à mesure que vous vous entendez. L' important est d'avoir une couleur de base et à partir de celle-ci, vous créez vos variantes. Donc, pour créer ma variance, j'aime utiliser la conception de matériaux. Vous allez à Material Design, système de couleur et de couleur. Et quelques défilent vers le bas, vous trouverez les granulés de couleur ici. Dans les palettes de couleurs. Vous pouvez jouer avec la couleur que vous avez si vous êtes toujours à la recherche de couleur, ou vous pouvez simplement coller celle que vous avez déjà choisie. Et puis à partir de cette sélection ici, et vous obtiendrez toute la variance. Ainsi, vous pouvez également vous adapter à la couleur, par exemple, vous pouvez simplement le changer ici et puis il va adapter la valeur pour vous ou vous pouvez ramasser ici et il va toujours créer la variance autour. Laissez-moi revenir à une orange que j'aime utiliser. Donc je pense que ça devrait être celui-là. Oui, exactement. J'aime cette orange et je vais probablement utiliser ce ton ici. Donc ce qu'il fait est deux choses que vous pouvez voir ici. Premièrement, il va vous dire quelle couleur vous devriez utiliser sur le dessus. Et d'un autre côté, ça vous donne ces chiffres ici. Maintenant, ces chiffres ne sont pas le nom de la couleur. Le nom de la couleur est une fois que vous passez la souris dessus, l'hexadécimal que vous voyez en haut. Et ce nombre ici, il y a 900, 250 est fondamentalement le nombre de la variante. Et c'est vraiment gratuit. Vous n'avez pas besoin d'utiliser ce système. Vous pouvez aussi nommer votre variance 10, 20, 30, 40. Ne les nommez pas 1, 2, 3, 4, 5 parce que vous pourriez vouloir avoir une variante entre les deux ou quelque chose de plus clair ou quelque chose de plus sombre. Assurez-vous donc toujours d'avoir un système qui permet d'ajouter quelque chose plus tard. Personnellement, j'aime utiliser ce système que la conception matérielle me donne. J' utilise donc cette annotation. Et ce que j'aime faire, c'est la couleur que j'utilise principalement comme ma couleur principale est le 500. Et de cette façon, je peux monter et descendre sans aucun problème. J' aime aussi aller dans un pas de 100, donc j'aime utiliser 300, puis 100, puis plus, j'utilise sept cent neuf cents. Et seulement si je remarque que cela ne me donne pas vraiment le résultat, je peux encore y mettre huit cent quatre cents. Vous pouvez également ajouter votre couleur secondaire et créer votre variante. Ou vous pouvez choisir une couleur complémentaire, couleur analogue, et, ou une couleur triadique, ce qui est un peu plus compliqué. Donc, à moins que tu aies vraiment bon avec les couleurs, je n'irais pas vraiment là-bas. Maintenant, ajoutons simplement cette couleur secondaire. J' ai copié le bleu, la couleur complémentaire que je veux utiliser. Hum, et alors ce que vous pouvez faire est que vous pouvez aller voir dans l'outil couleur, ce qui est vraiment génial. Et donc cela vous donne un aperçu de ce que vos couleurs ressembleraient réellement dans un design qui est super cool. Et puis l'important ici, c'est que vous vérifiez votre accessibilité. Et vous pouvez vérifier quel texte et quelles couleurs vous pouvez utiliser ensemble au-dessus de vos variantes et au-dessus de votre couleur principale. Et c'est vraiment, vraiment important que vous vérifiez toujours cela. Donc, une fois que je suis satisfait de mes couleurs et de mes variantes, je choisis juste hexadécimal à la place. Ils m'ont donné dans mon outil Google Material Design, puis le transférer à ma feuille de conception. Donc, dans ma feuille de style, je les note comme ma couleur principale est le 500. Et à partir de là, j'ai une version plus claire et plus sombre. Donc, comme vous pouvez le voir, j'ai utilisé 200 étapes et au cas où je voulais une couleur 400 entre ici aussi plus tard, je peux juste ajouter cette fin. Mon système va toujours fonctionner correctement et être tout logique pour mon secondaire. Maintenant, je viens de choisir le bleu. Je ne suis pas sûr si j'ai même besoin d'une variante en ce moment. Donc je vais noter ça avec les 500 à la fin. Je sais que c'est ma base pour le secondaire. Et au cas où je voudrais ajouter des variantes, autant que je veux plus tard, je peux juste le faire. 9. Nommer les couleurs de la bonne manière: Il est très important d'avoir un système approprié lors de la désignation des couleurs dans la conception de l'interface utilisateur. Donc, une fois que vous avez choisi votre couleur, vous devez la documenter dans la feuille de style et sur votre système de conception. Donc, ce que vous voyez généralement est que vous donnez un aperçu de votre couleur, vous lui donnez un nom, et vous ajoutez le code hexadécimal. Maintenant, il est très important que vous ne nommez pas votre couleur d'après la couleur elle-même, comme le rouge et le bleu et ainsi de suite. Mais ça doit être quelque chose de générique. Peu importe le nom que vous utilisez exactement. L' important est qu'il soit descriptif et cohérent. Alors pourquoi est-ce important ? Eh bien, les couleurs peuvent changer avec le temps. Donc, si vous nommez votre couleur, par exemple, la crème à la menthe, puis à la dernière minute, il est changé en violet n'est tout simplement pas très pratique. C' est également une bonne pratique de nommer vos couleurs en fonction de la fonction qu'elles tiennent dans votre design. Ainsi, par exemple, vous auriez quelque chose comme des couleurs d'arrière-plan ou des neutres pour quelque chose qui est comme le grade ou le beige, que vous utilisez en arrière-plan pour créer un peu plus dynamique, mais cela ne fait pas vraiment partie de votre marque. Pour les couleurs de votre marque. J' aime utiliser primaire et secondaire, mais ils pourraient être tout aussi bien être appelés couleur de marque et de surbrillance, par exemple. De cette façon, vous dites tout de suite à votre équipe de conception et à votre équipe de développement quelle est la fonction de ce collier. Et il est très peu probable que quelqu'un utilise la couleur dite neutre pour appeler à l'action. Ils sauront que la couleur de surbrillance est responsable de ce rôle. Cela va aussi vous aider à être très organisé avec vos couleurs. Un petit conseil quand vous avez des variations de votre couleur, comme je le fais ici avec mon primaire, ne les appelez pas 1, 2, 3, 4. Parce que plus tard, vous pourriez vouloir avoir quelque chose d'un peu plus léger ou vous pourriez avoir besoin de quelque chose d'un peu plus sombre ou juste ce ton entre les deux. Donc, j'utilise 500 comme couleur standard et puis je monte et descend dans 200s. Cependant, vous n'avez pas à le faire de cette façon. Vous pouvez également l'appeler 10, 20, 30 à la seule chose est de s'assurer qu'il y a une certaine place entre ces couleurs. Et au-dessous et au-dessus du col que vous utilisez. 10. Couleurs de retour: Les couleurs dites « feedback » ne font pas partie de votre marque. Ils sont là pour donner des commentaires et interagir avec l'utilisateur. Vous envoyez cette rétroaction peut être divisé en danger ou erreur, avertissement, information et succès. Vous pouvez les utiliser en couleur, comme l'écriture sous le champ de saisie que nous venons de voir. Ou vous pouvez avoir une sorte de bannière qui a un arrière-plan en pourcentage de la couleur, puis utilise la couleur sur le dessus avec les informations. Assurez-vous juste que lorsque vous faites cela, vous avez assez de contraste entre l'arrière-plan et les informations sur le dessus pour rendre cela lisible à tout le monde. J' aime parfois utiliser des variantes de ma marque quand il s' agit d'informations et de messages de réussite. Celui que vous ne devriez pas changer et toujours laisser en rouge vif est l'avertissement d'erreur. Vous pouvez toujours ajuster le ton du rouge, mais il devrait toujours rester en rouge car il est très important que nous soyons cohérents avec notre avertissement arabe. 11. Documenter les couleurs: Parlons de documenter nos couleurs pour notre conception d'interface utilisateur. Donc, au lieu de simplement dire que ce sont les couleurs de la marque, prenez-les et allez-y. Je veux vous montrer une approche systématique. Alors, quels éléments avons-nous ? Allons le décomposer. Nous avons notre couleur de fond, alors nous avons une couleur primaire. J' utilise une nuance sombre ici. Ça pourrait être quelque chose de complètement différent pour toi. Et puis nous avons notre couleur secondaire. Je les appelle primaire et secondaire dans cet exemple, vous pouvez également les appeler quelque chose de complètement différent. Assurez-vous juste que c'est générique et descriptif. La quantité de couleurs de marque dont vous avez besoin dépend également de vous. Vous pourriez simplement vous en sortir avec un primaire et quelques versions de cela. Ou vous pourriez avoir besoin de plus de couleurs. Je recommande de rester entre 23 couleurs. Cela donne généralement un bon résultat. Et puis pour chacune de ces couleurs que j'ai ici, une variante sont généralement probablement ajouter un peu plus, comme je dirais entre 25 variante est généralement ce que j'utilise. Encore une fois, dépend vraiment de votre conception et avec la variance, la grande chose est que vous pouvez totalement adapter cela plus tard aussi. En plus de mes couleurs neutres et de mes couleurs de marque, j'ai aussi quelque chose qu'on appelle les couleurs de feedback. Pour cet exemple, j'ai mis en place un choléra d'erreur en rouge et une couleur de succès en vert. Maintenant, vous pouvez aussi avoir une couleur pour l'avertissement, qui est généralement une orange, et des informations qui est bleu. Je l'adapte aux couleurs de ma marque. L' important est qu'ils sont un avertissement d'erreur qui doit être là et qui doit être en rouge. Et puis c'est la partie importante, et c'est la partie intelligente de notre feuille de couleur. Nous allons ajouter une autre ligne de couleurs, que nous appelons nos propres couleurs. Maintenant, cette seule couleur a défini tout ce qui va au-dessus de notre couleur. Donc, cela signifie des textes qui vont au-dessus de lui ou des choses comme des icônes. Dri, alors cette seule couleur est vraiment génial à ajouter à votre feuille de style est parce qu'elle vous fait double-vérifier votre design pour l'accessibilité. Et pour éviter la gamme dite boueuse, je vais vous montrer un peu plus sur la façon dont je vérifie ça. Donc, ce que j'aime utiliser, c'est le Material Design. Je vais à Material Design, couleur, puis système de couleurs, et dans les palettes de couleurs. Et puis ici, par exemple, vous voyez la gamme de couleurs. Et il vous montre quelle couleur va sur le dessus pour vous assurer que vous avez une lisibilité et une accessibilité parfaites. Et puis vous pouvez aimer aller le long de ces couleurs ici. Tout le monde voit ici est la gamme où la gamme boueuse est où il commence à changer. Donc, je vais essayer d'éviter cela pour avoir, par exemple, des icônes placées au-dessus de quelque chose comme ça. Parce qu'ici, vous pouvez voir qu'il devient beaucoup plus clair et avoir un résultat clair. Je peux aussi mettre dans mon orange, par exemple ici, et puis je peux voir que je devrais utiliser un ton sombre en plus de cela. Cet outil est super grade, en passant, aussi pour trouver vos couleurs complémentaires et des couleurs analogues et tout à voir avec la combinaison de couleurs. Ce que je prends dans l'outil matériel de Google, cependant, c'est juste que j'utilise du blanc ou une couleur gris très foncé, noirâtre sur quelque chose. Si vous voulez combiner différentes couleurs, ce que vous devriez faire est d'aller à un vérificateur de contraste. Je suis par exemple, en utilisant web aim ici. Et vous pouvez simplement mettre votre couleur et il vous dira si votre combinaison de couleurs est accessible. Donc disons que cette orange sur le dessus du blanc, vous pouvez voir qu'elle se sent partout. Et puis vous pouvez juste comme jouer avec elle ici et changer vos couleurs et vous verrez où il commence l'analyse. Donc, ce que vous pouvez faire est soit adapter votre couleur à vos besoins, soit vous pouvez mettre dans les couleurs que vous avez ici et ensuite voir celles que vous pouvez combiner et celles que vous ne pouvez pas combiner. Donc, en vérifiant cela, j'ai remarqué que ici, par exemple, je devrais certainement utiliser une couleur plus foncée. Un autre aspect que j'aime vraiment à propos de cette configuration est qu'il garde mes collègues ont très flexible à changer. Permettez-moi de vous donner un exemple. Dans cette configuration, la couleur principale est définie sur un gris foncé. Donc, si je donne juste des couleurs, très probablement mon texte va également être défini dans cette couleur. Et vous allez probablement l'utiliser dans votre fichier de conception aussi. Maintenant, si je veux changer cette couleur de marque primaire pour, disons un bleu, alors tout à coup tous mes textes seront dans un bleu aussi, ce qui n'est pas si génial. Mais j'aurais besoin de passer par peu à peu pour changer ça. L' approche que nous avons avec nos propres couleurs, je peux changer les couleurs de ma marque, puis je peux changer séparément les couleurs au-dessus de mes éléments. Donc, il est vraiment vous donne une grande flexibilité avec jouer avec les couleurs. Et juste pour le souligner à nouveau, il est totalement adaptable à vos besoins. Vous pouvez ajouter les variantes dont vous avez besoin et où vous en avez besoin, et simplement ajouter une couleur sur pour chacune des couleurs que vous utilisez. 12. Distribution de règle des couleurs: Maintenant, une partie importante en plus des couleurs que vous utilisez est la façon dont vous les utilisez. La règle 1630 10 est une grande règle empirique. Cela signifie essentiellement que vous utilisez votre couleur de base, qui représente 60% de votre design, puis 30% de votre design comme couleur principale. Et juste pour mettre en évidence, utilisez votre couleur secondaire pour 10%. Maintenant, évidemment, nous n'avons pas exactement mesuré une couleur. C' est plus un sentiment de distribution. Donc, c'est génial parce qu'il vous donne aussi de l'espace pour jouer avec des variations comme vous le voyez dans mon exemple. Comme vous pouvez le voir ce qu'il fait. Il, il vous donne une base très solide et une très grande structure et attire vraiment l'attention à l'endroit où vous en avez besoin à votre appel à l'action. Dans le cas où vous auriez besoin de changer les couleurs. Cela fonctionne également magnifiquement sans beaucoup de retouche. Comme d'habitude, ce n'est qu'une règle empirique pour vous aider à démarrer, l'utiliser et à en faire la vôtre. Il y a un outil assez étonnant, conception biomatériale appelée outil de couleur. Et ce qu'il fait est, il vous montre cette règle de 1630 10 fondamentalement. Ainsi, vous pouvez choisir une couleur primaire, puis vous pouvez simplement choisir n'importe quelle couleur secondaire. Et il vous montre assez bien à quoi cela ressemblera dans votre design. Et la conception de matériaux utilise cela aussi, que vous avez ce texte sur primaire, textes sur secondaire. Donc, ici, par exemple, vous pouvez définir une couleur de texte distincte à tout ce que vous voulez. Et puis sur l'accessibilité, vous pouvez vérifier si vos couleurs sont accessibles si elles ont assez de contraste. Et ici, vous pouvez simplement passer à travers et voir différentes versions de votre design. Et vous pouvez bien sûr, tout personnaliser à ce sujet. 13. Résumé de la couleur dans la conception de UI: Résumons donc tout ce que nous avons appris sur les couleurs dans la conception de l'interface utilisateur. Donc, généralement, nous définissons les couleurs dans les codes hexadécimaux. Nous utilisons généralement deux à trois couleurs, mais vous êtes libre d'en utiliser autant ou aussi peu que nécessaire pour votre design. Nous utilisons des variantes de ces couleurs pour plus de profondeur. Couleurs nommées après leur utilisation. Donc, ne nommez pas alors orange ou bleu, mais primaire, secondaire ou quelque chose comme la surbrillance. Quelle que soit votre nom, c'est à vous de décider, mais soyez cohérent. Documentez vos couleurs de la bonne façon. Vérifiez toujours le contraste pour vous assurer que vos couleurs sont accessibles à tout le monde. Et utilise la règle 60, 30, 10 pour équilibrer vos couleurs dans votre design. 14. Merci: Bien fait pour finir ce cours. N' hésitez pas à nous contacter à Moon Learning dot io, nous sommes toujours intéressés à entendre vos commentaires. Vous feriez aussi une grande faveur si vous pouviez juste prendre une minute et laisser un commentaire juste ici. Si vous avez apprécié ce cours et assurez-vous également que vous avez un coup d'oeil à nos cours supplémentaires. Au point Moody Learning. Nous couvrons tous les sujets, depuis les fondements mêmes de la conception de l'interface utilisateur UX jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site Web à Moody Learning dot IO, où vous pouvez également vous inscrire à notre newsletter.