Les bases de la sélection de couleurs pour la conception d'UI / UX

1. Introduction du cours: couleur est l'une des parties les plus essentielles du design Eric car la couleur détermine l'ambiance de vos spectateurs. Il détermine la direction qu'ils vont prendre et détermine également les valeurs de la marque et la force de la marque. Par conséquent, vos spectateurs vont relier ces couleurs à cette marque en particulier. Il existe de nombreuses façons de travailler avec les couleurs dans la conception de l'interface utilisateur utilisateur. Mais dans cette classe, nous allons simplement nous concentrer sur les choses les plus importantes. Sinon, ce cours pourrait prendre jusqu'à 12 ou 13 heures ou quelque chose comme ça. Salut designer et je m'appelle Alex. Et dans cette classe, nous allons parler de couleur dans la conception de l'interface utilisateur utilisateur. Fondateur de web donut, nous avons recréé 500 produits design. Je suis également enseignant et jusqu'à présent j'ai créé 30 cours différents allant de l'interface utilisateur, conception UX en passant par les médias sociaux et le design. Dans cette classe Skillshare, nous allons expliquer pourquoi la couleur est importante, quelles couleurs existent et comment arrangez-vous les couleurs et comment choisir vos colonnes amine, secondaire et tertiaire. Nous allons parler de différentes combinaisons de couleurs, quelles combinaisons de couleurs existent et comment les utilisez-vous dans vos créations ? Et ensuite, je vais vous montrer quelques outils de sélection de couleurs étonnants que vous pouvez trouver en ligne, qui vous aideront massivement à choisir des couleurs pour vos projets de conception UI UX. Enfin, je vais vous montrer comment créer des guides de style géniaux pour les développeurs utilisant Adobe XD et comment présenter ces guides de style à vos clients et développeurs pour une utilisation ultérieure. Votre projet de classe pour ce cours consiste à créer la combinaison de couleurs idéale à l'aide de l'outil que vous aimez. Je suggérerais qu'il y aura beaucoup d'enthousiasme car il y a l'outil que j'utilise, mais vous pouvez utiliser n'importe quel outil que vous voulez. Et plus de détails sont dans la vidéo du projet de classe. À côté de la typographie, de l'espacement et de la couleur rythmique est l'une des choses les plus importantes en matière de conception à prendre en compte. Et dans ce cours, nous allons aborder certains aspects majeurs sur lesquels vous devriez vous concentrer lorsque vous travaillez en tant que concepteur d'interface utilisateur utilisateur. Alors attendez avec impatience de vous voir en classe et créons de superbes combinaisons de couleurs. 2. Pourquoi la couleur est importante: Outre la typographie, le rythme, les grilles et beaucoup de ces autres éléments, couleur est l'un des éléments les plus importants de chaque conception. Sans couleur, les utilisateurs ne sauront pas où aller. Ils ne sauront pas quoi faire. Et il ne serait pas possible de distinguer les éléments les uns des autres car tous les éléments ressembleraient simplement en noir et blanc. Dans cette vidéo, expliquons pourquoi la couleur est importante et à quoi devriez-vous penser lorsque vous choisissez des couleurs pour vos projets de conception UI UX. Il donne le ton de votre projet. Je parle donc de manière plus commerciale à vos téléspectateurs, puis vous allez utiliser différentes couleurs. Alors, si vous parlez d'une manière ludique et amicale. Il faut donc toujours y penser. Assurez-vous de parler à vos clients, assurez-vous de les comprendre en profondeur, de comprendre leur secteur d'activité, comprendre le créneau et, par conséquent, lorsque vous choisissez des couleurs pour ce client particulier, assurez-vous de définir le ton. Si le ton est professionnel, et n'utilisez pas l'entreprise, mais assurez-vous de suivre ce ton tout au long de votre conception. C'est donc agréable et cohérent. Ainsi, vos utilisateurs savent toujours quel est le ton de votre conception, où qu'ils se trouvent dans votre conception, cela détermine le mode de visionnage. Ce que je veux dire par là, c'est que si les couleurs sont trop sombres, les spectateurs vont être dans une certaine humeur. Si les couleurs sont trop claires , elles seront d'humeur différente. Si les couleurs sont trop fortes, elles seront peut-être fortes sur leurs yeux. Ils vont donc être dans des ambiances différentes. Alors assurez-vous de faire attention à tout cela et assurez-vous de comprendre quel est le genre d'ambiance que vous souhaitez créer pour vos spectateurs ? Encore une fois, est-ce le jeu ? Est-ce que c'est l'affaire ? Est-ce l'apprentissage ? Est-ce l'ambiance de concentration ? À partir de tous ces différents indicateurs, vous devez en apprendre davantage sur leur humeur. Par conséquent, lorsque vous choisissez des couleurs, vous devez avoir cette humeur à l'esprit. Par exemple, si je veux qu'ils soient calmes et détendus, je vais utiliser des couleurs de la nature, par exemple le blanc, le vert et le marron et quelque chose comme ça. Si nous voulons les garder pompés, si je veux qu'ils augmentent et qu'ils restent élevés, alors je veux peut-être utiliser des couleurs fortes comme le rouge, bleu foncé, le vert et quelque chose comme ça. Assurez-vous donc de prêter attention à l'ambiance de vos spectateurs car c'est extrêmement important dans n'importe quel design. Il met l'accent sur les actions. Par exemple, si vous voulez qu'ils cliquent sur un bouton, vous choisirez la couleur de ce bouton pour se démarquer parce que vous voulez qu'ils regardent ce bouton, puis qu'ils agissent, alors cliquez dessus. Ou si vous souhaitez qu'ils envoient un formulaire, si vous souhaitez qu'ils quittent votre e-mail, vous utiliserez la couleur pour mettre en valeur les zones sur lesquelles vous souhaitez qu'ils cliquent ou prennent des mesures. Et bien sûr, en fonction de l'action que vous voulez qu'il prenne, selon l'industrie dans laquelle se trouve votre client, vous allez choisir différentes couleurs et différentes nuances de ces couleurs, orientant simplement vos spectateurs vers cela. mesures particulières que vous souhaitez qu'ils prennent. Cela aide à la lisibilité car cela est incroyablement important car la vue est vraiment altérée depuis près de deux décennies parce que nous avons tous ces appareils dotés d' écrans et la majorité des gens ont des problèmes de vue. Assurez-vous donc que lorsque vous planifiez, en particulier pour un paragraphe, est particulièrement destiné au texte. Assurez-vous d'utiliser les couleurs qui ne seront pas altérées sur les yeux de vos spectateurs. Ce que je veux dire par là, c'est qu'ils ne sont pas trop forts, mais aussi en même temps qu'ils ne sont pas trop faibles parce que si leur vue est bien en semaine, ils ne pourront pas la lire si les couleurs sont trop faibles et l'inverse. . Il faut donc trouver ce juste milieu heureux. Par conséquent, votre lisibilité sera bien meilleure et votre taux de rebond sera beaucoup plus faible car ils vont rester sur la page beaucoup plus longtemps et ils vont lire le texte et les informations que vous mettez sur votre design. Enfin, il guide les yeux de l'utilisateur. Ce que je veux dire par là, c'est que si vous voulez qu'elles regardent de gauche à droite, vous pouvez positionner stratégiquement vos couleurs dans cette direction afin de les guider dans votre conception. Vous pouvez organiser votre expérience, comme vous le souhaitez. Et ensuite, lorsqu'ils regardent de gauche à droite, ils peuvent rechercher, par exemple, couleurs plus vives ou des couleurs plus foncées ou quelque chose du genre. C'est vous qui êtes responsable de leur expérience utilisateur. Par conséquent, convertissez leur expérience utilisateur en une meilleure expérience en utilisant couleurs et en les naviguant dans votre conception en utilisant la couleur. Il existe de nombreuses théories et techniques différentes pour choisir les couleurs qui sont importantes pour votre design. Ce ne sont donc que quelques-uns que j'ai constaté au fil des ans qui fonctionnent mieux pour moi et pour mes clients. Assurez-vous donc de naviguer sur Internet pour obtenir des conseils et des astuces supplémentaires et mélanges pour comprendre quand vous concevez pour garder toutes ces choses à l'esprit. Et simplement pour créer la meilleure expérience utilisateur possible pour vos utilisateurs en utilisant la couleur. Dans la prochaine leçon, nous allons parler des couleurs qui existent. Je vous y verrai donc. 3. Quelles couleurs existent: Il existe de nombreuses couleurs différentes, mais lorsque vous choisissez des couleurs pour un design UI UX, vous devez penser essentiellement à trois couleurs, couleur principale, les couleurs secondaires et les couleurs tertiaires. La couleur principale est la couleur, qui est la couleur globale de votre dessin. La couleur secondaire est utilisée, par exemple, pour les boutons ou quatre liens de texte, les liens hypertexte et quelque chose du genre. Et la couleur tertiaire est essentiellement la couleur d'accent. Ce n'est pas le cas pour tous les projets. Parfois, vous allez simplement choisir deux couleurs, par exemple, et nous en parlerons un peu plus tard dans cette classe. Mais l'important à noter en tant que concepteur d'interface utilisateur, c'est que vous n'utiliserez pas la couleur CMJN dans la plupart des cas. Ce que cela signifie, c'est cyan , magenta, jaune et clé. La raison en est que ces couleurs sont majoritairement utilisées pour la conception graphique et pour une impression. Parce que nous travaillons à l'écran, nous n'allons pas utiliser ces couleurs car elles ne se traduisent pas correctement pour afficher les couleurs que vous allez utiliser. Dans la plupart des cas, les projets de conception UX de votre interface utilisateur sont des codes hexadécimaux et des couleurs RVB. codes hexadécimaux sont des codes hexadécimaux. Fondamentalement, cela signifie que dans le 16e, ne vous inquiétez pas trop à ce sujet. C'est juste le nombre de pixels à l'intérieur de la couleur, mais n'oubliez pas que les couleurs hexagonales ont tous ces codes différents. Vous allez utiliser ce code hexadécimal dans la majorité des cas. Et dans certains cas, vous allez également utiliser la couleur RVB. RVB signifie rouge, vert et bleu. Et il y a aussi d'autres couleurs comme HSL, qui concerne la saturation et la légèreté des teintes. Mais selon que le développeur dépend du projet, selon que le client a déjà ses combinaisons de couleurs et une couleur déjà créée pour lui, vous allez utiliser leurs couleurs et les couleurs dans ce code de couleur particulier qu'ils ont mentionné dans leur théorie. Donc, dans cette vidéo, je vais juste vous montrer comment tout cela fonctionne et comment trouver ces couleurs. Nous sommes donc sur les sites Web d'Apple et la majorité d'entre vous connaissent Apple. Fondamentalement, ils créent ces appareils technologiques dans des gadgets, et ils disposent également de leur système d'exploitation pour leurs appareils mobiles et leurs appareils de bureau. Tout cela n'a pas d'importance. Ce qui compte, c'est que vous pouvez cliquer avec le bouton droit de la souris dans votre navigateur et vous pouvez installer ce plugin appelé col beak, surtout si vous êtes un utilisateur de groupe Google Chrome, comme moi. Lorsque vous cliquez ici, il affiche toutes ces différentes couleurs qui sont utilisées sur cette page particulière. Maintenant, ce ne sont pas toutes les couleurs de la marque. Il ne va pas extraire les couleurs de chaque page de ce site Web en particulier. Mais si vous jetez un coup d'œil ici, vous pouvez voir toutes ces couleurs. Ainsi, vous pouvez voir cette couleur rose pourpre, par exemple, à partir de cette montre et des textes qui l'entourent, vous pouvez voir cette couleur bleue. C'est peut-être celui-là même. Et si je fais défiler vers le bas, peut-être pourrons-nous trouver cette colonne. Le voilà. Et si nous faisons défiler davantage, vous pouvez voir que cette couleur foncée pour le texte est, par exemple, celle-ci et celle-ci. Vous pouvez donc très facilement comprendre les couleurs utilisées par la marque sur cette page particulière. Une fois de plus, je mentionne cette page en particulier car si nous passons à la page Mac , par exemple, ils utilisent des couleurs complètement différentes. Revenons donc à la page d'accueil et passons ici. Encore une fois, l'appeler grand est complètement gratuit. Je vais le lier dans un PDF et vous pourrez y accéder. Vous pouvez simplement l'installer dans votre navigateur. Et pourquoi cela importe, c'est que vous pouvez simplement goûter des couleurs comme je vous l'ai montré. Il suffit donc de cliquer avec le bouton droit sur Couleur, grands styles de page d'accueil. Il va prendre ces couleurs sur cette page, puis vous montrer toutes ces couleurs ici. Mais vous pouvez voir les valeurs RVB pour chaque couleur particulière. Vous pouvez supprimer cette couleur si vous voulez terminer, vous ne voulez pas la voir ici. Ensuite, si nous cliquons sur ce coin ici, vous pouvez voir que nous avons des couleurs HEX. Donc, si je passe à l'hexadécimal, vous pouvez voir comment cela fonctionne. Donc, si vous basculez entre RVB et hexadécimal, vous pouvez clairement voir la différence. Maintenant, les couleurs hexadécimales sont ces couleurs et c'est le code couleur. Je vais le montrer un peu plus tard dans Adobe XD. Maintenant, chaque outil dispose de ces codes hexadécimaux. Donc, si vous utilisez Photoshop, XD, sketch, Figma, ça n'a pas d'importance. Ils les ont tous, et tous ont généralement un RVB et certains d'entre eux ont également HSL. Si nous passons à HSL, qui est la saturation et la légèreté des teintes, vous pouvez voir à quoi cela ressemble. Donc, en gros, vous pouvez copier cela, surtout avec des codes hexadécimaux. Sélectionnez donc ce clic droit sur copier ou contrôler C, contrôler V et collez-le dans l'outil préféré de votre choix. Et puis vous pouvez avoir cette couleur et travailler à partir de cette couleur. Cela est particulièrement important si vous travaillez avec des clients dont le site Web est déjà terminé. S'ils ont terminé leurs applications ou quelque chose comme ça, et qu' ils ne savaient pas quelles couleurs ils utilisent, vous pouvez simplement tirer le site Web comme je devrais simplement vous montrer, cliquer avec le bouton droit de la souris sur le bec coloré à partir des styles de page et vous pouvez simplement comprendre quelles couleurs ils ont utilisés dans leur conception. C'est important car s'ils veulent modifier leur palette de couleurs, par exemple plus bas de la ligne, ou si vous avez besoin d'une couleur spécifique, vous pouvez utiliser cette approche, copier cette couleur, puis utilisez-le dans votre design. L'autre façon de le faire est de faire une capture d'écran de leur conception précédente. Faites-le glisser dans l'outil préféré de votre choix, dans mon cas, Adobe XD, puis échantillonnez simplement cette couleur de votre conception. Ce ne sera pas une bonne approche de la dette car vous allez perdre quelques pixels lorsque vous réaliserez ces captures d'écran. Par conséquent, ces couleurs seront un peu différentes celles que si vous utilisez cette approche, car cela tire parti des styles de page. Donc, si nous le reprenons encore une fois, ici, si je clique avec le bouton droit de la souris sur la page et que je vais inspecter, vous pouvez voir que si nous parcourons le code , si nous allons ici, vous pouvez en voir un , d1, d1, f. Alors passons ici, E1, D1, D1, F. Ainsi, vous pouvez voir tout de suite, il tire des styles de page, donc il tire les couleurs directement du code. n'y a donc pas de place à l'erreur car elle tire directement du devis. Maintenant, vous pensez peut-être, oui, mais qu'en est-il de ces images ? Prenons donc cette image par exemple. Cliquez avec le bouton droit sur Inspecter. Nous y voilà et nous avons le décoloré. Donc, si nous cliquons dessus, vous pouvez le voir ici. Vous vous demandez peut-être si mon client n'a pas sites Web existants sur lesquels vous allez former la palette de couleurs en fonction de ce dont nous avons parlé précédemment, fonction de ce dont nous allons parler dans une future leçon. classe. Et surtout du créneau de l'industrie dans lequel ils se trouvent. Par exemple, s'ils font partie d'un secteur bancaire, s'ils appartiennent au secteur informatique, les chances dépendent de l'audience cible, de savoir à qui le site Web ou l'application mobile va parler. y a de fortes chances qu'ils choisissent des couleurs spécifiques dans ces cas et s'assurer d'explorer la concurrence, s'assurer de voir ce qu'elles font et de former vos couleurs en fonction du créneau dans lequel se trouve votre client, en fonction de la concurrence, et en fonction du mode visionneuse dans lequel vous souhaitez les placer. Je veux donc qu'ils achètent quelque chose, qu'ils apprécient le contenu et restent plus longtemps. Je veux être sérieux, je veux être ludique. À partir de toutes ces choses, vous allez déterminer la couleur que vous allez choisir dans votre design. Enfin, comme je l'ai dit, assurez-vous d'utiliser la couleur big car c'est vraiment assez simple. Il suffit de cliquer avec le bouton droit de la souris sur n'importe quelle page pour vous montrer toutes ces couleurs. Et fondamentalement, vous pouvez sélectionner cette voiture , copier et coller dans votre conception. Dans la prochaine vidéo de cette classe, nous allons parler des combinaisons de couleurs, pourquoi elles sont importantes dans quelles combinaisons de couleurs existent et comment sélectionner laquelle, euh , laquelle vous convient le mieux. Je vous y verrai donc. 4. Les combinaisons de couleurs: Il existe de nombreuses façons de combiner la couleur pour vos projets de conception UI UX. Mais dans cette classe et dans cette leçon, je vais parler de quatre, dont quatre sont la forme de quatre principaux et les quatre qui sont principalement utilisés dans la conception, plus un autre, qui est un avantage sur ce sujet. leçon. Ceux pour nos monochromes, analogues, gratuits et triadiques. Explorons donc tous ces éléments et voyons ce qu'ils sont. couleurs monochromatiques est ce que le nom suggère. Vous allez simplement prendre une couleur et choisir différentes feuilles de cette couleur. Par exemple, vous choisissez la couleur bleue, qui est vraiment sombre, puis vous allez choisir différentes nuances de cette couleur bleue pour mieux correspondre à la couleur bleu foncé principale de la dette. Par conséquent, vous allez utiliser ces tons plus clairs, par exemple pour vos boutons ou inversement, vous pouvez utiliser les tons plus clairs pour le texte ou les tons plus foncés pour les boutons des liens et autres vous pouvez utiliser les tons plus clairs pour le texte ou choses similaires. Les couleurs analogues sont des couleurs qui se trouvent l'une à côté de l'autre sur la roue chromatique, vous allez choisir trois couleurs qui sont vraiment proches l'une de l'autre. Ainsi, lorsque vous prenez la roue chromatique et que vous pouvez choisir différentes nuances de ces couleurs qui sont juste à côté de l'autre. Ce que cela va vous permettre de faire, c'est que votre conception sera beaucoup plus cohérente car elle aura l'air d'appartenir l'un à l'autre. Vos éléments seront de couleurs similaires, d'accentuation similaire à ces couleurs car vous n'allez pas choisir différentes nuances de vos couleurs, juste les couleurs qui se trouvent les unes à côté des autres sur la roue chromatique. Les couleurs gratuites sont ce que le nom suggère. Vous allez prendre deux couleurs qui se trouvent sur l'échelle opposée de la roue chromatique. Et ensuite, vous allez les combiner. Vous pouvez choisir votre couleur principale à partir de cette roue chromatique. Ensuite, à partir de votre couleur principale, vous pouvez positionner votre roue chromatique de cette façon pour trouver votre couleur complémentaire sur le côté opposé de la roue chromatique. Vous pouvez utiliser différentes nuances de ces couleurs, donc une couleur moyenne et complémentaire. Mais je vous suggérerai toujours de choisir votre couleur principale et c'est la chose la plus simple à faire si votre client a déjà quelque chose comme un logo, votre carte de visite ou la couleur qu'il aime. Et ensuite, vous pouvez simplement mettre cette couleur dans votre couleur. Nous choisirons la couleur gratuite et, par conséquent, vous pouvez choisir différentes nuances de ces couleurs. Et vous pouvez savoir quelle couleur est la couleur complémentaire de cette couleur. Et enfin, nous avons des couleurs triadiques. Maintenant, les couleurs triadiques ne sont que trois couleurs uniformément espacées dans votre roue chromatique. Vous pouvez donc simplement l'imaginer comme un triangle, et vous pouvez faire pivoter leur triangle pour choisir la couleur principale et couleurs complémentaires qui se trouvent sur le côté opposé formant un triangle, vous pouvez choisir votre couleur principale, et vous pouvez donc sélectionner les deux autres couleurs qui se trouvent sur les côtés réguliers de ce triangle. Et l'approche bonus est de 60, 30, 10. Cette approche nécessite maintenant trois couleurs différentes que vous pouvez choisir comme bon vous semble. Mais assurez-vous de choisir votre couleur principale, qui comprendra 60% de votre design. 60 % correspond à la quantité que vous allez utiliser votre couleur principale, 30 % est votre couleur secondaire ou complémentaire, puis ces 10 % sont votre couleur d'accent. Il s'agit d'une approche couramment utilisée dans l'interface utilisateur, conception UX et InDesign en général. Donc, fondamentalement, vous pouvez utiliser n'importe laquelle de ces méthodes qui viennent être mentionnées pour sélectionner les trois couleurs que vous souhaitez. Et vous pouvez utiliser triadic si vous le souhaitez, juste pour voir sur le rectangle à quoi ressembleront ces trois couleurs. Mais assurez-vous de former ces couleurs de manière à ne pas s'écraser les unes les autres. Si votre couleur principale est de 60 %, assurez-vous simplement d'utiliser cette couleur pour 60 % de votre dessin, puis 30 %, puis 10 % comprenant 100 % de vos couleurs. N'utilisez pas d'autres couleurs. Assurez-vous simplement que vous utilisez cette approche dans cette méthode pour n'utiliser que ces trois couleurs. Ce ne sont donc que quelques-unes des principales combinaisons de couleurs. Comme je l'ai mentionné, il y a beaucoup, beaucoup, beaucoup d'autres combinaisons de couleurs différentes, mais ces quatre sont ce que j'ai trouvé le mieux pour moi au fil des ans. Et j'ai trouvé que la majorité des designers de l'industrie utilisent. Dans la vidéo suivante, je vais vous montrer quelques outils qui vous aideront à sélectionner ces couleurs. Je vous y verrai donc. 5. Outils de sélection des couleurs: Dans cette vidéo, je vais vous montrer quelques outils de sélection des couleurs que j'ai utilisés ces dernières années. Et j'ai constaté que la majorité de ceux-ci, en particulier Adobe One, est ce que la majorité des concepteurs utilisent. Parce qu'une fois que vous aurez appris à connaître l'outil, une fois que vous en connaissez deux, vous serez coincé avec lui et vous allez l'utiliser à nouveau parce que s'il n'est pas cassé, ne le réparez pas. Comme je l'ai dit dans cette vidéo, je vais vous donner quelques exemples. Si vous n'aimez aucun de ces éléments, vous pouvez simplement naviguer sur Internet pour trouver celui qui vous convient. Voici donc le premier qui s'appelle Peloton. Et vous pouvez voir à partir de la conception sur le site web que c'est vraiment assez ancien. Maintenant à quoi ressemble tout cela, vous pouvez cliquer ici pour sélectionner le monochromatique. Ainsi, une seule couleur, comme nous venons de parler, couleurs adjacentes, ou trois couleurs, vous pouvez voir des couleurs triadiques. Donc triade de trois couleurs, tétrads, donc pour les couleurs. Et enfin, freestyle quatre couleurs et vous pouvez sélectionner deux couleurs, trois couleurs comme vous le souhaitez. Ainsi, comme je l'ai mentionné dans la vidéo précédente, selon ce que vous voulez créer ici, vous allez sélectionner les couleurs monochromatiques, par exemple, ou les couleurs adjacentes, ou les couleurs complémentaires ou quelque chose du genre. Allons donc faire une triade dans ce cas. Vous pouvez donc voir quand je commence à faire tourner ça, vous pouvez voir la couleur. Disons donc que c'est ma couleur principale. Et vous pouvez voir qu'ils sont uniformément espacés dans ce triangle et cela me montre toutes les feuilles de ma couleur principale. Vous pouvez également maintenir la touche Maj enfoncée pour déplacer les nuances individuellement. Donc, si je le tiens, et si je sélectionne cette forme, par exemple, si je sélectionne celle-ci, vous pouvez voir que nous obtenons des couleurs complètement différentes ici. Donc, si je le fais pivoter ici, vous pouvez voir que nous avons maintenant cette palette de correspondance homogène. Maintenant, vous pouvez accéder aux préréglages et vous pouvez choisir différents préréglages pour cette couleur triadique, qui est vraiment utile si vous n'avez pas assez de temps. Et parmi les couleurs que vous avez choisies, il vous montre ces préréglages. Donc, si nous revenons aux couleurs, si nous les faisons pivoter ici, par exemple, revenez aux préréglages. Vous pouvez voir que maintenant ils sont complètement différents. Vous pouvez donc choisir ces couleurs, vous pouvez faire ce que vous voulez avec elles. Et si nous nous cachons d'ici, vous pouvez voir les tableaux exporter. Si je clique ici, vous pouvez le voir, vous pouvez les exporter au format HTML, CSS, Less sass, ACML et comme textes, vous pouvez exporter des nuanciers et exporter ces combinaisons de couleurs pour celles que nous avons créées, ce qui, à mon avis, est vraiment important et très utile car cet outil est gratuit. Au fait, je vais relier tous les outils mentionnés dans cette vidéo dans le PDF. Assurez-vous donc de l'ouvrir, assurez-vous de cliquer sur ces liens si vous souhaitez accéder à ces sites Web et à toutes les ressources et astuces mentionnées tout au long de cette classe. Donc, en gros, c'est le peloton qu'il vous faut. Vous pouvez randomiser, réinitialiser, revenir aux couleurs d'origine. Donc, ici, et comme je l'ai dit, vous pouvez choisir n'importe lequel, quel que soit le style que vous voulez. Ensuite, nous avons Color Hunt. Vous pouvez donc le voir encore une fois, nous avons maintenant quelques sélections différentes ici, car elles sont présélectionnées. Pour que vous puissiez frapper au hasard, il va afficher des couleurs aléatoires. Vous pouvez aller avec le mois, l'année, l' époque populaire , ou vous pouvez choisir parmi ceux-ci. Donc, si je frappe les couleurs pastel, si ce sont les couleurs que vous voulez pour votre projet particulier, vous avez un rétro vintage clair, sombre, surtout sombre est important et populaire aujourd'hui, où nous avons le mode sombre. pour la conception de l'interface utilisateur utilisateur. Donc, si vous concevez le mode sombre, assurez-vous de vérifier cela. Ensuite, vous pouvez voir les tons de peau, particulièrement importants pour les marques de beauté, par exemple. Une fois de plus, en revenant à l'ambiance de vos téléspectateurs, nous revenons à ce créneau. Nous retournons voir ce client. Donc, lorsque vous collectez tous ces points, lorsque vous les connectez, vous allez comprendre de quel type de combinaisons de couleurs et de couleurs avez-vous vraiment besoin pour votre projet particulier ? Donc, si nous faisons défiler jusqu'au bas, vous pouvez voir que nous ne les avons pas. Donc, si nous revenons ici, nous n'avons pas de triade de couleurs adjacentes monochromatiques, mais nous en avons. Ce sont donc les humeurs, ce sont les projets. Ce sont, par exemple, je ne sais pas, disons les industries dans lesquelles se trouve votre client. Allons donc avec le noir par exemple. Et vous pouvez voir tous ces éléments. Vous pouvez les aimer si vous le souhaitez. Vous pouvez voir qu'il a été publié il y a 13 heures. Alors, choisissons celui-ci. Et si je survole, vous pouvez voir que j'ai eu le code hexadécimal juste là. Pour chacune de ces couleurs. Vous pouvez aimer cette palette. Vous pouvez le télécharger sous forme d'image. Et vous avez toutes ces couleurs ici sous forme de codes hexadécimaux et en RVB, ce que j'ai mentionné précédemment, majorité des concepteurs d'interface utilisateur utilisent des codes hexadécimaux et, dans certains cas, couleurs RVB car elles sont faciles à faire pour vos développeurs intégrer. En bref, c'est pourquoi ils les utilisent. Et aussi les couleurs HSL parfois parce qu'elles peuvent utiliser des pourcentages. Alors assurez-vous de parler à vos développeurs si vous commencez à utiliser ces couleurs, MY devrait leur parler. Le code hexadécimal leur convient-il, ou le RVB ou HSL, fonction des valeurs contenues dans les informations de données que vous allez obtenir de vos développeurs ? Vous allez choisir vos couleurs pour ce projet particulier. Une fois de plus, vous avez plus de palette sombre pour adultes ici. Et si vous pensez que cette couleur ne fonctionne pas, par exemple, vous pouvez choisir des couleurs vertes pour jouer avec ces voitures. Ensuite, nous avons colors.com, vous pouvez donc commencer à le générer. Une fois de plus, je vais lier tous ces sites Web au format PDF. Et ce que nous avons ici, c'est cette somme. Nous avons toutes ces différentes couleurs que vous pouvez explorer, vous pouvez voir, vous pouvez les ajuster. Vous pouvez voir pour le daltonisme à quoi cela ressemble. Vous pouvez donc choisir toutes ces options. Et si nous le fermons. Vous pouvez créer un collage et créer une palette à partir d'une photo. Donc, si votre client vous envoie ce logo ou la couleur qu'il aime, vous pouvez télécharger cette photo ici. Il va générer la palette de couleurs à partir de cette couleur particulière. Maintenant, vous pouvez voir que vous obtenez les noms ici, ce qui est génial si vous souhaitez utiliser ces noms ultérieurement à l'intérieur de votre conception comme jetons , par exemple lorsque vous définissez vos couleurs pour vos développeurs. Et ensuite, ils vont facilement comprendre de quelle couleur avez-vous mentionnée car ils peuvent la mettre à l'intérieur du code. Ainsi, par exemple, ce loup de bois, albâtre et cultivé, ils peuvent mettre tous ces mots à l'intérieur du code, les reliant dans la base de données principale. Et par conséquent, la base de données principale va extraire les noms de ces couleurs va les représenter comme un site Web ou une application mobile. Alors, comment travaillez-vous réellement avec cela ? Eh bien, nous avons toutes ces options ici pour que vous puissiez supprimer la couleur, vous pouvez voir les feuilles. Disons donc que je veux utiliser celui-ci. Maintenant, prends celui-là. Vous pouvez enregistrer la couleur dans votre favori, vous pouvez la faire glisser. Positionnez donc ici pour modifier l'apparence de votre palette de couleurs. Vous pouvez copier le code hexadécimal et le verrouiller. Vous pouvez donc choisir l'une de ces différentes couleurs. Vous pouvez les organiser. Donc, si je le verrouille, et disons que je veux positionner cela ici, cela restera cette couleur et cela ne changera pas à la façon dont vous exportez à partir d'ici. Vous avez bien dit que j'aime cette palette de couleurs, mais permettez-moi de vous montrer tellement de vues et de voir celle-ci, mais je n'en suis pas vraiment sûr. Je peux cliquer ici. Alors, juste ici. Choisissez les défauts ou l'un d'entre eux. Laissez-moi aller au sélecteur et laissez-moi choisir, par exemple, cette teinte foncée ici. Je l'aime bien et je peux le fermer. Par conséquent, je peux explorer mes couleurs plus loin de cette couleur particulière ou simplement les laisser telles quelles. Et enfin, si je veux l'exporter, vous pouvez utiliser Control IEP. Vous pouvez copier, vous êtes prêt à l'envoyer aux développeurs. Vous pouvez l'exporter au format PDF, ce qui est idéal comme image. Vous pouvez obtenir les couleurs CSS, ce qui est incroyable pour vos développeurs. Évidemment, AAC, SVG, ce qui est également génial, et vous pouvez obtenir le manteau si vos développeurs le veulent aussi dans le code. Enfin, vous pouvez intégrer le code de ces couleurs particulières si vous souhaitez les enregistrer de cette façon pour que vos clients ne soient pas des développeurs. Ensuite, nous avons Adobe Color , l'un des plus anciens du secteur. Mais à mon avis, c'est peut-être l'un des meilleurs parce qu'il est intégré à Adobe XD, aux produits Adobe, vous pouvez les ouvrir dans une application Creative Cloud morte si vous êtes un utilisateur Creative Cloud, et donc Vous pouvez simplement accéder à ces couleurs et les ouvrir dans le logiciel de votre choix. Vous pouvez donc créer, explorer, avoir des tendances et enfin des bibliothèques. Ainsi, à l'intérieur des bibliothèques, vous pouvez créer votre bibliothèque, puis ouvrir la bibliothèque dans Adobe XD, par exemple. Vous pouvez simplement copier ces couleurs, les coller à l'intérieur de votre XD. C'est vraiment aussi simple que ça. Si vous utilisez Adobe, il existe également une intégration Photoshop, Illustrator. Donc, quel que soit l'outil que vous utilisez de la famille d'Adobe, vous allez bénéficier de cette intégration. Nous avons donc une équipe d' extraction, des outils d'accessibilité des dégradés, ce qui est également génial. Donc, si je clique ici, vous pouvez voir le rapport de contraste, vous pouvez voir le score. Vous pouvez en voir quelques-uns, vous pouvez vérifier le sel pour échouer 17 Points et moins. Il faut donc ajuster cette couleur. Passez 18 points et plus, dépassez quatre icônes et graphiques exploitables si vous utilisez ces couleurs. Donc, fondamentalement, ce que nous devons changer, c'est la couleur du texte. Dans ce cas particulier où Adobe nous donne m. Ici, à gauche, vous avez tous ceux que j'ai mentionnés. Donc, actuellement, c'est personnalisé, mais si je passe à l'analogue, cliquez dessus, vous pouvez voir que nous ne pouvons choisir que cette couleur. Si nous allons avec le monochromatique, vous pouvez voir à quel point cela ressemble à un triadique. Donc, en gros, trois couleurs. Et vous pouvez voir ce triangle que nous avons mentionné. C'est donc notre couleur principale, sont nos couleurs secondaires et tertiaires. Vous pouvez en bénéficier gratuitement. Donc sur les côtés opposés, sur la roue chromatique divisée gratuitement. Donc, fondamentalement cela, et vous pouvez ensuite choisir le plus proche ou le loin que vous voulez. Et vous pouvez les diviser, vous pouvez les déplacer. Vous pouvez déplacer ces différentes nuances pour obtenir la meilleure palette de couleurs possible. Et double-cliquez sur le fractionnement gratuit. Donc, fondamentalement la même chose, mais double la couleur. Vous avez le carré, le composé et les nuances. Donc, selon ce que vous voulez, que j'ai mentionné tout au long de ce cours, vous pouvez toujours appeler avec Custom et vous pouvez l'ajuster comme vous le souhaitez. Par exemple, si nous choisissons gratuitement et si je vais avec la personnalisation et que je veux les ajuster, utilisons-le ou simplement au hasard. Allons-y avec ça. Et vous pouvez également ajuster les tons ici de cette couleur particulière. Donc, si je sélectionne cette couleur, je peux ajuster les tons de cette couleur comme celle-ci. Je peux ajuster toutes ces choses. Je peux rapidement copier ce code hexadécimal si je le souhaite. Et enfin, vous pouvez l'enregistrer en tant qu'équipe de couleurs, par exemple, je peux le nommer moi et tout mon projet de site Web. Voyons voir. Et vous pouvez voir les codes que vous allez obtenir juste là. Il s'agit donc de balises. Vous pouvez vérifier encore une fois l'accessibilité, juste pour voir si c'est suffisant. L'équipe est sans danger pour les daltoniens, ce qui est génial. Vous pouvez donc l'enregistrer si vous le souhaitez. Il apparaîtra dans vos bibliothèques XD ou Photoshop. Enfin, vous pouvez extraire l'équipe. Vous pouvez donc extraire la couleur de l'image et l'enregistrer sous forme de palette de couleurs. Vous pouvez extraire un dégradé ou la même chose. Encore une fois, les outils d'accessibilité, que nous avons mentionnés précédemment et nous avons une roue chromatique, ce qui est génial. Enfin, si vous utilisez ceci, assurez-vous de l'enregistrer, il apparaîtra dans l'outil de votre choix. Vous avez également ces jeux de couleurs. Vous avez changé d'équipe pour pouvoir le choisir. Vous avez Explorer, vous pouvez donc explorer différentes combinaisons de couleurs. Ce qui est tendance, ce qui ne l'est pas. Donc, s'ils se transforment en tendances, vous pouvez voir ce que cela va me donner. Par exemple, ça va me donner un tas d'images à la mode. Et vous pouvez voir les couleurs qui proviennent de ces images particulières. Donc, si vous aimez ces couleurs, vous pouvez télécharger ou JPEG ou ajouter à la bibliothèque apparaîtra à nouveau dans votre XD ou Photoshop Illustrator ou tout ce que vous utilisez. Et enfin, le pic de couleur, que nous avons mentionné précédemment. Encore une fois, c'est génial. Je vais laisser les liens vers tout ce que j'ai mentionné dans le PDF. Mais je vous recommande vraiment d'obtenir la couleur rose car cela vous facilitera beaucoup la vie. Il s'agit du Spotify, donc vous avez ces couleurs de Spotify. Et bien sûr, vous pouvez vous rendre sur le site Web de votre choix si vous souhaitez choisir les couleurs de ce site Web particulier. Et ça va vous montrer ici même à l'intérieur du bec de couleur. On y va. Ce sont les couleurs, sont les outils qui espèrent vraiment que vous les trouverez utiles. Une fois de plus, je vais vous donner tous ces liens dans le PDF. Ouvrez le PDF, cliquez sur le lien, vous voulez y accéder et assurez-vous de commencer à explorer ces couleurs. N'oubliez pas d'explorer ces outils pour voir lequel fonctionne le mieux pour vous. Et une fois que vous avez trouvé cette mission, pour l'explorer plus en profondeur, assurez-vous, comme vous l'avez vu dans la mission Adobe Color , d'explorer les tendances télécharger des images, l'explorer, et juste pour voir et comprendre comment choisir les couleurs de vos projets qui vous conviennent le mieux. Dans la vidéo suivante, je vais vous montrer comment créer des guides de style d' exportation pour les développeurs à partir d'Adobe XD. Je vous y verrai donc. 6. Guides de style pour les développeurs: Le guide de style est une partie importante de vos conceptions UX d'interface utilisateur, car vous y présenterez toutes les couleurs, icônes, images et tous les autres éléments que vous avez utilisés dans vos conceptions UX d'interface utilisateur. Vous allez les montrer à vos clients et surtout à vos développeurs. Parce qu'à partir de ce guide de style, ils peuvent extraire des informations importantes telles que la couleur à utiliser dans votre devis. Je vais donc vous montrer un projet que j'ai déjà fait pour une de mes lunettes de maître. Et je vais explorer ce qu'est le guide de style et vous montrer quelques trucs et astuces. Nous voici donc dans Adobe XD, et il s'agit du nouveau projet de site Web de la banque. Et comme je l'ai dit, il s'agit de ma masterclass Adobe XD. Je vais le lier dans le PDF. Vous pouvez le vérifier si cela vous intéresse. Et ici, nous avons commencé par l'architecture du site Web, passés à des filaires papier, à des filaires dans Adobe XD, plus à la conception de sites Web, à la conception de tableaux de bord. Et puis a finalement fait la conception réactive et la conception réactive du tableau de bord. Nous avons également fait une présentation de projet et enfin, un guide de style. Donc, si nous passons des calques à ici, qui sont des acides de document, vous pouvez voir toutes les couleurs et tous les codes couleur utilisés. Donc, fondamentalement, ce sont des jetons colorés. Lorsque vous survolez, vous pouvez voir que le blanc uni est FFF. Si vous survolez ici, vous pouvez voir les valeurs RVB de capacité 100. Donc, si nous effectuons un zoom avant de très près, vous pouvez voir que nous avons un guide de style de projet ici. Ce que je vous recommande donc de faire, lorsque vous créez ces guides de style de projets, veillez à toujours inclure les codes hexadécimaux si ce sont ceux dont vos développeurs ont besoin, ou des codes RVB. Si encore une fois, ce sont ceux dont un développeur a besoin. Ce que vous pouvez voir ici, c'est que nous avons du blanc uni, qui est cette couleur. Et j'ai également inclus le code hexadécimal afin que les développeurs puissent facilement sélectionner ce code hexadécimal s'ils le souhaitent. Et en allant plus loin, vous pouvez voir toutes ces autres couleurs. Ce que vous pouvez faire, c'est que vous pouvez leur donner ce fichier XD. Ils peuvent alors simplement prendre cela. Je vais donc ici, je peux copier cette couleur. Cliquez avec le bouton droit et copiez. Je peux y aller, copier cette couleur, par exemple collée dans mon éditeur de code. Et donc je peux l'avoir dans mon code ou je peux le sélectionner ici et le copier. Ou encore mieux, vous pouvez simplement contrôler ou commander E sur votre clavier pour l'exporter au format PDF. Lorsque vous cliquez sur Exporter, il est exporté au format PDF. Et quand ils les ouvrent plus tard, ils peuvent simplement sélectionner ce code hexadécimal dans le PDF, copier et le coller à l'intérieur. Aussi pour la typographie, vous pouvez voir pour l'iconographie. Toutes les icônes ont donc été utilisées dans ce projet particulier. Et toutes les illustrations et les éléments supplémentaires que vous avez utilisés peuvent être mis ici, mais vous pouvez également le faire ici, où est votre couleur ? Vous pouvez toujours mettre, par exemple, arrière-plan montre des flous ou de la basicité, une couverture et tous ces autres éléments ici , car l'intérieur contribue également comme couleur, car tous ces arrière-plans, les ombres et les flous ont également de la couleur. Une autre chose que vous pouvez faire avec ce guide de style est donc de le partager. Donc, si je sélectionne simplement ce tableau d'art, allez dans Partager. Vous pouvez voir qu'il ne s'agit que d'une seule sélection. Donc si je dézoome, vous ne pouvez voir que rien d'autre n'est sélectionné car je viens de sélectionner cet aéroport en particulier. Donc, ce qu'il peut faire, c'est le partager. Je peux créer le lien, mais au lieu de Design Review, je vais utiliser le développement pour créer un lien. Et pendant la création, ce que je veux vous montrer ici, c'est que les développeurs peuvent obtenir ce lien. Ils peuvent extraire toutes ces couleurs de ce lien particulier. Et vous pouvez également choisir ce partage pour le développement n'importe quel autre tableau d'art que vous avez dans votre conception. Par exemple, nous avons la conception de sites Web ici, et nous avons beaucoup de ces tableaux artistiques, vous pouvez donc tous les sélectionner. Vous pouvez les partager à des fins de développement. Et donc, vos développeurs vont avoir cette couleur. Ils peuvent le choisir. Donc, si je clique ici pour accéder à notre guide de style, il va les ouvrir dans mon navigateur, et cela montrera dans mon navigateur à quoi ressemble tout cela. Donc, si nous vous montrons ici pendant son ouverture, nous avons donc un guide de style de projet. Donc, selon la façon dont vous avez nommé votre plan de travail, cela va se manifester de cette façon. Une fois encore, nous avons toutes ces couleurs différentes. Donc, si je sélectionne l'un d'entre eux, par exemple, mélange celui-ci, et si je passe au code ici, vous pouvez voir toutes les couleurs et toutes les nuances de mes couleurs, dont elle est extraite ici. Donc, si je sélectionne celui-ci, vous pouvez voir qu'il s'appelle Danger lu tout de suite, nous avons des propriétés CSS. Certains, nous avons la largeur et la hauteur en haut à gauche, nous avons de l'arrière-plan, nous avons de l'arrière-plan ici. Donc ce code hexadécimal, et nous avons une obésité de 100. En gros, ce qu'ils peuvent faire à partir d'ici, c'est qu'ils peuvent choisir de copier à partir d'ici. Ils peuvent cliquer sur cette couleur. Ici. Tri des couleurs copiées. Laissez-moi me cacher juste pour que vous puissiez le voir. Donc, si je sélectionne cette couleur, cliquez dessus, vous pouvez voir la couleur copiée, donc c'est l'outil copié. Et ils peuvent le coller plus tard dans le code. Nous pouvons également passer ici. Vous pouvez donc voir root pour toutes ces couleurs. Une fois de plus, blanc uni, gris clair, gris foncé, vert principal, toutes les couleurs que j'ai nommées familles étrangères. Nous avons donc des familles de polices, ce qui est également idéal pour les développeurs, toutes situées ici même dans notre guide de style. Et enfin. Pour ce style de personnage neuf. Donc, si nous faisons défiler jusqu'au bas, c'est celui-ci. Donc, si je sélectionne ça et que je reviens au code. Permettez-moi donc de le sélectionner encore une fois. Vous pouvez voir tous les états que j'ai créés pour ce design particulier. Nous avons donc Visa, Black and White doit avoir accordé MasterCard en noir et blanc. Il suffit donc de changer tous ces logos. Fondamentalement, si je double-clique à l'intérieur et que je vais avec l'apparence, oui, si nous choisissons Contrôle et cliquez, vous pouvez voir un dégradé linéaire. Ainsi, toutes les couleurs d'un dégradé linéaire, vous pouvez voir la direction du dégradé, de l' obésité et de l'ombre portée. C'est celui que j'ai mentionné précédemment. L'ombre portée s'est donc décolorée et a ces valeurs. Donc, en gros, vos développeurs peuvent extraire ces valeurs directement d'ici. Ils ont le code CSS ici encore une fois. Et enfin, s'ils changent pour entendre, ils peuvent choisir cela. Et puis ils peuvent voir à l'intérieur du CSS racine toutes les choses d'ici. En gros, ils n'ont qu'à trouver cette carte ici et ils peuvent copier le code CSS à partir de là. Donc, si je sélectionne celui-ci par exemple, et vous pouvez voir l'état par défaut presque noir. Donc, si je maintiens mon contrôle et que je clique à l'intérieur, vous pouvez voir un gris clair. Si je sélectionne et clique à l'intérieur. Vous pouvez donc voir cette couleur, qui est la couleur de sa peau. Et si nous effectuons un zoom avant un peu plus près ici. On y va donc avec 100, par exemple. Si nous effectuons un zoom avant et que nous cliquons sur cette couleur verte, par exemple, vous pouvez voir la couleur pour qu'ils puissent cliquer, ils peuvent copier dans le presse-papiers et essentiellement en fonction de ce qu'ils veulent. Enfin, ils peuvent cliquer ici sur les commentaires et ils peuvent tirer cette rotation, par exemple ici. Et vous pouvez dire quelque chose comme Est-ce que vous aimez ces icônes, ou devraient-elles être noires et blanches ? S'ils disent oui, par exemple, vous pouvez cliquer sur cette icône. Vous pouvez revenir au code, localiser l'un d'entre eux. Par exemple, disons celui-ci. Et si vous n'avez que l'état par défaut, et par exemple, vous pouvez créer différents états pour ces icônes. Par exemple, nous avons la valeur par défaut, nous avons le survol. Vous pouvez donc voir qu'il modifie la couleur de l'état par défaut et du survol. Donc, selon ce que vous avez fait avec vos couleurs, il va réagir de cette façon particulière. Donc l'iconographie, les couleurs, la même chose, la même histoire. Ainsi, quand ils vont obtenir du CSS, ils peuvent simplement cliquer pour copier dans le presse-papiers et ils peuvent baser cela dans leur code. En gros, c'est à quel point il est facile de travailler avec Adobe XD avec des couleurs, quels guides de style. Et je vous recommande toujours d'exporter cela au format PDF car vos développeurs sont peut-être en déplacement. Parfois, ils peuvent en discuter avec votre client. Assurez-vous donc de leur envoyer le lien du guide de style lui-même, ne pas trop les confondre et assurez-vous de leur envoyer des liens séparés. Concevez souvent des filaires, du papier, des filaires, quoi que vous fassiez, car de cette façon, ils peuvent facilement inspecter toutes ces couleurs. Parce que si vous les placez tous dans un seul lien, ce que vous pouvez faire, vous allez simplement les confondre. Et j'ai constaté que cette approche fonctionne mieux avec mes développeurs. Mais assurez-vous de toujours parler à vos développeurs avant de commencer à travailler. Assurez-vous de mentionner le mélange de couleurs hexadécimales ou RVB pour voir s'ils sont bons avec certaines de ces couleurs. Et enfin, ce que je ne vous ai pas montré. Si je sélectionne cette couleur, par exemple, je peux cliquer ici. Laissez-moi me cacher. Vous pouvez donc voir que nous avons une couleur unie, dégradé linéaire, un dégradé radial et un dégradé angulaire en XD, nous avons de l'obésité pour la couleur, nous avons des tons de couleur différents ici. Nous avons la scie d'obésité pour le canal Alpha, pour la couleur elle-même. Et enfin, nous avons l'hexadécimal, le RVB et le HSB. Ainsi, selon ce que veulent vos clients et développeurs, vous pouvez le choisir ici. Donc, en gros, c'est tout. C'est pourquoi ces guides de style de projets sont vraiment importants car en un seul endroit, vous avez tous les éléments que vous avez utilisés dans votre conception. Et lorsque vous travaillez sur vos projets, assurez-vous de toujours créer les guides de style parallèlement à ce que vous faites, car il sera beaucoup plus facile de les exporter ultérieurement pour que vos développeurs puissent y jeter un coup d'œil. Donc, en gros, c'est tout. Je pense que Hume a vu à quel point les guides de style sont importants pour les développeurs. Ce n'est pas si important pour vous, mais ils peuvent être importants pour les autres concepteurs qui pourraient travailler sur ce design particulier après vous. Parce que, dans la majorité des cas, il se peut que vous ne souhaitiez pas continuer à travailler sur ce projet particulier. Peut-être que d'autres designers sont allés se lancer dans vos chaussures et continuer à travailler sur ce projet. Ayant donc quelque chose comme un guide de style, il sera toujours beaucoup plus facile pour concepteur de dettes de continuer là où vous vous êtes arrêté dans le même style. Et bien sûr, il sera beaucoup plus facile pour les développeurs de travailler avec un guide de style, car dans un seul endroit, ils disposent de toutes les informations dont ils ont besoin pour commencer à coder ce projet. 7. Votre projet de cours: Votre projet de classe pour cette classe consiste à créer le guide de style ou la combinaison de couleurs de votre choix. Assurez-vous d'utiliser la marque que vous aimez vraiment. Vous pouvez utiliser le pic de couleur que je vous ai montré. Vous pouvez sélectionner ces couleurs, puis utiliser l'outil préféré de votre choix, que ce soit Photoshop, fig, mon croquis XD, quoi qu'il soit, assurez-vous de le créer et de le télécharger en tant qu'image dans nos projets de classe. Mais vous pouvez également faire ce que je vous montre ici même dans le guide de style du projet. Vous pouvez donc créer quelque chose de complexe comme celui-ci, ou vous pouvez simplement zoomer ici et simplement utiliser les couleurs. Assurez-vous d'utiliser les codes hexadécimaux car je suis vraiment intrigué et intéressé de voir le code hexadécimal que vous avez utilisé et de nommer vos couleurs. Et il suffit de mettre ce petit texte ici. Je l'ai fait. Juste pour que je puisse voir votre processus de réflexion et voir comment votre nom, vos couleurs, vous pouvez utiliser l'un de ces outils, que vous avez vu dans l'une des leçons précédentes. Et ces outils vous donnent les noms des couleurs. Vous pouvez donc utiliser ces noms ou utiliser vos propres noms, faire ce que vous voulez. Assurez-vous simplement de créer la combinaison de couleurs. Vous n'avez pas besoin d'autant de couleurs. Vous pouvez utiliser trois couleurs. Par exemple, la dette va être abondante. Assurez-vous simplement de les combiner, assurez-vous d'utiliser les codes hexadécimaux et les noms ci-dessous et de les télécharger sous forme d'image dans vos projets de classe. J'ai vraiment hâte de voir ce que vous pouvez créer. Et j'ai vraiment hâte d'interagir avec vous dans la section des projets de classe. 8. Conclu: là que tu y vas. Vous avez atteint la fin de ce cours. C'est juste un cours court, comme je l'ai mentionné dans l'introduction et au début de cette classe, couleur est une matière très complexe et elle l' enseigne dans les écoles quatre semestres, voire quatre ans. C'est donc vraiment complexe si vous le vouliez, mais il n'est pas nécessaire que ce mélange soit complexe pour suivre certaines de ces étapes que j'ai mentionnées, assurez-vous d'explorer vous-même. Que ce cours ne soit que votre point de départ dans l'exploration du monde des couleurs. Assurez-vous de choisir votre outil préféré et de l'explorer plus loin à partir de là, et assurez-vous de vérifier le PDF. Parce que, comme je le mentionne sans cesse dans cette classe, tous les liens que j'ai mentionnés et toutes les ressources que j'ai mentionnées se trouvent dans ce PDF. Assurez-vous de cliquer sur les liens pour y accéder rapidement , puis commencez à explorer et à commencer votre parcours universitaire. Encore une fois, merci d'avoir regardé ce cours. J'espère vraiment que vous avez trouvé cela perspicace et utile. Et encore une fois, si vous souhaitez approfondir vos connaissances sur la couleur, assurez-vous d'utiliser les cours en ligne qui sont très longs et approfondis tous les sujets que nous avons mentionnés dans ce cours. Ou pour lire des livres sur les couleurs. Parce que, comme je ne cesse de le mentionner, couleur est l'un des sujets les plus complexes du design, car elle couvre toutes ces différentes variétés. Donc, il faut vraiment beaucoup temps pour être bon avec les couleurs, la sélection des couleurs et la théorie des couleurs. Encore une fois, merci beaucoup d'avoir regardé et j'ai vraiment hâte de vous voir dans certains de mes autres cours. Prends soin de toi.