Créer de superbes schémas de couleurs pour les projets de conception web et d'UI | Muhammad Ahsan Pervaiz | Skillshare
Menu
Recherche

Vitesse de lecture


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

Créer de superbes schémas de couleurs pour les projets de conception web et d'UI

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

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.

      Introduction au cours de système de couleur

      1:58

    • 2.

      Pourquoi les couleurs sont importantes pour l'UX et l'utilisabilité

      5:22

    • 3.

      Modes de couleur RGB et CMYK

      7:18

    • 4.

      101 roue de couleur

      6:43

    • 5.

      Quelles sont les couleurs neutres ?

      3:44

    • 6.

      Exemples de couleurs chaudes, Cool et neutres dans la conception UI

      7:33

    • 7.

      Théorie de la relation des couleurs

      12:59

    • 8.

      Exemples Examples des couleurs

      12:59

    • 9.

      1re choix de projet première couleur

      1:30

    • 10.

      Les secrets de la création des tons

      5:39

    • 11.

      101 psychologie de couleur

      7:27

    • 12.

      Psychologie des couleurs Gender genre

      4:08

    • 13.

      Effacer votre politique de couleur

      6:30

    • 14.

      But de chaque couleur dans la conception UI

      5:09

    • 15.

      Sharpe sur la couleur d'humeur - Secret de contrastes des couleurs

      8:01

    • 16.

      Comment je crée mes plans de couleur

      4:28

    • 17.

      Comment vous choisissez votre première couleur

      6:08

    • 18.

      Créer votre première palette de couleurs avec une couleur unique

      7:59

    • 19.

      2nd projet Créez des couleurs monochromatiques

      1:08

    • 20.

      Ajouter une deuxième couleur pour le contraste

      8:45

    • 21.

      Couleurs de statut dans la conception UI

      12:34

    • 22.

      Tables de couleurs de tableau de bord

      11:45

    • 23.

      Faire des plans de couleur accessibles

      6:25

    • 24.

      Outils pour l'accessibilité des systèmes de couleur

      14:42

    • 25.

      Plugin Stark pour l'accessibilité des couleurs

      6:20

    • 26.

      3rd projet de couleur avec un objectif

      1:00

    • 27.

      Magie des différences de couleurs subtiles

      4:49

    • 28.

      Qu'est-ce que les niveaux de couleur ?

      12:26

    • 29.

      4th projet - S'écarte avec des Échelles

      2:49

    • 30.

      12 Conception toujours à l'échelle grise

      4:33

    • 31.

      Nommer vos couleurs correctement

      3:00

    • 32.

      Utiliser une pluche de générateur de style dans l'ébauche

      5:16

    • 33.

      Gestion des couleurs dans Adobe XD

      3:24

    • 34.

      Gestion des couleurs dans Photoshop

      5:41

    • 35.

      Extensions de navigateur pour trouver des couleurs

      6:59

    • 36.

      Outils en ligne pour les Schemes de couleur que j'utilise

      10:06

    • 37.

      Trouver des inspirations de couleur en ligne

      6:03

    • 38.

      Outil en ligne pour les dégradés de couleur

      4:40

    • 39.

      Astuces pour créer des dégradés NOUVELLE leçon

      10:45

    • 40.

      Luminaire des couleurs dans la palette de couleurs

      7:05

    • 41.

      Et ensuite ?

      1:04

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

3 122

apprenants

36

projets

À propos de ce cours

Si vous retirez deux éléments de tout design, c'est sans sens. L'une de typographie et une deuxième en matière de COLOR.

Les couleurs sont utilisées pour afficher et transmettre des informations. Si vous regardez le système de couleurs de n'importe quel tableau graphique pour graphes, les couleurs sont là pour créer du sens et du sens dans les données qu'il affiche

Si le schéma de couleur de votre site Web ou la conception d'applications mobiles est désordonné, les utilisateurs peuvent mécomprendre facilement votre message. Les couleurs attirent et repoussent tous les animaux, les enfants et adultes dans ce monde. Chaque plan de couleur que vous développez a un impact psychologique et émotionnel sur les utilisateurs qui utilisent votre site Web ou l'application mobile que vous avez conçue.

Si vous concevez pour un tableau alors les couleurs, alors les couleurs sont la partie la plus importante de l'UI (Interface utilisateur) de tout tableau de bord qui montre les statistiques.

80 % des conceptions sur Dribbble n'ont pas de sentiment d'accessibilité de la couleur

Dans ce cours, vous maîtriserez et apprendrez dès le début

  • Les effets psychologiques des couleurs
  • Les bases de la couleur pour la conception numérique
  • Créer des cartes de couleur géniales avec seulement simple
  • Comment ajouter d'autres couleurs à votre chemen de couleurs à votre cheminement de couleurs
  • But des couleurs dans la conception UI
  • Utilisation des couleurs de statut dans les tableaux de bord
  • Ratios contraste des couleurs et créer des cartes de couleurs accessibles avec une accessibilité des couleurs
  • Combien d'ombres ou couleurs dont vous avez besoin dans votre shades/Colors couleur
  • Créer une échelle de couleurs pour votre série de couleurs
  • Outils en ligne pour générer des plaques de couleurs
  • Ressources téléchargables pour lancer n'importe quel tableau de couleurs avec des exemples

Votre douleur dans la création de structures de couleurs géniales pour vos projets de conception Web, Conception d'applications mobiles ou de tableau Dashboard

Inscrivez-vous maintenant et commençons à créer des plans de couleur géniaux de couleur

Rencontrez votre enseignant·e

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Enseignant·e

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Voir le profil complet

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. Introduction au cours de système de couleur: Bonjour et bienvenue à mon cours sur la création combinaisons de couleurs impressionnantes pour vos projets de conception d'interface utilisateur pour votre site Web et vos tableaux de bord. Dans ce cours, je vais couvrir étape par étape depuis le début un peu sur la couleur 2-D, quelles sont les couleurs neutres ? Quelles sont les couleurs vibrantes ? Quelles sont les couleurs qui attirent l'attention ? Donc, nous allons couvrir tout ça. Ensuite, nous allons passer à l'étape suivante, qui est, « Où dois-je commencer mon jeu de couleurs ? » C' est la question que beaucoup de concepteurs d'interface utilisateur ont dans leur esprit, ou même si vous êtes un développeur ou que vous ne savez pas grand-chose sur la conception, vous pourriez être inquiet de savoir comment puis-je construire mon jeu de couleurs ? Je vais répondre à cette question. Nous allons simplement utiliser une couleur pour créer un couleurs impressionnant dans ce cours et même ajouter plus de couleurs à cela. Donc, nous allons passer d'une couleur et continuer à ajouter plus de couleurs. Donc, étape par étape, le processus d'ajout de couleurs pour vos projets de conception d'interface utilisateur. Ensuite, je vais partager des tonnes de ressources, ressources en ligne et de ressources que j'ai créées pour ce cours, qui sont comme 30 couleurs différentes. Vous pouvez démarrer vos conceptions d'interface utilisateur à l'aide de celles-ci. Vous pouvez les utiliser dans la conception du tableau de bord, conception de l' interface utilisateur, j'ai des exemples avec eux. Donc, je vais partager avec vous beaucoup d'exemples, beaucoup de ressources. Une autre chose qui est très importante et beaucoup de designers le manquent, qui est l'accessibilité des couleurs. L' accessibilité des couleurs est en fait la conception pour les personnes avec facultés affaiblies de couleur et utilise également les rapports de contraste des couleurs, combien l'arrière-plan ou le premier plan est visible. C' est un sujet que beaucoup de designers manquent en fait. Donc, nous allons couvrir cela dans ce cours. Qu' est-ce que vous attendez ? Nous devrions commencer maintenant et créer des jeux de couleurs impressionnants. 2. Pourquoi les couleurs sont importantes pour l'UX et l'utilisabilité: Parlons de l'importance des couleurs dans la conception de l'interface utilisateur, dans les applications mobiles et la conception Web ou dans l'ensemble dans toutes les conceptions de produits différents. Chaque fois que vous regardez une application mobile ou un produit numérique que vous allez acheter, la première chose est que vous allez regarder leur apparence visuelle. C' est la première chose que vous allez remarquer. Cela va faire une certaine perception et vous pouvez dire la valeur de ce produit dans votre esprit. Ce sera votre première impression sur ce produit. Les couleurs sont très importantes, selon une recherche de l'ICC, les utilisateurs de couleurs ne prennent que 90 secondes pour avoir une idée de n'importe quel produit en ligne pour l'évaluer, pour créer quelques premières impressions sur ce produit, et 62 pour cent à 90 pour cent de cela, décision sur la première impression qu'ils vont faire est basée uniquement sur le schéma de couleurs. Des marques comme Facebook et d'autres grandes marques, ils utilisent des couleurs sur tous leurs appareils, leurs applications pour mettre en valeur leur marque. De même, les couleurs vont vous affecter, les utilisateurs émotionnellement et psychologiquement ils vont les affecter. Ce sera vos premières impressions. Pour créer les premières impressions, les couleurs sont essentielles. De même, du point de vue de l'expérience utilisateur, les couleurs vont améliorer la facilité d'utilisation de n'importe quelle application. Par exemple, si le bouton principal d'appel à l'action est très proéminent, il va inviter l'utilisateur à appuyer dessus. Cela va en fait augmenter la facilité d'utilisation de votre application. De même, vous pouvez utiliser les couleurs pour améliorer la navigation. Par exemple, vous avez vu dans les tableaux de bord sur le côté gauche, par exemple, vous utilisez la boîte de réception Gmail, sur le côté gauche vous pouvez clairement voir quel est le dossier ou quelle boîte de réception ou brouillons ou tout ce que vous travaillez en ce moment il est sélectionné. Les couleurs sont là pour afficher que vous avez sélectionné ceci, il y a des messages d'erreur, il y a des messages d'information, il y a des messages de succès. Ils sont tous affichés à l'aide de couleurs. Si vous supprimez les couleurs de n'importe quelle interface, cela ne va pas avoir de sens. Les couleurs sont là pour vous aider à comprendre n'importe quelle conception d'interface, n'importe quelle interface utilisateur. Ils vont améliorer la convivialité et l'expérience utilisateur de n'importe quelle application. De même, maintenant allons de l'autre côté, qui est l'influence psychologique de l'achat d'un produit. De même, lorsque vous achetez quelque chose en ligne, vos décisions sont principalement basées sur le schéma de couleurs. Chaque fois que vous faites une évaluation initiale d'un achat, l'aspect et la sensation de ce produit vont vous aider à prendre la décision que je devrais acheter ce produit ou je devrais suivre ce cours. C' est pourquoi vos images de produit, elles comptent beaucoup. Les couleurs utilisées en eux, les arrière-plans utilisés en eux. Si vous regardez Nike et d'autres produits qui sont de grandes marques, ils utilisent des couleurs très intuitivement, très soigneusement dans leurs images, dans leur modèle short, avec le court là, des modèles avec un peu de football ou quelque chose comme ça. Ils utilisent tous les arrière-plans, tout l'uniforme, toutes les couleurs, toutes les lumières. Ils les utilisent très soigneusement parce qu'ils vont améliorer l'influence dans l'esprit de l'utilisateur ou dans l'esprit des clients que je devrais acheter ce produit. C' est un produit haut de gamme ou quelque chose comme ça. Tout dépend de votre influence en utilisant les couleurs et de leur importance dans la conception de l'expérience utilisateur, dans les décisions d'achat de vos clients. Améliore également la facilité d'utilisation de n'importe quelle application. Vous pouvez dire que c'est une architecture d'information, vous affichez essentiellement l'information. Les couleurs sont utilisées pour raconter des histoires, pour afficher des informations sensées, ce qui crée une mise en page lisible. lisibilité est également un facteur de couleur, car si le contraste des couleurs n'est pas suffisant, que nous allons parler de l'accessibilité des couleurs, les utilisateurs ne peuvent pas lire ce que vous avez écrit sur votre site Web ou votre application mobile ou quel que soit l'article que vous avez écrit. J' espère que vous allez profiter de toute cette étude sur palette de couleurs et comment nous allons les appliquer à différentes applications et différents sites Web. Restez à l'écoute et je vous verrai bientôt dans la prochaine vidéo. 3. Modes de couleur RGB et CMYK: Donc, la première chose que nous allons apprendre est quels sont les différents modes de couleur parce que lorsque vous concevez pour l'écran, vous devez comprendre les profils de couleur et quels sont les différents modes de couleur comme RVB ou CMJN et comment vous allez les utiliser et quels outils les soutiennent réellement. Chaque fois que vous concevez, vous commencez avec l'outil et les paramètres appropriés. C' est très important. Donc, d'abord, je vais commencer avec le mode RVB, rouge, vert, bleu, qui est en fait le mode écrans numériques et il est utilisé dans tous les différents écrans numériques, et si vous regardez la capture d'écran sur la gauche, il y a le mode RVB, qui est que vous pouvez voir en ce moment que ce rouge a la couleur rouge à 14 et le vert est mélangé en elle et il est 72 et le bleu est 75. Donc, cela fait cette couleur rouge sur la droite. En haut, vous pouvez voir la couleur que j'ai sélectionnée. Donc, c'est en fait décoloré. Nous allons parler de CMJN, qui est principalement utilisé pour l'impression. CMJN signifie cyan, magenta, jaune et noir. Donc K est en fait noir. Il ne commence pas par k, il se termine la dernière lettre noire et il est principalement utilisé pour la conception d'impression. Donc, si vous envisagez de concevoir votre carte de visite ou votre logo, ou tout ce qui va être imprimé pour votre entreprise et votre matériel d'impression, vous devriez commencer par un mode CMJN, et vous allez sélectionner des couleurs basées sur CMJN valeur. Donc cyan sera 89 en ce moment, magenta 66. n'y a pas de couleur jaune ou noire mélangée dans cette couleur bleue. Donc un conseil que je vais te donner. Il y a des couleurs comme, vous pouvez voir que j'ai sélectionné cette couleur bleue, couleur bleue particulière, et ici nous avons des quatre couleurs, C, M, Y, et k. Donc, il y a en fait quatre couleurs mélangées ensemble. Nous n'avons sélectionné que deux couleurs parmi elles. Cyan et magenta et nous mélangeons seulement la couleur cyan et magenta pour créer cette couleur bleue ett va vous aider beaucoup dans l'impression. Il va économiser beaucoup de coûts, les coûts d'impression, et aussi il va vous faire économiser de la couleur. Donc, chaque fois que vous concevez pour l'impression, vous concevez un logo, vous concevez une carte de visite, essayez d'utiliser deux valeurs de couleur, c'est juste un prototype. Il s'agit donc de CMJN et RVB. La plupart du temps, nous allons concevoir pour les écrans numériques de sorte que nous n'avons pas besoin de nous soucier de CMJN, mais je pense que vous devriez savoir quand vous concevez une carte ou que vous pouvez dire une carte de visite, vous n'échouez pas. Un autre concept qui est très important à comprendre est les profils de couleur. En mode RVB, votre moniteur ou vos appareils numériques, ils peuvent afficher 16,7 millions de couleurs, mais il y a plus de nuances de couleurs que cela. Alors, quel 16,7 millions votre moniteur devrait afficher ? Cela va être décidé par les profils de couleur, ou ils sont également appelés espaces de couleur. Donc, l'espace colorimétrique ou le profil de couleur va réellement dire à votre appareil numérique que ces nuances de votre appareil numérique que ces nuances de couleurs vont être bleues ou celles-ci vont être rouges, ou elles vont être jaunes, vertes. C' est ainsi qu'il va montrer la gamme de couleurs qui peuvent être affichées dans un profil de couleur. Pour la conception numérique, nous utilisons sRGB, qui est principalement utilisé sur la conception web, et il est largement utilisé sur tous les navigateurs Web. Il va donc utiliser pour afficher des images, pour afficher vos icônes, vos designs sur des sites Web, et aussi sur les appareils numériques, comme vos téléphones mobiles. Donc, la plupart du temps, nous allons concevoir 99,99 pour cent nous allons utiliser le mode sRGB et si vous voulez en étudier plus à ce sujet, il y a quelques autres exemples de profils de couleurs les plus courants, les plus populaires sur Adobe RGB 1998 et il y a aussi des couleurs pour CMJN. Donc, si vous imprimez au Japon ou dans un autre pays, ils ont leur propre profil standard pour une couleur. Donc CMYK, Japan Standard version deux et il y a peut-être 50 profils de couleurs différents pour les appareils numériques. Donc, vous devez sélectionner sRGB, ce qui va être le plus commun, et nous allons utiliser seulement cela. Maintenant, dans la dernière, je vais parler de quelques-uns des outils qui sont spécifiques à la conception CMJN ou RVB. Donc, si vous concevez pour les sites Web sont des applications mobiles. Donc, je voudrais vous montrer que les applications sur la droite, ils sont en fait utilisés dans l'industrie beaucoup comme figma, sketch, Adobe XD Studio et Invision Studio. Donc, si vous concevez des applications mobiles ou que vous concevez principalement un site Web, vous auriez tendance à utiliser les outils sur la droite. Photoshop est un mélange que vous pouvez concevoir en utilisant à fois le mode CMJN n mode RVB mais je ne le recommande pas pour l'image de marque ou le design inférieur. Sur le côté gauche, vous voyez Adobe Illustrator, qui est un excellent outil pour le travail CMJN, le travail marque ou le travail de conception d'impression. Il existe également des fonctionnalités d'illustrateur que vous pouvez démarrer une conception de mode RVB, ou vous pouvez concevoir un site Web dans Illustrator aussi, mais je ne le recommande pas à cet effet. De même, les outils que j'ai travaillé recommandent vraiment sont Adobe XD, sketch et figma en ce moment. Il pourrait y avoir différents outils ou peut-être des priorités différentes à l'avenir, mais Photoshop, Adobe XD, figma, et sketch, sont les quatre outils que je vous recommande de commencer à apprendre ou à utiliser dès maintenant en 2019. Donc c'est tout. Chaque fois que vous essayez de sélectionner votre outil, essayez de le sélectionner en fonction des outils ou outils en mode RVB utilisés spécifiquement et spécialement conçus pour la conception Web, la conception de l'interface utilisateur et la conception d'applications mobiles. C' est donc tout pour ce RVB et CMJN, var et comparaison. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 4. 101 roue de couleur: Laissez-moi vous présenter avec la roue de couleur. Vous l'avez peut-être vu beaucoup de fois, mais ici, nous allons discuter comment et quelles sont les différentes couleurs qui vont constituer cette roue de couleur, et comment elle est réellement composée. Voyons quelques-unes des couleurs primaires et secondaires et comment elles sont mélangées ensemble pour créer cette belle roue de couleur. D' abord parler des couleurs primaires. Nos couleurs primaires sont trois, jaune, bleu et rouge. Je me souviens quand j'étais enfant, nous avions l'habitude de mélanger ces couleurs pour créer couleurs différentes dans nos classes de Montessori ou de crèche ou de maternelle. Ce sont les trois couleurs primaires principales et toutes les couleurs différentes vont être faites en les mélangeant. Ce sont des couleurs primaires alors nous allons les mélanger pour créer nos couleurs secondaires. Maintenant, vous pouvez voir ce sont des couleurs secondaires, orange, cette couleur violet ou violet, et la couleur secondaire est verte, ils sont fabriqués en mélangeant les deux couleurs primaires. La couleur primaire, le jaune et le rouge vont créer l'orange, rouge et le bleu va créer la couleur violette ou pourpre et la couleur primaire, bleu et le jaune vont créer une couleur secondaire. Nous allons mélanger ces couleurs secondaires avec la prochaine couleur primaire pour créer différents plus de couleurs. Ce seront nos couleurs tertiaires. Ici, nous avons les couleurs tertiaires et c'est ainsi que tout le cercle de cette roue de couleur est effectivement terminé. Nous avons des couleurs primaires puis des couleurs secondaires, puis nous allons mélanger les couleurs primaires et secondaires pour créer des couleurs tertiaires. Maintenant, parlons des nuances, des tons et des teintes de n'importe quelle couleur et de ce qui est réellement teinte. C' est un concept très important. Si vous obtenez cela, vous pouvez créer n'importe quel type de jeu de couleurs même basé sur une seule couleur. D' abord, hue. La teinte est en fait une couleur pure, nous appelons teinte, qui est en fait la couleur et le nom de la couleur, la couleur pure comme l'orange, c'est la teinte et nous allons utiliser la couleur pure ou [inaudible]. Maintenant, teinte. Teinte est en fait, quand nous mélangeons la teinte avec le blanc. Si nous continuons à ajouter de la couleur blanche dans n'importe quelle teinte comme par exemple, j'ai la couleur jaune ou orange et j'essaie de mélanger le blanc dedans Il va devenir plus lumineux et plus léger. Cela va créer une teinte. Je me souviens quand j'étais enfant, j'avais l'habitude de mélanger et créer différentes nuances ou teintes de couleurs en mélangeant le blanc, couleur bestiale en couleur peut-être verte ou bleue, pour créer différentes teintes de la même couleur bleue. De même, ton. Le ton est en fait la même teinte et le gris. Nous allons ajouter de la couleur grise pour créer des tons différents. Beaucoup de temps Dans le monde du design, nous appelons normalement ces teintes et même les nuances. Nous appelons les teintes principalement des tons ou des nuances de la même couleur et nous utilisons le terme de façon interchangeable, mais la chose réelle est que tonifier une couleur est en fait ajouter du gris à elle. Si vous avez une couleur, couleurs pures comme le violet ou le violet et que vous y ajoutez du gris, il va en fait créer un ton. Il est fondamentalement un lavé, couleurs ternes. Si vous voulez créer une nuance terne de quoi que ce soit, vous créez réellement un ton et vous y ajoutez une couleur grise. Tu dois te souvenir de ces trois choses. Les tons sont gris, les teintes sont blanches et les teintes sont noires. Ça va créer notre rime dans ta tête. Des nuances. Les nuances ajoutent en fait du noir. Lorsque vous ajoutez du noir à une teinte pure, vous la rendrez beaucoup plus foncée et cela va créer des nuances de cette couleur. En utilisant ce modèle, la teinte, la teinte, le ton et les nuances, nous pouvons créer un ensemble de couleurs basé uniquement sur une seule couleur. Si nous avons juste une couleur comme l'orange ou peut-être le bleu, teinte il va être nous avons besoin par exemple, nous avons besoin de cinq couleurs ou six couleurs. Nous pouvons facilement le faire. Nous pouvons créer deux ou trois tons, une ou deux teintes, en ajoutant du blanc et une ou deux nuances de la même couleur pour créer un jeu de couleurs entier. Maintenant, j'ai vu beaucoup de fois que les concepteurs quand ils lisent un mémoire de conception ou qu'ils parlent à un client, le client a des problèmes spécifiques de schéma de couleurs comme peut-être mon client dit que j'ai besoin d'une couleur chaude ou j'ai besoin d'un look invitant Dans mon site Web. Je veux que l'utilisateur se sente détendu et je veux qu'il soit très accueillant et excitant. Ensuite, je vais passer vers les couleurs chaudes. Ce que mon client me dit en fait que vous devez utiliser des couleurs chaudes dans votre design. C' est ce qu'il demande. Vous devez prendre soin de ce problème et vous devez vous assurer que vous connaissez la différence entre les couleurs chaudes et les couleurs fraîches. Vous pouvez voir les couleurs qui ont plus de rouge, orange et jaunâtre en eux, ils sont essentiellement des couleurs chaudes, et les couleurs qui sont vert et bleu, ils ont plus d'ombre de bleus et de verts en eux, ils sont en fait des couleurs fraîches. Chaque fois que vous sélectionnez ou baser votre jeu de couleurs, vous devez garder cette chose à l'esprit que couleurs fraîches sont en fait calmes et ils sont plus, vous pouvez dire, ils ont plus d'harmonie et ils ont plus d'intensité, ils sont des couleurs plus fortes et des couleurs stables, et les couleurs sur le côté plus chaud de la roue de couleur sont plus excitantes. Ils sont plus, vous pouvez dire amusant. Ils sont plus dynamiques. C' est la différence fondamentale. 5. Quelles sont les couleurs neutres ?: Maintenant, j'ai vu beaucoup de temps que dans les classes de design ou partout où j'ai vu une vidéo YouTube ou quelque chose comme ça, ils ne parlent pas de couleurs neutres. Chaque fois que vous concevez par exemple une interface, conception de l'interface utilisateur d'application mobile, même l'intérieur de vos chambres, vous allez utiliser beaucoup de couleurs neutres. Par exemple, je conçois pour une application mobile et je veux que l'arrière-plan de cette application soit un jaune pâle ou un bleu gris pâle. En fait, ce que je fais, c'est que j'utilise une couleur neutre. Quel est l'avantage de cette couleur neutre ? Vous avez peut-être vu que dans vos maisons sur les murs, vous voyez surtout qu'elles sont peintes avec des couleurs neutres. Pourquoi c'est ça ? La raison en est que les couleurs neutres vont effectivement agir comme la base de vous pouvez dire, étendant d'autres couleurs, par exemple, j'ai la couleur bleu grisâtre pâle sur mes murs. Maintenant, je veux une couleur d'accentuation et ces couleurs neutres vont donner beaucoup de puissance à ma couleur d'accentuation, ou vous pouvez dire ma couleur vive et vive en plus de cela. Donc, les couleurs neutres sont fondamentalement ternes et claires, et en fait, ce qu'ils font est qu'ils vont agir comme une base pour des couleurs plus vibrantes sur eux. Je vais utiliser la plupart d'entre eux comme mes arrière-plans ou peut-être mes bordures dans mon design, ou peut-être l'arrière-plan pour une image d'un modèle, peut-être comme ça. Vous avez vu beaucoup de fois ces couleurs, mais vous pourriez ne pas les reconnaître parce qu'ils sont utilisés dans une teinte très claire parfois. C' est ainsi que les couleurs neutres sont utilisées. Laissez-moi vous montrer un autre outil que vous pouvez utiliser pour obtenir ces couleurs, et c'est Picular. Ici, nous avons un outil que j'ai montré. Je vais utiliser beaucoup de temps pendant ce cours, qui est picular.co et ce que j'ai fait est, en fait, j'ai cherché le terme, design d'intérieur. Vous verrez beaucoup de couleurs vives et vives ainsi que des couleurs neutres. Ici, nous avons ces couleurs brunâtres. Ce sont les deux couleurs neutres. C' est une couleur rouge un peu forte, c'est une couleur d'accent ou une couleur vive. Ensuite, nous avons à nouveau la couleur terne, C4C4C4. Ensuite, nous avons à nouveau, couleur brun verdâtre pâle. Ensuite, nous avons encore ici, ce sont toutes différentes nuances ou tons de ces couleurs neutres. C' est à nouveau neutre et c'est encore une très belle couleur, 79767B, une belle couleur neutre grisâtre. Vous pouvez également utiliser différentes teintes ou nuances de cette couleur pour la rendre plus foncée ou plus claire. Voici comment vous pouvez voir que nous avons différentes couleurs de ces couleurs neutres. Je veux vraiment vous montrer le concept de couleurs neutres parce que j'ai vu beaucoup de designers qui juste sauter cela. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, posez-moi, passons à la leçon suivante. 6. Exemples de couleurs chaudes, Cool et neutres dans la conception UI: Permettez-moi de vous montrer quelques-uns des exemples de l'utilisation de tons chauds et froids dans différents designs de différentes applications et sites Web. Voici le premier exemple, Hermes application de fitness et vous pouvez voir contrairement à d'autres applications, il a une utilisation de couleur très chaude. Vous pouvez voir ici que nous avons des jaunes, un peu de couleurs marron crème, laissez-moi descendre, vous pouvez voir ici brun rougeâtre. Encore une fois, si nous descendons ici, nous avons un brun très foncé. C' est tout le thème de l'art. Il est lié à votre art. C' est donc un grand thème. Vous pouvez voir ici, il a un ton chaud à l'ensemble du design. Il y a peu de choses plus cool par ici comme cette minuterie par ici. C' est en fait ce que font les designers. Ils essaient en fait de mélanger chaud et avec le blues pour obtenir un peu de calmer leur design. Donc c'est comme ça qu'ils l'équilibrent. Donc, cela se produit aussi lorsque vous concevez quelque chose pour vos intérieurs. Donc, si vous concevez votre chambre ou quelque chose comme ça, vous pourriez peindre vos murs crème ou rouge ou quelque chose comme ça. Ensuite, pour vos lits et vos coussins, vous pouvez utiliser des pointillés bleus grisâtres en gris, vous pouvez dire couverture pour vos coussins. C' est ainsi que nous essayons d'utiliser. Mais dans l'ensemble, l'application entière ou l'ensemble du design ont plus tendance à un schéma de couleurs. Par exemple, s'il fait chaud, il sera plus chaud et moins frais. Voici un excellent exemple. Alors laissez-moi vous en montrer un autre. Ici, nous en avons un autre. Il a un look plus cool et calme comme vous pouvez voir les couleurs cyan ici. C' est un violet très clair ici. Vous pouvez voir tout le look est très apaisant et l'ensemble du thème est un peu refroidi thème. C' est un autre exemple. Permettez-moi de vous montrer quelques autres exemples ici, nous avons un autre exemple très bien conçu, mais l'ensemble du thème est basé sur des tons chauds. Vous pouvez voir un fond rouge très foncé, très crémeux ici. C' est donc un excellent exemple. Vous pouvez voir même les images ici, elles ont des tons très sombres, rougeâtres ou oranges-âtres. C' est essentiellement cette conception est plus axée sur les tons chauds autres que les tons froids. Donc nous l'avons ici. Laissez-moi vous en montrer un autre. C' est un autre, et ici nous avons encore une fois, utilisation d' une seule couleur, principalement verte, très foncé vert. Donc, il est encore un peu sur le côté apaisant et très sérieux, un peu sérieux et apaisant côté, donc non. Donc, ils ont également utilisé cette couleur crème rougeâtre ou couleur crème brunâtre. Donc, il est plus sur une inclinaison plus vers, vous pouvez dire rouge et vert. Alors peut-être qu'ils sont en fait, je pense, en face. Donc, les couleurs complémentaires, ils sont tous les deux opposés, mais c'est plus incliné et plus regardant vers des tons chauds. Donc c'est un autre. En fait, il a essayé de mélanger deux choses différentes, comme je l'ai déjà dit, chaudes et calmes. Donc, ils mélangent des couleurs chaudes comme fond, et la couleur de premier plan est une couleur apaisante qui est vert foncé. De même, si vous regardez celui-ci, c'est pour les hôtels. La chose que je veux te montrer ici, c'est son sérieux. Il est plus incliné vers le calme. Thèmes calmes, couleurs calmes. Vous pouvez voir ici surtout le blues et si on descend. Donc surtout le bleu. Le bleu est aussi pour, vous pouvez dire, la couleur professionnelle. Il montre que cette entreprise est sérieuse ou que cette société a une organisation professionnelle. C' est ainsi que cela a été utilisé. Nous avons donc un autre exemple : le système de livraison de nourriture. Donc, comme vous pouvez le voir, pour l'excitation qu'ils ont utilisé cette couleur orange parce que l'orange est une couleur un peu excitante et chaude. Si nous regardons ici, vous pouvez voir qu' il y a aussi des couleurs vertes très vives, qui sont peut-être, je pense que pour bio ou peut-être végétarien, quelque chose comme ça. Mais le look général ou le thème de ceci est chaud. Le design s'inclinera toujours vers un côté, qu'il s'agisse d'un design chaleureux d'un design cool ou d'un design neutre. Mais la plupart du temps, il est incliné vers un côté. C' est donc un design un peu chaud. Ici, nous avons un autre exemple de design cool et il est application d'investissement. Vous verrez que la plupart des applications ou designs liés à la finance ou des affaires ou des choses comme ça. Ils utiliseront beaucoup de bleus et ces nuances violettes beaucoup. Donc, vous pouvez voir ici est un autre exemple. C' est surtout vers le ton apaisant. Ensuite, nous avons un autre exemple. Ceci est une page d'apprentissage et c'est aussi, je pense que pour la société de finance. Ici, vous pouvez voir à nouveau la couleur bleue est proéminente. Ensuite, nous avons ce vert. Vert est fondamentalement pour la sécurité, que c'est sûr d'investir ou quelque chose comme ça. C' est pourquoi la couleur verte a été utilisée ici. Voici donc un autre exemple. Encore une fois, ce site web design est en fait design chaleureux. J' aime vraiment la façon dont ce designer a utilisé beaucoup de simplicité dans ce design, et une très bonne utilisation du ton chaud avec ce bleu terne. Je pense que c'est un peu sombre, bleu terne, bleu grisâtre. Alors j'aime vraiment ça. Design très simple et très joliment fait. Voici mon design. Vous pouvez voir, vous avez peut-être vu ces outils GP. Il est plus incliné vers le côté froid ou thème cool parce qu'il est lié aux médecins et les médecins sont principalement apparus avec ces couleurs comme cette couleur cyan bleuâtre, qu'ils portent la plupart du temps comme des chirurgiens. Donc, le bleu foncé que j'ai utilisé est pour l'entreprise ou le professionnalisme sérieux, que c'est une application professionnelle, quelque chose comme ça. Donc c'est tout. J' espère que vous avez apprécié cette leçon que la plupart des applications qu'ils vont incliner d'un côté, si ce sera un thème cool ou peut-être qu'il est un thème sombre. Peut-être que vous essayez de les équilibrer en utilisant un peu de l'autre côté. Par exemple, si vous concevez un thème chaud, vous pouvez ajouter un peu de couleur fraîche pour l'équilibrer. Donc, si vous avez des questions, n'hésitez pas à me poser, passons à la leçon suivante. 7. Théorie de la relation des couleurs: Maintenant, nous allons examiner quels sont les différents schémas d'harmonie des couleurs et comment les différentes couleurs fonctionnent réellement ensemble, et combien de types différents de combinaisons de couleurs et de combinaisons de couleurs nous pouvons réellement construire. Donc, il y a peu de règles que vous pouvez suivre pour créer un schéma de couleurs harmonieux. Avant de sauter là-dedans, je vais vous montrer que c'est en fait l'outil Adobe Color CC. Il s'agit d'un outil en ligne. C' est gratuit, vous pouvez l'utiliser pour construire vos jeux de couleurs. Avant de commencer votre jeu de couleurs, vous avez besoin d'une couleur, qui va être votre couleur de base. Donc, la couleur de base vous pouvez l'obtenir à partir du logo ou de la marque de l'entreprise pour laquelle vous concevez. Ou peut-être que si vous concevez vous-même le logo, vous pouvez sélectionner la couleur en fonction du thème. Par exemple, si vous êtes fort ou amusant ou quelle que soit la couleur. moment, j'ai sélectionné ma couleur de base pour être celle-ci, 3E4F87, 266 teinte, 54 saturation, 53 luminosité. ce moment, c'est quelque part par ici. La première harmonie des couleurs ou le premier jeu de couleurs que vous pouvez créer, vous l'avez déjà créé et qui est monochromatique. Monochromatique signifie que nous allons utiliser une seule couleur. Nous allons ajouter quelques teintes, nuances et tons de la même couleur, nous allons les utiliser et créer un schéma de couleurs. Donc, ce schéma de couleurs, qui est basé sur une seule teinte, et différentes saturation et luminosité, il va être monochromatique. ce moment, ce que vous voyez est en fait monochromatique. Donc, si vous voulez juste n'importe quelle couleur ici, vous pouvez cliquer dessus et vous pouvez utiliser ces curseurs. Vous pouvez voir que la teinte reste la même, qui est la barre supérieure ici, deux derniers sont en fait la saturation et la luminosité. Si tu veux bouger quelque chose comme ça, tu peux le faire. Vous pouvez créer des jeux de couleurs comme celui-ci. C' est en fait notre monochromatique et il peut fonctionner efficacement sur n'importe quelle conception d'interface utilisateur. Vous n'avez donc pas besoin d'utiliser trop de couleurs ou trois ou quatre couleurs très vibrantes pour montrer vos différentes actions possibles sur vos écrans. Il y a encore une chose, vous pouvez également sélectionner votre jeu de couleurs à partir de votre image, vous pouvez importer le graphique ou l'image ici. Utilisons celui-là. Il va choisir différentes couleurs d'ici, vous pouvez voir ce sont les couleurs qui ont été utilisées dans ce jeu de couleurs et sur cette image. Maintenant, nous allons revenir à notre roue de couleur et vous pouvez voir que c'est comment ils ont réellement utilisé le, il est en fait espacé les couleurs dans le même espace, vous pouvez voir un peu de rouge orange, et orange, et bleu. Donc ce sont les couleurs qui ont été utilisées, rouge rosé. Passons à un autre schéma de couleurs qui est analogue. Analogues signifie que les couleurs qui sont plus proches sur la roue de couleur, vous pouvez combiner une ou deux ou trois couleurs qui sont plus proches à l'intérieur de votre jeu de couleurs et construire un schéma de couleurs basé sur cela. Ils vont donc travailler harmonieusement. Si j'essaie de déplacer la couleur de base ici, vous pouvez voir, par exemple, si j'essaie de choisir une couleur de base dans les verts ou peut-être un peu de jaune. Donc, verts et orange, donc mon schéma de couleurs est fondamentalement analogue et j'ai sélectionné ma couleur de base, qui est celle-ci, le vert moyen. Nous avons l'équilibre des deux couleurs jaunâtres, vert jaunâtre, couleur orange, et aussi les teintes vertes pures. Maintenant, si vous voulez l'ajuster, n' essayez pas d'utiliser quelque chose comme ça. Vous pouvez l'ajuster, vous pouvez le déplacer comme ceci, donc il se déplace en fait vers un ton plus gris. Vous pouvez voir que ça rend ça ennuyeux. Donc ici, nous avons blanc, puis ici nous avons gris. Vous pouvez également utiliser celui-ci pour le rendre lumineux ou sombre comme celui-ci. Peut-être que je veux une couleur foncée dedans, et je veux quelques nuances claires dedans, quelques tons ternes dedans. Chaque fois que vous construisez un schéma de couleurs, il y a un conseil que je vais vous donner tout de suite et vous devriez écouter attentivement. Que nous n'utilisons pas toutes les couleurs de la même netteté ou luminosité. Si cette couleur est très brillante, je veux quelque chose de terne ou de sombre pour mon arrière-plan. Parce que je veux que ça apparaisse sur ce fond. De même, je ne vais pas utiliser toutes les couleurs brillamment, ils vont, je pourrais avoir des couleurs ternes ou quelque chose comme ça. Ça va être mon jeu de couleurs. Voici un autre outil, que j'aime vraiment. C' est un outil en ligne, je vais montrer l'URL ici, approvisionnement en couleur, je pense. Vous pouvez voir ici, j'ai sélectionné un schéma de couleurs analogue comprenant de ceux-ci. Donc si j'essaie de le déplacer ici, vous pouvez voir que c'est comme ça que je me déplace dans les couleurs, différentes couleurs. Essayons cette orange, jaune et vert. Lorsque je sélectionne cet analogue, vous pouvez voir qu'il va me donner quelques plus sombres, mélange de plus sombres, et quelques nuances ternes et des tons et des teintes. Je vais en choisir un qui, je pense, fonctionnera bien, par exemple, comme ça. Ça a l'air vraiment génial. Vous pouvez voir qu'il montre les exemples d'utilisation de ce jeu de couleurs, vous pouvez voir qu'il est essentiellement pour la conception d'icônes, mais vous pouvez l'utiliser dans votre conception Web ou conception d'interface utilisateur. Vous pouvez voir si j'essaie d'utiliser ce schéma de couleurs, c'est le look et la sensation qui va provenir de la combinaison de ces couleurs. Comme vous pouvez le voir, fond est un peu terne, mais la couleur jaune sur le dessus est très brillante et nette. C' est le schéma de couleurs analogue. Maintenant, passons à un autre qui est la triade. Triade est en fait un triangle parfait sur votre roue de couleur. En haut, nous avons le rouge et vous pouvez voir après trois couleurs ou trois sauts, c'est en fait une couleur suivante. Donc, après toutes les trois couleurs, de sorte que l'espace sera similaire dans chacun d'entre eux. Si j'essaie d'utiliser celui-ci, essayons d'utiliser celui-ci. C' est plus vibrant et ont beaucoup de contraste dans toutes ces couleurs parce qu'ils sont séparés de beaucoup d'angle. Si les couleurs sont plus proches les unes des autres, elles ont moins de contraste. Autant qu'ils s'éloignent les uns des autres, par exemple, s'ils sont totalement opposés, ils ont plus de contraste. S' ils ont comme séparés par deux sauts ici, ils ont moins de contraste. Alors répondez à votre demande, tout ce que vous voulez dans votre jeu de couleurs. Vous voulez beaucoup de contraste ? Ou voulez-vous un contraste subtil dans vos combinaisons de couleurs ? Donc triade est en fait, vous pouvez voir un triangle, triangle parfaitement espacé sur la courbe. Maintenant, passons à la division gratuite. Avant cela, disons que j'utilise ce complément. Donc schéma de couleurs complémentaires, que je pense que vous devriez surtout utiliser, est en fait totalement deux couleurs opposées sur une roue de couleur. Ils auront beaucoup de contraste, par exemple, ce bleu et orange, ou ce bleu et orange plus foncé. Si j'essaie de sélectionner, voyons, je vais utiliser celui-ci. Donc, vous pouvez voir que c'est en fait à quoi ils vont ressembler. J' aimerais vraiment tonifier une couleur, alors utilisons-nous celle-ci. Ça a l'air vraiment génial. Vous pouvez voir que c'est à quoi ils ressembleront si nous essayons de construire icônes sur ce jeu de couleurs basé sur ce schéma de couleurs complémentaire. Complémentaires signifie qu'ils sont totalement opposés sur une roue de couleur. Il pourrait être rouge ou vert. Vous pouvez le voir dans la conception universelle de l'interface utilisateur. Le rouge est pour la suppression ou l'annulation, et le vert est pour le succès. Ce sont des couleurs totalement opposées. De même, bleu et orange, j'ai vu beaucoup de schémas de couleurs les utilisant. Ensuite, nous avons cette couleur verte et magenta. Ensuite, nous avons cette couleur jaune orangé et cette couleur sarcelle siano, type sarcelle quelque chose de couleur. Ce schéma de couleurs, j'aime vraiment l'orange et le bleu se différencie. Ce sont deux combinaisons en fait un et deux, et j'aime vraiment celle-là. Ce sont deux de mes couleurs préférées. Cette couleur bleuâtre foncé, pourpre, et la couleur orange. Tout cela est une question de gratuité. Passons à la suivante, qui est split-complémentaire. Tout est le même gratuit. Donc, vous pouvez voir que c'est la couleur rouge maintenant, c'est exactement les opposés devraient être verts. Mais en fait, nous nous sommes déplacés à droite et à gauche vers cette couleur complémentaire. Il ne va pas avoir beaucoup de contraste, mais avoir encore beaucoup de contraste. Il aura trois couleurs, donc plus de variété en elle. Choisissons celui-ci ou celui-ci. Donc vous pouvez voir, j'essaie ce jeu de couleurs, et essayons celui-ci. Donc celle-là a l'air bien. Vous pouvez voir que j'ai sélectionné ce jeu de couleurs complémentaires. Ce sont les icônes qui peuvent être utilisées ou c'est ainsi que vous pouvez utiliser différentes couleurs dans ce jeu de couleurs, et il ne va pas avoir beaucoup de contraste, mais toujours comme les couleurs complémentaires, mais encore beaucoup de contraste. En outre, vous pouvez voir une chose de plus que les couleurs en bas, ils sont presque plus proches les uns des autres. Donc, ils vont agir plus principalement comme un schéma de couleurs analogue. Ils ont une certaine compatibilité. Cette couleur, nous pouvons utiliser pour le contraste. Maintenant, dans la dernière, je vais vous montrer ce schéma de couleurs carrées ou double complémentaire parfois les gens disent qu'il y a deux couleurs complémentaires comme il y a le rouge et le vert et le bleu et l'orange. Donc, en fait, c'est split- complémentaire. On va le déplacer ici comme ça. Donc, vous pouvez voir en ce moment ici en bas, il est vraiment cool parce que nous avons quatre couleurs maintenant pour jouer avec. Sélectionnons celui-ci, et vous pouvez voir que c'est ainsi que cela va produire des icônes et des mécènes, et c'est ainsi qu'ils vont être utilisés. Si vous allez, par exemple, construire un tableau de bord où nous avons des notifications, où nous avons des messages d'erreur, où nous avons beaucoup de choses, alors nous allons nous en tenir à ce type de schéma de couleurs où nous presque quatre couleurs pour différentes choses et différentes actions. En outre, vous pouvez les dater et si vous le voulez, vous pouvez utiliser quelque chose comme ceci ou quelque chose comme ça et l'utiliser aussi dans votre jeu de couleurs. La plupart du temps, les concepteurs d'icônes ou peut-être des illustrateurs, ils ont besoin de beaucoup de couleurs, différentes couleurs vives, différentes couleurs ternes pour compléter l'illustration. Mais dans la conception de l'interface utilisateur ou la conception web, nous pouvons facilement concevoir n'importe quelle interface, n'importe quoi avec seulement une ou deux couleurs maximum. Alors gardez ça à l'esprit. Il s'agit de différentes harmonies de couleurs. Je vais vous montrer les exemples dans la prochaine leçon, comment et où vous pouvez utiliser et où ces différents jeux de couleurs ont été utilisés. Passons à la leçon suivante et voyons quelques exemples. 8. Exemples Examples des couleurs: Maintenant, laissez-moi vous montrer comment j'ai créé quelques jeux de couleurs dans le passé, et c'est l'un des exemples, laissez-moi vous montrer. Vous pouvez voir ceci est un site Web et il est sur une signalisation numérique multimédia et différents appareils numériques et générateur de caractères signes numériques en fait. En fait, j'ai repensé ce schéma de couleurs total et tout et en gardant la plupart de la mise en page la même. Vous pouvez voir ici vous voyez ce bleuâtre partagé puis le stock, noir, rouge. Ensuite, vous voyez un peu grand l'arrière-plan. Ensuite, si vous allez par ici, vous pouvez voir que c'est bleu foncé, c'est un peu bleu clair, et si vous passez la souris dessus, vous voyez une couleur jaunâtre. C' est en fait l'ensemble du schéma de couleurs, il a le rouge, le bleu et le jaune. Laissez-moi vous montrer, j'ai copié différentes valeurs d'ici et je vais vous montrer comment j'ai conçu ce jeu de couleurs et à quoi il appartient réellement, c'est à quelle méthode d'harmonie de jeu de couleurs appartient. Laisse-moi te montrer. Nous sommes de retour à Adobe color CC et c'est en fait notre couleur de base, c'est la couleur de base que j'ai commencé avec. C' est 214U en fait, et vous pouvez voir que c'est presque plus proche d'essayer d'ajouter un schéma de couleurs. C' est un triangle parfait. Il est rouge, jaune sur le côté et bleu sur le côté. Ceci est en fait triade schéma de couleurs et vous pouvez voir au milieu celui-ci, alors nous avons un autre ton ou vous pouvez dire ombre de celui-ci, réduisant un peu la saturation et augmentant effectivement la luminosité de celui-ci. C' est fondamentalement une entaille. C' est une couleur claire de base avec un peu moins, vous pouvez dire la netteté ou la saturation. Ensuite, nous avons cette couleur rouge, c'est une couleur rouge un peu plus foncé, peut-être pour la force parce que c'est une organisation et c'est une organisation très ancienne. Ensuite, nous avons ce jaune pour l'excitation, peu des liens que j'ai utilisés peut-être que je voulais qu'il soit cliqué et je voulais avoir un bon effet quand quelqu'un passe au-dessus d'eux. C' est la couleur que j'ai sélectionnée. C' est encore une fois, en fait très proche U à 214, un peu différent, comme 10 ou 14 ou 16 un peu changer. En fait, c'est ainsi que j'ai créé tout ce schéma et j'ai appliqué. Il y a plus de couleurs dedans, mais ils sont principalement les actions et tendu hors de cette couleur bleue. Les seules couleurs qui sont contrastées sont en fait ce rouge et jaune. Laisse-moi te montrer. Maintenant, c'est une roue de couleur et c'est en fait le schéma de couleurs triades que j'utilise le rouge, le bleu et le jaune. Rouge, bleu, jaune mais je choisis différentes nuances, teintes du même schéma de couleurs. N' essayez pas d'utiliser les mêmes couleurs pures comme celle-ci. C' est un exemple. Permettez-moi de vous montrer d'autres exemples. Voyons un autre exemple de schéma de couleurs monochromatiques. Ceci est en fait en utilisant juste une seule couleur, qui est en fait la couleur jaune et si vous regardez cela, vous pouvez voir ici nous avons juste un soupçon de couleur rouge. Le rouge est en fait cette couleur de marque de l'organisation et ce designer, il a en fait choisi la couleur jaune, qui est je pense que trois ou quatre arrêts loin de cette couleur rouge et si nous descendons, vous pouvez voir qu'il utilise juste du jaune, un peu partagé nuance plus foncée de jaune c'est bon. C' est toujours monochromatique. Encore une fois, une nuance terne ou un ton de cette couleur jaunâtre. De même, ici, quelques extrémités claires de jaune et une couleur orange jaunâtre et c'est tout. Fondamentalement, il est rouge, qui est déjà là la couleur de marque et le jaune. Jaune est effectivement utilisé ou entier sur ce site et une autre chose que je veux mentionner ou de l'air, si vous regardez cette partie, jaune, blanc et noir, ils ont beaucoup de contraste. Vous pouvez voir ce noir est de lancer noir et jaune et blanc sur eux sont vraiment excitants, une des couleurs très vibrantes. C' est en fait, vous pouvez dire, ce concepteur a pris ces couleurs sur la base de cela. Vous pouvez voir si vous regardez les relations générales durables, succès mondial sont des relations durables J'ai une certaine excitation pour elle, peut-être qu'ils veulent que leurs clients aient de l'excitation et de l'intérêt, quelque chose comme ça, peut-être créatif solutions. C' est un très beau schéma de couleurs, juste en utilisant le jaune. Vous pouvez le faire aussi. Voyons d'autres exemples. Voici une très grande application conçue par un concepteur et je ne me souviens pas. Quoi qu'il en soit, ce que je veux vous montrer ici, c'est à nouveau un schéma de couleurs triadiques utilisant le bleu, le rouge et le jaune. rouge est effectivement utilisé ici pour annuler l'appel à ces actions, mais surtout il est fortement, la couleur la plus utilisée est cette couleur bleue, sombre, violet bleuâtre et puis nous avons un ton vers le bas très terne ombre grisâtre couleur bleue par ici. Ensuite, nous avons cette orange, qui est liée à cette couleur rouge ici. Ici vous pouvez voir à droite ici, si je le fais glisser comme ça, vous pouvez voir ici nous l'avons dans cette icône de carte ici. Ensuite, nous avons le jaune utilisé ici. Vous pouvez voir ici dans cette zone, juste estimation, $12 et jaune. Donc, la couleur jaune est très brillante et le bleu est un bleu terne. Ceci est un autre exemple d'utilisation de couleurs ternes et ternes, et de mélange des couleurs vives et nettes avec des couleurs ternes. Ils vont apparaître sur le fond terne. Un autre schéma de couleurs, c'est à nouveau un schéma de couleurs triadiques. Maintenant, laissez-moi vous montrer un exemple de schéma de couleurs analogues ici nous avons ce site natuur et milieu, peu importe ce qu'il est, de toute façon il est des Pays-Bas. Vous pouvez voir ou entendre. Maintenant, ils ont toutes les couleurs qui sont en vert bleuté et Sian ou sarcelle et vous pouvez voir vert, deal, bleu et c'est tout. Donc, en fait, le thème est la nature donc ils sont restés dans la nature, qui est l'eau bleu et les arbres verts. Tout ce qu'ils vont couleurs. Tout est similaire à cela. Vous pouvez voir en haut qu'ils utilisent des couleurs très claires denses et très sombres de la même nuance, même couleur, même teinte pour créer ceci, je pense que cette bannière cookie ici. Laissez-moi vous montrer comment cela fonctionne réellement et comment un autre exemple de celui-ci. Ceci est une autre lueur de design avec le nom de la lueur. Il utilise également un schéma de couleurs qui est monochromatique principalement, et juste une couleur qui va être une couleur complémentaire. Il est en fait le mélange de schéma bicolore. Pourquoi je te montre ça ? Parce que dans la plupart des conceptions qui ont vu et les concepteurs en fait, ils ont essayé de mélanger deux schémas de couleurs. Ils ont essayé d'utiliser monochromatique, qui est en fait vous pouvez voir le vrai secret derrière lui que vous essayez de choisir une couleur et essayer de créer des nuances différentes et différentes, vous pouvez voir différentes nuances plus foncées, différents tons de la même couleur, et ajouter du plaisir ou deux couleurs dans celle pour le contraste. Vous pouvez voir ici, la plupart des couleurs ordre k, c'est la même couleur utilisée partout ici et si je clique et fais glisser, vous pouvez voir, allons vers le bas. Ici, nous avons la couleur rouge très foncé. Vous pouvez voir le bleu et le rouge, et ils ont l'air carré. Ensuite, nous avons cette couleur verte qui est utilisée frais généraux très mineurs, mais il est en fait pour le contraste. S' ils essaient d'utiliser la même couleur ici, il ne va pas attirer l'attention. Cette couleur de bouton est la même. Il est cohérent comme l'action primaire. Glissons juste celui-là. Vous pouvez voir que les boutons sont de la même couleur, mais ils ont utilisé certains travailleurs comme vous pouvez voir la couleur orange ici pour des commentaires vérifiés. Juste pour montrer que cet article est différent, nous voulons votre attention ici. Ceci est un très bel exemple d'utilisation d'un schéma de couleurs monochromatique et complémentaire, ayant certains, ajouter un peu plus de couleur au schéma de couleurs monochromatiques juste pour attirer l'attention. Maintenant, je vais partager avec vous un schéma de couleurs analogues plus populaires, qui est le bleu et les verts. Je l'ai vu beaucoup de temps dans différentes interfaces et je vais vous montrer certains des sites Web. instant, vous pouvez voir que c'est un autre site Web. Je pense. Il s'agit d'une plateforme de croissance d'entreprise de toute façon lueur. Vous pouvez voir ici qu'ils ont vert bleuâtre. Quoi qu'il en soit, c'est un schéma de couleur bleu sarcelle. J' adore vraiment ça. Très gentil. Vous pouvez voir le bouton vert est en fait bien sur cette couleur bleuâtre foncé ici et si je descends, vous pouvez voir la plupart de leurs couleurs. Ils sont surtout verts. Allons vers le bas. Encore une fois, vous pouvez voir la couleur violette bleuâtre et le vert et si nous descendons à nouveau, le même contraste de couleur est un très beau dégradé. Je vais vous montrer où en fait il a été utilisé plus, voyons un autre exemple. C' est Gleam lavage de voiture. Vous pouvez voir à nouveau dans leurs photos en fait ils utilisent une seule couleur, cette couleur vert jaunâtre très nette, peut-être quatre là-bas. Ils veulent montrer ce produit vert ou quelque chose comme ça. Mais vous pouvez voir, si vous regardez fermer l'image, la suivante, vous pouvez voir les yeux en utilisant des bleus ou ici dans le fond dans leur ensemble à la plupart du temps bleus et verts, bleus et verts. C' est un autre contraste. Beaucoup de fois, je l'ai vu blues et greens. Mais en ce moment, ils le sont. La plupart des sites Web sont en fait monochromatiques. C' est l'exemple que je vous ai montré avant, page d'accueil Gleam. C' est de Marius. Pas de jokers et j'adore ça. Très simple, très efficace. Vous pouvez voir que c'est plus sombre, couleur rose rougeâtre utilisé ici. Il est en fait, vous pouvez dire très avoir beaucoup de contraste sur ce domaine ici. Ensuite, nous avons ceci, une couleur orange pâle, mais sur le blanc il va regarder, je vais avoir beaucoup d'attention. C' est tout. La plupart du temps monochromatique que dans ce Designer Edit vulnérable plus de couleurs pour avoir un certain contraste. Cette application que je vous ai déjà montré, c'est de conçu par Mahomet icône magique. Vous pouvez voir au-dessus le jaune, ce bleu, et ce jeu de couleurs triadiques rouge. J' adore vraiment ça. Très bien fait les devoirs par le djihad. Il a, je pense, 11 444 vues. Je pense que ça a l'air très propre. Quoi qu'il en soit, c'est ainsi que les exemples de différents schémas de couleurs complémentaires vendredi. Ensuite, nous avons analogique, monochromatique, tous ces différents schémas de couleurs, schémas de couleurs complémentaires. J' ai vu qu'ils sont principalement bleus et oranges. Je l'ai vu beaucoup de fois en ce moment. Je n'ai pas d'exemple. Peut-être que si je l' ai fait, je te le montrerai. Jusque-là, à bientôt dans la leçon suivante. 9. 1re choix de projet première couleur: C' est le moment de votre première affectation. Ici, c'est. Votre première affectation est que vous allez sélectionner une seule couleur pour n'importe quel jeu de couleurs. Je vais vous donner la mission dans la diapositive suivante. Quelle est votre mission ici ? Encore une fois, première couleur, en sélectionnant votre première couleur et comment vous allez le faire. Je vais vous donner quelques conseils. Voici la mission, Pickup est une entreprise de livraison de nourriture et vous allez sélectionner votre première couleur qui fonctionnera pour cette entreprise. Vous allez aussi me dire la raison pour laquelle vous avez choisi cette couleur donc c'est encore une question de psychologie des couleurs. Je vais vous montrer cet outil qui vous aidera à choisir votre première couleur et qui est picular.co. Picular.co vous pouvez voir ici c'est l'outil et vous allez sélectionner n'importe quelle couleur, par exemple, la nourriture, le pick-up, quelque chose comme ça. Il va vous montrer plusieurs couleurs. Je vais attendre votre sélection de couleurs et je vais également vous demander pourquoi vous avez choisi cette couleur comme couleur principale dans votre jeu de couleurs. Ça va être votre couleur primaire. La couleur principale est que va fonctionner dans votre jeu de couleurs. J' ai apprécié cette mission. J' attendrai votre mission, qui est la première, en choisissant votre première couleur. Commençons et commençons à créer nos superbes jeux de couleurs. 10. Les secrets de la création des tons: Dans cette leçon, je vais partager avec vous mes secrets de création d'ombre, de teintes et de tonalité d'une même couleur et comment vous pouvez utiliser la même technique que j'utilise pour créer efficacement vos combinaisons de couleurs. Le premier que nous allons couvrir, ce sont les nuances. L' astuce pour créer de belles nuances est que vous allez garder la même teinte et ajouter du noir. Mais, vous allez faire deux choses en fait. Chaque fois que vous créez une nuance, vous allez réduire la luminosité et augmenter la saturation. Alors écoute-moi encore. Réduisez la luminosité et augmentez la saturation. Donc, cela va créer une très belle nuance. Si vous voulez vraiment une couleur très terne, vous pouvez garder la même saturation et juste réduire la luminosité. Maintenant, vous pouvez voir en bas que j'ai créé quatre nuances différentes de cette teinte gauche qui est 218 degrés ou 218 et vous pouvez voir sur la droite, j'ai 70 pour cent de saturation et 70 pour cent de luminosité. Donc, en fait, ce que je fais est de réduire la luminosité et d'augmenter la saturation. De même augmenter la saturation dans la prochaine 75 pour cent et 40 pour cent de luminosité, je le réduit, augmentant la luminosité sur la couleur noire. Il n'est pas en fait noir, c'est une nuance sombre du même bleu. La saturation est de 80 pour cent et la luminosité de 25 pour cent. C' est donc une astuce très soignée pour créer vos nuances. Voyons où vous allez trouver ces nuances. Vous allez les trouver dans cette section de votre sélecteur de couleurs. Donc, au fond, nous avons plus de noir ajouté à la même couleur. Sur la droite, nous avons plus de saturation. Sur la gauche, nous avons moins de saturation. Alors gardez ça à l'esprit. Au milieu, nous avons une saturation moyenne, c'est à 60 pour cent. Donc de gauche à droite, je suis à 60 pour cent en ce moment. Voici comment vous allez trouver vos nuances dans cette section de votre sélecteur de couleurs. Quel que soit l'outil que vous utilisez, il sera similaire à celui-ci. Maintenant, créer des tons. Ici vous pouvez voir que j'ai créé différents tons de la même teinte, qui est 218 et bleu et vous pouvez voir sur la droite, J'ai créé trois tons différents de la même, cette teinte bleue. La technique que j'ai utilisée est que j'augmente lentement la saturation et que je diminue beaucoup la luminosité. Donc nous avons besoin d'une couleur terne dans quelque chose comme 58 pour cent de luminosité, 42 pour cent de luminosité et j'augmente en fait la saturation. En fait, je manipule ces couleurs et la luminosité et la saturation pour créer un ton de gris délavé pour cette teinte bleue. C' est ainsi que je crée mes tons. Laissez-moi vous montrer la zone que vous allez trouver sur votre sélecteur de couleurs pour les tons. C' est la section où vous allez trouver la plupart de vos tons dans la zone grise. C' est ainsi que je crée mes tons. Je me déplace dans cette section pour trouver la couleur que j'aime le mieux. Parlons un peu plus en détail des teintes et quelle est la formule que j'utilise pour créer des teintes différentes. Donc même teinte et nous allons ajouter du blanc ou augmenter la luminosité ou augmenter la légèreté. Donc ici, j'ai quatre couleurs en bas et vous pouvez voir de gauche à droite, je fais en fait deux choses. Encore deux choses. Encore deux choses. Tu dois garder ça à l'esprit. Ce que je fais, c'est que je réduit la saturation et augmente la luminosité. C' est la même chose que vous allez faire lorsque vous créez des teintes. Donc saturation, 60 pour cent, 30 pour cent, 12 pour cent et vous pouvez voir la luminosité est à 100 pour cent et il augmente, 90 pour cent, 100 pour cent, 100 pour cent. C' est ainsi que vous allez créer des teintes efficaces pour votre design et votre palette de couleurs. Maintenant, chaque fois que vous utilisez un sélecteur de couleurs, vous allez trouver des teintes dans cette zone de vos zones de couleurs. Essayez donc de scanner, déplacez-vous dans cette section pour trouver la teinte que vous aimez ou que vous voulez créer. Vous pouvez aller dans le coin supérieur gauche pour trouver les couleurs qui sont très proches du blanc. Parfois, nous avons besoin d'une couleur qui est très proche du blanc et un peu de gris pour nos arrière-plans. Donc, chaque fois que je conçois un laboratoire mobile ou des sites Web, j'ai généralement tendance à utiliser une couleur blanche grisâtre bleuâtre. En fait, ce que je fais c'est que je suis dans le coin supérieur gauche et j'essaie de trouver une couleur qui a un peu de bleu, beaucoup de blanc, et un peu de gris. Donc, pour créer une très belle couleur qui peut agir comme un fond et ne pas distraire mes yeux ou mes utilisateurs yeux. C' est tout pour cette leçon. Si vous avez des questions, demandez-moi. J' espère que vous avez apprécié cette leçon. A bientôt dans la prochaine leçon. 11. 101 psychologie de couleur: Parlons maintenant de la psychologie des couleurs. Maintenant, j'ai vu beaucoup de designers qu'ils ne savent pas quelle couleur est réellement accordée à quel but. Donc, chaque couleur ou chaque thème de couleur que vous avez, il va avoir des effets psychologiques sur vos utilisateurs ou vos spectateurs de ce design. Nous allons donc parler de ce que sont ces différentes couleurs et de ce qu'elles signifient réellement et pourquoi vous devriez les sélectionner. Alors commençons. Le premier, mon blues préféré. Maintenant, pourquoi vous voyez qu'il y a beaucoup d'utilisation du bleu dans l'industrie de la conception de l'interface utilisateur, vous avez vu beaucoup d'applications mobiles, vous avez vu beaucoup d' autres sites Web ou pages d'apprentissage qui utilisent le bleu parce que c'est la couleur la plus sûre. Il est aimé par les hommes et les femmes et il est justifiable, donc il développe réellement la confiance. Il est fiable, il est fort, il montre qu'il s'agit d'un site Web professionnel ou c'est une application professionnelle. C' est en fait les effets psychologiques du bleu. Maintenant vert. Vert vous savez déjà que tous nos arbres et toute notre verdure qui est autour de nous est vert, donc il est lié à la croissance et la santé et la prospérité, la tranquillité parce que le vert est en fait une couleur pacifique. Il est lié aux arbres, la croissance, aux feuilles, donc c'est tout. Si votre équipe est en fait liée à médecine ou à la médecine ou quelque chose comme ça ou peut-être un produit biologique ou peut-être un produit lié à la santé, vous pouvez utiliser le vert comme couleur principale de votre marque ou votre couleur principale dans votre application. Maintenant, vous savez déjà que le jaune est en fait une couleur chaude, donc il est plus lié à la chaleur, clarté parce que le jaune est la couleur de votre lumière du soleil. Le soleil est très jaune, on ne peut même pas le regarder. Donc le jaune est, en psychologie humaine, il est lié à la clarté, l'optimisme, chaleur parce que le jaune est notre couleur de soleil la plus chaude et il est lié au soleil. Ce sont quelques choses qui sont liées au jaune. Gardez à l'esprit que lorsque vous passez aux couleurs chaudes comme l'orange et le jaune, ce sont surtout des couleurs passionnantes. Ils ont des couleurs plus vibrantes en eux, alors gardez cela à l'esprit aussi. Encore une fois, vous pouvez voir pour le rouge, encore une fois c'est excitant parce qu'il est sur le côté chaud. Les rouges, les oranges et les jaunes, ils sont des couleurs plus excitantes, c'est pourquoi ils sont utilisés dans l'industrie alimentaire. Vous avez vu McDonald's, ils n'utilisent que des jaunes et des rouges. C' est leur décision, conçue pour voir et obtenir ces couleurs pour obtenir un peu d'excitation qui se passe dans les niveaux de nourriture ou tout ce qu'ils ont en tête. Il est également lié à la jeunesse parce qu' il montre plein d'énergie ou quelque chose comme ça. C' est une couleur audacieuse et quelque chose courageux ou audacieux comme ça. Ce sont quelques caractéristiques des traits de psychologie qui sont liés aux couleurs rouges. Maintenant, de couleur pourpre ou violette, ils sont plus liés à la créativité, à la sagesse et à l'imagination. Si vous voyez la plupart de mes sites Web et chaque fois que je conçois principalement, mes couleurs, que j'essaie alors de choisir sont une nuance de violacé, bleu et jaune ou oranges jaunes. Donc orange est pour la créativité, l'excitation et ce bleu violacé est en fait pour la fiabilité et la sagesse et la créativité. En fait, j'essaie de construire mon équipe autour de ça. Si vous utilisez des couleurs comme ça, vous devez comprendre ce qu'elles signifient réellement afin que vous puissiez les utiliser correctement. Suivant est la couleur orange. Orange est en fait une couleur amicale et il est gai et il montre de la confiance. Vous avez peut-être vu que la plupart des sites Web qu'ils utilisent l'orange et bleu comme leurs couleurs principales parce que c'est la raison. C' est une couleur invitante, sorte que vous pouvez voir amical, par exemple, je veux que mon design soit amical, je veux une couleur invitante, je vais utiliser un bouton orange ou appel à l'action ou mon principal bouton de page d'accueil. Par exemple, appelez-moi ou téléchargez cette copie, ce PDF ou quelque chose comme ça. C' est une couleur amicale, joyeuse et parce qu'elle est excitante, c'est pourquoi elle est joyeuse. Troisièmement, il est lié à la confiance, qui est également liée à une couleur bleue. Le bleu est également fiable, donc c'est tout au sujet de la couleur orange. Maintenant, parlons de couleur noire. Le noir est principalement lié aux produits de luxe et si vous regardez différentes marques de luxe comme Apple et tous les autres, ils ont principalement des gris et des noirs dans les logos. Vous pouvez voir que le logo Apple devient noir et ils ont aussi beaucoup de gris. C' est en fait montrer la force, le sérieux, le produit de luxe. En outre, beaucoup de marques de mode, ils ont utilisé beaucoup de noir sur leurs sites Web et dans leur marketing de produits et quelque chose comme ça. La plupart du temps, il va être lié au luxe et à l'image de la marque. Que cette marque est une marque de luxe ou qu'il s'agit d'une marque haut de gamme ou quelque chose comme ça. Donc, ce sont différents traits psdsychology qui sont liés au noir, comme l'audace , il a tiré, puis mystère , formalité, tendances, luxe et sérieux. Si vous concevez pour un produit qu'ils veulent un look très luxueux ou qu'ils en veulent un, très haut de gamme look, alors vous allez utiliser beaucoup de couleurs noir foncé sur leur site Web ou applications mobiles. Le dernier, on va parler de couleur blanche. Le blanc est principalement lié à la paix et à la pureté et il est également lié à la propreté, l'innocence, le confort et l'espoir. Si vous concevez pour une ONG ou quelque chose comme ça, vous pouvez utiliser cette couleur beaucoup. Aussi dans la conception, si vous utilisez le blanc comme arrière-plan, cela va vous donner beaucoup d'espace. Si vous voulez utiliser beaucoup d'espaces, vous allez ajouter beaucoup de blanc ici. En fait, il va agir comme un arrière-plan et il vous donnera un look propre. Vous pouvez voir qu'il est déjà lié à la propreté, donc si vous voulez un aspect propre, vous allez utiliser beaucoup d'espaces autour de votre objet. La couleur blanche est principalement utilisée pour vos arrière-plans, si vous voulez un fond sombre et que vous voulez utiliser un bouton blanc dessus, vous pouvez le faire aussi. J' espère que vous avez apprécié cette leçon, si vous avez des questions, n'hésitez pas à me poser. Passons à la leçon suivante. 12. Psychologie des couleurs Gender genre: psychologie a une autre perspective qui est quelle couleur est comme par, quel genre ? Si vous concevez un site Web pour les hommes, les enfants ou les femmes, vous devez prendre soin des couleurs que vous utilisez, vous devez savoir quelles couleurs sont appréciées par les hommes et quelles couleurs ne sont pas appréciées par les femmes, des choses comme ça. abord, nous allons parler de ce qui sont différentes couleurs psychologiques qui sont mortelles, aimé par différents genres. Commençons par les hommes, et les hommes surtout comme cette couleur bleue, verte, noire et rouge, ils vont surtout aimer les couleurs fortes, vous pouvez voir le bleu, les verts, le noir, le noir est très audacieux, rouge est très audacieux, ces couleurs sont appréciées par les hommes. Les couleurs les plus appréciées par les femmes sont la couleur bleue, puis la deuxième est le violet, le vert et le rouge. Gardez à l'esprit que les couleurs sont en fait sont en fait de la recherche, les couleurs que vous voyez et ont plus la hauteur, il est en fait le plus aimé par la femme, comme vous pouvez dire 40 pour cent femmes qu'ils aiment le bleu, puis 30 pour cent comme ça, violet à des choses comme ça, vous devez garder à l'esprit que ce n'est pas seulement une présentation graphique, cela signifie en fait que ces couleurs sont plus aimées et ces causes sont moins appréciées par les femmes. Une chose que vous avez vu en commun que la couleur bleue, elle est appréciée à la fois par les hommes et les femmes, c'est pourquoi elle est utilisée dans la conception de l'interface utilisateur ou des applications mobiles ou la conception Web comme une couleur standard, c'est la raison derrière elle. Les hommes ont réellement aimé des couleurs plus vives et vives qui ont plus de vibrations en eux, en gardant à l'esprit que si vous concevez un produit qui a besoin d'attention des hommes vont utiliser des couleurs vives vives, bleu, orange, vert et rouge, vert, rouge et bleu, ils sont tous les deux comme par les hommes et les femmes. Contrairement aux hommes, les femmes ont surtout aimé les couleurs douces, plus doux signifie que les couleurs pastel douces qui sont en fait, vous pouvez dire, pas très pointu ou très lumineux, ils ont un ton très moyen, de type très pastel. Regardez, vous pouvez voir ces couleurs que j'ai montrées ci-dessous, elles ont un toucher très doux et des couleurs douces, elles ne sont pas très vibrantes, elles ne sont pas très lumineuses ou très nettes ou très, ont trop de saturation. Voici comment vous allez concevoir si vous êtes en train de concevoir, en particulier pour une application pour femme ou pour femme NAB ou produit pour femme, contrairement aux femmes, les hommes préfèrent la chemise foncée, ils sont plus inclinés vers les chemises sombres comme le bleu foncé, gris foncé et de couleur orange foncé, vert foncé et foncé forte couleur rouge, ou il est également plus proche de la couleur marron. Gardez cela à l'esprit que les hommes sont principalement inclinés vers couleurs vives et sombres plutôt que des nuances douces de différentes couleurs rose ou d'autres couleurs. De même, si vous concevez pour les femmes, elles vont s'incliner plus vers la teinte des couleurs comme elles ont plus de blanc en eux, elles n'aiment pas les vêtements très sombres ou les couleurs ternes, si vous concevez pour les hommes ou les femmes, vous devez garder toutes ces choses à l'esprit. C' est tout au sujet de la psychologie de l'échelle des hommes et des femmes avec le genre aime quelle couleur et si vous concevez pour spécifiquement sont pour le produit de la femme, alors vous allez utiliser des couleurs qui sont les plus appréciées par les femmes.Si vous concevez pour hommes, vous allez utiliser des couleurs qui sont, qui sont plus attrayants pour le sexe, qui est les hommes. C' est tout, si vous avez des questions, demandez-moi. Passons à la leçon suivante. 13. Effacer votre politique de couleur: Dans cette vidéo, je vais vous parler de la façon dont les couleurs vont changer le thème ou changer l'apparence de n'importe quelle marque, n'importe quel site Web que vous concevez, n'importe quel logo que vous concevez ou construisez. Je vais creuser dans mon processus de quand j'essaie de sélectionner les couleurs, comment les différentes variations vont affecter et créer différents thèmes ou vous pouvez dire différentes personnalités d'une entreprise ou d'une entreprise, ou logo, site web ou application mobile. Quoi que vous choisissiez vos couleurs, vous devez être très prudent. Ils peuvent changer la perception, ils peuvent changer l'humeur, ils peuvent changer la personnalité de l'ensemble de votre application, votre site Web et de votre marque. Je vais vous montrer mon illustrateur et comment je construis en ce moment, ma propre petite entreprise pour apprendre les pages. Allons creuser. Ici, comme vous pouvez le voir, je suis en train de construire, j'ai déjà construit cette marque et vous pouvez voir que je voulais être une entreprise forte de personnalité. LandRight signifie la conception et le développement de la page de destination pour votre petite entreprise. C' est essentiellement ce que fait cette entreprise. Pour les petites entreprises, je pense qu'elles ont besoin bons professionnels qui ont une bonne connaissance et une bonne compréhension des choses. Si vous regardez ces quatre combinaisons différentes sur la gauche, qui sont mon haut à gauche, qui est mon landRight préféré, ambre, couleur jaunâtre doré avec ce bleu foncé et je l'aime vraiment. Je l'ai utilisé dans mon exercice de gain beaucoup, mais ici vous pouvez voir qu'il semble fort et professionnel, mais il a beaucoup de vibrations en raison de ce jaune et il ressemble et se sent principalement comme une entreprise créative ou quelque chose comme ça. Quoi qu'il en soit, si je me concentre surtout sur le design, je pense que je vais opter pour cette combinaison jaune et bleu. Maintenant, en passant à cette droite, cela est plus axé sur les verts et les bleus, donc il est fondamentalement lié à la croissance et cela peut être une bonne option. Mais du point de vue de la force, je ne pense pas que vous puissiez dire qu'il a trop de force pour la plupart pour la partie branding. J' ai déjà sélectionné ces visages de type, donc ils vont aussi avec le même thème et la même personnalité. Si vous avez suivi mon cours de typographie, vous pouvez voir que j'ai sélectionné ce creux c'est mon, vous pouvez dire prime pour je l'ai acheté. Maintenant passer au bas deux options que j'aime vraiment. Sur la gauche, il est essentiellement de couleur rouge pâle, couleur rouge très pâle, qui est de couleur contrastée pour ce violet bleuâtre. Ces deux sont fondamentalement des couleurs opposées et ici vous pouvez voir ce que j'essaie de faire est, c'est fondamentalement une combinaison moderne de couleurs. J' ai vu beaucoup de temps que ces couleurs pâles et neutres ont été utilisées avec les nuances très vives ou très sombres pour créer un effet unique. Passant à la dernière option que j'aime vraiment, je viens de les créer en ce moment, j'ai pensé que je devrais les partager avec vous. Vous pouvez voir que c'est celui que j'aime vraiment, c'est surtout avec la croissance et la personnalité. Il a un look professionnel bleu, couleur pourpre foncé avec un peu de couleur vert seanish ici pour la croissance. Vous pouvez voir que c'est la couleur. Si je veux le rendre plus lumineux, peut-être quelque chose de plus proche d'entendre. Faisons sa luminosité 95 saturation à 70 pour cent. Je pense que nous devrions réduire un peu la saturation, j'irais avec celui-ci, il est, il a beaucoup de contraste, beaucoup de personnalité, très sombre, couleur très professionnelle et je pense que nous avons juste besoin de ces deux couleurs pour concevoir l'ensemble du thème. Je voudrais essayer quelque chose comme ça, vous pouvez voir ici, j'ai sélectionné mon dactylographe ce titre, puis un autre texte de paragraphe. Ensuite, j'ai ce bouton avec le logo, j'ai besoin de combiner tous ces éléments pour créer ou construire tout le thème de mon design. C' est ainsi que j'essaie de faire varier différentes couleurs. Si je vous montre mon processus avant cela, vous pouvez voir que c'est en fait là que j'ai commencé et cela a des tonnes de combinaisons différentes de ces typographies, essentiellement typographie. J' ai aussi commencé avec celui-ci, c'est une forme comme un entonnoir. Si vous avez une idée de S-E-O, optimisation des moteurs de recherche ou de pages d'apprentissage, vous pouvez savoir qu'il s'agit de l'entonnoir. C' est en fait dans cette direction. Il devrait être de haut en bas, mais c'est comme ça. C' était le premier logo que j'ai essayé et puis je suis passé à celui-ci, ce sont des formes plus simples. J' aime vraiment les formes simples parce que je pense que si votre logo est plus simple, il est plus facile de se souvenir et cela fonctionnerait mieux dans les petites tailles. Si j'ai quelque chose comme ça, cela va fonctionner beaucoup de petites et belles tailles sur. La deuxième chose est qu'il est dans une forme carrée. Il a beaucoup de potentiel, pour moi, j'ai sélectionné cette dernière pour être sur ces deux dernières options, je suis vraiment impatient de ces, peut-être que j'ajoute quelques couleurs supplémentaires. C' est ainsi que l'ensemble du schéma de couleurs va affecter la personnalité de votre design, votre site Web ou de l'application mobile entière. C' est ainsi que l'ensemble des couleurs va définir la personnalité de votre marque, de votre site web, de votre application mobile. J' espère que vous avez apprécié cette leçon si vous avez des questions ne me posez pas. Passons à la leçon suivante. 14. But de chaque couleur dans la conception UI: Il y a deux secrets dans n'importe quelle conception de schéma de couleurs. Une que je vais te dire dans cette leçon, la seconde, je vais te le dire. Une autre règle que je suis et vous devriez également suivre, ce qui vous fera beaucoup de bon concepteur et il vous aidera à créer des schémas de couleurs impressionnants. La première chose est que quel est le but de chaque couleur dans votre jeu de couleurs ? Si vous essayez de vous concentrer sur cela, chaque couleur a un but. Vous devez assigner ce but à cette couleur, et vous devez vous en tenir à cela. Dans ce schéma de couleurs, vous pouvez voir que c'est notre design que je vous ai déjà montré avant. Ici, vous pouvez voir les couleurs d'arrière-plan sont sombres ou claires. Les deux couleurs qui ont été utilisées comme fond est celle-ci, cette couleur bleu violacé. Ensuite, nous avons cette couleur très claire qui est, en fait, sélectionnons celui-ci. C' est en fait f9, f9, f9. Ce sont les deux couleurs qui ont été utilisées comme arrière-plan. Si vous creusez dans ce design, avez-vous vu d'autres couleurs qui ont été utilisées comme arrière-plan ? Vous devez fixer vos couleurs. Une couleur est affectée à l'arrière-plan. Ces deux couleurs, ils fonctionnent en fait comme fond de toute cette application. Puis venir aux couleurs suivantes qui vont être nos couleurs d'action ou vous pouvez voir les couleurs qui vont attirer l'attention de l'utilisateur. Ce sont en fait la couleur jaune que vous pouvez voir, nous allons zoomer. Vous pouvez voir ici nous avons cette couleur jaune dans cette section. Je pense qu'une autre section, toute façon, c'est en fait, ils ont utilisé cette couleur jaune et cette couleur rouge ici comme leurs couleurs d'action. Ensuite, nous devons à l'étape suivante, nous avons nos couleurs d'état. Peut-être activé, désactivé, actif, inactif, ou peut-être afficher une icône ou un emplacement ou quelque chose comme ça. Ce sont quelques couleurs supplémentaires. Ils utilisent cette orange, ce designer utilise en fait orange ou ce gris, ce gris foncé. Si vous regardez de près sur cela ici, vous pouvez voir quand l'appel est activé, il a un bleu très foncé, la même couleur de fond activée. C' est en fait leur couleur principale, la couleur primaire, où ils ont réellement commencé et quand il est désactivé, il a cette couleur. C' est une couleur plus foncée, vous pouvez dire, moins saturée de la même, ce bleu et cela a été utilisé ici. De même, si vous regardez ce texte, je vais zoomer un peu. Ça ne va pas avoir l'air jaggie. Vous devez remarquer une chose que la couleur plus foncée est pour le texte qui est activé ou quelque chose comme ça. Le reste du texte que vous pouvez voir est très terne, couleur grisâtre. Vous pouvez voir la différence. C' est une différence très subtile, mais vous devez remarquer que si vous voulez être un bon designer. Voici un résumé, vous devez comprendre quelles couleurs vont être vos couleurs d'action ou votre, les couleurs d'action sur votre application, soit un bouton ou une icône de téléphone ou une icône de rejet ou de suppression, bouton de suppression ou quelque chose comme ça. Les couleurs d'action vont être spécifiques. Couleurs d'arrière-plan, vous devez considérer vos couleurs d'arrière-plan que je veux une couleur très terne, une couleur plus foncée pour un fond et une couleur très claire pour un autre. Vous avez besoin de quelques couleurs d'état. Ils sont principalement nécessaires dans la conception du tableau de bord. Lorsque vous concevez un tableau de bord, il existe différents statuts, messages d'erreur. Nous avons différentes notifications, nous avons différentes mises à jour, donc nous avons besoin de ces couleurs d'état. C' est en fait le but d'une couleur différente. Vous devez assigner ce but et vous devez vous en tenir à cela. Encore une chose, si vous avez remarqué que les couleurs d'action sont très brillantes. Ils ont une personnalité attirant l'attention que les couleurs de fond, ils sont ternes, pâles, ou vous pouvez dire un look lisse et propre afin que nous puissions facilement les regarder plus longtemps. Les couleurs d'état sont mélangées avec des animations ou parfois des mouvements pour attirer l'attention de l'utilisateur. Comme vous pouvez le voir lorsque vous faites glisser la chute de votre curseur activé et désactivé. C' est en fait une animation. Donc, il a des commentaires. C' est ainsi que les concepteurs d'interface utilisateur utilisent les couleurs dans leurs applications, dans leurs sites Web et dans leurs logos, tout ce que vous pouvez utiliser les mêmes principes. Attribuer une couleur et coller à cela et lui assigner une fonction et c'est tout. A bientôt dans la prochaine leçon. 15. Sharpe sur la couleur d'humeur - Secret de contrastes des couleurs: Maintenant, je vais vous dire un autre secret sur les schémas de couleurs et comment vous pouvez construire des schémas de couleurs impressionnants. La règle est que nous allons mélanger des couleurs ternes avec des couleurs saturées ou nettes. Les couleurs ternes, ils vont agir comme un arrière-plan ou une règle de soutien pour la couleur vive sur le dessus. Vous pouvez voir ici dans cet exemple dans cette diapositive, vous visualisez une couleur bleue très nette, mais l'arrière-plan est une couleur gris bleuâtre terne. C' est un ton très terne du même bleu. J' ai fait un peu de gris et le rendre un peu plus lumineux, et vous pouvez voir qu'ils sont superbes. Vous pouvez voir ici, nous avons la saturation du bouton supérieur doux et pointu. Il est 89 pour cent et la luminosité est 88 pour cent. L' arrière-plan que vous pouvez voir la saturation est très faible, 10 pour cent et la même couleur la teinte est la même et la luminosité est de 89 pour cent. C' est la règle que vous devez garder à l'esprit. Voici un autre exemple de couleurs ternes qui vont bien se mélanger avec des couleurs saturées. Maintenant, nous avons deux couleurs différentes, et vous pouvez voir que nous avons cette couleur brune et nous avons cette couleur orange jaunâtre très forte. Ici, nous avons, encore une fois, la saturation du haut est de 88 pour cent et la luminosité est de 100 pour cent, donc émet beaucoup de lumière, il est de couleur très luminante et le fond est un peu terne, luminosité est juste de 25 pour cent, et la saturation est de six pour cent. Ceci est un autre exemple du même schéma de couleurs donc j'ai mélangé deux couleurs, mais l'un d'eux est très lumineux et très saturé et l'autre est moins saturé et moins lumineux, donc ils vont aller ensemble très bien. Maintenant, une autre astuce, que j'ai vu beaucoup est que j'ai vu avec les designers experts qu'ils ont tendance à mélanger des couleurs pâles avec des couleurs saturées. Dans leurs schémas de couleurs, ils ont des couleurs pâles. Les couleurs pâles signifient que l'arrière-plan va effectivement avoir très moins de saturation et pourrait avoir une certaine luminosité élevée. Ici vous pouvez voir que j'ai la combinaison de deux couleurs. C' est une couleur verdâtre très pâle. J' ai vraiment adoré cette combinaison en fait, de toute façon. A gauche, vous pouvez voir ici nous avons la couleur qui a une saturation de 14 pour cent et la luminosité est de 89 pour cent, donc la luminosité est bonne, mais le bleu supérieur ici il a saturation moyenne autour de 55 pour cent et la luminosité est de 50 pour cent pour cent. En fait, c'est beaucoup plus saturé, mais pas un grand saut de l'arrière-plan, donc le fond est un peu lumineux et pâle. Je l'appellerais lumineux et pâle dans le sens qu'il a moins de situation, mais il est brillant. Vous pouvez voir le bouton sur le dessus ont une différence de saturation de 40 pour cent plus de saut en saturation que le fond pâle. C' est un autre contraste que vous pouvez essayer. Maintenant, passons à la deuxième étape, qui est les couleurs vives, par rapport aux couleurs ternes. Ils vont aller bien ensemble aussi. C' est une seule couleur. J' ai utilisé la même teinte et la luminosité de l'arrière-plan est de 13 pour cent, il est donc très terne, il est très noir. Il est très proche de la couleur noire. Sur la gauche, vous pouvez voir la même couleur et la luminosité est un 100 pour cent. C' est une autre astuce que vous pouvez utiliser. Ce sont les principes si vous apprenez ces et vous pouvez les manipuler, vous avez une bonne maîtrise sur ces deux compétences, vous pouvez créer n'importe quel schéma de couleurs et qui va apparaître votre design qui aura l'air cool. Maintenant, vous pouvez voir que j'utilise une seule couleur, encore une fois, ici et la luminosité de mon bouton est de 30 pour cent, il est de couleur très sombre et très saturée et l'arrière-plan est très pâle et très lumineux. C' est encore une fois un autre exemple du même schéma de couleurs. Vous pouvez également juger mon jeu de couleurs si vous regardez différentes zones de texte ici, où j'ai des tons moyens mélangés dans toute cette conception. J' espère que vous allez essayer de remarquer comment différentes couleurs ont été combinées parce que c'est en fait l'échelle. Si vous commencez à remarquer différents schémas de couleurs autour de vous, vous allez saisir le secret que comment nous pouvons les mélanger ensemble. Voici un autre exemple de fond lumineux et de couleurs sombres sur le dessus. Vous pouvez voir que j'ai écrit un sol lumineux plus des couleurs sombres. Ici vous pouvez voir, j'utilise un dégradé de bleu foncé à cette couleur rouge rosâtre et vous pouvez voir la luminosité de ces deux couleurs est inférieure à 50 pour cent. Je pense que vous devez expérimenter avec, mais je pense, personnellement, que la luminosité doit être inférieure à 50 pour cent ou juste 50 pour cent. Si vous essayez d'augmenter comme 60,70,80, alors vous devez augmenter votre saturation aussi, car le bouton va sembler terne. Essayez de maintenir votre luminosité à 50 pour cent, 55 pour cent, pas plus que cela. Maintenant, laissez-moi vous montrer un exemple d'utilisation de ces deux principes de fond terne et de couleur saturée sur le dessus, alors nous avons un fond clair et pâle et nous avons une couleur foncée sur le dessus. Vous pouvez voir ici, j'ai un échantillon. Ce sera votre exercice en fait. C' est un design, Crypto Bank et vous pouvez voir que j'utilise une seule teinte, une seule couleur pour créer tout ce schéma de couleurs. Laissez-moi vous montrer comment j'ai créé ceci. Trick ici est un fond lumineux et sur le dessus, nous avons une couleur très nette. Ici, nous avons cette couleur. C' est notre couleur bleue primaire et il a la saturation de 80 pour cent et la luminosité est de 60 pour cent. Je ne veux pas que tu ailles au-dessus de 60 %, je suppose. C' est superbe sur un fond blanc vif, donc nous avons beaucoup de contraste. De même, sur le bouton ici, si nous regardons cette partie inférieure ici, que je veux vraiment vous montrer que vous devez comprendre ça. Ici, nous avons une autre couleur comme arrière-plan et la saturation de cette couleur est de sept pour cent et la luminosité est de 100 pour cent. C' est une couleur pâle, brillante, très moins de saturation et très haute luminosité. C' est une chose. En plus de cela, nous avons une couleur très sombre, la luminosité est de 60 pour cent et la saturation est de 80 pour cent. C' est le truc que je voulais te montrer. Si vous maîtrisez cette astuce, vous allez, merci moi plus tard que cette astuce vraiment vous aider beaucoup. Ce sont les deux principes que je voulais vraiment vous montrer que comment vous pouvez en créer un, en utilisant avec une couleur, vous pouvez créer des schémas de couleurs impressionnants en utilisant ce principe. J' espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser. Passons à la leçon suivante. 16. Comment je crée mes plans de couleur: Aujourd'hui, je vais partager avec vous ma perspective de construire un schéma de couleurs. Il peut y avoir différentes méthodes de construction d'un jeu de couleurs, mais c'est ainsi que je construis mes jeux de couleurs. Je vais donc partager cette méthode avec vous, et dans les prochaines leçons, nous allons aborder étape par étape. Je vais partager et vous montrer mes différents écrans Adobe XD, et comment je continue à ajouter des couleurs différentes. C'est ma méthode. Le numéro un est que vous commencez avec une seule couleur. Vous pouvez choisir cette couleur à partir de n'importe quelle couleur de marque, ou vous pouvez choisir cette couleur sur le thème de votre design, par exemple, si vous avez une application pour canapé ou une application multimédia, vous pouvez choisir des couleurs bleu foncé ou rouge de toute façon. Alors sélectionnez votre première couleur, et nous allons créer un schéma monochromatique. Vous pouvez voir différentes nuances et teintes, trace différente. Ceux-ci sont tous de la même couleur, changeant la saturation et la luminosité. C' est toujours mon premier pas. C' est ainsi que je commence à créer mon jeu de couleurs. J' ai donc commencé avec cette teinte ici sur la gauche, puis j'ai de l'ombre, de la teinte, quelques nuances de plus, trois tons, de la teinte, et une teinte de plus, qui est la même teinte, mais il a beaucoup de saturation. En fait, vous pouvez dire la couleur bleue attirant l'attention. Donc, il a plus de saturation, ce bleu. J'adore vraiment ça. C' est en fait, vous pouvez dire l'arbre de mon jeu de couleurs. C' est en fait comme ça que je commence à expérimenter et à construire mon schéma de couleurs. Donc, vous devez expérimenter avec elle, essayez de créer quelques tons, nuances et teintes. Maintenant, la troisième étape est que j'essaie d'ajouter une couleur contrastée. Donc, nous avons déjà construit différentes nuances et teintes de ce bleu, maintenant nous allons ajouter une couleur opposée, qui est une couleur contrastée, et la couleur opposée sur la roue de couleur est en fait orange pour le bleu. Vous pouvez voir que j'ai ajouté une couleur de contraste ici. Si vous regardez de près, vous pouvez voir une chose de plus, que sur chaque couleur ici, il y a différentes couleurs qui vont fonctionner. Par exemple, sur une couleur foncée, il va travailler une couleur blanc clair, puis sur une couleur de teinte, nous avons besoin d'une couleur foncée. Donc, nous sommes en fait expérimenter sur ces couleurs et voir qui a plus de contraste et qui peut être facilement lu. Essayez d'utiliser des couleurs qui ont un bon contraste sur différents arrière-plans. Maintenant, ma dernière étape. Chaque fois que j'arrête de construire mon jeu de couleurs, par exemple, si vous concevez une application mobile ou notre tableau de bord, vous avez besoin de quelques couleurs supplémentaires, comme vous pouvez le voir sur le côté droit, nous avons des couleurs d'état. Donc, j'ajoute en fait différentes couleurs d'état pour les informations, pour les erreurs, pour les messages de succès, peut être pour une mise à jour. Vous pouvez voir que l'un d'eux est bleu. C' est en fait, par exemple, si j'ai une mise à jour, ou une mise à jour logicielle, ou peut-être une mise à jour de valeur, je ne veux pas que ce soit une erreur ou quelque chose comme ça. Je veux que ce soit très calme, de couleur bleue. J' ai utilisé une teinte ici pour montrer mon statut. Notre teinte, vous pouvez utiliser la teinte pour le message d'état. Vous pouvez utiliser un message jaune, par exemple, je veux montrer à l'utilisateur que cette valeur, vous devez la mettre à jour. Il est pour il ya cinq minutes valeur, donc vous devez le mettre à jour, donc je vais saisir cette couleur jaune et montrer ce message. De même pour erreur, je vais utiliser du rouge, et aussi pour le vert, je vais utiliser pour le succès. L' astuce est que vous devez créer ces couleurs et ces jaunes, bleus et rouges, et verts qui vont réellement fonctionner et bien paraître sur ces couleurs. Ils doivent bien se combiner. Parfois, vous commencez à choisir la couleur au hasard, donc ce n'est pas une astuce, vous n'avez pas besoin de le faire au hasard. Je vais vous montrer comment c'est fait dans les prochaines leçons étape par étape, donc vous n'avez pas à vous inquiéter à ce sujet. Passons à la leçon suivante. Si vous avez des questions sur la construction de cette méthode de jeu de couleurs de la mienne, vous pouvez toujours me le demander. Passons à la leçon suivante. 17. Comment vous choisissez votre première couleur: Chaque fois que vous commencez à construire un jeu de couleurs, la première chose est par où commencer. J' ai vu beaucoup de designers qui sont de nouveaux designers ou qui n'ont pas beaucoup d'expérience dans le design. La première erreur qu'ils font est qu'ils ne savent pas par où commencer leurs créations. Vous pouvez voir qu'ils sont un peu confus dans l'endroit où nous devrions commencer, quelle couleur nous devrions choisir. Je vais vous simplifier ça et je vais vous montrer deux départs que vous pouvez faire. Le premier départ est que chaque fois que vous commencez un design, recherchez sa marque. Si elle appartient déjà à une marque construite, peut-être qu'ils ont une couleur rouge dans leur logo ou peut-être qu'ils ont une couleur jaune dans leur logo comme McDonald's. Vous pouvez à partir de là, ramasser leur couleur de marque et commencer à partir de là. La deuxième option est que vous commencez par vous-même. Par exemple, si je veux construire n'importe quel design je pourrais commencer par une couleur bleue parce que c'est sûr, et deuxièmement, c'est qu'il est aimé par les hommes et les femmes tous les deux. Donc le bleu est une couleur un peu sûre. C' est pourquoi vous voyez beaucoup de couleurs bleues même vous pouvez voir dans cette interface de ce « Adobe X » le bouton de partage est bleu. C' est une couleur très sûre. Commencez par le bleu et partez de là. Maintenant, je vais vous montrer quelques exemples comment j'ai réellement créé un jeu de couleurs, et nous allons créer un jeu de couleurs monochromatiques en ce moment en utilisant cette couleur bleue. D' abord, je vais vous montrer l'exemple. Voici une « application de canapé intelligente » d'une marque ROM, R-O-M. Il s'agit d'une entreprise européenne, qui a des bureaux au Royaume-Uni, Allemagne et dans toute l'Europe. Quand j'ai commencé cette application, je n'ai pas ajouté de concept ou aucune idée de leur schéma de couleurs. Vous pouvez voir que j'utilise un peu de couleur jaune orangé et bleu très foncé qui est proche du noir et ce rouge. Aussi, cette verte. Ma couleur principale est ce bleu foncé, ce rouge et cette orange ou jaunâtre, c'est plus d'une couleur jaune. De plus, tu verrais des Browns ternes ici, bruns grisâtres très ternes ici, puis on a un brun très foncé dans ça. Regardez la vidéo, lisez le texte. C' est un mélangeur. Alors, appuyez sur le mélangeur. Si je tape ici, il bascule entre deux écrans, alors vous pourriez voir un peu de vert ici qui est fondamentalement nos couleurs d'état. De toute façon, si vous regardez de près, laissez-moi zoomer. Si vous regardez de près, ce sont encore des textes brun foncé ici. Si vous regardez ici, cette couleur est en fait violet bleuâtre foncé. Ensuite, nous avons ce mini-canapé, meine canapés, il est en fait grisâtre, bleuâtre, brun terne. Il est moins brun, plus terne couleur bleu grisâtre. C' est ainsi que j'ai créé ceci, donc vous pouvez voir que c'est une barre de tampons [phonétique] et quand quelqu'un clique dessus, il y a un surlignement pour cette icône. C' est une couleur bleu foncé. Je vais vous montrer comment j'ai réussi à obtenir ce jeu de couleurs avec cette application et j'ai créé de nombreux écrans pour celui-ci que vous pouvez voir ici. De même, vous pouvez voir qu'il y a peu d'options ici pour différentes fonctionnalités plus comme cette barre coulissante. On a du bleu foncé ici pour le remplissage. Cette couleur verdâtre pour un certain statut, cette couleur rouge foncé, rouge très vif, couleur rouge maroonisâtre. Nous allons aller sur leur site Web ; en fait, j'ai choisi ces couleurs de leur marque. Ok, donc voici la marque réelle. Il s'appelle ROM. Si vous regardez de près tous les canapés et toute l'équipe de leurs séances photo et skins de canapé et leurs couleurs, vous verrez des similitudes dans ce que j'ai utilisé dans mon application. J' ai choisi une couleur d'ici, cette couleur forte, qui est leur couleur rouge. Puis j'ai choisi d'autres couleurs à partir de ces images ; vous pouvez voir leurs canapés ont une couleur bleuâtre très foncée. Ceci que j'ai utilisé dans mon schéma de couleurs. Vous pouvez voir ces bruns, couleurs gris brunâtre de brun terne que j'ai choisi à partir de cette image. C' est encore une fois gris foncé, et nous voyons quelques notes de jaune et d'orange ici dans l'image. Je pense que ceux-ci vont bien se passer ensemble parce qu'ils sont superbes dans ce design d'intérieur. Ils auront également fière allure dans l'application. Ce bleu foncé est en fait aller très bien avec ce rouge, il est fondamentalement un schéma de couleurs triades, rouge, bleu et jaune. Vous pouvez voir ici les notes de jaune dans cette image. Ils ont l'air bien avec cette couleur grisâtre sombre terne. C' est comme ça que j'ai commencé. J' ai commencé avec cette couleur et j'ai choisi quelques couleurs pour le thème, et je les ai utilisées à des fins différentes. 18. Créer votre première palette de couleurs avec une couleur unique: Maintenant, la deuxième question est, où dois-je commencer si je n'ai pas de marque ? Vous pouvez commencer avec n'importe quelle couleur. Vous pouvez choisir une couleur pour votre marque. Par exemple, si j'ai du sel de l'Himalaya. Par exemple, je veux démarrer une entreprise, ou peut-être que je suis en train de concevoir pour une entreprise verte qui est étiqueté que c'est un 100 pour cent naturel ou quelque chose comme ça, je pourrais aller dans les verts et jaunes plus. Si je conçois une application en ligne ou quelque chose qui va travailler en ligne pour certains designers ou un autre groupe financier, je pourrais utiliser le bleu. Essayez donc de sélectionner la couleur sur le thème de votre application. Par exemple, si j'ai une application très sérieuse, je pourrais aller dans les couleurs bleu royal foncé. Donc, c'est, vous devez considérer. Donc, pour cet exemple, je vais sélectionner cette couleur et je vais la répliquer. N' importe quel schéma de couleurs, je dirais que vous créez au moins deux tons, deux nuances et deux teintes. Nous allons donc créer une couleur très sombre ici d'abord. Alors allons au remplissage et allons en mode HSB. Ici, nous avons la luminosité, créons d'abord quelques teintes déjà haute luminosité. Utilisons un peu moins de saturation. Donc celle-là a l'air génial. Créons quelques autres. Déplaçons le côté un peu plus blanchâtre. Je vais donc réduire la saturation. Donc, en fait, vous pouvez aussi aller par ici. Vous pouvez voir que la teinte va rester la même. Donc vous pouvez glisser ici et aller à votre ressemblance. Peut-être que je veux une couleur blanchâtre terne, quelque chose par ici. Donc, ça a l'air génial. Donc j'ai deux teintes ici. Donc vous pouvez voir, traînons-les ici. Maintenant, je vais avoir quelques nuances, au moins deux. Donc je vais aller un peu de noir ici et un peu saturé dans cette zone. Alors allons-y avec cette couleur. C' était 201. Donc je vais le garder 201. Donc ce n'est pas 200, 200, c'était 200. Je crois que c'était 201, je suppose. Donc 201. Passons tous à 201 , puis on en a 201. Supprimons celui-ci. Il va aussi être 201. Faisons un 100 pour cent ça. Donc, nous avons en ce moment quatre couleurs, ajoutons quelques autres. Vous pouvez dire un peu moins lourd image sombre ici. Donc je vais aller pour ça ici. Laisse-moi te dire la psychologie derrière ça. Donc, je crée en fait deux nuances sombres, deux teintes, au moins et vous pouvez voir que cela peut être pour mon texte normal, texte de paragraphe. Cela peut être pour mes titres ou des textes très gras que je veux vraiment que les utilisateurs attirent l'attention. Pour ceux-ci, j'ai des couleurs claires afin qu'ils puissent travailler ensemble sur ces écrans sombres. De même, nous allons en avoir peu d'autres. Ajoutons un de plus ici, deux de plus en fait. Alors nous avons besoin de quelque chose entre les deux, quelque chose comme ça, peut-être pour les frontières ou quelque chose comme ça. Ajoutons un de plus. Il fait donc un peu plus sombre. C' est 20. Donc vous pouvez voir que nous avons en fait trois niveaux. C' est en fait le niveau moyen ou les tons. Ensuite, nous avons des couleurs très sombres et très claires. Nous avons donc commencé avec cette couleur de base, et nous avons créé au moins six couleurs à partir de cela. Donc, c'est votre jeu de couleurs réel et ils doivent être au moins ces couleurs pour obtenir un grand schéma de couleurs. Donc, vous pouvez voir ici est un exemple d'application de ces schémas de couleurs. Vous pouvez voir comment j'ai réussi à le faire. C' est une couleur très sombre. C' est en fait un bleu pointu. Laisse-moi zoomer. C' est donc un bleu très pointu. Je pense que c'est presque la même chose, qui est cette couleur. Ensuite, vous pouvez voir sur ce fond que j'utilise la couleur très sombre. Donc, cela revient en fait à la leçon de base où je vous ai dit que les nuances très claires sur très sombre. Ils vont donc obtenir beaucoup de contraste. De même large sur ce est à l'air bien. Je peux facilement le lire. Ici, nous avons un brun foncé, désolé, ils ne sont pas bruns. Ils sont en fait, vous pouvez voir que c'est la couleur très terne et il est presque expié. Donc ton grisâtre, laissez-moi vous montrer les icônes en bas. Donc, ici, nous avons un ton bleuâtre terne de cette même couleur bleue. Pour le point culminant, j'utilise notre bleu primaire. Donc c'est en fait notre couleur d'accent, ou vous pouvez dire la couleur popping, celui-ci. Si vous voulez en faire un plus net, donc nous allons le faire glisser ici et si vous voulez une couleur plus nette, vous allez augmenter la saturation ici. Nous avons donc une version plus nette de la même couleur. Donc, si vous voulez utiliser quelque chose comme ça, vous pouvez utiliser cette couleur plus nette comme je l'ai utilisé ici, 961 points bonus ici. Si nous allons par ici, sorte que vous pouvez voir il y a beaucoup de variétés ou beaucoup de choses que vous pouvez faire avec le même schéma de couleurs. Donc, vous pouvez voir ici j'ai comme 1, 2, 3, 4, schémas de couleurs, deux thèmes sombres et deux lumières. J' utilise les mêmes couleurs. Donc vous pouvez voir que j'utilise les mêmes couleurs. Ici, j'ai un fond très sombre et j' ai inversé le schéma de couleurs de ceci, mon fond clair. Donc vous pouvez voir ici nous avons les dernières commandes. Il est de couleur grisâtre très pâle, donc il ne sort pas. Je ne veux pas attirer trop d'attention sur celui-là. De même, je veux l'attention dans ce domaine, donc j'ai des nuances très claires et sombres. De même pour ce bouton, c'est notre bouton principal ou le bouton d'action principal sur l'écran. Il a donc beaucoup d'attention. De même, celui-ci a le bleu primaire. Ainsi, vous pouvez voir ces bleus sont en fait couleurs attirant l'attention sur ce fond noir ou sombre. Il est en fait pas noir, est très bleu foncé. Donc je vais vous donner ce dossier. Si vous voulez le regarder, vous pouvez le regarder mais je vous ai déjà montré comment vraiment commencer et vous allez me remercier pour cela parce que cela va vous rendre la vie très facile parce que vous pouvez juste créer n'importe quel jeu de couleurs avec une seule couleur. Vous n'avez pas besoin de deux, trois ou quatre couleurs. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 19. 2nd projet Créez des couleurs monochromatiques: C' est maintenant le moment de votre autre affectation et qui crée un schéma de couleurs monochromatiques. Vous m'avez vu créer un schéma de couleurs monochromatiques en utilisant juste une seule couleur bleue. Voici la mission. Swish est une application de prototypage pour les concepteurs. Créez un jeu de couleurs monochromatiques qui fonctionnera pour cette entreprise. Vous allez également créer un écran de connexion et appliquer ce jeu de couleurs à cet écran de connexion et vous allez les soumettre tous les deux. Avec votre jeu de couleurs et cet écran. Je vais te montrer à quoi je veux que ça ressemble. Ici, comme vous pouvez le voir, voici un exemple de ce que je veux vraiment de vous. Ceci est un écran de connexion, oublié votre mot de passe ou quoi que ce soit, vous pouvez simplement concevoir un écran d'application mobile en ce moment c'est juste mon fichier de ressources. Vous allez créer un jeu de couleurs à gauche comme celui-ci, ce sera monochromatique. Il pourrait ne pas avoir vert et me le soumettre comme ça. C' est votre première mission que je suis impatient de voir votre mission. Commençons. 20. Ajouter une deuxième couleur pour le contraste: Maintenant, nous allons faire la deuxième étape dans n'importe quel schéma de couleurs. La première étape a été que nous venons de créer un schéma monochromatique. Maintenant, nous allons ajouter une couleur de plus à notre jeu de couleurs. Pour ce faire, nous allons sélectionner notre couleur de base, et je vais saisir sa valeur hexadécimale, commande C, et nous allons utiliser certains des outils en ligne pour saisir notre deuxième couleur. Il y a beaucoup d'outils là-bas. Je vais partager avec vous trois ou quatre. Maintenant, je vais utiliser ce Coolors ou Coolors.co. En fait, cliquez sur ce « Générateur », et voyons où nous allons aller. La première chose que je vais faire, c'est que je vais éditer ceci et copier ceci ici comme ma valeur, et je vais le verrouiller. Cliquez sur ce « Verrouiller ». Je l'ai appelé verrouiller cette couleur. Nous allons appuyer sur notre « Space-bar » pour obtenir quelques couleurs supplémentaires. Ici, comme vous pouvez le voir, nous avons peu de couleurs, et vous pouvez sélectionner toutes les couleurs que vous souhaitez d'ici et le verrouiller. Mais en ce moment, je cherche une couleur plus vibrante plutôt que ces couleurs très ternes. Ce que je vais faire, c'est que je vais continuer à appuyer sur ma barre d'espace, jusqu'à ce que j'obtienne la couleur que je veux. Certaines couleurs orange sont très nettes ; couleur orange qui peut être mélangée avec cette couleur bleue. Pourquoi c'est ça ? Parce que vous pouvez voir, si nous allons à cette application de fourniture de couleur, cette couleur bleue est en fait opposée et couleur complémentaire à cette orange, donc je suis à la recherche de quelques nuances de ceux-ci. Soit je peux utiliser du bleu foncé et de l'orange, soit je peux utiliser du bleu pâle et de l'orange vif, donc c'est ce que je cherche. J' ai une couleur plus proche de celle-ci. Il est en fait de couleur jaune-orange. Si j'appuie sur le « Paramètres » ici, Je peux augmenter sa luminosité ou je peux le déplacer curseur, par exemple, peut-être un besoin quelque chose de plus proche de cette orange, et je peux le verrouiller alors. Ensuite, je vais, encore une fois, appuyer sur « Space-bar ». Maintenant, vous pouvez voir que j'ai plus de couleurs. J' aime vraiment cette couleur grisâtre, donc je l'ai verrouillée. J' aime vraiment ce vert, alors je vais le verrouiller aussi. C' est ainsi que, vous pouvez le voir, j'ai créé un très beau schéma de couleurs. J' ai des nuances sombres. J' ai des nuances vertes. J' ai des nuances jaunes. L' orange jaunâtre va très bien fonctionner avec le blues. Ce sont en fait deux bleus, un vert, un, un peu, de couleur grisâtre, et cette orange jaunâtre. C' est ainsi que j'ai créé ce jeu de couleurs et je peux l'exporter. Vous pouvez cliquer ici et vous pouvez cliquer sur « PNG » ou vous pouvez cliquer sur « SVG », et vous pouvez le faire glisser dans votre logiciel graphique. Je vais le sauver quelque chose comme ça. Une autre façon est que, j'ai essayé d'utiliser ceci, Adobe Color CC, et je vais prendre des couleurs d'ici. Ce que j'ai fait est, en fait, j'ai copié, sélectionné ce courant de base, donc c'est en fait la couleur de base. J' ai copié la valeur hexadécimale ici. Vous pouvez voir, c'est ma valeur hexadécimale pour la couleur de base. J' ai sélectionné des combinaisons de couleurs gratuites et différentes à partir d'ici. Si vous voulez l'essayer, vous pouvez sélectionner quelque chose comme ça. moment, vous pouvez voir que c'est très basique. Basic signifie que ces couleurs ne sont pas très belles les unes avec les autres ; il y a des couleurs ternes, il y a des couleurs vives. Vous pouvez les ajuster ; garder la même teinte et essayer de l'ajuster. Par exemple, si je veux quelque chose comme ça, couleur jaune, et déplacons ce jaune un peu ici, et cette orange. Déplaçons ce bleu comme ça. Aussi, je vais utiliser une nuance un peu plus foncée ou terne ici, mais brunâtre, quelque chose comme ça. Marron. Ce rose a l'air vraiment, très étrange. Quoi qu'il en soit, c'est une autre façon d'obtenir votre deuxième couleur. Je n'aime pas, en fait, cette application de jeu de couleurs pour créer l'ensemble du jeu de couleurs parce qu'il va vous obtenir beaucoup de différentes couleurs étranges ici. Par exemple, si je veux aller dans ce composé, ce que vous pouvez faire, c'est que vous pouvez obtenir ces couleurs de base, et vous pouvez créer plus de couleurs que vous pensez en créant des tons différents, et des nuances, et des teintes même couleur, alors n'essayez pas d'utiliser ou de copier les mêmes couleurs que cette roue de couleur génère réellement. Une autre chose est, je fais normalement, c'est que je vais réellement à cette exploration et je cherche, par exemple, si j'ai un bleu, orange, quelque chose comme ça, je vais sélectionner ici. Vous pouvez voir, j'aime vraiment ce jeu de couleurs. C' est très proche de ce que je cherche. Je peux le télécharger, je peux le sauvegarder. De même, celui-ci a l'air vraiment génial : bleu et oranges. J' aime ces deux ou trois. Les jeux de couleurs, je vais les télécharger tous, et je vais voir quelles couleurs vont avoir fière allure dans mon application. Si vous êtes à la recherche de vert et d'orange, vous pouvez voir que nous avons différents schémas de couleurs. Vous pouvez commencer votre jeu de couleurs en sélectionnant n'importe quel autre jeu de couleurs, et essayer de modifier un peu de teintes, et de l'ajuster à vos propres besoins. C' est ainsi que je sélectionne ma deuxième couleur ou ajoute d'autres couleurs à mon jeu de couleurs. Maintenant, je vais ouvrir ces éditeurs de jeux de couleurs. Vous pouvez voir l'éditeur de remplissage. Je vais le déplacer vers le bas. C' est une autre astuce que j'utilise beaucoup que je garde la couleur dans la même position et je me déplace ici. Dans cette roue de couleur, en fait, je suis allé à cette couleur orange, et je pense que je l'aime là-bas à l'air super ensemble, donc je vais garder cette couleur orange ici. Laissez-moi vous montrer un exemple de la façon dont, en fait, je l'ai utilisé parce que ce sera notre action de couleur secondaire. Vous pouvez voir sur cet écran, nous avons bleu, mais vous pouvez dire pour mettre en évidence notre barre d'onglets et non pour nos actions principales. Il y a, en fait, deux types de boutons attirant l'attention. L' une est primordiale qui est notre action principale, que nous voulons que nos utilisateurs prennent sur cet écran. Action secondaire qui est, en fait, peut-être un élément mis en surbrillance, ou sélectionné, ou quelque chose comme ça. Vous pouvez voir ici et ici, j'utilise la couleur orange pour l'élément sélectionné. Pour mon action principale, j'utilise ma couleur bleue. De même ici, c'est encore, la même chose, et c'est encore, la même chose. Vous pouvez voir, je ne mélange pas ces deux couleurs simultanément les unes avec les autres. Ici, comme vous pouvez le voir, j'ai utilisé une couleur gris bleuâtre foncé ici pour montrer cet élément de liste ici. C' est ainsi que, en fait, vous essayez d'ajouter une couleur ou plusieurs couleurs à votre jeu de couleurs. Je pense que deux couleurs sont plus que suffisantes pour n'importe quel type de schéma de couleurs pour construire n'importe quelle application, n'importe quel bord, ou n'importe quel site Web. autres couleurs dont vous avez besoin sont les couleurs d'état, dont nous allons parler dans la prochaine leçon. En ce moment, je m'en tiendrais avec ces deux couleurs. Une couleur que je vais choisir, et je vais créer différentes teintes et nuances de cette couleur. La deuxième couleur sera pour ma couleur d'accent ou l'action primaire, et je ne vais pas en créer plus de nuances. Cela va être votre, vous pouvez dire, mantra de vos schémas de couleurs. N' essayez pas de créer des nuances et des teintes sur les deux couleurs. Essayez d'utiliser une couleur et crée des teintes et des nuances de celle-ci, c'est ainsi que je fais ma deuxième étape ou je sélectionne mes jeux de couleurs et de couleurs. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, demandez-moi. Rendez-vous dans la prochaine leçon. 21. Couleurs de statut dans la conception UI: Maintenant, dans la dernière étape, nous allons parler des messages d'état. Il s'agit d'une application de portefeuille numérique, qui affiche votre Bitcoin ou la valeur monétaire totale. Ces applications ou tableaux de bord où nous voyons beaucoup de données ou quelque chose comme ça, nous avons besoin de beaucoup de messages d'état. Par exemple, nous avons ici l'écran. La couleur de l'écran indiquant que nous avons un profit ou que nos valeurs augmentent. De même dans ce Bitcoin, sa valeur a été augmentée 22.8 pour cent, de même pour cela. Nous avons au moins trois messages d'état. L' un est le succès ou peut-être que quelque chose augmente, l'autre est quelque chose qui diminue, et le troisième est en fait comme ça. Par exemple, je veux une mise à jour. Par exemple, cette valeur peut provenir de la précédente, il y a trois minutes ou cinq minutes. Je veux que l'utilisateur appuie sur cette mise à jour maintenant pour saisir la dernière valeur. Ce sera en fait mon texte d'information. Trois couleurs, nous avons besoin de plus pour ce schéma de couleurs. Nous avons déjà fait cet exercice. Nous avons construit ce schéma de couleurs en utilisant une seule couleur bleue, et maintenant ce sont toutes différentes variations. Si vous regardez de près ici, vous pouvez voir que c'est ainsi que toutes ces couleurs ont été disposées. Cette couleur la plus sombre est pour la valeur la plus importante. Ensuite, nous avons cette couleur bleuâtre pâle. Nous voulons qu'il soit facilement lisible ou lisible sur ce fond bleuâtre pâle. Ce fond pâle très lumineux, bleuâtre, nous voulons qu'il soit très facile à lire. Si vous regardez de près sur cet écran, vous pouvez voir cette 1.5 ou cette couleur rouge foncé, il est facilement lisible. Si vous allez à cette valeur ici, passons à ce HSB. C' est 73 pour cent de saturation, une saturation très élevée et 85 pour cent de la luminosité. Si vous voulez plus de couleur foncée, vous pouvez aller plus sombre, mais je pense qu'il est vraiment visible en ce moment. De même, ici, ce vert en fait sur ce fond de couleur noire, cet écran et cet écran est différent. Pourquoi c'est ça ? Parce que sur un thème clair, nous avons besoin d'un peu de couleur plus foncée et sur des nuances plus sombres ou des fonds pâles ou des couleurs sombres, nous avons besoin d'une couleur qui a plus de luminance, plus de lumière émettant de lui. Nous voulons que ce soit différent de l'arrière-plan. Vous pouvez voir que ce fond est bleu, très terne. Cette couleur est en fait, laissez-moi vous montrer. Il a 98 pour cent de saturation et 90 pour cent de luminosité, donc très lumineux, très haute couleur saturée. Si vous regardez ici, cette couleur a la même teinte, 148, mais elle a en fait 98 pour cent de saturation, mais la luminosité est de 70 pour cent. Vous devez utiliser votre tête de concepteurs. Vous n'avez pas besoin de coller avec les couleurs que cette couleur va bien fonctionner sur chaque fond. Essaie d'utiliser ta tête. Cette couleur ici, si vous regardez, c' est en fait 20 pour cent de saturation et 61 pour cent de luminosité. Mais si vous regardez cette couleur, il est 7 pour cent saturé et 60 pour cent de luminosité. En fait, j'utilise une couleur très grisâtre ici parce que l'arrière-plan est déjà très sombre. J' ai besoin d'avoir quelque chose de différent. Ce schéma de couleurs, même s'il semble que c'est la version lite de ce jeu de couleurs, mais ils sont différents. Maintenant, si vous regardez cette couleur ici, elle semble un peu nette et je pense qu'on doit la rendre un peu plus légère. Mettons 100 ici. Ça a l'air bien. Réduisons la luminosité et je vais aller quelque part ici. Je vais l'ajouter maintenant. Aussi pour celui-là. Assurez-vous que ceux-ci peuvent être facilement vus et qu'ils ont un bon contraste avec l'arrière-plan. Nous allons parler plus tard de l'accessibilité des couleurs. Mais en ce moment, je veux saisir cette règle simple, que nous avons besoin de différent plus de contraste quand vous voulez avoir une certaine éligibilité dans vos couleurs. Peut-être quelque chose par ici. Il est très tranchant ou vibrant. Je vais le réduire ici, quelque part. Peut-être quelque part. Je veux qu'il soit un peu plus léger, qu'il ait plus de luminosité. Je vais toucher le haut par ici. Essayons cette couleur. Ils ont l'air très similaires, mais ils ne sont pas similaires. Ça a l'air génial. Ici, vous pouvez voir que c'est une nuance très sombre de la même couleur. Il a 73 pour cent de saturation et 85 pour cent de luminosité. Si vous voulez aller plus sombre, vous pouvez appuyer sur 80 pour cent ici, et aussi pour celui-ci, 80 pour cent par ici. Pourquoi j'utilise 80 % de luminosité, parce que, l'arrière-plan est totalement blanc. L' arrière-plan est plein lumineux et il est à 100 pour cent, donc j'utilise la lumière. 20 % de différence, si vous vous souvenez de la règle, je vous ai montré que j'utilisais 100 % pour celle-ci. Désolé. Donc 80 pour cent de luminosité pour celui-ci et ceci est en fait blanc, donc il est 100 pour cent de luminosité. La différence de 80 et 100 est en fait de 20 pour cent. Assurez-vous que vous avez une bonne différence entre ces deux. Voyons ce qu'on a ici. Ici, nous avons 70 pour cent et c'est 100 pour cent, 70, 100, 70, 100. De même, si nous regardons ici, prenons ce contexte. Il a 31 % de luminosité, et celui-ci a 100 % de luminosité. C'est bien. C' est en fait l'ensemble du schéma de couleurs. Ici, le schéma de couleurs est un peu différent parce que nous avons un fond clair ici, nous avons un fond sombre. Regardez ce texte de portefeuille numérique. C' est un peu plus sombre et terne nuance de bleu. Ici, nous avons un peu plus léger, une version plus lumineuse de cela. Parce que nous avons des milieux plus sombres. Tu dois garder ça à l'esprit. De même, nous avons ici quelques bleus grisâtres, et ici nous avons des bleus grisâtres, mais ils sont un peu plus légers dans la nature. Ils ne sont pas ennuyeux comme ça. Chaque fois que vous construisez un jeu de couleurs, vous devez avoir des messages d'état comme celui-ci. L' astuce pour les créer est très facile. Laisse-moi te montrer. Prenons cette couleur ici. Déplacez-le à l'extérieur, faites-le un peu plus grand. Voici notre couleur de base. Répliquons-le et je vais vous montrer un truc pour créer une couleur rouge, par exemple. Nous avons cette couleur. Ce que je vais faire, c'est que je vais aller dans ce vert. Maintenant, nous avons la teinte verte maintenant. On peut se déplacer et peut-être avoir quelque chose comme ça. La teinte est la même, je viens de changer la saturation et la luminosité. Donc, nous avons la couleur verte. Ajoutons une couleur de plus, qui va être notre jaune. Je vais aller à cette couleur jaune, mais vous pouvez voir maintenant qu'on n'a pas besoin de ce jaune, on a besoin d'un peu plus léger, jaune, peut-être quelque chose par ici. En ce moment, ça n'a pas l'air très bon parce qu'il est sur un fond gris. Si vous le mettez sur un fond noir foncé, il pourrait sembler mieux, mais vous devez l'expérimenter. Si vous n'aimez pas cette couleur, vous pouvez la changer. Ajoutons de la couleur rouge ici. Je vais aller à ce rouge, ou peut-être ceci ou ceci, quelle que soit la coordonnée que vous voulez. Je vais aller avec un peu de cette couleur rouge rosâtre. Faisons-le un peu sombre. J' essaie de changer la luminance de ces couleurs, j'essaie de les faire correspondre. Cette couleur, cette couleur et cette couleur, ils ont l'air presque les mêmes. La couleur bleue est toujours plus foncée. Si je veux le changer, je peux le changer comme ça. Celle-ci a l'air bien aussi. Je vais en créer un de plus pour ce jaune parce que ça ne me plaît pas beaucoup. Je veux que quelque chose soit comme ça. Celle-là est mieux pour moi. Vous pouvez essayer ces couleurs et ensuite vous pouvez commencer à les ajouter ou à les fixer. moment, nous avons ce jaune, qui est 50 teinte, 27 et 100. Il est plus vers un peu de couleur orange. moment, j'ai sélectionné celui-ci qui est 63. Si vous voulez vous rapprocher de celui-ci, je vais aller avec ce 50, 52, et je vais augmenter mon éclat un peu plus. C' est la couleur dont nous aurons besoin pour nos messages d'état. C' est une technique très simple pour créer des couleurs que nous allons sélectionner notre couleur de base et déplacer juste ce curseur en rouge, vert, jaune ou orange. Cela va régler tous ces problèmes que nous rencontrons lorsque nous créons des couleurs. Une autre chose que vous devez considérer est que, quel élément va mettre en évidence et quel élément est réglé ? C' est très important. Certaines choses ne sont pas importantes, comme d'autres éléments sur votre écran. Ce texte est très important. Ce message qu'il augmente ou diminue. C' est très important. C'est juste dans l'information, portefeuille numérique. Personne ne va le regarder en premier. De même, celui-ci, nous voulons que ce soit un effet subtil. On ne veut pas que ça attire l'attention. N' essayez pas d'utiliser toutes les couleurs saisissant l'attention partout sur votre écran. C' est, vous pouvez dire, désastreux. J' ai vu beaucoup de concepteurs novices ou débutants qu'ils ont tendance à utiliser toute l'attention saisissant les couleurs d'écran partout, et cela va ruiner le but de la conception de l'information. En fait, nous concevons des informations à afficher comme ça. Gardez ça à l'esprit et je vais partager tous ces fichiers avec vous. Ils sont en fait un fichier Adobe XD, peut-être une, deux échelle. Peut-être que quelques fichiers de croquis, je vais l'inclure dans mon cours aussi. Si vous avez des questions à me poser dans cette leçon, nous avons ajouté les couleurs d'état que vous pouvez voir ici, et cela va mettre fin à notre jeu de couleurs. Si vous avez des questions, vous pouvez me poser. J' ajouterai quelques trucs et astuces à cette leçon et à ce cours. Jusque-là, à bientôt dans la leçon suivante. 22. Tables de couleurs de tableau de bord: Dans cette leçon, je vais parler de la conception du tableau de bord. Maintenant, les couleurs utilisées dans la conception de tableau de bord sont que vous pouvez voir un peu différent de votre conception Web normale, ou de votre design de logo normal, ou de la conception de marque. Chaque fois que vous concevez un tableau de bord ou des graphiques ou quelque chose comme ça, donc chaque fois que vous voulez afficher beaucoup d'informations dans un petit espace, vous avez besoin de beaucoup de couleurs. Pourquoi ? Parce que nous avons différentes mises à jour, nous avons des messages d'erreur différents, nous avons des messages d'information différents, nous avons différentes icônes de cloche, où nous avons des mises à jour nouvelles et à venir ou une indication que quelque chose a été changé. Peut-être que je suis hors ligne ou en ligne donc il y a un autre état que cet utilisateur est en ligne ou hors ligne. En fait, il y a cinq ou six statuts différents. Maintenant, si vous utilisez un messager ou quelque chose comme ça, vous avez peut-être vu que les mises à jour sur le côté droit, date et l'heure que j'ai envoyé à cette personne, ce moment ou s'il a vu mon message ou non, s'il a lu mon message ou s'il tapait ou non. Ce sont, je pense que cinq ou six messages d'état différents pour n'importe quelle conception de tableau de bord. Je vais vous montrer comment vous pouvez utiliser un jeu de couleurs qui peut rencontrer tous ces problèmes, et aussi, vous devez considérer une chose de plus qui est l'accessibilité ou le bon contraste de vos couleurs. On va creuser, alors commençons. C' est un tableau de bord que j'ai conçu dans Adobe XD, et c'est juste un maquillage rapide. J' ai copié le dessin de quelqu'un d'autre, donc juste pour illustrer ce que je veux dire. Vous pouvez voir sur le côté gauche, nous avons une navigation très sombre où nous avons tous les éléments de navigation, différentes sections de notre tableau de bord « boîte de réception », « important ». Ensuite, nous avons des « canaux » alors il y a peu de choses à l'intérieur des canaux. Ils sont quatre canaux, conception de l'interface utilisateur, convivialité, marketing , support, et vous pouvez également créer un nouveau canal. Ensuite, nous avons archivé des articles. Si vous regardez cette conception, vous pouvez voir que nous avons une hiérarchie différente. Sur le côté gauche, nous avons différents canaux, comme nous avons quatre canaux. Le premier statut que vous verrez ici est, nous allons zoomer. La première est cette sélection, donc l'état Sélectionné est qu'en ce moment ce canal a été sélectionné, et sur le côté droit, ce que vous visualisez est alerté à ce sujet. Vous pouvez voir ici la conception de l'interface utilisateur du titre, sorte que le canal que vous avez sélectionné est la conception de l'interface utilisateur. Pourquoi j'utilise cette couleur bleuâtre clair parce que l'arrière-plan est très sombre donc nous avons une nuance un peu plus claire du même bleu foncé à l'arrière-plan pour être utilisé comme message de mise à jour du canal sélectionné. Je veux montrer à l'utilisateur que ce canal a été sélectionné donc il doit y avoir un moyen clair de montrer que c'est donc très important. La deuxième mise à jour que vous pouvez voir ici est que j' ai quatre nouveaux messages dans le canal de marketing. Pour cela, j'ai utilisé une couleur verte, donc en fait, tout ce schéma de couleurs est basé sur le bleu et le vert. Il est fondamentalement schéma de couleurs analogue où nous avons le bleu et le vert. Ils sont très proches les uns des autres, donc en fait il est fondamentalement vert Cianish, donc c'est un mélange de vert et de bleu en fait. C' est un schéma de couleurs analogue, les schémas de couleurs que les couleurs qui sont plus proches les unes des autres, ils vont bien fonctionner ensemble. J' utilise la couleur verdâtre Citian et cette couleur bleue, et nous avons cette nuance de bleu foncé, puis nous avons un bleu très proéminent ici, qui est bleu très pointu pour les icônes, alors cette chaîne est en fait une couleur bleue un peu terne, donc vous savez la perceuse que c'est en fait la même technique, contraste terne ou sombre de l'obscurité et de la lumière, et pâle, et pointu. C' est ainsi que j'ai créé toute cette section. Maintenant, vous pouvez voir chaque couleur a un certain but, donc vous pouvez voir ici, si nous regardons cette section, vous pouvez voir ce nouveau canal, désolé, ce nouveau canal c'est un bouton, donc en fait il effectue quelques actions. C' est la couleur est plus nette que tous ces, donc ceux-ci sont tous blancs et c'est tout bleu avec cette icône. Maintenant, arrivons au point où nous avons ces deux couleurs différentes, qui est vert et ce rouge. Je vous ai déjà dit que nous avons besoin de beaucoup plus de couleurs et un design de tableau de bord que dans n'importe quel design web ou tout autre design d'application parce que nous devons montrer beaucoup de statuts. Ici, nous avons, encore une fois vert, c'est une couleur verte très forte. Je pense que c'est plus proche de celui-ci, mais c'est plus spécifique à cette section ici, qui est que je suis en ligne ou que cet utilisateur est en ligne. Ensuite, nous avons ce rouge, qui est très commun parce que nous avons déjà ce patron intégré dans nos esprits que ce rouge est en fait la mise à jour, donc la mise à jour de l'icône de cloche. Allons à cette section par ici. Ici, nous avons besoin d'une nuance de couleur plus foncée ici sur le titre du texte, puis d'un peu de couleur gris foncé pour le texte. Maintenant, vous pouvez voir que j'ai assommé cette fois parce que ce n' est pas si souvent important en ce moment. Le message le plus récent est en bas, donc vous pouvez dire ce timing, en fait j'ai essayé de réduire son opacité. Voyons si c'est de l'opacité. Non, je n'utilise pas l'opacité en fait, donc c'est en fait l'opacité. C' est une autre astuce que je vais vous montrer dans une autre leçon en ce moment. Assurez-vous juste que vous obtenez les couleurs et comment je les applique et comment je les utilise. Nuance plus foncée, moins foncée pour le texte, plus foncée pour le titre, moins foncée pour le texte. Encore une fois, vous pouvez voir ici fond clair pour cette boîte de type, lumière, fond bleuâtre et très terne si je vais à la frontière ici. Allons à la frontière. Vous pouvez voir si vous regardez les couleurs ici, la couleur de remplissage, qui est au milieu, est en fait, laissez-moi vous montrer. Utilisez la saturation et la plus brillante à 10 teintes, 5 % de saturation et 99 % de luminosité. Mais si vous regardez la bordure, c'est presque la même teinte, mais la saturation est un peu élevée, et la luminosité est un peu faible. C' est juste un peu de teinte plus foncée du même « remplissage » que j'utilise. Vous pouvez voir que cet effet est très subtil, mais il est perceptible lorsque vous concevez quelque chose comme cette interface utilisateur, ou ce Messenger, ou boîte de chat, ou quelque chose comme ça. De même, le même effet que j'ai appliqué sur le bouton d'envoi et ce texte est un peu plus sombre parce que nous avons besoin de beaucoup de bon contraste avec l'arrière-plan. Passons à ce point ici, qui est notre message ici. partie la plus difficile où j'étais incapable de faire correspondre différentes couleurs, j'ai dû obtenir cette couleur jaune avec beaucoup de lutte. Il est essentiellement une couleur orange jaunâtre et il est dans la teinte 51, 8 et 100. Si vous remarquez que cette couleur de texte est en fait une couleur brunâtre, donc ce n'est pas gris, c'est une couleur légèrement brunâtre parce que le brun, l'orange et le jaune, ils sont en fait plus proches les uns des autres parce que le brun est en fait le plus sombre version de cette orange et jaune est orange très clair, blanchâtre, couleur pâle. C' est ainsi que j'ai fait la combinaison entre eux. C' est l'icône ici. Il est également brun foncé. Ce texte ici est aussi brun foncé. Sur la gauche, je viens de mettre la couleur orange et une bordure de couleur orange autour d'elle, donc ça agit comme une chose séparée ici. Si quelqu'un veut la fermer, il peut appuyer ou cliquer sur cette icône et la supprimer. De même, nous avons des recherches ici. C' est à la fonction supérieure ici. n'y a que deux fonctions qui peuvent être effectuées, que vous puissiez taper ici ou rechercher ici. C' est ainsi qu'en fait l'ensemble du schéma de couleurs fonctionne. Couleur nette sur fond sombre, et couleur blanchâtre terne, c'est quatre canaux que vous pouvez voir ici. Ensuite, nous avons ce nouveau canal couleur bleu très vif pour l'action ici, et c'est tout. J' ai essayé de créer une autre variante. Vous pouvez voir que c'est une couleur bleue un peu plus claire et aussi ces nouveaux canaux de couleur ils sont différents. J' ai aussi essayé différentes combinaisons de vert et de bleu ici, donc ici le bouton d'envoi est vert plutôt que bleu, alors nous allons zoomer et laissez-moi vous montrer les deux jeux de couleurs. Ici, nous les avons. Allons zoomer. Vous pouvez voir en un coup d'œil si vous pressez vos yeux que les zones sont très proéminentes. Ce bouton Envoyer est très proéminent lorsque vous le regardez de loin. Aussi ce message d'erreur ou cette information est très important ici. Ensuite, vous pouvez voir les couleurs sur ces deux mises à jour, 0-4-0-4, ils sont très proéminents. Une fois que vous zoomez sur votre design, vous verrez ce que les choses sont réellement importantes ici et quel jeu de couleurs est superbe. Je voterais pour ce jeu de couleurs de gauche parce que vous pouvez voir si vous regardez le nouveau canal, il est très visible, très lumineux dans cette zone ici sur le jeu de couleurs de gauche plutôt que le bon. Votre mission viendra dans la section suivante pour créer un tableau de bord ou peut-être que je vais vous donner celui-ci pour le colorer pour moi, et ce sera votre tâche. J' espère que vous avez apprécié cette leçon que nous appliquons réellement un schéma de couleurs pour les tableaux et comment différents jeux de couleurs correspondent réellement les uns avec les autres sur ce genre de tableaux de bord. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 23. Faire des plans de couleur accessibles: Dans cette leçon, nous allons parler de l'accessibilité des couleurs et c'est un sujet très important de deux points de vue. Nous allons parler de cécité des couleurs, et nous allons parler du rapport de contraste des couleurs. Ce sont les deux choses qui vont avoir de l'importance lorsque vous concevez avec des couleurs et contrastez des couleurs différentes les unes avec les autres. La première chose est que nous voulons que l'information soit facilement visible, reconnaissable et facilement lisible par l'utilisateur. Le contraste entre l'arrière-plan et le premier plan doit être bon, sorte que tout utilisateur, vous pouvez dire une personne normale, il ou elle peut facilement lire ce texte. Ils peuvent facilement juger ce qui est écrit ou ce que fait ce bouton. Ici, nous avons le schéma de couleurs que nous avons précédemment conçu dans les leçons précédentes, et c'est un schéma de couleurs monochromatiques, différentes nuances de blues, et je mélange en fait la nuance plus foncée avec des nuances claires et nuances claires avec une nuance plus foncée. Vous pouvez voir toutes les différentes couleurs, le texte écrit ici, le texte ici qui est écrit sur ces couleurs, ou sur ces couleurs, il est fondamentalement issu du même schéma de couleurs. La couleur la plus sombre et la lumière la plupart des couleurs sont utilisées pour le texte, et je les fais varier sur différents arrière-plans, et vous pouvez voir que nous avons différents rapports de contraste ici donc maintenant nous parlons de rapport de contraste. Un bon rapport de contraste est supérieur à trois. moment, si vous regardez la gauche, la première combinaison, qui est une couleur bleu pâle, qui est celle-ci, et ce bleu, notre bleu primaire principal, il échoue en fait, donc, le rapport de contraste n'est pas bon pour le texte. Sur tous les autres côté droit, vous pouvez voir que nous avons un bon contraste. Nous pouvons utiliser ces combinaisons en toute sécurité, mais la première échoue, donc nous devons corriger cela. Maintenant, un peu sur ce qui est en fait les standards de rapport de contraste de couleur triple A et double A. Triple A est essentiellement pour le texte plus petit, donc, il est très bon contraste. Si vous avez un contraste triple A, comme nous l'avons fait ici, 7.57 et 8.01. C' est en fait un très bon niveau de contraste, et pour le texte plus petit, si vous concevez une application mobile et que vous avez un très petit message et 14 points, ou peut-être 12 points, très petit texte, vous voulez qu'il ait un bon contraste de triple A. Si vous concevez quelque chose d'autre comme un très grand bouton, et que nous avons comme 18 points de texte dessus, alors nous pouvons utiliser en toute sécurité double A standard aussi. C' est la différence entre ces deux-là. Aussi pour les logos et pour les choses qui ne sont pas importantes. Par exemple, si le bouton est désactivé, si cette fonctionnalité n'est pas présente sur votre écran ou votre tableau de bord, vous devez considérer que même si votre taux de contraste échoue pour cela, cela n'a pas d'importance, car vous pouvez toujours utiliser trois ou deux rapports de contraste pour cela parce que c'est désactivé. L' utilisateur ne va pas utiliser cette fonctionnalité. Pour tout autre chose, n'importe quel bouton pres-able, n'importe quel élément tapissable, n'importe quelle navigation déroulante ou quelque chose comme ça, vous avez besoin d'au moins un standard double A. Ce sont différents rapports de contraste que nous allons aller dans la prochaine leçon sur différents outils que j'utilise et comment j' utilise réellement différents outils pour créer ces rapports de contraste et les vérifier. Ensuite, nous allons également parler de ce qui est un autre outil simple pour vérifier l'accessibilité des couleurs pour les personnes aveugles, qui est le prochain sujet. Ici, nous avons la cécité des couleurs, qui est, je pense que la deutéranopie très commune. Le principal problème avec cela est qu'ils pourraient ne pas être en mesure de faire la distinction entre le rouge et le vert. Chaque fois que vous concevez pour l'accessibilité des couleurs, vous voulez un jeu de couleurs accessible que tout le monde puisse voir ce qui se passe. Soit vous allez accompagner ces couleurs avec des symboles ou des icônes, par exemple, erreur, si vous avez une erreur. Vous pouvez montrer un point d'exclamation avec une icône, une icône qui va montrer à l'utilisateur qu'il s'agit d'une erreur. En outre, avec le succès, vous pouvez afficher la coche ou coche afin que l'utilisateur puisse voir qu'il s'agit en fait du message de réussite. Une chose de plus, si vous regardez ces deux couleurs, rouge et vert, vert est un peu terne ou plus sombre ombre et rouge ont plus de saturation, plus de contraste, plus lumineux, plus de lumière émettant de lui. Essayez de faire la différence entre le rouge et le vert de cette façon. On va être plus dominant, plus lumineux, émettant plus de lumière, et on va être un peu terne. Parce que chaque fois qu' ils voient cela, ils vont voir des couleurs orange jaunâtre pâle , les deux, et ils ne seront pas en mesure de distinguer ce qui se passe. Donc, soit utilisez des icônes avec ceux-ci ou essayez d'utiliser différentes nuances, peut-être vous pouvez dire des niveaux de saturation, on va être un peu terne, couleur sombre, on va être une couleur rouge vif, quelque chose comme ça. Dans la leçon suivante, je vais vous montrer comment j'utilise différents outils, des outils en ligne pour créer un couleurs accessible qui va fonctionner pour la plupart des utilisateurs, et ils n'auront aucun problème à lire tout, en juger ce qui se passe. Passons à la leçon suivante et voyons comment nous pouvons créer des jeux de couleurs accessibles. 24. Outils pour l'accessibilité des systèmes de couleur: Donc, le premier outil que nous allons discuter sur l'accessibilité des couleurs est contrast-ratio.com. Je vais partager tous les liens pour ces différents sites Web ou outils que j'utilise. Ce que nous faisons ici, c'est que nous allons coller nos couleurs chaque fois que nous avons besoin de vérifier le rapport de contraste, nous allons vérifier en collant nos couleurs ici. Nous allons aller à Photoshop, par exemple, j'ai cette couleur. Je vais copier sa valeur hexadécimale et passons à, encore ici. Enlevez ceci et collez-le ici. ce moment, avec la couleur blanche, il a un rapport de contraste de 1,31, ce qui échoue à la norme alors modifions cela. Nous allons utiliser cette couleur sur le dessus. Je vais saisir sa valeur hexadécimale, la copier. Vous pouvez utiliser cela dans Sketch ou n'importe quel logiciel que vous utilisez en ce moment, il est possible pour moi d'utiliser Photoshop. Nous avons le ratio de 7,57, et voici en fait, il montre à quoi cela ressemblera, sur ce fond. De même, nous pouvons échanger des couleurs pour voir les deux effets. Vous pouvez voir, c'est très bien 7.57 est un triple A, qui va fonctionner pour les petits textes aussi. De même, j'aime aussi cet outil qui est colorable.jxnblk.com et je ne sais pas, de toute façon. Nous allons l'utiliser de la même manière, et ici nous allons, j'utilise en fait le même schéma de couleurs, que nous avons réellement amélioré ici. Laissez-moi vous montrer la diapositive suivante. Vous pouvez voir ici cette couleur en fait j'ai amélioré, et ce que j'ai fait est j'ai augmenté la luminosité et aussi la saturation de cette couleur, et en fait j'ai essayé d'utiliser une nuance plus foncée de celle-ci. J' ai utilisé une nuance de couleur plus foncée. Je crois que c'était 25, quelque chose comme ça. Copions ceci et nous allons le coller ici, comme arrière-plan, et nous allons utiliser cette couleur comme couleur de texte. Utilisons celui-là. Nous avons 4.7, donc ce que j'ai fait est de vous montrer ici avec ces curseurs. Ce que j'ai fait, c'est que je voulais rendre cette couleur de texte un peu plus sombre. Ce que j'ai fait, c'est que j'ai augmenté un peu de saturation, et nous allons réduire la légèreté à ici, 0,22 comme ça. Il diminue en fait la luminosité donc si vous voulez, vous pouvez voir chaque fois que j'essaie de diminuer la luminosité, il est en fait plus de contraste. Si je veux beaucoup de contraste comme AAA, vous pouvez voir que j'ai besoin de réduire le plus brillant, et ce sera en fait la valeur ici. Vous pouvez également voir que lorsque j'essaie de diminuer la saturation, peut-être que je ne veux pas de couleur très saturée comme celle-ci. Je veux qu'il soit ici quelque part comme ça. C' est ainsi que vous pouvez jouer avec, vous pouvez fixer les couleurs. Si vous voulez plus de contraste entre eux, vous pouvez jouer avec saturation et légèreté. Vous pouvez voir si j'essaie d'augmenter la légèreté, c'est AA. Quand je vais passer en dessous de trois, ça va échouer, d'accord ? C' est un autre outil. Troisième outil, que j'aime vraiment c'est que je viens de l'obtenir ici, contrast-grid.eightshapes.com. Cet outil est vraiment génial. Laisse-moi te montrer. Ce qu'ils font en fait ici, c'est que ce sont toutes les couleurs différentes pour mon schéma de couleurs. J' ai orange, j'ai bleu foncé, j'ai bleu moyen, j'ai la couleur bleu gris foncé pour le texte. C' est encore une fois pour les textes. Ce sont quelques couleurs claires, des feuilles lumineuses et vous pouvez voir sur la gauche ici, des lignes et des colonnes. Ce que je fais ici est la première colonne et la ligne est pour F, qui est de couleur blanche. Ensuite, nous avons la prochaine couleur qui va être F0, F6, FC, donc c'est encore une couleur bleuâtre pâle. Vous pouvez voir ce qu'il fait réellement est en fait, il croise les deux couleurs et teste toutes les couleurs de texte différentes sur des arrière-plans différents. Toutes ces couleurs sont testées sur toutes ces couleurs en fait. Vérifie tout ça. Vous pouvez voir, par exemple, si vous allez ici dans ce bloc, cette couleur est en fait sur ce fond ici, F0, F6, FC, donc c'est une bonne combinaison et il montre 5.9 problème de contraste. Cela signifie que si j'essaie de mélanger 546067 avec F0, F6, FC, ils vont bien se passer, mais pas pour le texte plus petit. Si je veux aller pour un texte plus petit, vous pouvez voir que je dois considérer cette combinaison qui est, 15303F avec ce F0, F6 FC. Cela signifie que nous devons avoir un peu plus de contraste. Cette combinaison a AAA. C' est un échec, c'est un échec. DNP signifie échec. Il montre, ne passe pas. Cela signifie qu'il ne respecte pas la norme AA ou AAA. De même, ici, vous pouvez voir que cette orange échoue presque sur tous les arrière-plans. Le seul plus grand qu'il va passer est en fait celui-ci, cette nuance plus foncée de noir bleuâtre. Aussi ici, qui est la couleur bleue AAA, AAA, puis encore une fois, cette AA bleu pointu. C' est en fait une combinaison de grille entière de vos couleurs accessibles que ces couleurs vont réellement fonctionner ensemble. Voici l'index, vous suffit de coller la couleur dans chaque ligne différente et avec la virgule, vous pouvez utiliser le nom de la couleur. Si vous voulez, par exemple, si j'avais ça, vous pouvez voir que j'ai du charbon de bois et tout ça. Une chose de plus est que vous pouvez également copier la grille HTML, et CSS si vous voulez l'afficher quelque part. Vous pouvez également augmenter la taille du bloc si vous voulez aimer celui-ci. Vous pouvez clairement voir quel texte fonctionne réellement, et lequel ne fonctionne pas. Donc AAA est quelque chose au-dessus de sept, AA est 4.5 plus, ou parfois AA18 qui est pour le texte plus grand, c'est en fait trois plus. Donc, si vous voyez ou entendez, AA18 signifie que vous pouvez utiliser ce jeu de couleurs mais avec un texte volumineux. Il doit donc être supérieur à 18 points, quelque chose comme ça. Si vous voulez lire à ce sujet, vous pouvez voir ici est en fait, la norme WCAG20 pour Minimum Contrast. Ils ont beaucoup de texte à lire si vous voulez le lire, allez-y. Dans le dernier, je vais parler de l'outil que j'ai utilisé pour les personnes aveugles de couleur ou altérées qui ont de la difficulté à juger de quelle couleur il est. Vous pouvez télécharger cette Color Oracle.org et télécharger l'application pour Windows, Mac ou Linux. Laissez-moi vous montrer un exemple. Donc ici, j'ai ce design. Maintenant, je suis déjà en cours d'exécution de cette application pour que vous puissiez y aller. Je vais faire un clic droit, et je vais montrer cette deutéranopie la plus courante, cette altération de couleur. Je vais sélectionner ceci, et voir à quoi ressembleront mes couleurs. En ce moment, vous pouvez voir leur vue ou leur version de voir toutes ces couleurs. Vous pouvez voir si vous regardez correctement sur ce jaune et cette couleur rouge, il n'y a pas tellement de différence, cette couleur orange ou cette couleur rouge. Ils ont besoin d'une certaine séparation. Donc c'est un peu plus sombre, c'est un peu plus léger. Essayez de vous assurer que quelque chose comme ça arrive. De même ici, ils ne voient que la plupart des couleurs qui sont plus sombres et plus claires. Ils ne peuvent pas faire la distinction entre ces couleurs, donc si je clique ici, c'est à nouveau la vue. Essayons de le changer pour autre chose. Essayons de la couleur rose par ici. Prenons du blanc ici. Voyons comment ça ressemble quand j'allume ça. Le même, je pense, le point principal derrière tout cela est que vous devez avoir quelque chose de distinguer entre les différents niveaux de couleur. Une couleur est un peu plus foncée, l'autre est un peu plus claire. Ça va les aider. Sinon, ils voient surtout la plupart des couleurs qu'ils vont mélanger ensemble. Par exemple, cela est principalement rouge et orange et jaune, ou vert. Ça va être beaucoup d'ennuis pour eux. Choisissons d'autres handicaps comme protanopie, c'est rare mais ça a quelques problèmes. Vous pouvez voir maintenant cela est presque similaire à cela, mais cet écran est très jaune pour eux. Choisissons un autre, qui est la tritanopie. C' est différent, et vous pouvez voir qu'ils voient en fait cette couleur orange comme la couleur rose et la couleur rouge est visible. Toutes les autres couleurs sont visibles, mais le vert a quelques problèmes. Vous pouvez voir qu'il s'affiche sous la forme d'une couleur bleue. Donc, c'est tout. Essayez de vérifier vos couleurs sur une échelle de gris et vous pouvez voir que nous avons différents niveaux. Essayez de voir que votre conception doit avoir différents niveaux d'échelle de gris. échelle de gris signifie que quelque chose est plus lumineux et léger que l'autre. L' un est sombre, l'autre est clair, l'autre est sombre, l'autre est clair. Ça va vraiment marcher pour ces gens. Deuxièmement, laissez-moi vous montrer un autre exemple. Voici donc un autre exemple d'application. Vous pouvez voir ici, nous avons différents Bitcoins, comme 22 pour cent incrément ou diminution. Laissez-moi vous montrer quel est le problème dans cette conception. Donc, si je vais à cette déficience visuelle la plus courante, vous pouvez voir ce symbole plus et le symbole moins est la seule chose qui différencie entre ceux-ci. Donc, si vous pouvez regarder 1,5 flèche vers le bas, cela va les aider que cela diminue réellement. Dans ce cas, ils ne peuvent pas dire avec le verre que cela diminue ou augmente. Si vous regardez cette zone, l'un est un peu terne, et l'autre est une couleur un peu nette. Laissez-moi vous montrer, c'est un peu différent. Donc, quand ils regardent ici, vous pouvez voir plus de jaune vif et c'est terne. Cela leur montre clairement que cela a un certain accroissement, un certain profit, et cela a quelques pertes ici. Mais ici, c'est un peu différent. Si vous regardez de près, vous pouvez voir, laissez-moi vous montrer. Il y a une différence de, vous pouvez dire l'obscurité et la légèreté dans ces deux couleurs, rouge et vert. Essayez de l'utiliser pour différencier. Aussi, essayez d'accompagner avec différentes icônes. Nous pouvons utiliser cette flèche vers le bas et la flèche vers le haut pour montrer à ces personnes ou à ces utilisateurs que, cela signifie réellement cela. Parce que tout le reste se résume à l'exposition à l'information. En fait, nous communiquons avec nos conceptions. Nous montrons en fait à l'utilisateur que cette couleur signifie cela. Nous communiquons en utilisant des couleurs, par alignement, par différentes icônes. C' est en fait ce qu'un designer fait. Ils communiquent et montrent l'information d'une manière visuelle, d'une meilleure manière, et la présentent à l'utilisateur afin qu'il puisse la comprendre. Ce sont quelques problèmes que je voulais vous montrer concernant cette déficience et les outils que j'utilise. Pour vérifier les différents rapports de contraste et tout ça. Essayez de créer tous ces jeux de couleurs comme ceci, et vous serez entre de bonnes mains. Assurez-vous que vos couleurs ont un bon rapport de contraste et qu'elles ne remplissent pas le contraste principal que j'ai vu beaucoup de designers qu'ils ne connaissent pas sur ce problème, et surtout ils créent beaucoup de shorts dribble ou [inaudible] portefeuille. Ils créent des applications mobiles dont les rapports de contraste ont échoué. Donc, si vous avez des questions à me poser, je vous verrai dans la prochaine leçon. 25. Plugin Stark pour l'accessibilité des couleurs: Aujourd'hui, je vais partager avec vous un très beau plugin que vous pouvez utiliser pour vérifier votre accessibilité des couleurs, les rapports de contraste des couleurs, et le daltonisme. Beaucoup de designers, j'ai vu qu'ils ne savent pas ou ils ne se soucient pas beaucoup de l'accessibilité des couleurs ou ne se soucient même pas de tester leurs arrière-plans de couleur et rapports de premier plan que cette couleur sur cet arrière-plan, si ce devrait être un bon contraste, si elle sera visible ou lisible sur différentes tailles d'écran ou différents écrans. Je vais vous montrer un très beau plugin qui est disponible pour les applications Adobe XD et Sketch. Vous pouvez les utiliser et nous allons voir ce que c'est. Ici, nous avons ceci, c'est Stark et c'est un excellent plug-in. Vous pouvez l'utiliser pour Adobe XD et pour Sketch et il teste en fait différents standards de rapports de contraste comme AA, AAA. AAA est pour le petit texte et celui-ci est pour le texte volumineux, 4.5. C' est en fait le point doux, AA votre texte doit être au moins dépassé cette norme. Pour un très petit texte, vous devez passer celui-ci AAA. En outre, il a des simulations en aveugle couleur, sorte que vous pouvez tester la couleur pour les personnes aveugles ou les utilisateurs. Il y a quelques autres fonctionnalités à venir comme les suggestions de couleurs et l'exportation transparente. Voyons et testons dans Adobe XD, puis je vais passer à mon Sketch sur mon Mac et nous allons voir cela à partir de là. Maintenant, en ce moment je suis dans Adobe XD et vous pouvez voir si vous allez dans ce menu, Je suis sur en ce moment sur Windows, vous pouvez aller à Plug-ins. Vous pouvez cliquer sur Discover plugins, et vous pouvez rechercher Stark ici et il est déjà installé. S' il n'est pas installé, suffit de cliquer ici et il sera installé. Une fois qu'il a été installé, vous pouvez voir ici j'ai deux boutons, laissez-moi zoomer. Cette couleur est assez visible pour moi sur ce fond, mais si je la sélectionne, les deux et je vais à Plug-ins et Stark and Check Contrast, vous pouvez voir qu'il échoue ici. Le rapport de contraste est presque 3:1, 3,34 ce qui est très faible pour moi. Maintenant, testons le second. Je vais sélectionner les deux et je vais à nouveau aller à Plug-ins et Stark, Vérifier le contraste, et maintenant vous pouvez voir qu'il passe presque normal texte 4.5 ratio, ce qui est bon, pour les gros textes, il passe les deux. Je pense que c'est assez bonnes combinaisons de couleurs, donc si je vais aller avec mes boutons, je vais utiliser ces deux couleurs plutôt que ces deux. Essayez de vous assurer que vous utilisez des couleurs qui ont bons rapports de contraste et qui respectent toutes les normes de couleur. Essayons l'autre outil qu'il a. Sélectionnons-les et je vais tester la simulation colorblind. Ici, nous avons la simulation colorblind, gardons ça comme ça et je vais l'utiliser. Je pense que c'est le plus populaire, 4-5 pour cent de personnes ont cette deutéronopie. Ce qui s'est passé en fait, pour qu'ils puissent voir cette couleur bleue. Vous pouvez voir que cette couleur est un peu différente, mais cette couleur est également différente, c'est presque violet. Voyons voir d'autres, tritanopie, cela a tourné vers le vert. C' est ainsi que vous l'utilisez sur Adobe XD. Maintenant, je vais passer à mon outil Sketch et je vais vous montrer l'écran et comment ce plug-in fonctionne dans Sketch. Maintenant, vous pouvez voir que je suis en ce moment sur mon iMac, et ceci est mon Sketch, et j'ai déjà téléchargé et installé ce plug-in Stark. Donc, nous allons juste aller à Plug-ins et Stark et Show Stark. C' est en fait l'écran que nous obtenons. Voyons voir, nous allons utiliser cet iPhone 8. Laisse-moi juste le rendre un peu plus grand comme ça. moment, c'est dans ce mode de daltonisme. Il simule celui-ci, deutéranopie et aussi vous pouvez tester un autre. Vous pouvez également exporter cette vue de sorte qu'il y a peu de fonctionnalités disponibles sur celle-ci. Si vous voulez tester les rapports de contraste des couleurs, vous pouvez voir ici nous avons le contraste des couleurs. Sélectionnons celui-ci et vérifions le contraste, cliquez ici, sélectionnez deux couches contenant [inaudible]. Il nous faut deux couches. Que se passe-t-il ? Je vais sélectionner celui-ci et celui-ci, vérifions le contraste. C' est en fait ces deux couches et vous pouvez voir qu'il me montre que le rapport de contraste est de 7,06, donc il passe tous les différents rapports de contraste. En ce moment, comme vous pouvez le voir, ces couleurs ne sont pas les mêmes, que je vous ai montré sur mon Adobe XD, ce sont des couleurs un peu différentes. Si je teste la même chose pour ces deux-là, prenons ces deux-là et vérifions le contraste. Il va échouer la plupart d'entre eux. C' est juste bon pour le gros texte, qui est, je pense en fait, plus de 18 ou 19 pixels, ou 18 points, je suppose. C' est 3.34, je pense qu'il est très bas, au moins il devrait passer celui-ci. C' est ainsi que vous utilisez le plug-in Stark sur votre Sketch, donc il s'agit d'utiliser le plug-in Stark dans le logiciel Sketch. J' espère que vous avez appris quelque chose de précieux dans cette vidéo, bientôt, dans la prochaine vidéo. 26. 3rd projet de couleur avec un objectif: Voici une autre affectation et il s'agit de créer un jeu de couleurs basé sur un thème de couleur. thème de couleur est fondamentalement ce que l'entreprise fait et comment la société a utilisé quelques mots clés qui vont vous aider à définir ce que cette société réellement [inaudible] avec leur schéma de couleurs. Voici votre mission. SecureDot est une entreprise de sécurité en ligne, construire un schéma de couleurs professionnel et fort qui reflète ce qu'ils font. La première chose est qu'ils sont des sociétés de sécurité, ils sont en ligne. Les mots-clés ici sont sécurité, professionnel et fort. Essayez d'utiliser picular.co ou tout autre jeu de couleurs. Ce que je veux que vous fassiez, c'est que vous allez soumettre ce jeu de couleurs avec cet écran. Qu' est-ce que vous attendez ? Commencez à créer cette affectation maintenant. 27. Magie des différences de couleurs subtiles: Dans cette leçon, nous allons parler d'un secret très simple de la conception de l'interface utilisateur, qui est des différences subtiles. Maintenant, je vais vous montrer comment vous pouvez gérer vos différences subtiles, des différences très légères dans vos couleurs et vos formes pour créer une excellente interface utilisateur. Ici, comme vous pouvez le voir, j'ai ce message très simple. Je l'ai créé en seulement 10 minutes. Je le créais en ce moment. Ici, comme vous pouvez le voir, il y a quelques problèmes avec cet écran. La première est que si vous regardez cette zone ici, cette frontière, elle a l'air très moche. Ce que nous allons faire est, vous pouvez voir qu'il y a un fond très pâle, cette couleur remplie à l'arrière, qui est aussi cette couleur très claire et pâle de cette presque même teinte. Ce que nous allons faire, c'est que nous avons besoin de cette couleur, nous allons commencer avec cette couleur comme bordure. Ce que je vais faire, c'est que je vais commencer avec la même couleur qu'elle a pour l'arrière-plan, pour la bordure comme celle-ci et ensuite ce que nous allons faire, c'est que nous allons réduire notre luminosité à 90 pour cent. Si vous voulez cet effet, vous pouvez voir une bordure très réglée et si vous zoomez, vous pouvez voir que vous n' allez pas l'obtenir dans vos yeux. Ça ne va pas te blesser les yeux en fait. Sélectionnez ceci, rendons plus 80 pour cent. Maintenant, je pense que c'est mieux à 80 pour cent, donc je vais garder ça. Si vous le souhaitez, vous pouvez augmenter la saturation. Essayons 25 pour cent et faisons 90 pour cent, quelque chose comme ça. Ça a l'air bien. Je vais aller avec cette couleur. Réduisons un peu la saturation, 20 pour cent. Ok, donc je vais ajouter cette couleur à mon jeu de couleurs aussi, ok ? C' est la magie des différences subtiles. Je viens de créer un joli look avec différenciation, avec un peu de différence entre les couleurs. De même, si vous regardez ces textes, ils sont de la même couleur, le même noir. Ce que je vais faire, c'est que je vais sélectionner cette couleur. Désolé, ce texte ici. Il y a deux trucs. Premièrement, vous pouvez utiliser cette opacité et aller environ 60 pour cent de frais généraux, ou comme 70 pour cent, donc 70 pour cent est belle. C' est un truc très simple. Beaucoup de développeurs peuvent l'utiliser, qu' ils peuvent réduire l'opacité de la même couleur à 70 pour cent. De même, il y a deux minutes, nous ne voulons pas que ce soit aussi brillant, donc nous allons aussi le réduire à 50 %, quelque chose comme ça, ou peut-être à 60 %. C' est ainsi que la magie subtile des différences fonctionne réellement dans nos schémas de couleurs ou dans notre texte. C' est en fait une version un peu plus améliorée de la même chose. Ok, donc si vous voulez un effet de plus, vous pouvez ajouter ici, vous pouvez ajouter la bordure. Ce que nous pouvons faire ici, c'est que nous allons commencer la même chose avec la même couleur. Nous allons réduire cette luminosité à 90 pour cent et la saturation à 80 pour cent. Faisons 88 pour cent. Quelque chose comme ça. Ok, donc c'est intéressant. Rendons-le un peu plus visible. Je vais faire 85 pour cent, 82 pour cent. Ça a l'air bien. C' est une autre façon d'augmenter votre ressemblance de votre interface utilisateur et ne voulez pas la jeter dans les yeux de vos utilisateurs, ok ? C' est un truc très simple que je voulais vous montrer. J' ai vu beaucoup de designers, ils ne le savent pas ou ont une idée à ce sujet. Chaque fois que vous faites quelque chose comme ça, n'essayez pas d'utiliser la même couleur pour tout. Essayez de réduire la luminosité, alors ajustez-le pour créer de superbes interfaces utilisateur. J' espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, nous allons vous voir dans la prochaine leçon. 28. Qu'est-ce que les niveaux de couleur ?: Dans les leçons précédentes, dans les vidéos précédentes, vous m'avez vu créer différentes nuances d'une seule couleur. Nous les utilisons principalement dans le tableau de bord ou d'autres conceptions d'interface utilisateur. Nous avons surtout besoin, je pense, trois ou quatre, deux tentes et deux nuances, au moins quatre ou cinq échelles différentes de la même couleur. Maintenant, le sujet est l'échelle. Je vais vous montrer et partager avec vous les outils en ligne où vous pouvez générer. Vous pouvez mettre une seule couleur et créer beaucoup de couleurs différentes qui peuvent aller avec cela, avec différentes nuances et tentes. Nous allons l'appeler simplement l'échelle, l'échelle de couleur. Commençons par ce site. C'est un très vieux. Je l'ai utilisé comme peut-être il y a cinq ou six ans. Je continuais à l'utiliser. Vous entrez simplement une couleur, par exemple, celle-ci. Il va vous montrer où est cette couleur. C'est par ici. Ici, nous avons toutes les nuances claires. Si vous descendez, vous pouvez voir qu'il devient plus sombre, plus sombre et plus sombre. Chaque fois que vous concevez quelque chose, par exemple, un tableau de bord si vous voulez obtenir toutes les différentes nuances et différentes tentes de la même couleur. Par exemple, je veux une couleur plus claire pour mon arrière-plan, ou peut-être quelque chose comme ça. Je vais me déplacer comme quatre ou cinq étapes ou six pas, comme peut-être celui-ci, je vais le copier et le coller et essayer celui-ci avec cette couleur. C' est un outil très pratique, 0to255.com. Ensuite, je vais passer à des outils modernes. Celle-ci est créée par un type que je pense Hihayk. C' est l'un des grands outils que je vois en ligne. Ici, nous avons cette couleur de départ, c'est la couleur de départ. Si vous voulez commencer à partir d'une autre couleur, laissez commencer à partir d'une autre couleur. Allons-y avec celui-là. Ajoutons un peu de bleu ici. Je lui ai donné cette valeur. Quoi que vous fassiez, vous essayez de mettre une valeur ici, valeur hexadécimale ou utilisez ces curseurs si vous le souhaitez. Commençons par cette couleur. Déplaçons un peu de rouge d'ici pour le rendre plus bleu. Ça a l'air génial. Quoi qu'il en soit. C'est le point de départ. Il suffit de coller votre couleur ici. Laisse-moi te montrer ce que ça fait. Il utilise en fait quelques angles et quelques calculs différents pour obtenir d'autres couleurs. Ce sont principalement des couleurs analogues du schéma de couleurs pour correspondre à ce bleu. Ce milieu est en fait votre couleur, par ici. Il utilise quatre marches sur le côté gauche, côté plus sombre et un, deux, trois, quatre, cinq, six sur le côté plus léger. Il génère en fait 10 couleurs. Si vous voulez changer des valeurs, si je veux peut-être sept. Neuf nuances de lumière. Pas 70. Je veux sept. Ajoutons neuf ici. Maintenant, nous avons neuf nuances de lumière par ici. Si je veux peut-être 10, vous pouvez voir que j'ai 10 nuances différentes ici. De même, si je veux plus de valeurs sombres, peut-être que je veux six valeurs sombres. Je vais en ajouter six ici. Maintenant, c'est l'étape en fait. Cinquante pour cent, si tu veux le changer. Permettez-moi de le changer à 15 %. Vous pouvez voir que c'est ainsi que cela change. De même, si je vais à celui-ci, je mets ici 20 pour cent, vous pouvez voir qu'il est en fait léger 20 pour cent à chaque fois. Nous n'avons pas besoin de ça parce que nous avons besoin de très belles couleurs vives. Je vais utiliser 50 ou peut-être 65 pour cent, quelque chose comme ça. Peut-être que je veux l'augmenter 85, utilisons-le 85. Celle-là est superbe. De même pour les plus sombres, je vais utiliser 30 pour cent. Non, 50 % ont l'air bien. Ici, nous avons des étapes. Ensuite, nous avons la légèreté et les ténèbres. C' est essentiellement le contrôle de la luminosité. Ensuite, nous avons l'angle de teinte sur votre roue de couleur si vous vous en souvenez. Je ne me souviens pas de quelle couleur il y a là-bas. Mais ce que je vais faire, c'est en fait de modifier votre schéma de couleurs. A partir de celui-ci, il va en fait moins sept degrés dans des angles sombres. Ça change juste un peu la couleur, l'angle de ta teinte un peu. De même de ce côté, il change l'angle à plus 67 pour cent. Si vous voulez le réduire, vous pouvez voir maintenant c' est la couleur pourpre, qui était très proche de la nuance bleue sur les roues de couleur. Si vous continuez à itérer, si vous voulez un jeu de couleurs ici, par exemple, vous pouvez voir qu'il s'agit d'un schéma de couleurs totalement différent. J' ai déplacé mon angle à 189 pour cent, utilisons 90 pour cent. Quatre-vingt-dix pour cent est en fait totalement, vous pouvez dire sur un pas de là-bas. Différence de 90 %. Utilisons 180. C' est ainsi que vous pouvez utiliser cet angle de teinte de couleur claire pour créer différents jeux de couleurs. Comme vous pouvez le voir, celui-ci est en fait analogue, couleurs très proches, vert et bleu. J' aime vraiment ça. Je vais rester avec celui-là. Des couleurs plus sombres, j'aime ça moins sept degrés, donc je ne vais pas le changer. De même, le dernier arrêt est la saturation. Si vous voulez des couleurs sombres très saturées, si vous vous souvenez, je vous ai dit que chaque fois que vous allez faire votre schéma de couleurs plus foncées, vous allez le saturer. Plus de saturation et plus d'obscurité. De même pour les couleurs claires, je vais réduire leur saturation. Je vais utiliser 10 pour cent ici. C' est ainsi que mon schéma de couleurs fonctionne réellement. Si vous voulez plus de saturation, vous pouvez voir, vous pouvez essayer plus de saturation comme celle-ci par exemple. Je veux un thème très où je veux un look très vert ou un look très frais, donc je vais augmenter la saturation ici. Utilisons la luminosité à 90 et la saturation est de 80 pour cent. C' est ainsi qu'il crée tout mon schéma de couleurs. J'adore vraiment ça. Il a six couleurs sombres et 10 couleurs claires. Vous pouvez utiliser juste celui-ci pour créer l'ensemble du jeu de couleurs. Vous n'avez pas besoin de plus de couleurs. Peut-être un peu de pâturage. C' est ce qu'on appelle en fait une échelle de couleurs. Suivant est cet outil de la boîte de couleur de conception de levage. Ceci est également similaire à celui-ci, mais ici nous avons plus de contrôle et je pense que ce contrôle semble mieux. Sur le côté droit, vous pouvez voir qu'il me montre palette de couleurs avec les rapports de contraste des couleurs. Vous pouvez voir 1.56, 2.23. Trois a l'air super. Ensuite, nous avons quatre contrastes, 4.06w, et ainsi de suite et ainsi de suite. Ici, nous pouvons contrôler les étapes. Par exemple, je veux 15 étapes ici, et c'est ma teinte de départ. Par exemple, je veux commencer par un peu de bleu ici, et je veux finir par un violet rougeâtre par ici, quelque chose comme ça. C' est en fait, vous pouvez voir ce sont les étapes et aller dans une direction différente, ce qui signifie que la teinte est en train de changer. Vous pouvez voir 195, 197, 199. Ce sont les valeurs de teinte, je suppose que je vois. Ce sont les valeurs de teinte en bas et en haut il s'agit en fait de la valeur d'échelle 0,10, 20, 30. C' est en fait mes pas d'échelle. Ici, nous avons la courbe. Si vous voulez le changer, vous pouvez le changer comme ceci EaseInout. Il est en fait différent en utilisant une combinaison différente de la méthode EaseIn à appliquer sur celui-ci par exemple, j'utilise quelque chose comme ceci. Vous pouvez voir sur la droite, il génère le jeu de couleurs. Si vous voulez saisir l'ensemble du jeu de couleurs, vous pouvez utiliser cette capture d'écran pleine page. Vous pouvez capturer ceci, ou vous pouvez utiliser celui-ci, cet outil, j'adore vraiment. C' est getfireshort. Laissez-moi vous montrer comment ça fonctionne. Je vais capturer la partie visible ou capturer ma sélection. Je vais sélectionner cette zone ici pour obtenir toute ma palette de couleurs. C'est tout. Je vais l'enregistrer en tant que jeu de couleurs. Vous vous demandez peut-être comment on peut copier tout ça ? Quoi qu'il en soit. Ici, nous avons différentes courbes, et ensuite nous avons la saturation. Vous pouvez voir combien vos couleurs de départ seront saturées, comment moins saturées seront ? A la fin, nous avons beaucoup de situations, nous pouvons le contrôler ici. De même, nous avons la courbe, changeons le taux. C' est contre la saturation. Combien de saturation nous avons besoin ? Celle-ci a l'air bien. Alors c'est à nouveau pour la saturation, je suppose. C' est pour la saturation. Celle-là a l'air superbe. Ensuite, nous avons la luminosité. La luminosité est la quantité de lumière qui doit être émise par vos couleurs. Mon départ sera des couleurs plus claires, donc plus de luminosité et aura moins de couleurs sombres. Sombre, vous pouvez voir moins de luminosité comme ça. Quels que soient les paramètres de teinte que vous voulez, alors encore une fois, nous avons cette courbe. Je ne suis pas sûr de verrouiller les couleurs. Qu' est-ce que la couleur de verrouillage signifie ? Je pense que peut-être à partir d'ici, la valeur hexadécimale. Peut-être que je veux verrouiller cette couleur. Laisse-moi voir. Celui-ci est en train de verrouiller cette couleur. Ensuite, vous pouvez le partager et réellement partager par URL, RVB, couleurs JSON. Si vous êtes un programmeur, je pense que vous pouvez utiliser ce JSON hexadécimal. Vous pouvez également copier ces valeurs hexadécimales si vous le souhaitez et les utiliser dans votre logiciel ou logiciel de conception. C' est en fait l'échelle. Nous avons des étapes 0,10, 20. Ceci est également utilisé par Google Material Design. Si vous vous en souvenez, alors le dernier outil est celui-ci. C' est en fait pour les données. Si vous voulez présenter beaucoup de données ou d'informations ou très gros graphiques où nous avons beaucoup de données. Vous pouvez l'utiliser. Ce sont différents modes de couleur sur le côté gauche, j'utilise normalement la légèreté de la teinte, et vous pouvez choisir la couleur. Par exemple, je veux choisir une couleur ici en commençant et ici j'ai la lumière de couleur de fin. Utilisons celui-là. Ici, vous pouvez ajouter différentes étapes si vous le souhaitez. Par exemple, un, deux, trois, quatre, cinq, six, sept étapes, ajoutons huit, neuf et 10. J' ai créé toute l'échelle ici. Vous pouvez également le visualiser. Si vous cliquez sur visualisé, vous pouvez voir comment cette couleur va montrer la carte des USA. C' est comme ça que vous pouvez voir. En bas à droite, il est dit chômage américain 2018. C' est la nuance jaune, la nuance très brillante est le chômage élevé. Vous pouvez voir, si je survole dessus, ça va me montrer les valeurs. Si vous êtes dans la conception d'informations, vous pouvez utiliser un sélecteur de couleurs comme celui-ci et vous pouvez copier tous ces éléments et créer votre jeu de couleurs pour vos visualisations. C' est tout au sujet de l'échelle et de la façon dont vous pouvez générer de l'échelle en utilisant ces quatre outils en ligne, il y en a peut-être d'autres, mais en ce moment, je trouve ces outils très intéressants. J' espère que vous avez apprécié cette vidéo. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 29. 4th projet - S'écarte avec des Échelles: Maintenant, le temps est pour une autre affectation et ça va être un peu difficile parce que je veux que vous créez un jeu de couleurs qui va s'adapter à toutes ces différentes actions. Vous pouvez voir ici, ce champ est le champ sombre, qui est l'adresse e-mail, il est actif en ce moment. Le second, le mot de passe, est vide et il est dans l'état par défaut, n' est pas rempli, état inactif. Ensuite, nous avons le bouton Créer un compte, qui est plus convaincant ou le bouton principal Appel à l'action ou CTA, que nous l'appelons sur l'écran, qui a le focus principal de cet écran. Ensuite, nous avons déjà un compte et connectez-vous ici, ce qui est une action secondaire. Vous allez remplir cet écran de couleur comme ceci. Je vais te montrer ce que j'ai fait ici. Vous pouvez voir, donc voici mon schéma de couleurs pour ce plus sûr et vous pouvez voir ici, j'ai utilisé différentes couleurs pour différents états. Comme vous pouvez le voir, notre principale couleur primaire est cette couleur bleu foncé, bleu royal et ensuite nous avons très clair bleuâtre, bleu ciel pour la connexion ici. Vous allez soumettre cette version schématique de couleurs avec votre version en niveaux de gris, et avec ce jeu de couleurs. Au moins montrez-moi votre jeu de couleurs et aussi le jeu de couleurs que vous utilisez et vous pouvez dire, quelles sont les différentes fonctions que vous attribuez à chaque couleur, par exemple, c'est notre couleur primaire, c'est notre secondaire action. C' est l'action principale, sont des couleurs de marque, celui-ci est supplémentaire, alors nous avons la couleur de champ de texte inactif, qui est la bordure autour d'elle, champ de texte inactif. Ensuite, nous avons le texte d'entrée inactif, qui est le mot de passe écrit à l'intérieur. C' est pour le texte sombre. Nous avons du texte clair, du texte sombre, champ de texte actif, la bordure autour du champ de texte actif. Ensuite, nous avons cette histoire. Il n'est pas blanc, il est de couleur très blanchâtre de 204 teinte, qui est, je pense que notre couleur bleue de marque. Ensuite, nous avons la couleur secondaire. Je veux que vous me montrez votre jeu de couleurs et quelles sont les fonctionnalités ou fonctions assignées à chaque couleur. Que fait cette couleur, ce que fait cette couleur, et ce que fait cette couleur. Ce sera votre mission. J' espère que vous le soumettrez bientôt. Vous pouvez utiliser n'importe quel logiciel ou en fait, Adobe Photoshop ou Sketch. Commençons. 30. 12 Conception toujours à l'échelle grise: Aujourd'hui, je vais vous montrer le troisième secret de toute conception de schéma de couleurs. Chaque fois que vous commencez votre conception, vous allez concevoir un cadre de mots, comme vous pouvez le voir ici sur la gauche. Vous pouvez voir, j'ai utilisé différentes valeurs ou différentes nuances de gris, de l' obscurité à la lumière pour représenter mon cadre de mots afin que vous puissiez voir qu'il s'agit d'un champ actif. Il a une bordure plus sombre que celle-ci. Ceci est en fait non rempli champ inactif, champ de texte. De même ici que vous pouvez voir cette couleur de texte, et cette couleur de texte est la même. Ce logo, il a une couleur très sombre, et aussi vous pouvez voir que j'ai séparé cette couleur O, de ce point avec un peu de gris. Juste pour montrer que cela va être une couleur différente. De même, vous pouvez voir ici, j'ai montré que ce bouton, c'est la partie la plus importante, donc il est mis en surbrillance sur cet écran. De même en bas, vous pouvez voir que j'ai utilisé la connexion ici, dans toutes les majuscules et il a également la couleur foncée. Vous avez déjà un compte. Ce texte est clair et le bouton Connexion, qui est une action, il fait sombre. Vous pouvez voir d'un seul coup d'œil, vous pouvez regarder cet écran, et vous pouvez dire que ces choses sont importantes, ou surlignées, ou leur état est différent de l'autre, donc ce sont les choses que vous devez prendre attention chaque fois que vous commencez un de votre design, site Web ou quoi que ce soit. L' astuce ici est toujours, toujours et toujours commencer votre conception en échelle de gris. N' essayez jamais de commencer à concevoir quelque chose comme ça, et à choisir des couleurs au hasard, et continuez à concevoir des choses au hasard. Essayez d'esquisser, essayez d'encadrer votre application, votre site Web, ou tout ce que vous concevez, puis choisissez de la couleur. Par exemple, comme ici, j'ai ramassé cette couleur primaire, qui est bleu foncé. Alors ce sont en fait deux couleurs de marque, et ce vert est extra, ça va m'aider parfois. Ensuite, vous pouvez voir toutes ces couleurs, ils sont en fait les nuances de la même couleur, qui est celle-ci. Cette couleur, et ils ont différentes nuances. Celui-ci utilise pour les textes. Celui-ci est de nouveau pour le texte, textes sombres, le texte clair. Ce sera notre expérience. Ce n'est pas blanc, il a une teinte mélangée dedans, cette couleur je suppose. Alors j'utilise cette couleur. C' est pour mon action secondaire. Vous pouvez voir ici les couleurs primaires, la couleur secondaire, donc si vous pensez que vous avez vraiment besoin d'une couleur très contrastée pour votre action secondaire, vous avez tort. Vous pouvez voir ici ce bleu est très léger et très, vous pouvez dire, de couleur très vive plutôt que cette couleur sombre. Il est totalement opposé à celui-ci, mais ce n'est pas si contrastant comme celui-ci. Ce bouton « Créer un compte », a plus de contraste, et il est plus dynamique, et il attire l'attention plus que cette connexion. Votre prochaine mission sera de créer quelque chose comme ça, et aussi de me montrer votre schéma de couleurs, combien de nuances vous avez besoin pour compléter tout l'écran, vous pouvez voir ici, il y a différentes couleurs utilisées pour cette champ actif, spécifié. C' est ici, puis ce bouton. Un autre bouton qui est une action secondaire, et ce texte est différent. Ce texte est un peu plus sombre, celui-ci est un peu léger, donc c'est ainsi que vous concevez quelque chose comme ça. Aussi l'arrière-plan ont un peu de couleur ici. Ils sont sur la gauche. Vous pouvez voir que j'ai ajouté les couleurs dans mon panneau d'actifs. C' est [inaudible]. Si vous voulez utiliser le sketch ou toute autre application, c'est bon. Vous pouvez aller de l'avant et utiliser n'importe quel outil. Figma ou tout ce que tu veux. Montre-moi tes écrans et c'est tout. Dans la leçon suivante, vous allez créer l'affectation, mais maintenant si vous avez des questions, faites-le moi savoir, posez-moi au cours de la discussion, ou si vous avez des suggestions, faites-le moi savoir. J' espère que vous avez apprécié cette leçon et vous apprendrez le secret de la conception de bonnes interfaces ou de bons schémas de couleurs. Autrement dit, commencez toujours votre conception avec une échelle de gris. A bientôt dans la prochaine leçon. 31. Nommer vos couleurs correctement: Dans cette vidéo, je vais vous montrer les trucs et astuces sur la façon de gérer vos couleurs. Pendant que vous gérez vos couleurs, la première chose est comment vous allez les nommer. Je suis en croquis. Vous pouvez voir ici, je vais partager ce fichier avec vous. Vous pouvez voir ici, j'ai 20 couleurs différentes. Ici, j'ai différentes nuances de blues, saturation différente, une légèreté différente pour le Grey. Vous pouvez voir que j'ai comme 10 gris différents et neuf ou 10 gris différents, alors nous avons des nuances de vert, d'oranges, rouge, de violet et de couleur cyan. Cela va réellement vous aider à construire lorsque vous concevez un tableau de bord. Comment allez-vous nommer vos couleurs ? La première chose est que combien de couleurs sont, combien d'ombre avez-vous besoin. Si vous ne construisez pas un système plus grand, je vous suggère de construire au moins cinq nuances différentes de la même couleur. Si vous avez le rouge foncé, le plus sombre, le rouge plus foncé alors nous avons le rouge moyen, alors nous avons ce rouge clair, alors c'est le rouge le plus clair. C' est comme ça que vous allez les nommer. sombre, plus léger, plus léger, moyen, quelque chose comme ça. Ce schéma de dénomination peut être utilisé jusqu'à cinq couleurs. Mais si vous avez comme, j'ai ces couleurs grises, comme elles sont neuf couleurs différentes. Comment je vais les nommer ? Je vais utiliser une autre technique qui est appelée, j'ai vu beaucoup de designers et même je pense que Google Material Design l'utilise. Nous allons les nommer : Grey 20, Grey zero, 10, 20, 30, 40, 50, 60. Chaque fois que vous montez comme Grey 60 ou 70, ou 80 ou 100, ils seront les couleurs les plus sombres. Comme vous descendez comme zéro, 10, 20, ce sont des nuances plus claires. Cela va aider vos développeurs ou toute équipe avec laquelle vous travaillez, qu'il est plus facile de transmettre les couleurs que vous utilisez. Chaque fois que vous essayez de construire quelque chose comme ça, je veux que vous nommiez vos couleurs comme ça. Gris 20, Gris zéro, Gris 10, Gris 20, 30, 40, 50, 60, 70, 80 et 100. Ou vous pouvez au moins aller à 90 pour avoir comme 10 nuances différentes. Je pense que 10 suffiront, plus que suffisant. C' est ainsi que vous allez nommer vos couleurs. Dans la leçon suivante, je vais vous montrer comment vous allez réellement les enregistrer ou créer un guide de style ou des styles dans Adobe Sketch. Passons à la leçon suivante. 32. Utiliser une pluche de générateur de style dans l'ébauche: Dans cette vidéo, je vais vous parler de la façon dont vous allez générer des styles d'esquisse pour vos couleurs. Par exemple, j'ai 30 couleurs, je ne veux pas créer un seul style encore et encore, donc je veux créer tous les styles. Pour cela, vous avez besoin d'un plugin appelé Sketch Styles Generator, allez-y et téléchargez-le et installez-le en double-cliquant dessus. Ensuite, nous allons aller à Sketch. Laissez-moi aller à « Create New File », « New Art Board », créons n'importe quel tableau d'art. Créons celui-là. Je vais choisir quelques rectangles ici. Ici, nous avons un rectangle. Commençons par un peu de couleur ici comme si j'avais cette couleur bleue. Répliquez-le deux, trois et quatre. Je vais aller avec une autre couleur, peut-être comme ça. Ajoutons un peu de gris ici, ajoutons un peu de couleur cyan bleuâtre, sombre pour le fond peut-être, j'ai quelque chose comme ça. J' ai maintenant quatre couleurs, donc ce que je vais faire c'est d'abord, je vais les renommer. Vous pouvez utiliser un plugin appelé « Renommer It ». En fait, je ne les ai pas organisés, alors organisons-les comme ça. Allons le rendre plus léger, donc nous allons juste avec la couleur la plus claire de tous ces. Quelque chose comme ça. Ici, nous avons le rectangle un, deux, trois, quatre. Top 1 est le, en haut. Ensuite, je vais déplacer ce calque vers le bas. Celui-ci doit être ici, et celui-ci est à la bonne position. Maintenant, je vais les sélectionner tous et je vais exécuter un autre plugin pour les renommer, « Renommer Selected Layers », et nous allons utiliser « Layer Name » avec « Number Sequence ». Renommons comme ça. C' est bleu slash bleu un, deux, trois, quatre. On a quelque chose comme ça. Nous pouvons également utiliser le numéro d'assignation, comme bleu un, deux, trois, quatre. Renommons les. Ça va être quatre, c'est le plus sombre, puis on a bleu trois, deux, un. C' est une façon de les renommer. Maintenant, nous allons les sélectionner tous et nous allons aller à « Plug-in » et nous allons utiliser « Style Generator » ici, cliquez ici, et tous les styles ont été générés. Si on passe ici, on voit à l'intérieur bleu, on voit bleu un, deux, trois, quatre. C' est ainsi que vous allez créer vos styles et générer vos styles, sorte que vous pouvez les réutiliser dans Sketch. C' est ainsi que vous allez organiser vos couleurs. Si vous utilisez Zeplin ou Tiers Tool pour le montrer à vos développeurs, alors vous allez construire votre jeu de couleurs là-bas. C' est tout. J'espère que vous avez apprécié cette leçon et n'essayez pas de télécharger ce plug-in Style Generator. Laisse-moi te montrer. Vous allez également générer des styles pour vos couleurs de texte. Si je clique ici, vous pouvez voir que c'est quelque chose appelé styles, en-têtes, noir. J' ai quelque chose comme ça, bouton, blanc, bleu, forme, texte sous forme de texte, actif rempli, inactif. Vous allez créer tous ces styles et couleurs différents pour votre outil de paragraphes. Vous pouvez voir ici ce texte ici, qui est paragraphe, il est différent de l'en-tête et il a une couleur différente. Vous allez créer tous les styles différents, générer tous les styles différents à l'aide de ce Générateur de styles, et vous pouvez les utiliser dans vos conceptions ultérieurement. Il s'agit de la réutilisation et de la façon dont vous allez gérer vos styles dans Sketch. Dans la vidéo suivante, je vais vous montrer le même processus que vous pouvez faire dans Adobe XD. Passons à la leçon suivante. 33. Gestion des couleurs dans Adobe XD: Maintenant, en ce moment, je suis dans Adobe XD et je vais vous montrer comment vous allez ajouter vos couleurs à vos actifs, qui sont vos styles, couleurs et styles de râpe. Ce que je fais en fait est si vous avez conçu toutes vos couleurs et appliqué vos couleurs à votre écran, vous allez juste sélectionner tout, Cliquez avec le bouton droit de la souris. Et ajoutez des couleurs aux actifs. C' est aussi simple que cela dans Adobe XD. Maintenant, vous pouvez aller dans ces couleurs et vous pouvez les organiser. Par exemple, c'est la couleur la plus sombre, donc je vais la déplacer vers le haut, puis celle-là, puis nous avons celle-là, quelque chose comme ça. Ensuite, nous avons ce gris, qui est le plus sombre de toutes ces choses. Ensuite, nous avons cette couleur primaire en haut, allons le déplacer en haut, alors nous avons ces deux couleurs de marque.Déplaçons celui-ci vers le haut, et c'est tout. Aussi, je pense qu'il y avait une couleur à utiliser pour l'arrière-plan, qui est celui-ci ; FAFD et quelque chose comme ça. Nous pouvons ajouter cette couleur à partir d'ici, cliquez avec le bouton droit Ajouter des actifs, et il a été ajouté ici. Ce que je fais ici, c'est que je suis en train de les organiser comme ça et vous pouvez aussi les renommer, par exemple, c'est mon bleu primaire, quelque chose comme ça, alors vous pouvez utiliser à nouveau la même technique, gris 60 et les choses comme ça, ce que je vous ai dit dans la dernière leçon 350. C' est ainsi que nous allons les nommer. Vous pouvez également les nommer comme ça, par exemple, c'est cette couleur et nous pouvons l'ajouter à la couleur de fond peut-être, quelque chose comme ça. Vous pouvez les nommer en fonction de leur fonctionnalité, vous pouvez également les nommer comme ça, vous pouvez également les nommer par exemple, la couleur du texte, la couleur du texte sombre, la couleur du texte clair, des choses comme ça. C' est ainsi que vous allez gérer vos couleurs dans Adobe XD. Si vous souhaitez ajouter vos styles grexer avec les couleurs, vous pouvez cliquer avec le bouton droit de la souris et ajouter un style grexer aux ressources. Cela va ajouter la couleur et la taille de la police, tout ici. De même, pour d'autres, par exemple, c'est votre autre style, vous pouvez ajouter ces silice afin que vous puissiez continuer à l'ajouter. C' est ainsi que vous allez créer des ressources et des couleurs de votre guide de style dans les styles grexer dans Adobe XD. C' est ainsi que vous allez gérer vos couleurs dans Adobe XD, j'espère que vous avez apprécié cette leçon. Vous pouvez également basculer pour créer une vue. Vous pouvez voir ici c'est sympa, mais il ne montre pas l'emprunt de nom à l'avance. Vous pouvez également rechercher la couleur, par exemple, si j'essaie d'utiliser un nom, par exemple, primaire, il va me montrer la couleur. Je peux également cliquer avec le bouton droit de la souris et le mettre en évidence sur la toile où il a été utilisé sur différentes toiles, donc ce sont beaucoup de grandes fonctionnalités et j'espère que vous avez apprécié cette leçon. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 34. Gestion des couleurs dans Photoshop: Dans cette vidéo, je vais vous parler de la façon dont vous allez organiser et enregistrer vos palettes de couleurs et vos couleurs dans Photoshop, Adobe Photoshop. Vous pouvez voir sur le côté droit que j'ai le panneau des nuanciers. Si vous ne le voyez pas, vous pouvez aller à « Windows » et ici vous pouvez cliquer sur « Nuancier ». Dans le panneau des nuanciers, vous pouvez voir que nous avons ce menu sur la droite. Si vous cliquez ici, nous avons différentes options, minuscules miniatures, de petites miniatures, grandes vignettes, une petite liste. Si vous avez nommé vos couleurs correctement comme bleu primaire, primaire foncé, secondaire actif, bleu lien, quelque chose comme ça, vous devez vraiment passer à cette vue, petite liste. Ou vous pouvez également passer à cette grande liste, vous pouvez voir que je peux facilement trouver les couleurs. Vous pouvez voir, les couleurs du bas que je ne les ai pas nommées, donc vous pouvez voir qu'il est difficile de les toucher ou de les utiliser. Donc, la première chose est toujours d'essayer de nommer vos échantillons. Deuxièmement, c'est que si vous avez quelque chose comme vous pouvez voir ici, j'ai déjà beaucoup de couleurs dans ma palette de couleurs, et je veux commencer un nouveau projet, et maintenant je veux un schéma de couleurs totalement séparé. Je ne veux pas qu'ils soient ajoutés ici ou ici. Donc, ce que je vais faire, c'est, je vais aller à mon « Remplacer Nuancier ». D' accord ? Vous pouvez ainsi réinitialiser vos nuanciers, charger de nouveaux nuanciers, enregistrer des nuanciers. Vous pouvez remplacer les nuanciers. Donc j'ai un fichier, donc je vais d'abord les enregistrer. Laissez-moi les enregistrer sur le bureau. Mon échantillon actuel, 2019. D' accord. J'ai donc sauvé ma nuance et maintenant ce que je vais faire, c'est que j'ai un fichier. Laissez-moi vous montrer où il est. J' ai donc un fichier appelé nuanciers vides et je vais cliquer sur « remplacer les nuanciers » et aller trouver ça. Je viens de le coller sur mon bureau « commutateurs vides », et je vais le charger. Vous allez voir ce qui se passe. Toutes les couleurs ont disparu, donc nous avons juste une couleur noire. Maintenant ce que je vais faire, c'est que je vais ajouter mes couleurs maintenant. Je viens de ramasser cette couleur, je vais ici, et le sélecteur de couleur et va ajouter deux échantillons. Donc maintenant je vais nommer une colle primaire ou peut-être un tiret, je vais utiliser un tiret, quelque chose comme ça. Vous pouvez également les ajouter à votre bibliothèque actuelle. Par exemple, si je clique ici, je vais l'ajouter à ma bibliothèque actuelle, et je peux ensuite l'utiliser dans Adobe XD, Adobe Illustrator, Adobe Photoshop, CC Live Software qui utilisent la bibliothèque. Donc maintenant, je vais juste l'ajouter ici. Je vais choisir le suivant, et je vais cliquer à nouveau sur « Swatch ». C' est mon, appelons-le jaune secondaire. Ensuite, je vais cliquer ici et quant à ce qui va être mon fond blanc ou quelque chose comme ça, fond blanc. C' est encore une autre couleur, peut-être moyenne ou quelque chose comme ça. Alors gardons ça comme Cyan. Donc ici, je n'ajoute que quatre couleurs. Vous pouvez également ajouter plus, par exemple, comme denses et tons, différents de cette couleur bleue ici, par exemple. Maintenant, je vais l'ajouter à comme bleu, dix, quelque chose comme ça. Ensuite, je vais à nouveau aller à ce bleu 20, quelque chose comme ça. Alors je vais passer en revue celui-ci, bleu 30, quelque chose comme ça. Donc je pense que j'ai plus qu'assez de couleurs en ce moment. Donc, si vous voulez supprimer une couleur, vous pouvez simplement la ramasser, attraper, et laisser sur cette suppression et il va être supprimé. Vous pouvez également cliquer avec le bouton droit de la souris et aller dans le gestionnaire de préréglages et ici vous pouvez les déplacer si vous le souhaitez. Par exemple, je veux qu'il soit ici, et ensuite je veux qu'il soit là comme ça. Pour que je puisse les déplacer, et vous verrez qu'ils ont été arrangés. Il y a donc beaucoup de choses que vous pouvez faire avec eux. Alors passons-les à une grande liste, et ici nous avons toutes les couleurs listées correctement. Voici comment vous allez utiliser différentes palettes de couleurs, organiser vos couleurs dans Adobe Photoshop. Si vous avez des questions à me poser. Passons à la leçon suivante. Avant cela, je vais vous dire que vous pouvez télécharger ce fichier d'échantillons vide. Je vais te le montrer, je vais te le donner. Vous pouvez simplement remplacer vos nuanciers à l'aide de ce fichier de palette vide .aco ou couleur nuancier, et vos couleurs disparaîtront. Revenons à mes couleurs. Donc je veux qu'ils soient mon échantillon actuel, donc je vais le charger comme ça dans les petites vignettes. D' accord. Donc c'est tout. Si vous avez des questions à me poser, passons à la prochaine leçon. 35. Extensions de navigateur pour trouver des couleurs: Dans cette vidéo, je vais partager avec vous mon meilleur choix de couleurs et de couleurs générant des plugins ou des extensions que vous pouvez ajouter à votre navigateur Chrome et à votre navigateur Firefox. Commençons. D'abord, je vais aller avec quelques extensions Chrome parce qu'ils sont vraiment gentils et vraiment génial. Laissez-moi vous montrer comment ils fonctionnent réellement. Ici, j'en ai un. Il est en fait palette de site. Si je clique dessus, vous pouvez voir que j'ai des rayures site en ce moment. Il va générer une très belle palette tout comme un guide de style. Ici, j'ai toutes les couleurs. Je les ai d'une manière très agréable. À la fin, vous pouvez voir modèle d'esquisse, nuancier d' Adobe, ouvrir à la palette Google, ouvrir à Coolers. C' est vraiment génial. Je peux les télécharger. C' est le, je pense, meilleur plugin que j'ai vu. Vous pouvez voir ici nous avons toutes les différentes options de téléchargement. Ensuite, je vais passer à la suivante, qui est Colorzilla, vous pouvez voir par ici. C'est très vieux. Je l'utilise de beaucoup comme je pense deux ou trois ans des trois dernières années. Il vous suffit de cliquer ici et vous commencez à choisir la couleur à partir d'ici. Je ne sais pas pourquoi ça ne marche pas. J' ai besoin d'aller sur ce site en fait. Ici, nous l'avons. Vous pouvez voir maintenant chaque fois que je me déplace ici, par exemple je veux choisir cette couleur verte, je vais cliquer ici. Il va choisir la valeur hexadécimale et aussi il va la copier. Si je veux coller cette couleur dans Photoshop, Sketch ou tout autre, j'ai juste besoin de contrôler ou de commander V pour coller cette couleur. Celui-ci est Colorzilla. La première que je t'ai montrée est Site Palette, celle-ci. Alors celui-ci est Colorzilla. Au suivant qui est celui-ci, Snatchr. Il va à nouveau saisir toutes les couleurs de ce site. Vous pouvez voir ici, les couleurs du texte. Ce sont les couleurs d'arrière-plan. Il a deux sections, les texte et les couleurs d'arrière-plan. Vous pouvez voir comment ils ont utilisé différentes nuances de bleus grisâtres ici dans le texte. Il va aussi saisir les styles de typographie. Camphre a été utilisé ici principalement sur l'ensemble du site. n'y a pas d'option pour les télécharger. Je dirai que si vous voulez obtenir celui-ci, il est bon que les couleurs aient été séparées en couleurs arrière-plan et de texte, mais rien de plus que vous pouvez faire. Ensuite, nous avons un suivant qui est ce Palettab. Laisse-moi te montrer. Voici celui-ci, Palettab. Il est également disponible pour Firefox. Il est disponible pour Firefox et Chrome. Chaque fois que vous ouvrez un nouvel onglet, vous pouvez voir ici nous avons une belle palette ou un beau schéma de couleurs. Chaque fois que vous faites cela, vous allez obtenir un nouveau schéma de couleurs. Chaque fois que j'ouvre un nouvel onglet, peu de mes étudiants, ils continuent à me demander, quelle était cette extension que vous utilisez, qui créaient ces schémas de couleurs avec ces polices Google. Il s'agit en fait de la palette de couleurs. Désolé, Palettab, celui-là. Vous pouvez le télécharger en solide. Il est également disponible pour Firefox. Seulement deux extensions sont disponibles pour Firefox et Chrome à la fois et qui est Palettab et Colorzilla. Ce sont très, vous pouvez dire très anciennes extensions. Alors la dernière que je vais vous montrer est celle-là, CSS Peeper. Laissez-moi vous montrer ce qu'il peut faire. Fermons celui-là. Ici, nous l'avons. Voici le CSS Peeper. Si vous cliquez ici, vous pouvez voir qu'il va vous montrer le nom du site, puis les polices utilisées ici sur le temps de chargement du fichier CSS. Si vous passez à ces couleurs ici, vous pouvez voir qu'il a répertorié toutes les différentes nuances qui ont été utilisées sur cette couleur. Même l'opacité, avec l'opacité. Par exemple, celui-ci a été utilisé 0 pour cent d'opacité, 8 pour cent d'opacité et tout cela. Vous pouvez simplement copier à partir d'ici une seule couleur mais vous ne pouvez pas télécharger toute la palette. Si vous allez à celui-ci actifs, il montre tous les actifs, différents PNG et SVG, je suppose. C' est l'onglet que nous recherchons afin que vous puissiez copier n'importe quelle couleur que vous aimez. Peut-être que vous aimez juste une couleur et que vous voulez commencer votre jeu de couleurs avec celui-ci. Ce sont cinq plugins différents que vous pouvez télécharger et que vous pouvez installer dans votre navigateur Chrome et Firefox. Laisse-moi te montrer. C' est le Palettab dans Firefox, vous pouvez voir qu'il charge le même. Ensuite, nous avons cette Colorzilla par ici. Vous pouvez également installer Colorzilla. Il y en a un de plus que je vais vous montrer qui est le Générateur de Guide de Style. Cela ne fonctionne pas avec tous les sites Web, mais si vous cliquez ici, vous pouvez voir qu'il génère un guide de style, similaire à Site Palette je suppose. Je ne suis pas sûr que vous puissiez télécharger quoi que ce soit ou n'importe quoi. Vous ne pouvez pas télécharger de Swatch ou Palette de couleurs pour ouvrir dans Photoshop ou Sketch, Adobe XD ou autre. Ceci est un autre outil, Générateur de Guide de Style, Palettab et Colorzilla. Nous avons quelques extensions dans Firefox qui sont bonnes pour la génération de schémas de couleurs mais d'autre part, dans Chrome, nous avons beaucoup de bonnes options ici. ce moment, le gagnant d'aujourd'hui pour moi est la Palette du site. C' est l'un des meilleurs outils que je pense. Vous pouvez voir qu'il peut télécharger le modèle d'esquisse et Photoshop pour ouvrir dans votre outil de conception préféré. En outre, celui-ci est très pratique. Parfois, j'ai juste besoin de choisir une couleur alors j'utilise celle-ci. Je choisis Colorzilla et je choisis cette couleur et je commence à partir de là. Ce sont toutes les différentes extensions et plugins que j'utilise. Si vous avez d'autres recommandations ou si vous utilisez autre chose, essayez de me montrer dans la discussion des commandes. J' espère que vous avez apprécié cette vidéo. Allons passer à autre chose. A bientôt dans la prochaine vidéo. 36. Outils en ligne pour les Schemes de couleur que j'utilise: La plupart des nouveaux designers ont tendance à avoir des ennuis que, « Quelle couleur dois-je choisir ? Ou « D'où dois-je commencer mon jeu de couleurs ? » Par exemple, si vous construisez votre propre startup ou quelque chose comme ça, vous vous demandez peut-être, « Où dois-je trouver mes couleurs ? » Je vais partager avec vous quelques-uns de mes outils, seulement cinq d'entre eux, que vous pouvez utiliser. Vous pouvez les utiliser pour générer des couleurs à partir d'une image ou d'une image. Si vous voulez avoir une photo de plage ou quelque chose comme ça, vous pouvez ramasser des couleurs à partir de là aussi. Donc, si vous savez quel est votre thème, par exemple, mon thème est l'alimentation, l'agriculture ou quelque chose du genre. Je peux prendre une photo d'un environnement et je peux commencer à construire mon schéma de couleurs. De même, je vais vous montrer deux outils que j'explore normalement. Les schémas de couleurs sont déjà construits et nous pouvons également commencer à partir de là. Allons creuser. Le premier outil que je vais vous montrer est color.adobe.com et vous allez cliquer sur ce « explorer ». Une fois que vous cliquez sur cette explorer, vous verrez beaucoup de jeux de couleurs cool que vous voulez commencer avec. Il y a, je pense, peut-être, plus de milliers de couleurs ici. Ici, nous avons le plus populaire, le plus utilisé aléatoire tout le temps cette semaine, quelque chose comme ça. Vous pouvez voir ici nous avons à gauche, ce schéma de couleurs, c'est très clair schéma de couleurs pour peut-être le parfum des femmes ou peut-être quelque chose comme ça. La plupart du temps, il est lié à la fraîcheur et un peu de touche féminine donc, vous pouvez voir celui-ci. Si vous voulez le télécharger, vous pouvez cliquer sur le téléchargement. Vous pouvez également l'enregistrer. Vous pouvez l'ouvrir ou le modifier si vous le souhaitez. Vous pouvez voir ici le bleu et les oranges et les verts. C' est un autre. C' est plus lié à la nature, je suppose. Ensuite, nous avons différentes nuances de blues que j'aime vraiment. Ensuite, nous avons ce bleu et orange, qui sont bleu violacé, qui sont mes couleurs préférées. Ensuite, nous avons celui-ci, très simple vert et orange et jaune. Ce sont tous les différents schémas de couleurs. Ce que vous voulez faire ici est, par exemple, je veux quelque chose peut-être en bleu et orange, je vais taper ici bleu et orange et vous verrez qu'il y aura beaucoup de couleurs différentes que j'ai utilisé le bleu et les oranges. Celle-ci que j'aime vraiment, je pense qu'on peut facilement l'utiliser ici. Commençons par ici, essayons de l'éditer. Ici, nous avons celui-là. Vous pouvez voir qu'il a été ouvert ici. De même, si nous revenons en arrière, voyons si nous pouvons le sauvegarder ou le télécharger. Cliquez sur « Télécharger ». Nous devons nous connecter à notre Adopter CC. De toute façon, nous allons cliquer sur « Enregistrer ». Vous pouvez également créer votre propre ID. Vous pouvez créer votre ID ici. Vous pouvez également télécharger Adobe XD, qui est un logiciel gratuit. Si je veux cliquer sur l'info, vous pouvez voir que c'est tout l'écran. Je pourrais essayer de prendre la capture d'écran ici. Pour cela, j'utilise cet outil Jing. Si vous n'avez pas Jing, je pense que vous devriez le télécharger. C' est un outil gratuit et j'aime vraiment comment ça fonctionne réellement. Parfois, c'est très pratique pour moi. Vous pouvez également utiliser ce fichier de capture d'écran court plug-in ici dans Firefox et Google Chrome. Donc, ce que je fais, c'est que je prends normalement quelque chose comme ça et je vais commencer avec ce schéma de couleurs. Ce seront mes couleurs principales, ce bleu et cette orange. C' est un bleu plus foncé, c'est blanc, et c'est un peu de couleur pâle ici. Fermons ça. C'est ainsi que je vais commencer avec Adobe Color CC. Voyons maintenant un autre site où je vais normalement explorer différents schémas de couleurs et différentes palettes de couleurs. Voici l'explorateur, essayez de cliquer dessus et vous verrez des tonnes de couleurs différentes. Ici, vous pouvez voir qu'il y en a beaucoup. Vous pouvez également les filtrer. Par exemple, je veux du bleu et du jaune. Voyons voir quels sont les schémas de couleurs ici. Ça prend du temps. Cela prend beaucoup de temps. Je pense que leur moteur de recherche est lent, mais j'ai tapé maintenant bleu et orange et vous pouvez voir ici orange et bleu. Tous les thèmes qui ont été marqués avec orange et bleu, ils sont ici. Je pense que leur recherche est un peu lente et lente. Je ne ferai pas quelque chose comme ça. Ça va prendre beaucoup de temps ici. Donc je peux aller « Suivant », « Suivant ». Ici, j'ai peu de bons orange et blues. Bleu, orange, vert. Bleu, orange, vert. Bleu, orange, citron vert, et beaucoup d'autres schémas. Vous pouvez également créer et enregistrer vos propres jeux de couleurs. Si vous allez à mon profil, je vais vous montrer mon compte et le profil où j'ai créé, je pense comme 10 ou 15 couleurs différentes et palettes de couleurs. Je vais les partager avec vous donc, ne vous inquiétez pas, vous pouvez les télécharger et les utiliser dans n'importe quelle application ou logiciel. Vous pouvez voir ici j'ai une alimentation saine. C' est tout vert, brun et jaune. Bleu, vert, jaune, vous pouvez voir ici, schéma de couleurs très populaire. C' est orange-noix de coco, et c'est aussi des bruns et des oranges et des jaunes. Ensuite, nous avons fume-métal, vert, bleu, et quelques autres versions vertes et bleues, différentes. Rouge, bleu, vert. C'est sûr. Vous pouvez l'utiliser dans n'importe quelle application. De même, peu de plus. Ce sont quelques nuances différentes de bleus, de bleu et de cyan. Je l'ai utilisé dans quelques-uns de mes cours. Vous pouvez voir peu plus de projet organique. Ceci est en fait schéma de couleurs analogiques, verts et bleus, projet V2. Ce sont 14 schémas de couleurs. Je vais partager ça avec toi aussi. Ne vous inquiétez pas, vous pouvez facilement les télécharger. La prochaine chose est que, si vous avez une image ou un jeu de couleurs, par exemple, je veux construire mon jeu de couleurs basé sur une image. Je vais télécharger cette image. Ceci est de canva.com. Choisissons une image. Vous pouvez sélectionner n'importe quelle image si vous le souhaitez. Choisissons cette image de mon studio. Je pense que cela va prendre un certain temps, alors sélectionnons une image de mes photos. Ça a l'air bien. Je vais cliquer sur cette image ici et voyons quel jeu de couleurs il va me montrer. Ici, j'ai une photo d'un intérieur de chambre et vous pouvez voir ce sont des couleurs différentes. Il m'a montré bleu clair, ardoise foncé, gris ardoise clair, et ces quelques couleurs. De même, c'est un autre outil que vous pouvez également utiliser. Il suffit de prendre une image, par exemple, je vais prendre celle-ci. J' aime aussi celui-ci parce qu'il montre beaucoup de différentes variétés de couleurs. Vous pouvez voir par ici. En fait, je pense qu'il y a quelque chose ici que je ne peux pas comprendre. Est-ce des couleurs gratuites ou une triade ? Quoi qu'il en soit, je pense qu'il essaie de générer une palette de couleurs basée sur ces harmonies de triangles de couleurs différentes, triades gratuites. C' est en fait très utile. Il y a beaucoup de couleurs différentes à choisir. Puis un autre outil, qui est celui-ci, palettgenerator.com. Envoyez-nous une image ici. Ici, nous l'avons. Vous pouvez voir qu'il me montre beaucoup moins de couleurs, tous les bruns. Prenons les dix couleurs dominantes. Voici en fait un peu plus de couleurs. Je l'aime d'une certaine façon parce qu'il montre toutes les différentes nuances, forces et tons des couleurs comme ici. En outre, c'est l'arrière-plan. Utilisez les couleurs sur les arrière-plans ici. Il y a encore quelques couleurs manquantes. Encore une fois, colormind.io. Vous pouvez également télécharger une image ici. Commençons par celle-là. Il va construire un jeu de couleurs basé sur cette image. Maintenant, vous pouvez également cliquer sur « Générer », et il va vous montrer quelques nuances de plus. Vous pouvez voir un beau schéma de couleurs. Il crée en fait les nuances de la même image que nous venons de télécharger. Voici quelques outils que vous pouvez utiliser. Ces deux Adobe Color CC et coolers.io, Explorez les palettes de couleurs, générer des palettes de couleurs à partir des images. Ce sont quatre outils, et c'est tout. Si vous avez des questions à me poser, passons à la prochaine leçon. 37. Trouver des inspirations de couleur en ligne: Dans cette vidéo, je vais vous montrer quelques autres outils que j' utilise et quelques autres choses que vous devez garder à l'esprit comme, quelles sont les couleurs par défaut pour iOS ou Android ou Windows système d'exploitation. Ainsi, chaque fois que vous concevez pour une application iPhone ou une application Android Material Design, vous devez savoir quelles sont les couleurs de leur système. Je vais vous montrer aussi certains des comptes de génération de schéma de couleurs Instagram où ces gens qu'ils essaient de créer beaucoup de schéma de couleurs cool afin que vous puissiez ramasser à partir de là. Commençons. C'est le premier site, je pense que je l'ai utilisé plusieurs fois. Je pense que cela devrait être l'un des meilleurs outils pour trouver le thème de votre entreprise. Par exemple, je veux un sérieux, quelque chose. Voyons voir quelles sont les couleurs il y a, ces couleurs sont principalement marron orange, vous pouvez voir le blues, donc c'est comme ça que je vais commencer avec mon équipe de mes jeux de couleurs. Deuxièmement, je vais vous montrer quelles sont les couleurs par défaut de Windows, iOS et Android. Ceci est un article de icons8.com, et vous pouvez voir qu'ils ont montré tous les différents extracteurs. Voici la palette de conception de Windows 10. Vous pouvez l'obtenir d'ici, le guide de style officiel. Ensuite, nous avons iOS 10 ou iPhone valeurs par défaut du système d'exploitation. Vous pouvez voir ici que nous avons du rouge. Ce sont des valeurs différentes pour les couleurs qui ont été utilisées, qui ont été utilisées dans les iPhones ou le système d'exploitation iOS. Ensuite, nous avons cette conception de matériel Android, vous pouvez voir qu'ils ont beaucoup de palettes de couleurs à l'échelle. Nous avons différentes échelles de couleurs. 50-900. [inaudible] de la même couleur et ils ont beaucoup de couleurs que vous pouvez choisir à partir de là. C' est un excellent article que je vais partager avec vous tous les liens, donc vous n'avez pas besoin de vous inquiéter à ce sujet. Ici, nous avons encore une fois, ce sont les couleurs des lignes directrices de l'interface humaine d'Apple.com. Alors maintenant, je vais vous montrer certains des sites Web inspirants. Ici, j'ai cela de deux ou trois ans il y a, je l'ai sauvé, thedaycolor.com. Vous pouvez voir qu'il y a des tonnes de grands, très modernes, très uniques schémas de couleurs. Vous pouvez voir que nous avons ici et ici nous avons très foncé bleuâtre violet et orange dessus. Je ne suis pas sûr que tu puisses voir. Ceci est un autre, vous pouvez l'utiliser dans n'importe quel design d'interface, bleu, rouge, vert et jaune. Ils ont toutes les couleurs, les couleurs d'état, tout. Tu peux commencer par quelque chose comme ça. Ici, nous avons quelques abonnés Instagram et Instagram vous pouvez dire, je ne suis pas sûr de ce qui est des comptes. Je tombe cette couleur géniale. Et ce type ou cette fille ou qui qu'il soit ou elle soit, la part. Beaucoup de grande, Vous pouvez voir les schémas de couleurs ici. Je pense qu'ils ont des tonnes de schémas de couleurs et vous pouvez, si vous voulez commencer ou ici, par exemple, ce violet et vert ressemble beaucoup. Aussi, j'ai ici la couleur pourpre et cyan, très beau schéma de couleurs. Il y a des tonnes de grands schémas de couleurs ici. Nous avons encore une fois, orange et bleu, très populaire, j'adore. Ensuite, l'autre est Colors Cafe, couleurs.cafe, c'est un autre et il a aussi beaucoup de schémas de couleurs, vous pouvez voir. En outre, il montre comment il ou elle y ajoute plus de couleurs. J' aime vraiment la façon dont il se montre sur différents milieux, sombre et clair. Ici, nous avons la lumière et l'obscurité. C' est Colors.cafe. Vous pouvez commencer avec n'importe quel schéma de couleurs comme celui-ci, cela a l'air génial. C' est un grand schéma de couleurs, orange et bleu. Vous pouvez voir le secret derrière ceux-ci est, vous pouvez voir si vous voyez les cinq couleurs entières, que la luminance est, ce n'est pas très différent les unes des autres. Toutes les couleurs sont, ont la même émission de lumière, donc ils sont comme des couleurs moyennes ternes, des couleurs très décentes. Vous pouvez les appeler des couleurs décentes. Ils ne sont pas très pointus, ils ne sont pas très amusants ou ils ne sont pas très, vous pouvez dire, je vous donne une ambiance. Si vous regardez ici, laissez-moi vous montrer ce que je conçois. Vous pouvez voir ces deux couleurs, elles sont très nettes, elles ont beaucoup de contraste, c'est en fait très sombre, bleu violacé. Laisse-moi te montrer. En fait, c'est mon schéma de couleurs que je construis en ce moment. Un autre jeu de couleurs, cette expérimentation dans Adobe Illustrator, vous pouvez le faire partout. Vous pouvez voir ici que j'ai, c'est ma couleur primaire réelle et celle-ci. J' utilise soit celui-ci sombre. Je l'étend avec vous pouvez voir des couleurs pâles, des nuances claires de jaune, des bleus. C' est, je pense que mon autre couleur que j'essaie d'ajouter à mon jeu de couleurs, mais maintenant, je vais juste aller avec ces deux-là. C' est de couleur bleu violacé foncé et jaune orangâtre ou or. C' est comme ça que je travaille. J' ai utilisé différents outils en ligne pour générer cela donc vous ne pouvez pas dire que je, vous utilisez juste, j'utilise choisir les deux premières couleurs moi-même et puis je l'ai étendu en utilisant des outils en ligne comme vous étiez en train de voir des couleurs ici, je obtenu de coolers.co Aussi peu de couleurs ici, ils sont aussi de coolers.co. Ces saccharose, je crois que j'ai pris ailleurs. Quoi qu'il en soit, c'est ainsi que je construis mon schéma de couleurs. Ce sont toutes les inspirations que vous pouvez également rechercher autour de vous dans la nature, dans les différentes publicités, sur les panneaux d'affichage, tout. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, discutons et passons à la leçon suivante. 38. Outil en ligne pour les dégradés de couleur: Depuis les dernières années, les gradients ont été beaucoup utilisés dans votre conception Web, conceptions d'applications mobiles de différents concepteurs, concepteurs d' interface utilisateur et concepteurs Web, ils étaient dans beaucoup de tendance et sont toujours, donc je suis va partager avec vous cinq ou six ressources et sites Web différents que vous pouvez utiliser pour obtenir un gradient linéaire et d'autres dégradés que vous pouvez les utiliser dans votre conception. Le premier que je vais vous montrer est web gradients.com, et la chose cool à ce sujet est que vous pouvez télécharger le fichier de croquis et le fichier PST. Il y a, je pense 180 dégradés différents et vous pouvez les utiliser sur les boutons ou tout ce que vous voulez. J' aime vraiment cela parce que vous pouvez également copier le CSS. Si vous êtes un développeur Web, vous pouvez copier CSS. Vous pouvez télécharger l'esquisse ou PST, vous pouvez également ouvrir ce fichier d'esquisse dans Adobe XD si vous le souhaitez. C' est, je pense, le paradis des gradients web. Si vous cliquez ici sur le croquis et que vous devez le télécharger, il va vous montrer cet écran, WebGradients sketch, gumroad.com, et la plupart de mes étudiants, je ne sais pas pourquoi ils ont des problèmes de téléchargement. Ça dit 0$. Si vous voulez le faire, vous pouvez le faire don. Sinon, vous appuyez sur zéro ici et cliquez sur, I Want This, et vous pouvez le télécharger. De même, nous avons un autre site web, grabient.com et vous pouvez également télécharger sketch, vous pouvez voir en haut ici il y a, je pense que ce sont comme 20 ou 30 gradients différents. Ensuite, nous avons ce gradients.cssgears.com. Ici, nous avons à nouveau différents gradients. Ce ne sont pas trop grands, mais la chose cool à ce sujet est si vous cliquez sur l'un de ces éléments, vous pouvez cliquer sur ce HTML5, Adobe XD ou icône de croquis pour télécharger le fichier instantanément. J' ai essayé de télécharger celui-ci. Donc, si vous cliquez ici, il va télécharger le fichier XD pour ce gradient. Un autre outil que j'ai utilisé dans le passé est de mélanger deux couleurs avec élégance. Donc, ce que je fais normalement est de sélectionner une couleur d'ici, par exemple, celle-ci et celle-ci. Si je clique sur le mélange, vous pouvez voir comment il est bien mélangé. De même, si vous pouvez modifier quelques paramètres ici, vous pouvez également copier le code, le design ou le code du site Web. En fait, c'est du code CSS pour les dégradés d'arrière-plan. Ceci est un autre site Web, colinkeany.com outil de mélange. En voici un autre, uigradients.com. Je ne l'aime pas trop, mais je pense que c'est génial que vous puissiez télécharger et obtenir le fichier JPEG et aussi le CSS à partir d'ici. Si vous êtes un développeur web, vous pouvez le faire. Ici, nous avons différents gradients et si vous allez par ici, vous pouvez en montrer quelques autres. Par exemple, je veux quelque chose ici. Donc pas trop utile, mais je pense que vous pouvez obtenir quelque chose d'ici, une certaine inspiration. Ensuite, nous avons gradients.io. Il y a encore des dégradés de couleurs différentes et ce ne sont que des dégradés, vous ne pouvez pas les télécharger ou quoi que ce soit. Encore une fois, nous avons un outil de plus qui est colorspark et va générer des couleurs différentes en fonction de juste varier différentes choses comme ça. Vous pouvez également copier c'est CSS. Il y a aussi un outil de couleur pour celui-ci donc si vous le souhaitez, vous pouvez passer à l'outil de couleur et il va en générer un. Cette couleur est belle, donc si j'ai besoin de quelques couleurs rapides, je peux le faire. De même, il a également un plugin d'esquisse. Vous pouvez voir ici les couleurs étincelles sketch plugin. Vous pouvez le télécharger et vous pouvez obtenir des couleurs avec Control Shift et C ou Control Shift C pour les intégrer instantanément dans vos designs, quelque chose comme ça. Ce sont tous les différents outils que je voulais vous montrer. J' adore celle-là, les gradients web. Vérifiez celui-ci, téléchargez-le, et essayez de construire vos actifs de couleurs et d'utiliser les couleurs à partir de là. J' espère que vous avez apprécié cette vidéo. Ne commencez une discussion ou donnez-moi quelques commentaires à ce sujet si vous avez des questions ne me posez-vous. A bientôt dans une autre vidéo. 39. Astuces pour créer des dégradés NOUVELLE leçon: Dans cette vidéo, je vais partager avec vous quelques astuces pour créer des dégradés d'apparence cool et comment vous pouvez les utiliser dans la conception de votre interface utilisateur. Maintenant, à droite, vous pouvez voir ici, je ne vais rien créer ici. Ce sera un autre tutoriel où je vais vous montrer comment créer cela dans figma. Mais en ce moment, nous sommes plus intéressés par cela. Il y a beaucoup de techniques différentes. Comme vous pouvez le voir, j'ai écrit ici sombre et clair. Maintenant, la première technique que j'utilise est, laissez-moi tout ouvrir. La première technique que j'utilise est que, je vais entrer dans ce gradient linéaire. Vous pouvez voir ici, première chose est l'angle, donc c'est dans cette direction. L' angle compte vraiment. Ce dégradé, si vous appliquez sur ce graphique circulaire, peut ne pas fonctionner car l'angle est différent. La première astuce est que, vous devez sélectionner une couleur qui va être la même teinte 205. Ce sera une version plus légère. Ensuite, nous en avons un autre qui sera un peu plus sombre. Maintenant, ce que j'essaie de faire est, j'essaie de changer un peu de teinte, vous pouvez voir ici, de 205 j'ai sauté à 216. C' est une autre astuce que je vous ai enseignée dans mon cours de schéma de couleurs. Maintenant, vous pouvez voir que vous pouvez changer l'angle ici, si vous voulez juste faire glisser comme ça et où que vous pensez être confortable, vous pouvez le laisser tomber comme ça. Je garderai la lumière ici dans cette direction et dans l'obscurité ici. Le premier tour est sombre et clair. Nous avons une teinte très foncée d'un côté et couleur très claire de l'autre côté et ils sont presque la même teinte. Ils sont de la même couleur. Maintenant, si vous allez à celui-ci, donc celui-ci est en fait appelé couleurs analogues. Analogues couleur signifie que, nous allons utiliser des couleurs qui sont très proches les unes des autres sur la roue de couleur. Laisse-moi te montrer la roue de couleur. Ici, nous avons la roue de couleur. Si nous allons à analogue, vous pouvez voir ce sont les couleurs en analogue. Chaque fois que vous bougez l'un d'eux, ils vont bouger ensemble. Nous avons le vert, le cyan, bleu puis le vert et le bleu, l' orange et le vert, puis l'ambre jaunâtre avec l'orange, puis nous avons le rose et le violet, le rouge et le rose. Ce sont toutes des couleurs analogues. Ils sont très proches les uns des autres sur la roue de couleur. C' est le deuxième tour. Ce dont j'ai besoin, c'est que j'utilise cette couleur bleue et verte. Vous pouvez voir ce schéma de couleurs analogues. On a des bleus et des verts. D' un côté, j'utilise cette couleur bleue. Deuxièmement, de l'autre côté, j'ai utilisé la couleur verte. Ceci est appelé la deuxième astuce pour créer des couleurs analogues. Ici, nous avons un autre dégradé, et il est fait en utilisant des couleurs analogues. La suivante utilise des couleurs complémentaires. Le bleu est opposé à cette couleur jaunâtre ou violacée. J' ai utilisé des couleurs complémentaires sur la roue de couleur. Laissez-moi vous montrer ce qui sont en fait des couleurs complémentaires. Laisse-moi voir si j'ai la roue de couleur. Ici, nous avons le gratuit. Si j'essaie de sélectionner une couleur ici, sélectionnons celle-ci. Si je vais à la gratuité, il va aller en orange. Si j'essaie de sélectionner cette couleur, déplacez cette couleur ici, vous pouvez voir qu'elle se déplace à l'intérieur de cette section jaune ou orange ici. Ils sont totalement opposés les uns aux autres sur la roue de couleur. C' est un autre truc. Si vous créez un dégradé, vous pouvez utiliser des couleurs complémentaires pour. Le suivant, c'est que j'utilise trois couleurs. Ce sont encore des couleurs complémentaires, mais en fait je suis inspiré par une scène, exemple, coucher de soleil avec beaucoup de nuages sombres. Vous pouvez ramasser ces couleurs à partir d'une image aussi, donc c'est une astuce très simple. Beaucoup de designers, ils ne le savent pas, c' est pourquoi je l'ai sauvé sous le nom de couleurs de nuages de soleil. Si je vais ici, vous pouvez voir qu'il a trois couleurs ici. C' est l'orange ou le soleil derrière les nuages. C' est le nuage sombre ici, et c'est l'autre couleur du nuage qui est un peu plus clair. Ou vous, comme vous pouvez le voir, dit que c'est l'éclaircissement à l'intérieur du nuage. C' est à vous de voir. C' est en fait ce gradient ici, un, deux, trois. Vous pouvez déplacer les arrêts où vous voulez qu'ils soient. Vous pouvez déplacer ça ici si vous voulez. Déplacez ça ici, quelle que soit la couleur que vous voulez plus. Je l'aime comme ça, donc c'est une autre astuce. Vous pouvez créer des dégradés basés sur des jeux de couleurs à partir de différentes images, de différentes scènes, scènes de nature. Ils sont parfaits pour créer ces couleurs et dégradés. Maintenant que le dernier truc est que, nous allons utiliser la même couleur de couleur monochromatique. Laisse-moi te montrer. On a cette orange ici, qui est 18 par ici. Alors c'est 43 teinte. Mais en fait, si on se déplace ici, vous pouvez voir que j'ai essayé de déplacer la couleur dans cette zone ici, qui est un peu blanc grisâtre. Ce que j'ai fait, c'est que je te montre. Allons le déplacer ici. Gardez-le 18 ans. J' utilise la même couleur sur les deux arrêts. Ceux-ci sont appelés essentiellement arrêts. Un arrêt à 100 pour cent, 0 pour cent s'arrête. De là, 0 à 100 pour cent. Je peux le déplacer comme ça. Si je veux déplacer celui-ci, je peux m'en servir. C' est un autre truc. Vous pouvez utiliser une couleur unique avec deux arrêts. On sera un peu sur le côté gris, peut-être comme ce blanc grisâtre. L' autre est par ici. De même, vous pouvez l'utiliser comme ceci, et l'autre sera dans cette section plus sombre ici. Cela va être gris plus couleur ou blanc plus couleur, ou c'est en fait un schéma de couleurs monochromatiques. Une seule couleur. Ici, nous utilisons réellement la couleur unique, mais nous avons un peu décalé la teinte. Laissez-moi vous montrer, si vous ne vous souvenez pas. C' est 205, mais le plus sombre en avait 216. Mais ici, nous utilisons la même teinte pour les deux arrêts. Ce plus léger a 18 et la pratique de saturation est différente. On va le déplacer ici comme ça. Vous pouvez voir que cela va mettre fin à cette leçon, si je veux vous montrer comment vous pouvez les utiliser dans l'interface utilisateur. Ce sont deux exemples. Vous pouvez voir que c'est de la lumière à l'obscurité avec quelques variations comme celle-ci. Ensuite, nous avons celui-ci qui a le coucher du soleil ou inspiré de la nature, où nous avons deux couleurs opposées. En fait, trois couleurs sont utilisées ici, violet, bleu et orange. C' est ainsi que vous appliquez réellement vos dégradés dans le jeu de couleurs et dans vos interfaces utilisateur, dans vos sites Web. Certains des gradients, ils vont travailler très bien sur les arrière-plans. Certains d'entre eux vont travailler sur [inaudible], parce que comme celui-ci, c'est un très sombre et clair. Cela ne fonctionnera pas sur tout le fond, car nous devons mettre du texte et d'autres choses sur l'arrière-plan. Gardez à l'esprit que chaque fois que vous utilisez quelque chose comme celui-ci, vous devez utiliser un arrière-plan plus léger. Les dégradés, par exemple, comme celui-ci, peuvent être utilisés comme arrière-plan. Mais ces sombres et très légers ont beaucoup de contraste. Lorsque vous avez beaucoup de contraste dans le dégradé, arrêts, vous ne pouvez pas les utiliser comme arrière-plan. Continuons ici et laissez-moi partager avec vous quelques-uns des gradients en ligne. Vous pouvez voir ici est un gradient maker de coolors.co. Vous pouvez choisir les couleurs, quelle que soit la couleur que vous voulez utiliser. Vous pouvez également copier le code CSS à partir d'ici. De même, nous en avons un autre, gradient.com. C' est un autre site web, il a beaucoup de gradients. De même, nous avons cssgradient.io. Nous avons beaucoup de sites Web différents ici, UIGradients, Grabient, Gradient Hunt, Mesh Gradients et WebGradients. Il faut un certain temps pour charger quoi qu'il en soit. Voici quelques générateurs, générateurs de couleurs CSS, générateurs dégradés, où vous pouvez ramasser la couleur et vous pouvez générer le dégradé. C' est le gradient. Vous pouvez voir que c'est vraiment agréable sur un fond. Si j'essaie de changer la couleur ici à celle-ci, c'est vraiment génial, c'est terne mais ça a l'air vraiment génial. C' est ainsi que vous créez différents dégradés et ce sont des techniques différentes que vous pouvez utiliser. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, vous pouvez toujours me poser. Passons à la leçon suivante. 40. Luminaire des couleurs dans la palette de couleurs: Dans cette vidéo, je vais parler d'un sujet très important lié aux jeux de couleurs qui est la luminance des couleurs. Maintenant, la luminance des couleurs fait partie de deux choses. L' un des facteurs est la teinte, teinte que vous avez sélectionnée. Certaines des teintes comme vous pouvez voir ici jaune, le vert est, ce bleu clair, ce bleu yanâtre, les couleurs ici, ceux-ci ont naturellement plus de luminance, ils ont plus de vibrance en eux. Chaque fois que vous sélectionnez des couleurs, il y a deux facteurs à prendre en compte. L' un est ce qui est la saturation de cette couleur parce que la saturation va en fait amplifier la luminance. Luminance est juste que vous pouvez voir que certaines couleurs sont très vives, très vibrantes, vous pouvez dire qu'elles émettent plus de lumière d'elles plutôt que d'autres. C' est ce qu'est réellement la luminance et la luminance a deux choses à considérer, une est la saturation, la saturation élevée signifie la luminance élevée. Aussi, si vous avez sélectionné une teinte d'ici à partir de cette zone jaune ou verte ou de cette section ici, vous pouvez voir sur la gauche nous avons la luminance 94, 83, 80 pour cent, 82 pour cent, 87 pour cent. C' est la luminance naturelle de la même manière, cette couleur ici, elle a 70 pour cent, cette couleur rose-pourpre elle est très vibrante. Je vais vous montrer une technique très simple que vous devez ajuster certaines des couleurs. Comme si votre jeu de couleurs a ce jaune ou vert ou cette couleur ou cette couleur, vous devez ajuster votre saturation et votre luminosité pour les rendre également bien ou travailler avec vos autres couleurs. Permettez-moi de vous montrer un exemple. Maintenant, vous pouvez voir à gauche que j'ai sélectionné haut, ce bleu, vert, jaune, ce violet et ce rouge. Maintenant, vous pouvez voir ce jaune est très vibrant, ce vert est également de la même section, ici vous pouvez voir 83 pour cent, ce sont les facteurs de luminance. Ici encore, rouge et puis nous avons ce violet. Cela a encore plus de vibrations. Maintenant, vous pouvez voir toutes ces couleurs que j'ai sélectionnées ont 100 % de saturation et 100 % de luminosité. Vous pouvez voir naturellement vert et jaune et ce rose, ils sont plus vibrants pour moi. Maintenant, beaucoup de designers que j'ai vu qu'ils font des erreurs quand ils sélectionnent leurs couleurs. Maintenant, ce que vous devez faire chaque fois que vous utilisez ces couleurs simples, vous utilisez beaucoup de saturation. Vous devez l'équilibrer, vous devez réduire le facteur de luminance. Vous devez travailler avec ce que vous pouvez voir en bas j'ai ajusté ces couleurs. Par exemple, celui-ci, si je vous montre, vous pouvez le voir, vous pouvez le voir luminosité est de 88 pour cent, la saturation est de 87 pour cent. Si je veux le tonifier, je peux réduire la saturation ici et augmenter la luminosité. Ici, je l'aime mieux ici, 91 pour cent. Maintenant, vous pouvez voir cette couleur si nous zoomons est beaucoup mieux que de regarder celui-ci. Vous ne pouvez pas continuer à regarder cette couleur pendant des périodes plus longues. De même pour ce vert, vous devez l'ajuster à votre jeu de couleurs, vous devez le tonifier. Il faut tonifier sa saturation, sa luminosité, sa vibrance, sa luminance. Maintenant, vous pouvez voir toutes ces couleurs ici, ce jaune, ce bleu, ce vert, elles sont presque plus proches les unes des autres dans le facteur de luminance. Vous pouvez voir qu'ils ont l'air d'appartenir les uns aux autres plutôt que vous pouvez voir ici, certains sont un peu moins lumineux ou moins vibrants. Certains sont très dynamiques, ils ne fonctionneront pas bien ensemble. Aussi pour les humains, ils ne peuvent pas garder les yeux sur ces couleurs qui ont une saturation très élevée ou qui ont une très haute luminance. Vous devez ajuster manuellement vos couleurs, comme vous pouvez le voir ici, ce bleu, je peux aller par ici. Je dois le tonifier un peu. Je vais me déplacer ici, je vais m'éloigner de cette zone parce que c'est très vibrant, c'est une saturation élevée. C' est aussi une saturation élevée et l'obscurité, donc je vais garder mon, vous pouvez voir la couleur ici, la sélection ici. De même, ce rouge que vous pouvez voir, je l'ai tonifié et de 100 pour cent j'ai réduit sa saturation à 75 pour cent et la luminosité est de 85 pour cent. Maintenant, vous pouvez voir qu'il est plus facile de regarder même si vous voulez le déplacer quelque part ici comme ça, donc cela semble mieux. De même cette couleur, c'est encore très forte et vibrante pour moi donc je vais le tonifier un peu ici. Le gris, je vais essayer de faire un peu de gris ici, un peu sombre. Maintenant, ils se sont ajustés à mon œil. Maintenant, chaque fois que vous créez un jeu de couleurs, n'essayez pas d'utiliser des couleurs comme celles-ci. Assurez-vous que leur luminance, leur saturation est tonifiée, il est plus facile pour les yeux humains de regarder. J' ai vu certains de mes étudiants qu'ils essaient d'utiliser ce genre de couleurs, c'est la très grosse erreur beaucoup de concepteur débutant ou concepteurs nerveux qu'ils font. Alors gardez à l'esprit que vous devez ajuster la saturation et aussi si vous êtes dans ces teintes comme ce jaune et ce vert ou celui-ci, ils sont naturellement plus vibrants. Ils sont naturellement plus luminants. Ils vont émettre plus de lumière. Le jaune est très proche du blanc, donc il a le facteur le plus lumineux comme vous pouvez le voir, 94 pour cent donc il est juste 6 pour cent en dessous de la couleur blanche. J' espère que vous avez maintenant le concept de luminance et comment l'utiliser dans vos combinaisons de couleurs. Maintenant, si vous avez des questions ou si vous n'avez rien compris, vous pouvez toujours me le demander. Jusque-là, nous nous retrouverons dans une autre leçon. 41. Et ensuite ?: Maintenant, merci beaucoup d'être avec moi avec toute cette durée de temps et d'apprendre avec moi. J' espère que vous avez appris quelque chose d'utile. Si vous n'êtes pas en mesure de comprendre quelque chose ou si vous avez des questions, vous pouvez toujours me contacter via cette plateforme. Vous pouvez toujours me contacter via mon site learnuxid.com. Vous pouvez me contacter, vous pouvez m'envoyer un e-mail. Vous pouvez me rejoindre sur les réseaux sociaux et me poser des questions ou n'importe quoi, toutes les questions que vous avez concernant la conception de l'expérience utilisateur, la conception de l'interface utilisateur ou le freelance en général. D' ici là, on va te voir dans un autre cours. Découvrez mes autres cours et cours sur le design, sur la typographie, la conception de mise en page, schémas de couleurs et toutes ces choses différentes. Essayez de laisser un examen honnête, écrire quelques commentaires sur tout ce que vous avez appris dans ce cours. Jusque-là, on se voit bientôt dans un autre cours ou cours. Jusque-là, prenez soin et au revoir.