Comment créer des palettes de couleurs pour la conception Web et interface utilisateur (dans Figma) ) | Adi Purdila | Skillshare

Vitesse de lecture


1.0x


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

Comment créer des palettes de couleurs pour la conception Web et interface utilisateur (dans Figma) )

teacher avatar Adi Purdila, UI/UX Designer, Framer Developer, Educator

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.

      Bienvenue en cours

      1:15

    • 2.

      Comprendre les harmonies des couleurs

      7:13

    • 3.

      Créer des teintes et des nuances l'ensemble sur

      7:41

    • 4.

      Application de votre palette à une mise en page apprenant aune

      16:11

  • --
  • 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.

53

apprenants

5

projets

À propos de ce cours

Dans ce cours court et pratique, vous apprendrez à créer vos propres palettes de couleurs à partir de zéro et à les appliquer à une vraie mise en page dans Figma.

Nous aborderons :

  • Comment utiliser des outils tels qu'Adobe Color pour créer des palettes basées sur des harmonies de couleurs.
  • Comment générer des teintes et des nuances à partir d'une seule marque ou couleur primaire à l'aide du mode de couleur HSL de Figma.
  • Comment accélérer les choses avec des générateurs de teinte/d'ombre dédiés.
  • Comment appliquer votre palette finie à une mise en page réelle pour vous permettre de la voir en action.

À la fin, vous saurez exactement comment passer d'une toile vierge à un schéma de couleurs complet et équilibré, et comment faire en sorte que ce schéma fonctionne dans un véritable design.

Vous pourriez également apprécier ces cours

Rencontrez votre enseignant·e

Teacher Profile Image

Adi Purdila

UI/UX Designer, Framer Developer, Educator

Top Teacher

I'm a passionate UI/UX designer and front-end developer with over 15 years of experience. For the past few years, I've been dedicated to sharing my knowledge through video tutorials and courses.

My goal is to help you master Figma and Framer by creating practical classes, so you can learn fast and design faster.

Outside of work, I'm a big animal lover and enjoy spending time with my furry and feathery friends.

Let's learn and grow together!

Voir le profil complet

Level: All Levels

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. Bienvenue en cours: Si vous avez déjà eu du mal à choisir des couleurs qui fonctionnent réellement ensemble ou si vous vous êtes retrouvé avec des motifs un peu décalés, ce cours vous aidera. En quelques minutes, nous passerons d' une couleur unique à une palette complète équilibrée, polyvalente et prête à être utilisée dans un véritable design. Tout le monde. Je m'appelle Adi. Bienvenue dans ce court cours sur la création vos propres palettes de couleurs pour le Web et la conception d'interfaces utilisateur. Nous allons commencer par explorer les harmonies de couleurs à l'aide d' outils tels qu'Adobe Color Ensuite, nous passerons à la création teintes et de nuances directement dans Figma Enfin, nous appliquerons notre palette à une mise en page prête à afin que vous puissiez la voir immédiatement en action. Pas besoin d'être un expert en théorie des couleurs. Nous veillerons à ce que cela reste pratique et pratique, et à la fin, vous saurez exactement comment créer et appliquer vos propres palettes en toute confiance. J'ai inclus un fichier de démarrage dans la section Projet de classe avec tout ce dont vous avez besoin. Des instructions, un espace pour votre palette et un exemple de mise en page avec lequel vous pouvez jouer. Très bien, plongeons-nous dans le vif du sujet et commençons à créer notre palette. 2. Comprendre les harmonies des couleurs: Avant de passer à Figma, parlons des harmonies de couleurs Une harmonie de couleurs est essentiellement un ensemble de règles pour choisir des couleurs qui fonctionnent naturellement bien ensemble. Vous avez probablement vu des termes tels que complémentaire, analogue, triadique Il s'agit essentiellement de raccourcis pour créer des palettes équilibrées. Chacun a son propre usage. La gratuité est idéale lorsque vous recherchez contraste fort, par exemple pour faire ressortir une action de quota. Analogous crée des schémas unifiés calmes, parfaits lorsque vous souhaitez utiliser des couleurs similaires les unes aux Et le triadique vous offre une variété, souvent utilisée dans des designs ludiques et plus colorés tels que les infographies Maintenant, tu n'as pas besoin de tout mémoriser. L'avantage, c'est que des outils comme Adobe Color font le gros du travail à votre place. Alors allons-y et générons rapidement des palettes. Nous pourrons ensuite affiner Figma. Avant de commencer, laissez-moi vous montrer sur quoi nous travaillons. Donc, ici, j'ai une copie du fichier de démarrage que vous pouvez télécharger en suivant les liens dans la description du cours. Et à l'intérieur, nous trouverons des instructions sur ce que nous devons faire, ainsi que des ressources. Ensuite, nous avons une mise en page pratique que nous pouvons utiliser pour appliquer notre jeu de couleurs , puis quelques cadres supplémentaires pour définir nos couleurs. Nous en avons une pour la couleur principale ou la couleur de la marque. Nous en avons un pour le gris, puis un pour l'harmonie. En parlant d'harmonie, laissez-moi vous montrer un outil que j'utilise tout le temps pour créer des palettes de couleurs, savoir Adobe Color. Vous pouvez donc y accéder en vous rendant sur color.adobe.com, puis en cliquant sur Créer Ici, vous devez essentiellement choisir votre couleur de base. C'est celui-ci au milieu, et tu peux cliquer ici pour changer de couleur. Je ne sais pas, peut-être que tu veux un vert plus foncé, quelque chose comme ça. Et une fois que vous avez sélectionné cette couleur, vous devez aller ici où il est écrit harmonie des couleurs et choisir parmi les différentes harmonies. Par défaut, une harmonie analogue est sélectionnée, ce qui crée essentiellement une palette de couleurs pour les couleurs situées les unes à côté des autres dans la palette de couleurs Mais si nous passons , par exemple, à un monochrome, c'est totalement différent Maintenant, cela nous donne différentes nuances de cette couleur. Vous pouvez voir qu'ils sont en ligne droite. Mais si nous passons en triade, cela permet couleurs à partir de points équidistants de la palette de couleurs Nous avons cet orange très pastel. Nous avons ce genre de couleur magenta ou lavande, donc totalement différente, non ? Et vous verrez que si je change la couleur ici sur la roue chromatique, les autres couleurs se mettent à jour automatiquement tout en conservant le même algorithme. Ensuite, nous avons également un service gratuit. C'est très utilisé. Cela sélectionne essentiellement les couleurs opposées les unes aux autres sur la roue chromatique. Et puis vous en avez d' autres, divisés gratuitement. Vous avez un composé carré. Nous n'allons pas vraiment les examiner pour le moment, mais n'hésitez pas à jouer avec eux. Il s'agit donc d'une façon de générer une palette de couleurs basée sur une couleur de départ. Autrement, vous pouvez cliquer sur Explorer, et Adobe Color possède un tas de palettes de couleurs dans sa base de données. Vous pouvez rechercher, par exemple, des aliments, et cela vous donnera des palettes de couleurs liées aux aliments. Et il existe même des palettes de couleurs dérivées d'une photo spécifique comme celle-ci ici. C'est donc une excellente ressource pour trouver des couleurs. Un autre site que je pourrais recommander est coolers.co. Vous pouvez démarrer le générateur ici et vous pouvez simplement appuyer sur la barre d'espace, ce qui générera une palette de couleurs pour vous, même si, pour autant que je sache, cela ne vous permet pas vraiment de créer des palettes de couleurs basées sur des harmonies C'est donc quelque chose que vous devez garder à l'esprit. Revenons à notre projet et créons réellement une harmonie pour cela. Et la couleur par laquelle je vais commencer pour ce projet est l'orange. C'est du f97 400. Je trouve que c'est une couleur qui convient bien à ce type de projet. Évidemment, chaque couleur de marque doit être propre à ce projet en particulier, mais pour cette démo, je vais utiliser cette orange. Je vais donc le copier, et je vais revenir à Adobe Color, et je vais créer une palette de couleurs. Je vais cliquer ici. Je vais coller cette couleur, et je vais choisir la couleur complémentaire, car couleurs complémentaires fonctionnent généralement très bien ensemble. Ils se complètent, non ? Et ils offrent également un haut degré de contraste les uns par rapport aux autres car ils se situent de part et d'autre de la roue chromatique. C'est donc exactement ce que je vais utiliser pour ce projet, et je vais simplement cliquer pour copier cette couleur, et je vais la coller dans mon fichier Figma Copiez ceci, collez-le ici, puis je vais prendre celui-ci et celui-ci, et mon harmonie sera prête. J'ai donc ma couleur primaire, et j'ai mon harmonie. Maintenant, est-ce que je vais utiliser ces quatre couleurs complémentaires ? Pas nécessairement, mais je les ai juste au cas où j'en aurais besoin, non ? J'ai de quoi travailler. Et je pense que cela devrait être la toute première étape du processus de conception. Déterminez la couleur principale de votre marque , puis créez une harmonie sur cette base. Et quelle harmonie, quel type d'harmonie dépend vraiment du projet. Dans la plupart des cas, je suggère d'opter pour un service gratuit parce que c'est, je suppose, la valeur sûre, mais il en existe d'autres, n'hésitez pas à les parcourir et à choisir celui qui vous semble le mieux adapté à votre projet. D'accord. Vous disposez maintenant d'un ensemble de couleurs de base avec lequel travailler. Ensuite, nous allons rendre cette palette plus polyvalente en ajoutant des teintes et des nuances Cela fonctionne donc pour les arrière-plans, les accents et tout le reste. 3. Créer des teintes et des nuances l'ensemble sur: est bon d'avoir quelques couleurs principales, mais dans les vrais designs, vous avez besoin de variations plus claires et plus foncées pour la profondeur, la hiérarchie et le contraste. C'est là que les teintes et les nuances entrent en jeu, et vous pouvez les créer très facilement dans Figma ou sur le Web. Laisse-moi te montrer. Alors tout d'abord, laissez-moi vous expliquer les teintes et les nuances. C'est très simple. Une teinte est une variation plus claire d'une couleur. Une teinte est une variation plus foncée. C'est comme ajouter du blanc ou du noir à cette couleur en particulier. Et il existe de nombreuses façons de créer des teintes et des nuances Permettez-moi de vous montrer une méthode très rapide dans Figma, savoir en utilisant le mode couleur HSL Donc, si nous sélectionnons un élément et que nous ouvrons le remplissage, nous pouvons cliquer ici, et par défaut, l'hexadécimal sera probablement sélectionné C'est le format de couleur que nous connaissons tous. Mais si nous passons à HSL, cela signifie saturation des teintes et luminosité. Et c'est une autre façon de représenter une couleur. Dans ce cas, 28 est la teinte, et elle est contrôlée par ce curseur situé ici Cela nous montre essentiellement la couleur pure que nous utilisons. Cette valeur représente la saturation, donc quel est le degré de saturation de cette couleur. Et vous verrez que si on baisse cette couleur vers le bas, la couleur devient plus pastel. Et si on descend jusqu'en bas, ça devient juste une couleur grise, non ? Maintenons-le à 100 pour le moment. Et puis le troisième paramètre ici est la légèreté. Désormais, la luminosité détermine le degré de clarté ou de noirceur d'une couleur. Et c'est votre principal outil pour créer des teintes ou des nuances. Donc, si vous commencez par la couleur de base, qui est celle-ci dans notre cas, et que vous faites apparaître le curseur vers le haut, vous créez des versions plus claires de cette couleur, car vous déplacez essentiellement le curseur vers Si vous sélectionnez la même couleur, mais que vous déplacez le curseur vers le bas ou que vous diminuez la luminosité, vous créez en fait des versions plus sombres de cette couleur, n'est-ce pas ? Donc, juste comme ça, oui, nous avons créé une teinte de cette couleur de base, et nous avons également créé une nuance de cette couleur de base. Maintenant, comme je l'ai dit, il existe de nombreuses façons de le faire. Vous pouvez, par exemple, sélectionner ou copier la couleur, et vous pouvez accéder au Web et il existe de nombreux outils de ce type. Par exemple, créez tints shades.com. Ici, vous entrez essentiellement le code hexadécimal et vous cliquez sur Créer des teintes et des nuances. Et cela va créer un tas de variations de votre couleur, et vous pouvez simplement cliquer pour copier ce code couleur. Et cela fonctionne au format hexadécimal. Il existe également un outil de Noel Delgado que j'utilise fréquemment, appelé Shadow Lord, qui fonctionne exactement de la même manière Vous collez votre couleur. Vous sélectionnez le nombre d' étapes que vous souhaitez ici. En gros, vous pouvez le faire par incréments de 5 %, ce qui générera un tas de teintes et de nuances pour votre projet Cependant, si vous voulez le moyen le plus simple, vous pouvez utiliser un FigmaPlugin, et il existe un tas de plugins Je vais juste vous montrer l'un d'entre eux. Découvrons donc les actions ici. Nous passerons aux plug-ins et nous rechercherons des teintes. Et cela vous donnera un tas de suggestions de plug-ins de la part de la communauté. Et ici, je vais choisir Hue Hue. OK, je vais le sauvegarder, puis je vais le lancer. Et le plugin ressemble à ceci. Je vais cliquer ici. Je vais utiliser le compte-gouttes, sélectionner ma couleur principale Je vais choisir le nombre de teintes et de nuances que je souhaite. Cinq, c'est assez bien pour moi. Orientation verticale, et je vais appuyer sur Générer les couleurs. Et cela génère un ensemble ou, dans ce cas, cinq teintes et cinq nuances de la couleur que j'ai sélectionnée, qui est surlignée ici au milieu C'est essentiellement la couleur de base. Je vais donc garder ça de côté pour le moment. Maintenant, lorsque vous créez des palettes de couleurs, il est très important d'en avoir une pour les gris également, car il existe différentes variations de couleur grise dans un dessin Par exemple, vous pouvez utiliser un gris foncé pour le texte. Vous pouvez utiliser un gris très clair pour une bordure ou un arrière-plan, n'est-ce pas ? C'est pourquoi il est très important d'avoir le choix entre plusieurs couleurs de gris. Maintenant, comment créez-vous ce gris ? Ouvrez simplement le sélecteur de couleurs et vous le faites simplement, en gros C'est possible, mais ce que j'aime faire, c'est créer une couleur grise basée sur la couleur primaire réelle. OK ? Il contient un peu de cette couleur primaire, et j'ai trouvé que c'est ce qui me donne les meilleurs résultats. Voici donc ce que je vais faire. vais sélectionner cette case grise ici, appuyer sur I dans Figma, et je vais échantillonner ma couleur principale Ensuite, je vais ouvrir mon sélecteur de couleurs, et je vais faire ce qui suit Je vais d'abord réduire la luminosité, afin de créer une version très foncée de cette couleur. Je pense qu'environ 10 % fonctionne très bien. Ensuite, je vais réduire la saturation, en supprimant essentiellement beaucoup de couleurs. Et je vais m'arrêter à environ quatre. Et je pense que je vais en fait augmenter un peu la légèreté, juste pour que nous puissions voir les choses un peu mieux. OK, donc j'en suis très content. C'est ma couleur grise. L'étape suivante consiste donc à générer quelques teintes et nuances à partir de cela Je vais donc redémarrer le branchement. Je vais appuyer sur Ctrl K ou Commande K si vous êtes sur Mac. Je vais choisir Hue Hue, échantillonner cette couleur grise et générer des couleurs. Cela générera essentiellement des teintes et des nuances pour ma couleur grise Et je vais les mettre de côté pour le moment à côté de mes teintes et nuances principales Notre palette semble maintenant complète. Nous avons des couleurs claires, des couleurs sombres et tout le reste. Mettons-le à l'épreuve en l' appliquant à une mise en page réelle. 4. Application de votre palette à une mise en page apprenant aune: C'est la partie la plus amusante, c'est de prendre votre palette et de la faire fonctionner dans un design réel. Je vais appliquer la mienne à la mise en page du fichier de démarrage, afin que vous puissiez voir comment j'utilise chaque couleur pour différents rôles tels que les arrière-plans, le texte et les appels à l'action. Cela dit, commençons. Je vais commencer par appliquer des couleurs au texte car il constitue la majorité du contenu de notre page. Donc, le plan est je veux appliquer un gris foncé à tous les titres, un gris légèrement plus clair aux autres éléments du texte Revenons donc à notre palette. C'est la couleur de base à partir de laquelle nous sommes partis. Allons-y avec celui-ci, par exemple. Donc, copions-le, je vais sélectionner tous les titres et je vais les coller dans cette couleur Voyons maintenant quels sont les éléments de texte habituels. Et une autre chose que je vais faire est de copier cet élément à partir des teintes et des nuances présentes et de le coller dans le cadre gris Et cela va juste me dire quelles couleurs j'ai fini par utiliser dans mon design. Commençons par la couleur grise de base. Appliquons cela à un élément et voyons à quoi il ressemble. Et à mes yeux, je trouve que c'est beau. Essayons avec une version légèrement plus légère, peut-être celle-ci. Appliquons-le ici. Et je pense que cela me donne un peu meilleur contraste. Sélectionnons-les également et appliquons cette couleur. Oui, je pense que cela me donne un bien meilleur contraste entre l' élément de texte réel et le titre. Et aussi, une chose très importante que je dois vérifier ici est le contraste des couleurs pour l'accessibilité. C'est donc en fait très facile à faire Figma. Si je sélectionne un élément avec une couleur de remplissage et que je clique dessus, nous obtenons ce graphique ici dans le sélecteur de couleurs, en gros Si la couleur que vous avez sélectionnée se trouve dans cette zone du sélecteur de couleurs qui n'est pas en pointillé, cela signifie que le contraste de couleur de cette couleur par rapport à celui de l'arrière-plan est suffisant pour répondre aux normes de contraste A dans ce cas Et c'est pour des raisons d'accessibilité, non ? Il s'adresse aux personnes malvoyantes qui ont mal à déchiffrer un texte lorsqu'il n'y a pas assez Et vous pouvez voir que nous avons un contraste de 7,45 pour un Je ne vais pas entrer dans les détails pour le moment, mais juste pour que vous sachiez que c'est une vérification importante à faire. N'oubliez donc pas de le faire à chaque fois. OK, voyons où je peux appliquer cette couleur de texte d'autre. Eh bien, je pourrais l'appliquer ici dans ces onglets, non ? Alors sélectionnez-le et appliquez-le ici. Oups. Peut-être même celui-ci parce qu'il appartient en quelque sorte à la même catégorie de texte que les autres. Ils seront colorés différemment car ce sont des sortes de badges dont ils ont besoin pour se démarquer un peu plus. Mais le texte relatif au temps de cuisson et à la difficulté de la recette doit être coloré de la même manière. Je vais donc l' appliquer à ceux-là également. Maintenant, comme j'ai utilisé cette couleur pour le texte, donc 553, je vais juste copier cet élément et je vais le coller dans mon gris ici OK, finissons d'appliquer le gris. Nous avons d'autres éléments UA qui devraient utiliser certaines des couleurs grises. Et là, je parle tout d'abord des bordures de ces éléments, de ces boutons, des cartes elles-mêmes. Et nous devons également déterminer une couleur de fond pour cette liste déroulante. Commençons donc par les frontières. Choisissons la couleur la plus claire que nous avons ici, qui dans notre cas est DD, DC DC. Et sélectionnons ces quatre éléments et nous allons changer la couleur de leur trait en fonction de cet élément directement. Et nous allons juste y jeter un coup d'œil , cela me convient parfaitement. Allons-y sélectionnons ces éléments ici et changeons la couleur de leur trait. Et je pense qu'ils ont l' air bien aussi. Nous allons donc nous contenter de ça. Alors laisse-moi le copier. Je vais le coller juste pour savoir quelles couleurs j'ai utilisées. Et maintenant, voyons cet élément du menu déroulant, n'est-ce pas ? Je vais donc le sélectionner, appuyer sur I, et je vais juste échantillonner cette couleur. Voyons donc à quoi cela ressemble. Ça a l'air plutôt bien. J' aimerais peut-être que ce soit un peu plus léger. Et si nous examinons la palette de couleurs que nous avons générée, nous n'en avons pas réellement de version plus claire. Et dans ce cas, nous pourrions, vous savez, régénérer l'ensemble des teintes et des nuances pour cette couleur et choisir d'autres étapes, en gros, ou nous pouvons simplement créer notre propre Vous pouvez donc totalement le faire. Vous pouvez le sélectionner. Vous pouvez ouvrir le remplissage des couleurs ici, et nous pouvons travailler en mode HSL, comme je vous l' ai déjà montré, et nous pouvons simplement augmenter la luminosité jusqu'à ce qu'elle soit très proche du blanc. Donc 94, dans mon cas, crée une couleur suffisante pour ce fond en particulier. J'en suis donc content, et je vais simplement copier cette couleur de remplissage, et je vais l' ajouter ici même. Je vais coller cette valeur, et je vais également l'appliquer à cet élément. Voilà pour appliquer les gris. La mise en page de notre cabinet est maintenant totalement différente ce que nous avions auparavant, car nous avons pris soin de colorier la typographie, les bordures et tous les éléments qui nécessitaient essentiellement une couleur grise Passons maintenant à autre chose et commençons à appliquer notre couleur principale ou notre couleur de marque. Et permettez-moi de le dire dès le début. Cela devrait être utilisé avec parcimonie, non ? Il doit s'agir plutôt d'une couleur d'accent, pas être présente partout sur votre design. Dans cet esprit, sélectionnons la couleur principale de la marque et voyons où nous pouvons l' appliquer telle quelle, directement. Et de mon point de vue, un bon endroit pour le faire est de l'appliquer à ces icônes, n'est-ce pas ? Je vais donc simplement double-cliquer et double-cliquer jusqu'à ce que je sélectionne le bon cadre, et je vais simplement remplacer la couleur noire ici. Là où il est indiqué les couleurs de sélection, je vais simplement coller ma couleur principale. Et cela va simplement cibler les éléments, les icônes, en gros, ceux que nous utilisons en noir. Et je vais faire la même chose ici et je vais faire la même chose ici. Et ici. Rien qu'en faisant cela, nous avons maintenant un peu de cette couleur d'accent dans notre design, et cela rend tout simplement plus cohérent Mais examinons maintenant les autres éléments qui nécessitent notre attention. Et ce sont ces deux badges, où il est écrit « dîner italien » ou « déjeuner méditerranéen ». Ils peuvent également utiliser cette couleur primaire. Mais le fait est que si nous les sélectionnons et que nous choisissons utiliser la couleur complète de la marque, ils vont trop se démarquer. Ils vont attirer notre attention sur cette section plutôt que sur cette section où il est dit « Voir la recette ». Cela devrait être appelé action, non ? C'est sur cela que les gens devraient cliquer. Et en appliquant la couleur complète ici, nous attirons trop l'attention sur cette zone. Donc, ce que nous devons faire, c'est simplement atténuer un peu plus ces couleurs. Comment faisons-nous cela en utilisant des teintes et des nuances ? Nous allons donc revenir à notre liste de teintes et de nuances. Je vais sélectionner la couleur la plus claire, la teinte la plus claire de cette couleur primaire. Et je vais l'appliquer comme arrière-plan de cet élément. Et ça me convient parfaitement. Ce n'est pas trop de couleur, mais c'est suffisant pour rendre l'ensemble du design plus cohérent Maintenant, pour le texte lui-même, eh bien, que diriez-vous de saisir une nuance de cette couleur. C'est donc la base. Prenons celui-ci, par exemple, collons-le et voyons à quoi il ressemble, sélectionnons-les deux, collons-le dedans. Et je trouve que ça a l'air vraiment bien. Ce n'est pas comme le noir. C'est juste une version plus foncée de notre couleur primaire. Et je trouve que ça a l'air vraiment bien. Appliquons donc cela aux autres éléments. Donc, tout d'abord, laissez-moi sélectionner les autres éléments, et voyons si nous pouvons les trouver. C'est celui-ci juste là. Comme ça. Ensuite, pour le texte, sélectionnons-le. Et tout en maintenant la touche Ctrl enfoncée ou Commande+Shift, je peux simplement cliquer pour sélectionner tous ces éléments, coller la nouvelle couleur, et c'est terminé pour la couleur de la marque. Maintenant, le dernier élément auquel nous devons appliquer des couleurs est ce bouton d'affichage de la recette. Alors, que pouvons-nous faire ici ? Eh bien, souvenons-nous du fait que nous avons une harmonie qui est prête pour nous et que nous n'avons pas utilisée. Mais en fait, j'ai presque oublié puisque nous avons utilisé certaines teintes et nuances de cette couleur primaire, sélectionnons-la et copiez-les dans le cadre de couleurs de notre marque principale, juste pour savoir quelles couleurs nous avons utilisées dans notre design OK. Revenons maintenant à l'harmonie complémentaire. Prenons cette couleur, copiez-la, et utilisons-la pour les boutons. Je vais donc sélectionner ceci, et je vais simplement remplacer le noir pur par cette couleur. Et dès le départ, c'est trop brillant. C'est bien trop clair. Et comme c'est beaucoup trop clair sur ce fond blanc, il n'y a pas assez de contraste. Si nous vérifions rapidement ici, vous verrez que le sélecteur de couleur se trouve à l'intérieur de la zone en pointillés et que nous ne respectons pas la norme de contraste DA Donc, une chose que vous pouvez faire dans Figma est de cliquer sur ce bouton, et cela déplacera automatiquement le sélecteur de couleur vers la première couleur qui répond à la norme Vous pouvez également créer des teintes et des nuances pour cette couleur, puis en choisir une. Sélectionnons en fait cette couleur que nous avons créée avec notre harmonie, et voyons à quoi elle ressemblera. Sélectionnons-le donc, changeons le contour et la couleur du texte. Et si nous examinons le sélecteur de couleurs ici, vous pouvez voir que nous avons maintenant un contraste de couleur suffisant pour ces éléments Sélectionnons donc toute cette section, et je vais simplement remplacer cette couleur bleu vif par celle-ci. Et c'est terminé. Jetons un dernier coup d'œil à ceci : voici quoi ressemble notre mise en page actuellement. Des gris sont appliqués à la plupart des éléments, y compris le texte. Ensuite, nous avons ajouté une partie de cette couleur principale de la marque accentuer notre design Et nous avons utilisé à la fois la couleur brute sur ces icônes, mais également les teintes et les nuances de cette couleur sur ces badges ici Et pour l'action principale de Qualta, nous avons utilisé la couleur complémentaire que nous avons obtenue grâce à notre harmonie Et juste comme ça, votre palette n'est pas simplement un ensemble de couleurs. Cela fait partie d'un véritable design fonctionnel. Nous avons commencé avec une seule couleur. Nous avons élaboré une palette complète en utilisant des harmonies, des teintes et des nuances et nous l'avons appliquée à une mise en page pour voir comment le tout fonctionne ensemble Ces mêmes étapes s'appliquent à tous les projets de conception, qu'il s'agisse de créer un site Web, une API ou même des actifs de marque Plus vous vous entraînez à créer de telles palettes, plus vite vous pourrez choisir couleurs qui s'harmonisent parfaitement. Maintenant c'est ton tour. Téléchargez le fichier de démarrage à l'aide du lien figurant dans la description du cours, créez votre propre palette en utilisant les techniques que nous avons abordées et appliquez-la à la mise en page fournie. Vous pouvez suivre exactement mon approche ou vous l' approprier entièrement. Cela dépend de vous. Et si vous voulez relever un défi supplémentaire, essayez de créer une version claire et une version foncée en utilisant la même palette. Lorsque vous avez terminé, partagez votre travail dans la galerie de projets de classe. J'adorerais connaître votre point de vue à ce sujet. Et si vous aimez ce cours, consultez mes autres cours Skillshare pour des leçons de conception Web plus rapides et pratiques C'est bon. Merci d' avoir regardé, bonne conception, et je vous verrai au prochain cours. Au revoir pour le moment.