Créer des schémas de couleurs incroyables pour vos projets de conception UI/UX

1. Introduction: Pourquoi est-il si difficile de travailler avec les couleurs ? Si vous êtes un concepteur UI/UX, vous êtes bien conscient de l'importance de la couleur. Vous savez que la création de la bonne palette de couleurs devient parfois une tâche décourageante. Mais pourquoi ? Parce que vous devez savoir comment créer une excellente combinaison de couleurs et comment appliquer à votre design. Si vous n'avez aucune idée de comment faire cela, et que vous avez du mal à créer des combinaisons de couleurs étonnantes, ne vous inquiétez pas, vous êtes au bon endroit. Bonjour, je suis Arash Ahadzadeh, et je suis un designer UI/UX. J' enseigne également l'UI et le design UX à l'Université d'Economie et des Sciences Humaines de Varsovie et dans ce cours, vous et moi allons parcourir tous les détails sur les couleurs. Nous allons commencer par les fondamentaux les plus élémentaires de la couleur , puis passer à des sujets avancés comme les harmonies des couleurs, la psychologie des couleurs, et bien plus encore. Si vous êtes l'une de ces personnes qui pensent que créer la palette de couleurs grises nécessite du talent et des compétences artistiques, il est probablement temps de changer d'état d'esprit parce que la couleur est tout au sujet de la science. Oui, tu l'as bien entendu. Lorsque vous apprenez la science derrière les couleurs, vous pouvez facilement trouver vos propres palettes de couleurs harmonieuses en un rien de temps. En plus de créer des palettes de couleurs, vous apprendrez également à appliquer des couleurs à votre design, peu importe s'il s'agit d'un site Web ou d'une application. De plus, nous allons parler de l'importance de l'accessibilité des couleurs dans la conception UI/UX et vous apprendrez à créer belles palettes de couleurs accessibles à travers des exercices simples. Enfin, je vais partager avec vous quelques conseils et astuces personnels pour travailler avec des couleurs qui accélèrent considérablement votre processus de conception. Ce cours est conçu pour vous donner les compétences théoriques et pratiques nécessaires pour choisir et appliquer correctement les couleurs. Il vous aide également à devenir un designer plus confiant et meilleur simplement en pratiquant différentes techniques. Donc, si vous êtes prêt à maîtriser la couleur et à créer des combinaisons de couleurs étonnantes, je vous verrai en classe. 2. Structure du cours: Hé tout le monde. Dans cette vidéo, nous allons parler de la structure de ce cours. Ce cours est divisé en deux parties différentes, la partie théorique et la partie pratique. Dans la partie théorique, vous apprendrez tous les fondamentaux de la couleur tels que la théorie des couleurs, la psychologie des couleurs, les harmonies des couleurs, et bien plus encore. Dans la partie pratique, vous vous entraînerez à appliquer les connaissances que vous avez acquises dans la partie théorique à des projets réels. Nous allons créer différentes palettes de couleurs et les appliquer à un site Web et à une application mobile. De cette façon, vous comprendrez vraiment le processus de création et d'application de palettes de couleurs aux interfaces utilisateur. se voit dans la vidéo suivante. 3. L'importance des couleurs dans la conception de UI/UX: Lorsque nous parlons de design, peu importe s'il s'agit d'un design UI/UX, design graphique ou même d'un design d'intérieur, couleurs jouent un rôle plus blanc dans l'un d'eux. Sans aucun doute, les couleurs sont l'un des aspects les plus importants de votre conception UI/UX. Sans couleurs, il est presque impossible de donner à notre design des caractères et des sentiments. Quelle que soit la qualité de votre composition, si vous n'utilisez pas les couleurs de manière appropriée, je vous garantis que votre design ne se distinguera pas. Lorsque vous concevez un projet, qu'il s'agisse d'un site Web ou d'une application mobile, il est essentiel de transmettre le message et les sentiments corrects à l'utilisateur final en choisissant les couleurs appropriées. Mais pourquoi la couleur est-elle importante dans la conception UI/UX ? La série abrégée, première impression visuelle compte. Es-tu convaincu ? Si ce n'est pas le cas, permettez-moi d'en préciser davantage. Lorsque les utilisateurs lancent une application mobile ou un site Web, il leur faut environ 50 millisecondes pour décider s'ils veulent rester ou non. Leurs décisions dépendent de différents facteurs et l'un de ces facteurs est l'utilisation de la couleur. Pouvez-vous voir à quel point il est important d'utiliser des couleurs appropriées dans votre conception ? Choisir des couleurs grises semble complexe à première vue, mais croyez-moi, quand vous apprenez les fondamentaux des couleurs et la science derrière cela, je vous assure que vous pouvez créer des schémas de couleurs étonnants pour vos projets en un rien de temps. Dans les vidéos suivantes, vous découvrirez les bases des couleurs pour la conception UI/UX. On t'a vu alors. 4. Les modes de couleur: Lorsque nous voulons utiliser des couleurs, il existe différents modes de couleur que nous pouvons choisir, tels que CMJN, RVB, Niveaux de gris, etc., mais les plus dominants sont CMJN et RVB. Les modes de couleur peuvent influer sur la façon dont les images sont présentées aux utilisateurs. Laisse-moi les briser pour toi. CMJN signifie cyan, magenta, jaune et noir. Il est le plus souvent utilisé pour l'impression couleur. RGB signifie rouge, vert et bleu. Il est préférable pour le travail numérique parce que ces couleurs sont les couleurs primaires utilisées dans les écrans d'ordinateur, les écrans mobiles, etc. Donc, si vous êtes un graphiste qui veut concevoir des illustrations pour l'impression, vous devriez utiliser CMJN, et si vous êtes un concepteur UI/UX qui veut concevoir pour les écrans numériques, vous devez utiliser RVB. Permettez-moi de vous montrer rapidement comment RVB diffère du CMJN. Jetez un oeil à cette photo. Le mode couleur de cette image est RVB. Mais regardez ce qui se passe si je le convertis en CMJN. Tu as vu ça ? Quelle est la raison de cette différence ? Voici le diagramme de chromaticité, et c'est la gamme de couleurs que nos yeux pourraient traiter et reconnaître. C' est la gamme de couleurs que nous pouvons obtenir en mode RVB, et c'est la gamme de couleurs que nous pouvons obtenir en mode CMJN. Comme vous pouvez le voir, la plage ou la gamme RVB est beaucoup plus grande que la plage CMJN. C' est pourquoi les couleurs du mode RVB semblent plus éclatantes que celles du mode CMJN. J' espère maintenant que vous avez une meilleure compréhension des différents modes de couleur. se voit dans la vidéo suivante. 5. Les ingrédients pour les couleurs: Nous pouvons décomposer chaque couleur en trois ingrédients principaux : teinte, saturation et valeur. teinte est essentiellement l'origine de la couleur que nous voyons comme le rouge, bleu, le violet, ou toute autre couleur. La deuxième propriété d'une couleur est la saturation, et c'est l'intensité d'une teinte. Prenez le vert par exemple. Augmentez la saturation et l'intensité augmente. Au contraire, si vous diminuez cette saturation, l'intensité diminue. Le dernier attribut d'une couleur est value. C' est essentiellement la luminosité d'une couleur. Maintenant, nous pouvons décomposer la valeur en deux termes différents : teinte et ombre. Une teinte est une version plus brillante d'une teinte, et nous pouvons en créer une si nous mélangeons la teinte avec le blanc. D' autre part, une nuance est une version plus foncée d'une teinte. Comme vous pouvez le deviner, nous pouvons en créer un en ajoutant du noir à notre teinte. Nous pouvons également créer un ton de notre couleur en y ajoutant du gris. Dans les prochaines vidéos, vous apprendrez à créer différentes teintes et nuances d'une couleur pour vos projets. 6. Maîtriser la roue des couleurs: Vous êtes-vous déjà demandé comment certains concepteurs d'interface utilisateur créent les palettes de couleurs parfaites pour leurs projets ? Ils ne se contentent pas d'utiliser leurs compétences artistiques pour cette affaire. Ils utilisent la science, et ça s'appelle la théorie des couleurs. Pour apprendre cette science, vous devez comprendre ce qu'est une roue de couleur, et comment vous pouvez l'utiliser. C' est une roue de couleur, et tout comme ce que vous avez appris à l'école, elle est faite de couleurs primaires, secondaires et tertiaires. Les couleurs primaires sont le rouge, le bleu et le jaune. Si nous mélangeons ces couleurs ensemble, elles font les couleurs secondaires, et elles sont vert, orange et violet. Enfin, lorsque nous mélangeons les couleurs secondaires et primaires, ils font les couleurs tertiaires, jaune-orange, rouge-orange, rouge-violet, bleu-violet, bleu-vert et jaune-vert. Ceux-ci composent la roue de couleur, inventée par Sir Isaac Newton, et cela simplifie la façon dont nous pouvons travailler avec différentes couleurs. La roue de couleur peut être divisée en deux groupes principaux en fonction de la température de couleur, couleurs froides et chaudes. Mais comment pouvons-nous utiliser la roue de couleur pour trouver des palettes de couleurs étonnantes pour nos projets ? Eh bien, nous pouvons utiliser des formules de base connues sous le nom harmonies de couleurs pour choisir harmonieusement différentes couleurs de la roue de couleur. Nous parlerons des harmonies de couleurs dans les prochaines vidéos. 7. Différents types de couleurs de couleurs: Comme je l'ai mentionné dans la vidéo précédente, nous avons deux groupes de couleurs, couleurs fraîches et chaudes. Mais comment devrions-nous savoir quel groupe est le plus adapté à notre projet de conception d'interface utilisateur ? Chaque groupe de couleurs a quelques caractéristiques qui nous aident à décider si c'est un bon choix ou non. Par exemple, les couleurs fraîches représentent l'eau, la neige, le ciel, et elles sont calmes, apaisantes et rafraîchies. D' autre part, les couleurs chaudes représentent la chaleur, la lumière du soleil et la convivialité. Ils sont énergiques, excitants et confortables en général. En fonction des caractéristiques de la marque, nous pouvons décider quel groupe de couleurs convient à notre projet. Par exemple, si la marque propose des activités passionnantes et amusantes, vous pouvez aller avec les couleurs chaudes. Inversement, vous pouvez utiliser des couleurs fraîches si la marque est tout au sujet de la confiance, de la sécurité, du professionnalisme, etc. Les couleurs que nous utilisons doivent refléter la personnalité de la marque. En plus de ces deux groupes, nous avons un autre groupe de couleurs appelé couleurs neutres, blanc, noir, brun et gris. Les couleurs neutres n'apparaissent pas dans la roue des couleurs. Nous les utilisons généralement pour les arrière-plans car ils complètent et mettent en évidence d'autres couleurs assez bien dans notre conception. Mais l'utilisation d'une couleur grise ou blanche comme fond n'a pas toujours l'air intéressant et esthétique pour les yeux de l'utilisateur. Alors que pouvons-nous faire ? Pour rendre notre design encore meilleur, nous pouvons ajouter une teinte et un peu de saturation aux couleurs neutres. Grâce à cette technique, les couleurs neutres semblent plus intéressantes aux yeux de l'utilisateur. 8. Harmonies des couleurs: Maintenant que vous avez appris sur la roue de couleur et la couleur en général, il est temps d'apprendre à utiliser la roue de couleur pour créer des jeux de couleurs d'apparence professionnelle. Il existe des formules de base basées sur l' harmonie des couleurs qui peuvent nous aider à choisir des couleurs harmonieuses facilement. Commençons par la formule la plus simple, qui est appelée monochromatique. Il n'utilise qu'une seule couleur ou teinte. Il suffit de choisir une couleur sur la roue de couleur et de créer des variations en utilisant la saturation et la valeur. Ce que j'aime dans les schémas de couleurs monochromatiques c'est le fait qu'ils sont garantis de bien fonctionner ensemble. La formule de couleur suivante est complémentaire. Il prend deux couleurs des côtés opposés de la roue de couleur, comme le bleu et l'orange, ou le jaune et le violet. C' est un grand jeu de couleurs lorsque vous voulez utiliser des couleurs contrastées élevées dans votre conception. Un jeu de couleurs complémentaire fractionné prend les couleurs de chaque côté des compléments. Il vous donne différentes couleurs pour travailler avec tout en conservant le même niveau de contraste. Un schéma de couleurs analogue prend des couleurs qui sont à côté de l'autre sur la roue de couleur, comme les jaunes et les verts, ou les bleus et les violets. Un jeu de couleurs triadiques utilise trois couleurs espacées uniformément, et elles forment un triangle sur la roue de couleur. Ces combinaisons de couleurs sont généralement éclatantes, alors assurez-vous de les utiliser à bon escient dans vos projets. Le schéma de couleurs tétradique prend deux ensembles de couleurs complémentaires et forme un rectangle sur la roue de couleur. Ces couleurs fonctionnent très bien lorsque vous laissez une couleur agir comme la couleur principale et les autres comme un accent. Vous pouvez créer différents thèmes, nuances et tons dans chaque palette de couleurs. Si vous êtes un peu débordée, ne vous inquiétez pas. Lorsque vous commencez à appliquer ces méthodes, vous gagnerez en confiance et vous pouvez facilement reconnaître si certaines couleurs fonctionnent ensemble ou non. 9. Contraste de couleurs: contraste de couleur est la différence de lumière entre le premier plan et l'arrière-plan. Ça a l'air bizarre ? Laissez-moi vous montrer un exemple. Voici un fond pointu, et si nous ajoutons un élément avec une couleur saturée sur le dessus, nous obtiendrons cette terrible œuvre d'art. J' aimerais pouvoir prétendre que je n'ai jamais vu un tel dessein. Heureusement, on pourrait réparer ça. Vous pouvez souvent obtenir un meilleur rapport de contraste simplement en modifiant les tons, les teintes ou la saturation de vos couleurs. Un rapport de contraste est juste une valeur attribuée à la différence de lumière entre le premier plan et l'arrière-plan. Plus le rapport est élevé, plus il est facile de lire le contenu à l'écran. Voici quelques conseils qui pourraient faire passer votre qualité de conception du bon au grand. Astuce numéro 1, ne jamais utiliser de noir pur et blanc pur et vice versa. Il provoque un train visuel numérique et blesse les yeux des utilisateurs. Au lieu de cela, vous pouvez utiliser un gris très foncé sur un gris très clair et vice versa. Astuce numéro 2, n'utilisez pas de couleur vive sur une couleur vive. Il ne laisse pas vos éléments se démarquer. Au lieu de cela, vous pouvez utiliser une couleur vive sur une nuance sombre. Astuce numéro 3, vérifiez toujours vos couleurs sur les arrière-plans clairs et sombres. Parfois, vous devrez les ajuster pour obtenir un bon rapport de contraste sur les arrière-plans sombres. Last but not least, tip numéro 4, validez toujours vos couleurs en vérifiant le rapport de contraste. Croyez-moi, il y a de belles conceptions d'interface utilisateur sur Dribbble et Behance qui échouent le test de rapport de contraste. Vous apprendrez à vérifier le rapport de contraste plus tard dans ce cours. 10. Exemples de plans de couleurs harmoniques de couleurs: Maintenant que vous avez appris comment les combinaisons de couleurs fonctionnent, voyons quelques exemples de chaque harmonie de couleurs pour voir comment vous pouvez les appliquer à votre conception. couleurs monochromatiques. Comme vous pouvez le voir, ce site utilise un schéma de couleurs monochromatiques. Pourquoi ? Parce qu'il n'utilise qu'une seule couleur ici. Mais Aresh, nous avons beaucoup de couleurs ici, pourquoi dites-vous qu'il n'utilise qu'une seule couleur ? À première vue, il peut sembler qu'il y a beaucoup de couleurs ici. Cependant, nous avons une seule couleur et différentes nuances, tons et teintes de cette couleur. La couleur primaire est ce bleu, et ils ont utilisé une nuance sombre de cette couleur pour ce grand titre et aussi les liens en haut et pour le bouton d'inscription, comme vous pouvez le voir, ils utilisent la couleur primaire et une légère teinte de cette couleur. Fondamentalement, la teinte est la même, mais la valeur et la saturation sont différentes. Jetons un coup d'oeil à un autre exemple. Ce site appelé Orbit utilise également un schéma de couleurs monochromatiques, et ici, ils utilisent également une seule couleur et ils appliquent parfaitement ces couleurs à leur conception pour créer une grande hiérarchie visuelle. Schéma de couleurs complémentaire. Voici un site Web populaire, Réservation, et comme vous pouvez le voir, il utilise un schéma de couleurs complémentaire. Pourquoi ? Parce qu'ici, nous avons le bleu et l'orange. Ces deux couleurs sont placées sur les côtés opposés de la roue de couleur. Ils ont également utilisé une couleur neutre pour l'arrière-plan, et c'est la raison pour laquelle les couleurs orange et bleu se distinguent ici. Il est très important de choisir judicieusement la couleur de votre arrière-plan. Il y a d'autres couleurs, comme le vert ou le rouge ici, mais ce sont des couleurs sémantiques et nous en parlerons plus tard. Jetons un coup d'oeil à cette application mobile. C' est aussi une entreprise très populaire, et comme vous pouvez le voir, elle utilise la même combinaison ici, bleu et orange. C' est une combinaison de couleurs très populaire que vous pouvez voir dans le design d'intérieur, dans le design graphique et dans le design UI/UX. Split schéma de couleurs complémentaires. Ce site utilise un schéma de couleurs complémentaires divisé, et comme vous pouvez le voir, c'est énergique et amusant. La raison en est, ce sont des couleurs contrastées élevées, généralement nous les utilisons dans les illustrations. Maintenant, jetons un coup d'oeil à ce site. Ici, j'ai également utilisé un schéma de couleurs complémentaires split, et comme vous pouvez le voir, je l'ai utilisé pour les motifs sur le côté droit, pas pour le reste des éléments sur le côté gauche. Il est très important de savoir quelles couleurs conviennent à quel contenu. couleurs analogique. Ce site utilise un schéma de couleurs analogue, et comme vous pouvez le voir, le concepteur a parfaitement appliqué ces couleurs à l'illustration et a simplement utilisé une couleur blanche pour le contenu de premier plan. Par conséquent, nous avons ici un taux de contraste très élevé. Ce site utilise également un schéma de couleurs analogue. Comme vous pouvez le voir, ils utilisent la couleur principale comme arrière-plan, et ils utilisent deux autres couleurs qui sont placées sur les côtés droit et gauche de la couleur sur la roue de couleur, et ils les utilisent pour le CTA ou appeler à l'action, comme vous pouvez le voir, et aussi pour le titre, ce sont les couleurs d'accent et ils devraient recevoir le plus d'attention. couleurs triadiques. Ce site utilise un schéma de couleurs triadiques, et comme vous l'avez remarqué, ces couleurs sont passionnantes et amusantes. Ceci est aussi un autre exemple de schéma de couleurs triadiques. Comme vous pouvez le voir ici, le concepteur a utilisé des couleurs désaturées pour laisser le contenu et l'information comme son texte et ces images apparaître sur ces arrière-plans, et le résultat est génial. couleurs tétradiques. Voici un exemple de schéma de couleurs tétradique utilisé dans la conception de l'interface utilisateur. Comme vous pouvez le voir ici, la plupart des couleurs sont utilisées pour l'illustration. Illustration ici a beaucoup de couleurs comme le vert, orange, rouge, rose, violet foncé, etc. Ce n'est pas vraiment une bonne idée d'utiliser ce schéma de couleurs pour les principaux éléments de votre projet comme le texte, les boutons, etc. Sauf si vous êtes un concepteur expérimenté et savez ce que vous faites, je ne suggérerais pas d'utiliser ce schéma de couleurs dans la conception UI/UX. Ce site est un autre exemple d'un schéma de couleurs tétradiques. Ici encore, nous avons une illustration, et il est évident que le concepteur n'a pas utilisé toute la palette de couleurs pour le contenu. 11. Introduction à la psychologie des couleurs: Savoir comment jumeler les couleurs est crucial pour n'importe quel concepteur. Cependant, ce n'est pas suffisant pour créer un design significatif. Regardons dans la signification des couleurs individuelles. Néanmoins, n'importe quelle couleur peut transmettre un sentiment positif ou négatif aux utilisateurs. Vous voulez donc vous assurer d'utiliser les bonnes couleurs pour communiquer correctement avec les utilisateurs. Chaque couleur peut avoir des sentiments positifs et négatifs. Il est donc important de les utiliser au bon endroit pour éviter tout malentendu. Rouge. Le rouge implique l'excitation, l' amour, le pouvoir et l'énergie. Il pourrait aussi véhiculer un danger, une erreur et une agression. Assurez-vous donc de clarifier l'intense avec une courte description à côté de la couleur. Jaune. Le jaune représente la créativité , le bonheur, l'optimisme et la convivialité. C' est pourquoi McDonalds l'utilise comme couleur de marque. Orange. Orange pourrait fournir aux utilisateurs un sentiment de chaleur. Elle est invitante et montre du succès et de la confiance. Vert. Le vert est une couleur dominante dans la nature qui peut évoquer des émotions puissantes. Il représente la santé, la fraîcheur et la croissance. Si vous voulez concevoir un projet pour un produit écologique, c'est probablement la meilleure couleur que vous pourriez utiliser. Bleu. Le bleu signifie la confiance, le calme et la paix. Pour certaines personnes, c'est un signe de tristesse et de dépression. Vous avez peut-être reconnu que la plupart des sites Web de technologie et d'entreprise utilisent bleu pour offrir un sentiment de confiance, de calme et de respect. Certains hôpitaux utilisent également le bleu sur leur site Web. De loin, le bleu est la couleur la plus préférée par tous les utilisateurs. C' est pourquoi vous voyez de nombreuses applications mobiles et sites Web qui utilisent le bleu comme couleur dominante. Violet. Violet est une couleur qui symbolise la royauté et la richesse. Comme la teinture violette était rare dans le passé, elle était réservée à la royauté. C' est aussi la couleur préférée de beaucoup d'utilisateurs féminins, et il fournit un sentiment de créativité. Rose. Le rose est une couleur de compassion et de positivité. Alors que le rose a été utilisé pour les produits féminins depuis des années. Il peut également être neutre de genre, mais assurez-vous de réfléchir à deux fois lorsque vous voulez utiliser le rose pour un site Web de magasin de menuiserie. Marron. Tout comme le vert, brun est associé à la nature, même s'il peut donner un sentiment de confort, il peut aussi être terne et sale. Assurez-vous de vérifier différentes formes brunes avant de les appliquer à votre dessin. Parce qu'un brun clair peut faire propre et un sombre peut sembler sale. Noir. Le noir implique l'élégance, le luxe et la sophistication. Assurez-vous de l'utiliser correctement car il pourrait fournir un sentiment de tristesse et de tristesse ainsi. Bien qu'il soit couramment utilisé pour le texte, vous pouvez l'utiliser pour l'arrière-plan tant que vous mettez des couleurs blanches de marque au premier plan. Blanc. Nous voyons le blanc dans presque n'importe quel design, et c'est parce qu'il symbolise la propreté et la simplicité. Si vous voulez concevoir une page Web minimaliste ou une application mobile, assurez-vous d'utiliser beaucoup de blanc. Vous êtes peut-être familier avec le terme espaces, et cela signifie laisser un espace vide que l'utilisateur ne se sent pas submergé. Sans oublier qu'il laisse d'autres couleurs apparaître dans votre design aussi. A partir de maintenant, je veux que vous pensiez à la signification des couleurs que vous utilisez vos projets que vous pourriez améliorer votre design de bon à génial. 12. Différences de sexes en préférences de couleurs: Lors de la conception d'une application ou d'un site Web, il est essentiel de savoir qui est votre public cible. Pourquoi ? Parce qu'en fonction des données démographiques des utilisateurs, vous pouvez décider quelles couleurs fonctionnent le mieux pour le projet et éventuellement augmenter le taux de conversion. Au cours des dernières années, différents projets de recherche ont montré que les hommes et les femmes préfèrent des couleurs différentes. Tout simplement parce que nous connaissons la signification des couleurs, cela ne signifie pas nécessairement que nous devrions tous les utiliser. Comparons les couleurs les plus préférées par les hommes et les femmes côte à côte. Comme vous pouvez le voir, le bleu est la couleur la plus populaire pour les hommes et les femmes. Maintenant, vous comprenez pourquoi tant de sites Web et d' applications utilisent le bleu comme couleur dominante. Le violet est surtout aimé par les femmes, tandis que les hommes et les femmes aiment le rouge et le vert. Maintenant, comparons les couleurs les plus déplaisées par les hommes et les femmes. Comme vous pouvez le voir, le brun et l'orange sont les couleurs les moins préférées pour les hommes et les femmes. Donc, la prochaine fois que vous voulez créer une palette de couleurs, vous pouvez d'abord faire un peu de recherche pour savoir qui est vraiment votre public cible, et en fonction de ce que vous avez trouvé, vous pouvez choisir vos couleurs facilement. 13. Couleurs requises pour la conception de UI: Quel que soit le type de projet de conception d'interface utilisateur sur lequel vous travaillez, vous aurez besoin des couleurs suivantes pour travailler : une, couleurs primaires et secondaires. La couleur primaire est une couleur dominante qui est utilisée le plus fréquemment dans votre interface utilisateur. Habituellement, vous devez utiliser la couleur de la marque comme couleur principale. Considérons cette image comme un exemple ; Qatar Airways utilise sa couleur de marque violacée comme couleur principale. En option, vous pouvez créer un ensemble de couleurs secondaires pour rendre votre design plus intéressant. Gardez à l'esprit que vous devez utiliser des couleurs secondaires si et seulement si elles sont nécessaires pour que votre conception apparaisse. Supposons que vous souhaitiez concevoir un menu avec différentes options. Afin de faire la distinction entre l'option sélectionnée et les options non sélectionnées, vous pouvez utiliser une couleur secondaire. Deux couleurs d'accentuation. La couleur d'accentuation est utilisée pour souligner les actions et mettre en évidence des informations telles que le texte, boutons ou l'appel à l'action, le curseur, les liens, la barre de progression, etc. Une fois que vous avez choisi votre couleur principale, vous pouvez utiliser les harmonies de couleurs que nous avons parlé sur le point de créer la couleur d'accentuation. Je vais vous montrer comment créer une palette de couleurs étape par étape dans la vidéo suivante. Considérez la page d'accueil de Lyft. Il utilise le violet comme couleur d'accent et comme vous pouvez le voir, il a été utilisé pour l'appel à l'action et les liens. Trois couleurs sémantiques. Ils sont utilisés à des fins d'avertissement, d'erreur, de réussite et d'information. Utilisez le jaune pour les avertissements, rouge pour les erreurs, le vert pour les succès et le bleu pour les informations. Ces couleurs sont suggérées en fonction de la psychologie des couleurs. Vous êtes libre d'utiliser différentes nuances, tons et teintes de ces couleurs. Assurez-vous de ne pas utiliser ces couleurs sémantiques interchangeable car elles peuvent transmettre le mauvais message à l'utilisateur. Couleurs neutres : blanc, noir ou gris schémas. Ces couleurs sont principalement utilisées pour le texte et l'arrière-plan. Ils laissent toutes les autres couleurs apparaître dans votre design. Presque toutes les palettes de couleurs nécessitent des couleurs neutres pour créer un rapport de contraste de couleur élevé entre l'arrière-plan et le premier plan. Comme vous pouvez le voir, ce site utilise une couleur neutre claire pour l'arrière-plan. Last but not least, le numéro 5, les couleurs de visualisation des graphiques et des données. Tout comme les couleurs secondaires, avoir ces couleurs sont également facultatives selon le type de votre projet. Si vous avez besoin de graphiques, cartes de chaleur ou d'arborescence dans votre interface utilisateur, envisagez de créer un ensemble de 10 à 20 couleurs dans un ordre particulier. Vous pouvez créer de telles couleurs en suivant les instructions suivantes. Vous pouvez créer un jeu de couleurs catégorique composé de plusieurs couleurs qui contrastent les unes aux autres dans un certain ordre. C' est bon pour les graphiques en courbes, les graphiques à barres, etc. Comme il s'agit de couleurs contrastées, utilisez ce jeu de couleurs lorsque vous devez présenter des données de façon distincte. L' autre type de jeu de couleurs que vous pouvez créer est séquentiel. C' est une transition progressive des couleurs de la lumière à l'obscurité et vice versa. Il est adapté pour treemap et heatmap. Le dernier type de jeu de couleurs que vous pouvez créer est divergent. Les couleurs divergentes sont utiles lorsque vous avez des valeurs négatives et positives à présenter. N' utilisez pas ces couleurs pour les échelles catégoriques. 14. Comment créer une palette de couleurs pour votre projet ?: Maintenant que vous avez acquis toutes les connaissances requises sur la couleur, mettons-les en pratique et créons une palette de couleurs étape par étape. Êtes-vous prêt ? Allons commencer. Quel que soit le logiciel que vous utilisez, changez le modèle de couleur en HSB. J'utilise Figma. Laisse-moi te montrer comment ça marche. abord, je passe à la section Remplir, et à partir de ce menu déroulant, je choisis HSB. Comme vous pouvez le voir, nous avons trois valeurs différentes ici H pour la teinte, S pour la saturation et B pour la luminosité. Lorsque nous voulons augmenter l'intensité de notre couleur, nous devrions augmenter la saturation ici. Si vous voulez créer une nuance, nous devrions diminuer la luminosité pour ajouter du noir à notre couleur de base. Étape 1, choisissez votre couleur de base. C' est la couleur principale de votre interface utilisateur. Vous pouvez choisir la couleur de la marque pour cela s'il y en a. Étape 2, appliquez la couleur à la forme sur votre toile. Il pourrait s'agir d'un cercle ou d'un rectangle. Étape 3, dupliquez la forme cinq fois pour obtenir six formes identiques. Ce sont vos échantillons. Étape 4, choisissez les nuances près de la couleur de base et modifiez uniquement la saturation ou la luminosité pour obtenir deux nuances foncées de soutien de votre couleur. Ne change pas la teinte. Ces couleurs sont utilisées pour différents états d'éléments exploitables comme les boutons ou les liens. Par exemple, lorsque nous concevons un bouton, nous voulons créer tous les états du bouton comme par défaut, actif, inactif, etc Étape 5, choisissez maintenant deux couleurs neutres en ajoutant le gris et le blanc à votre couleur. Étape 6, enfin, créez un ton sombre de votre couleur en ajoutant plus de gris à votre couleur. Nous avons fini. Comme vous pouvez le voir, juste en utilisant une seule couleur de base, vous pouvez concevoir une interface complète. J' ai une question à vous poser. Quel genre d'harmonie des couleurs avons-nous utilisé pour créer cette belle palette ? Si votre réponse est monochromatique, vous avez absolument raison. Nous utilisons une seule couleur et avons créé des variations en ajoutant des teintes, des nuances et des tons à notre palette de couleurs. Maintenant, créons un schéma de couleurs analogue. Je vais utiliser la roue de couleur comme référence. Choisissons le violet comme couleur de base. Maintenant, je vais déplacer légèrement le curseur de teinte vers la gauche et la droite pour choisir trois couleurs supplémentaires. Gardez à l'esprit que pour créer des variations pour votre jeu de couleurs, vous n'avez pas besoin de changements majeurs de teinte. Vous avez juste besoin de modifier légèrement la teinte et de créer des variations en ajustant la saturation et la luminosité. Dans ce cas, je vais choisir une teinte de cette couleur rose comme couleur d'accent. Maintenant que nos couleurs primaires et accentuées sont prêtes, il est temps d'ajouter deux couleurs neutres en ajoutant du gris à notre couleur principale. Voyons maintenant à quoi ressemble cette palette dans une interface. Ça a l'air incroyable, n'est-ce pas ? Selon le type de projet, vous pouvez ajouter des couleurs sémantiques à votre palette de couleurs. Les couleurs sémantiques sont utilisées pour les avertissements, erreurs, les succès et les informations. Comme je l'ai mentionné dans la vidéo précédente, vous devriez utiliser le jaune pour les avertissements, rouge pour les erreurs, le vert pour les succès et le bleu pour afficher les informations. Une note rapide ici, avoir ces couleurs est un must si vous voulez concevoir un tableau de bord. Parce que sur les tableaux de bord, nous présentons généralement des données importantes et il est essentiel d'utiliser couleurs sémantiques pour transmettre clairement le but et la signification de toutes les données aux utilisateurs. 15. Comment choisir votre couleur de base ?: Dans cette vidéo, nous allons parler du processus de sélection d'une couleur de base pour vos palettes de couleurs. La couleur de base est la couleur dominante dans votre projet. Pour choisir la couleur de base, vérifiez d'abord les couleurs de la marque. Si vous souhaitez concevoir un site Web ou une application mobile pour KFC, quelle serait la meilleure couleur de base pour vos palettes de couleurs ? Oui, tu as raison. Rouge. Pourquoi ? Parce que les clients des marques sont familiers avec la couleur de la marque et peuvent se connecter instantanément à votre design. Si vous devez choisir la couleur primaire de la marque, abord, listez les caractéristiques de la marque, puis pensez à quelle couleur se connecte à l'idée derrière la marque conformément à la psychologie des couleurs. Il est essentiel d'utiliser des couleurs qui communiquent avec les utilisateurs. Supposons que vous vouliez choisir une couleur primaire pour une entreprise qui offre des produits biologiques. Dans ce cas, le vert pourrait être une bonne option car il se sent naturel et frais. Lorsque vous décidez quelle couleur convient à la marque, vous pouvez jouer avec les attributs de ces couleurs tels que la saturation, la luminosité et la valeur. La plupart du temps, vous choisissez une couleur et vous dites qu'elle a l'air cool. Cependant, lorsque vous essayez de combiner cette couleur avec d'autres couleurs, elle peut ne pas paraître aussi bonne que vous l'attendez. Assurez-vous de vérifier votre couleur principale par rapport autres couleurs pour voir si c'est le bon choix pour votre projet. Nous parlerons de l'accessibilité des couleurs plus tard dans ce cours. 16. Comment choisir une couleur de l'accent ?: Les couleurs d'accentuation sont utilisées pour les liens, les appels à actions, la barre de progression, etc. Ils sont généralement lumineux et saturés. Vous pouvez créer une couleur d'accentuation en choisissant la couleur de base ou primaire et en utilisant différentes harmonies de couleurs telles que monochromatiques, analogues ou complémentaires. Si vous ne savez toujours pas comment choisir une grande couleur d'accent, laissez-moi vous montrer mon processus. Choisissez votre couleur principale et augmentez ou diminuez la teinte de 30 à 40 points. Maintenant, augmentez la luminosité de 5-10 points. Voila, ta couleur d'accent est prête. Cette formule fonctionne avec n'importe quelle couleur. Pouvez-vous voir à quel point il est facile de créer une couleur d'accent maintenant ? 17. Comment choisir les couleurs de l'arrière-plan ?: Peu importe à quel point vos couleurs d'accent sont belles et vibrantes, si vous n'avez pas une bonne couleur de fond, elles ne reçoivent pas assez d'attention. Il est donc crucial de choisir votre couleur de fond à bon escient. En ce qui concerne l'arrière-plan, vous n'êtes pas limité à utiliser uniquement des couleurs claires. Parfois, nous pouvons utiliser la couleur principale pour l'arrière-plan, tant qu'il n'est pas trop dynamique pour que les utilisateurs quittent votre site Web ou votre application. Nous pouvons également sélectionner votre couleur primaire et créer une teinte très légère en diminuant la saturation et en augmentant la luminosité. Comme vous pouvez le voir, j'ai utilisé cette technique pour cette interface. Par exemple, vous pouvez définir la valeur de saturation entre 2 et 8 points et définir la valeur de luminosité entre 95 et 100 points. Les couleurs neutres sont garanties pour fonctionner le mieux pour les arrière-plans. 18. Couleurs Semantic dans la conception de UI: Comme je l'ai mentionné précédemment, les couleurs sémantiques sont utilisées pour le statut et les commentaires comme l'avertissement, erreur, le succès et l'information. Bien que vous devriez utiliser le jaune, le rouge, le vert et le bleu comme couleurs sémantiques, vous n'êtes pas limité à une seule couleur. La meilleure pratique est que vous créez différentes nuances et teintes de ces couleurs pour être en mesure de les appliquer de manière flexible. Une fois vos quatre couleurs prêtes, vous pouvez utiliser l'harmonie des couleurs monochromatiques pour créer des variantes. Cela vous donne assez de flexibilité pour appliquer ces couleurs à votre design. Supposons que vous vouliez concevoir un avertissement. Si vous n'utilisez qu'une seule couleur, cela ressemblerait à ceci. Maintenant, allons un peu plus loin et ajouter une nuance de jaune à nos couleurs sémantiques. Maintenant, le résultat semble beaucoup mieux. La même technique pourrait être appliquée à toutes les autres couleurs sémantiques. 19. What échelle de couleurs de couleur ?: C' est quoi une échelle de couleurs ? Vous souvenez-vous des trois attributs de la couleur ? Oui, je parle de teinte, de saturation et de valeur. Une échelle de couleur est une transition progressive d' une couleur particulière de la lumière à l'obscurité ou vice versa. Quel attribut de couleur change dans une échelle de couleurs ? Tu as raison, valeur. De nombreux artistes et designers croient que la valeur est l'attribut le plus important de la couleur. Mais pourquoi ? Parce que vous n'avez pas besoin de couleur pour concevoir un projet beau et accessible. Tout ce dont vous avez besoin est un niveau de gris que vous pouvez utiliser pour créer une grande hiérarchie visuelle en utilisant des couleurs contrastées. En tant que concepteur, vous devez comprendre que si vous n'obtenez pas les bonnes valeurs, le reste de vos couleurs ne sera pas correct. En ce qui concerne l'accessibilité des couleurs, les valeurs jouent un rôle important. Jetons un coup d'oeil aux palettes de couleurs Material Design. Si vous ne le savez pas, Material Design est un langage de conception développé par Google. Il vous donne un ensemble de directives pour améliorer votre processus de conception. Voici quelques échelles de couleur créées par Material Design. Ces couleurs sont choisies pour travailler ensemble harmonieusement. Comme vous pouvez le voir, chaque couleur correspond à un nombre, entre 50-900. Les valeurs plus élevées représentent des couleurs plus foncées et les valeurs inférieures représentent des couleurs plus claires. Avoir différentes valeurs d'une couleur nous aide à répondre aux normes d'accessibilité. Qu' est-ce que je veux dire par accessibilité ? Prenons ce violet, par exemple. Comme vous pouvez le voir, la couleur du texte utilisée sur une variance est blanche, et sur d'autres est noire. Cela signifie que vous devez utiliser une couleur de texte claire et quelques couleurs, et sur d'autres, vous devez utiliser une couleur de texte sombre pour que le texte soit lisible. Nous explorerons l'accessibilité des couleurs plus tard dans ce cours. 20. What l'échelle de gris ?: C' est quoi les niveaux de gris ? gris sont simplement faits de différentes nuances de gris. De nombreux artistes et designers commencent leur conception à l'aide d'un niveau de gris. Mais pourquoi ? La raison est que lorsque vous travaillez avec des nuances de gris différentes, vous pouvez vous concentrer sur d'autres choses importantes comme l'espacement, tailles, la hiérarchie visuelle, le poids de vos éléments, et plus encore. Vous pouvez simplement vous concentrer sur la façon dont vos éléments tels que les boutons, le texte, les curseurs ou les cartes doivent être disposés. Lorsque vous utilisez le mode de couleur en niveaux de gris, vous pouvez facilement remarquer si vous avez suffisamment de contraste entre vos éléments ou non. Par exemple, cette interface a une grande hiérarchie visuelle. Comme vous pouvez le voir, les informations les plus importantes sont plus sombres que les informations les moins importantes. Maintenant, je veux que vous vous concentrez sur la colonne des priorités. Pouvez-vous voir que plus le niveau de priorité est élevé, la couleur devient sombre ? Analysons plus loin. Ici, nous avons trois niveaux prioritaires : élevé, moyen et faible. Passons maintenant au mode niveaux de gris. Comme vous pouvez le voir, la priorité la plus élevée a la nuance la plus sombre ici. C' est pourquoi nous n'utilisons généralement pas de jaune pour le bouton Supprimer dans une interface. Jetez un oeil à cette carte. Les couleurs sont harmonieuses et vous êtes prêt à ajouter la carte à votre design, sauf que vous ne l'êtes pas. Passons au mode de couleur en niveaux de gris pendant une seconde. Tu vois le problème ? Comme vous pouvez le voir, nous n'avons pas une bonne hiérarchie visuelle ici, ce qui rend notre design moins accessible. Comment pouvons-nous réparer ça ? Eh bien, j'utiliserais une couleur plus claire pour la description et le bouton d'annulation. Mais pourquoi ? En raison de l'importance de la hiérarchie visuelle. Nos éléments les plus importants, qui sont le titre et le bouton de confirmation, devraient recevoir le plus d'attention. Par conséquent, le bouton d'annulation et la description devraient avoir une teinte plus claire de nos couleurs. Maintenant, comparons-le avec le mode niveaux de gris. Évidemment, il semble beaucoup mieux maintenant en termes d'accessibilité et de hiérarchie visuelle. Si vous souhaitez disposer d'un processus de conception efficace, assurez-vous de commencer par les niveaux de gris, puis d'appliquer des couleurs à votre conception. 21. Comment appliquer une palette de couleurs à votre design ?: Maintenant que vous avez appris à choisir vos couleurs fonction des harmonies des couleurs et de la psychologie des couleurs, il est temps de les appliquer à votre design. Mais attendez, ne pouvez-vous pas appliquer des couleurs à vos éléments au hasard ? Bien sûr que tu ne peux pas. Sauf si vous voulez que votre design ressemble à ceci. C' est blessant, n'est-ce pas ? Imaginez que vous cuisinez une portion de nourriture délicieuse et belle pour le déjeuner. Vous avez tous les ingrédients prêts à votre disposition et vous avez juste besoin de savoir combien de chaque ingrédient doit être ajouté à votre poêle. Si vous utilisez les ingrédients de façon disproportionnée, vous pouvez vous retrouver avec un repas salé ou un repas insipide. Si ce n'est pas votre intention, vous devez avoir une recette. Mais avons-nous une recette pour appliquer des couleurs aussi ? Heureusement, oui, nous le faisons. Il y a une règle bien connue appelée 60-30-10 qui est tirée du design d'intérieur. Voyons voir comment ça marche. Selon cette règle, vous devez utiliser 60 % de votre couleur dominante ou primaire, 30 % de votre couleur secondaire et 10 % de votre couleur accentuée. Tout d'abord, vérifions ces design d'intérieur. Comme vous pouvez le voir, la couleur primaire est utilisée pour 60 pour cent de l'environnement, la couleur secondaire est utilisée pour 30 pour cent de l'environnement et la couleur d'accentuation est utilisée pour 10 pour cent de l'environnement. Maintenant, il est temps de l'essayer. Il s'agit d'une interface conçue en mode niveaux de gris. Commençons à utiliser seulement trois couleurs d'abord. Une couleur primaire, une couleur secondaire et une couleur d'accentuation. Je vais utiliser la couleur primaire pour notre arrière-plan, la couleur secondaire pour le texte et ces cartes, et la couleur d'accent pour le CTA, qui sont ces boutons et aussi pour ces barres dans le graphique à barres. Pouvez-vous voir à quel point ce design est équilibré ? Maintenant, nous pourrions même réorganiser nos proportions de couleurs. Remplaçons la couleur primaire par notre couleur secondaire et voyons comment cela se passe. Ça a toujours l'air bien, n'est-ce pas ? Mais n'avons-nous pas normalement plus de couleurs dans notre palette de couleurs ? Oui, nous le faisons. Nous pouvons toujours appliquer cette règle même si nous avons différentes nuances de notre couleur primaire ou des couleurs plus secondaires et accentuées. Nous avons juste besoin de les garder dans le même rapport. Considérons cette palette de couleurs. Nous pourrions vouloir utiliser ces couleurs neutroniques de lumière et cette couleur primaire bleue principalement dans notre conception. Alors les deux devraient prendre 60 pour cent de notre ratio. Ces deux couleurs vont maintenant être nos couleurs secondaires, donc elles prennent 30 pour cent de notre ratio. Enfin, ces deux couleurs d'accent devraient prendre 10 pour cent de notre ratio. Voyons maintenant comment nous pourrions les appliquer à notre interface. On pourrait commencer par notre section héros. Nous choisissons l'une des couleurs de notre ratio primaire, qui prend 60 pour cent de notre design au total et nous l'utilisons comme arrière-plan des sections de héros. L' autre couleur primaire est également utilisée comme l'autre partie de notre arrière-plan. Maintenant, pour le contenu, nous pourrions utiliser nos couleurs secondaires. Pour les boutons CTA, nous devons utiliser une couleur qui attire l'attention de l'utilisateur, donc nous devrions utiliser nos couleurs d'accent à cet effet. Je vais utiliser le jaune pour les boutons CTA et orange pour le bouton curseur et l'indicateur. Rappelez-vous que vous devriez toujours vérifier vos couleurs les unes contre les autres pour voir s'il y a un bon rapport de contraste entre elles ou non. Une couleur d'accentuation peut sembler étonnante sur les arrière-plans sombres, tandis que l'autre ne peut être lisible que sur les arrière-plans en direct. C' est essentiellement comment vous pouvez allouer différentes couleurs aux différents éléments de votre conception. Une des choses que vous pouvez faire pour vous assurer que votre rapport de couleurs fonctionne bien est de créer une variance pour différentes parties de votre conception et de les comparer entre elles en termes de lisibilité et d'accessibilité du contenu. 22. Comment nommer vos couleurs de manière appropriée ?: Conventions de dénomination. L' un des sujets les plus importants quand il s'agit de créer des systèmes de conception. En tant que concepteur unique, vous pouvez considérer la désignation des couleurs comme le facteur le moins important que vous puissiez penser lorsque vous travaillez sur un projet. C' est compréhensible, mais permettez-moi de vous donner un exemple pour comprendre l'importance de nommer vraiment les conventions. Supposons que vous travaillez sur un projet avec une petite palette de couleurs qui comprend 4-10 couleurs. Ce sont vos couleurs. Comment les nommez-vous ? Eh bien, la plupart d'entre vous peuvent les nommer : bleu, bleu clair, vert et jaune, et c'est tout à fait bien si vous travaillez sur un petit projet en tant que concepteur unique. Imaginons maintenant que vous travaillez sur un projet à grande échelle, avec plus de couleurs à travailler, et que vous devriez collaborer avec d'autres concepteurs. Pouvez-vous utiliser la même approche ici ? Bien sûr que non. Mais pourquoi ? Lorsque vous nommez des couleurs dans un système de conception, l'objectif principal est de rendre le rôle des couleurs aussi éclatant que possible. Pourquoi pensez-vous bleu/light 2 est un nom logique, cela n'a aucun sens pour les autres collaborateurs. À moins que vous ne vouliez expliquer vos conventions d'attribution de noms à tous les autres concepteurs, développeurs et spécialistes du marketing de votre équipe, vous devriez utiliser une approche qui fonctionne pour tout le monde, sans avoir à expliquer la logique qui la sous-tend. Supposons que vous ayez une couleur primaire, et trois nuances de cette couleur pour différents états de vos éléments, comme par défaut, actif, pressé, etc. Quelle est la meilleure façon de nommer ces couleurs ? Tout d'abord, commencez par l'utilisation de cette couleur. Dans ce cas, c'est primaire. Ensuite, utilisez un trait d'union ou une barre oblique, et écrivez les variations comme, active, inactive, par défaut, etc. De cette façon, nous pourrions décrire les couleurs, sans même mentionner leurs noms. C' est ce qu'on appelle une convention de dénomination fonctionnelle. Peu importe qui utilise notre système de conception, qu' il s'agisse d'un concepteur de stores de couleur ou d'un nouveau membre de votre équipe, il peut facilement comprendre comment ces couleurs doivent être utilisées dans le projet. Cette approche est claire, évolutive et universelle. Bien sûr, il existe différentes conventions de dénomination, mais c'est celle qui fonctionne bien pour les projets de petite, moyenne et grande échelle. 23. Comment créer de grands gradients ?: Maintenant que vous savez comment créer une grande palette de couleurs pour vos projets, il est temps de parler de dégradés. C' est quoi un gradient ? Un dégradé est une transition progressive d'une couleur à une autre. Bien que l'utilisation de dégradés dans votre conception soit facultative, elle ajoute du caractère et de la personnalité à votre design. C' est pourquoi la plupart des designers utilisent aujourd'hui des dégradés dans leur conception. Nous avons essentiellement quatre types de gradients différents : linéaire, radial, angulaire et diamant, mais le plus populaire est le gradient linéaire. Maintenant, laissez-moi vous montrer comment vous pouvez créer de grands gradients pour vos projets. Tout d'abord, ouvrez Coolers.co. Maintenant, cliquez sur le menu Plus en haut et cliquez sur le bouton Créer un dégradé. Ici, nous pourrions créer nos gradients. Comme vous pouvez le voir, nous avons différentes couleurs ici. Si je passe ma souris au-dessus de ces curseurs et que je clique quelque part, je peux ajouter une nouvelle couleur à ce curseur. Si je veux supprimer une couleur, je peux cliquer sur ce bouton supprimer comme ça. Maintenant que nous avons deux couleurs différentes, laissez-moi vous dire comment vous pouvez trouver de grands dégradés, parce que évidemment toutes les couleurs ne sont pas superbes quand nous les mélangeons ensemble. Laissez-moi sélectionner ma 1ère couleur et je vais la changer en bleu, par exemple, ce bleu. Maintenant, je vais vous montrer un mauvais exemple. Permettez-moi de sélectionner la 2ème couleur et de la changer en, par exemple, orange, juste comme ça. Comme vous pouvez le voir, ce dégradé n'a pas l'air très bon parce que nous n'avons pas de transition en douceur ici, bien que nous utilisons une harmonie des couleurs, le résultat n'est pas bon. Rappelez-vous, certaines harmonies de couleurs ne sont bonnes que pour les couleurs unies, pas pour les dégradés, mais comment pouvons-nous les améliorer ? Voici ma technique et je vous recommande de l'utiliser aussi, parce que c'est si simple et ça va vous faciliter la vie. abord, sélectionnez votre 1ère couleur, copiez le code de couleur hexadécimal et collez-le pour la 2ème couleur. Ici, nous avons deux couleurs identiques. Maintenant, en utilisant le sélecteur de couleurs, je vais déplacer le curseur vers la droite et vers la gauche afin de choisir des couleurs analogues comme ça. Maintenant pouvez-vous voir à quel point cette transition de couleur est incroyable et lisse ? Maintenant, essayons un autre exemple. Je vais déplacer un peu le curseur de teinte sur le côté gauche, pouvez-vous voir à quel point c'est beau ? Vous pouvez également modifier la luminosité de vos couleurs si vous le souhaitez, c'est totalement à vous de décider. Cette technique fonctionne toujours. Afin de créer de grands dégradés, vous devez vous souvenir d'une seule règle, et c'est en utilisant l'harmonie des couleurs analogue. Si vous voulez trouver des dégradés aléatoires, vous pouvez facilement cliquer sur ces boutons aléatoires et Coolers crée des dégradés aléatoires pour vous comme ça. L' autre chose que vous pouvez faire est d'utiliser l'harmonie des couleurs monochromatiques. Juste en utilisant une couleur et différentes nuances et teintes de cette couleur, vous pouvez trouver de grands dégradés comme ça. 24. What: En ce qui concerne la conception UI/UX, l'accessibilité compte beaucoup. Après tout, les concepteurs sont là pour résoudre les problèmes, pas pour les faire. Il est important de concevoir de manière à ce que tout le monde, indépendamment de son handicap physique, auditif ou visuel, puisse utiliser le produit. L' accessibilité des couleurs permet aux personnes ayant une déficience visuelle d'utiliser le produit que nous concevons comme tout le monde. Vous souvenez-vous de l'exemple sur les couleurs sémantiques ? Il s'agit d'une question d'accessibilité des couleurs. Ici, nous avons trois images de profil avec l'indicateur d'état dans le coin supérieur droit. Vert signifie que l'utilisateur est en ligne, bleu indique que l'utilisateur est hors ligne et violet signifie que l'utilisateur est occupé. Mais voyons comment les gens avec une vision monochromatique voient ce design. Comme vous pouvez le voir, les couleurs sont difficiles à distinguer les unes des autres. C' est pourquoi choisir le droit de valeur pour chaque couleur compte beaucoup. Maintenant, modifions ces couleurs pour rendre ce design plus accessible. Utilisons des couleurs sémantiques pour ces indicateurs. Maintenant, c'est tellement mieux. Pouvez-vous comprendre pourquoi l'accessibilité est importante maintenant ? Les personnes souffrant d'une vision monochromatique ne peuvent pas distinguer les teintes. Ils ne peuvent voir que différentes nuances de gris. C' est pourquoi j'ai déjà mentionné que la valeur des couleurs est plus importante que les autres attributs de la couleur. Nous pouvons créer un bon contraste entre nos nuances en changeant simplement la valeur d'une couleur que même les personnes ayant une vision monochromatique pourraient reconnaître notre hiérarchie d'éléments. Bien sûr, il y a beaucoup de déficiences en vision des couleurs, mais le point que j'essaie de faire est que tout le monde ne perçoit pas les couleurs comme nous le faisons. Considérons cette conception et voyons comment différentes personnes avec des déficiences de vision des couleurs peuvent traiter ces couleurs. Vision monochromatique ou daltonisme complet. Comme je l'ai mentionné précédemment, les personnes ayant une vision monochromatique ne peuvent voir que différentes nuances de gris. Protanopia daltonisme. Les personnes atteintes de cette déficience de vision des couleurs perçoivent les couleurs rouges comme couleurs plus sombres que la normale et généralement le rouge devient un vert foncé. Si vous choisissez le rouge comme couleur de premier plan et le noir comme couleur d'arrière-plan, il serait trop sombre pour qu'ils lisent le texte. Cône bleu monochromacy ou BCM pour le court. Les personnes atteintes de BCM ne peuvent pas voir les couleurs rouge et vert correctement, alors qu'elles peuvent percevoir le bleu. Il y a aussi d'autres défauts de vision des couleurs, mais l'important est que nous, en tant que concepteurs, devons nous assurer de choisir nos couleurs de manière à améliorer la fonctionnalité des produits que nous concevons. Mettez toujours l'utilisateur au centre de votre conception. 25. Validez votre palette de couleurs en fonction du taux de contraste: L' un des facteurs que nous devrions toujours vérifier ce qui concerne l'accessibilité des couleurs est le rapport de contraste. Selon le Web Content Accessibility Guidelines, ou WCAG en bref, il existe deux niveaux différents de rapport de contraste, AA pour un contraste minimal ou AAA pour un contraste amélioré. Le niveau AA nécessite un rapport de contraste minimum de 4, 5:1 pour le texte normal et 3:1 pour le texte grand ou gras. D' autre part, le niveau AAA nécessite un rapport de contraste minimal de 7:1 pour le texte normal et de 4,15:1 pour le texte grand ou en gras. Mais attendez, comment pouvons-nous réellement mesurer le rapport de contraste de nos couleurs ? Eh bien, nous pouvons utiliser des vérificateurs de contraste en ligne pour cette question. Il existe un site Web appelé Coolors pour créer des palettes de couleurs et vérifier le rapport de contraste. Essayons et voyons comment ça marche. Allez dans coolors.co/contrast-checker. Ici, nous devrions spécifier une couleur d'arrière-plan, et ici nous devrions spécifier la couleur du texte que nous allons utiliser sur notre arrière-plan. Comme vous pouvez le voir, j'ai un nombre assez élevé et c'est fantastique. Cela indique également que cette combinaison de couleurs fonctionne bien pour les petits et les gros textes. Maintenant, vérifions une autre paire de couleurs. Tu vois ça ? C' est toujours lisible, mais cela ne fonctionne que pour le texte volumineux. Vérifiez donc toujours le rapport de contraste de vos couleurs pour voir à quel point elles sont accessibles. 26. Outils utiles pour l'accessibilité: Dans cette vidéo, je vais vous présenter quelques outils utiles pour l'accessibilité. Es-tu prêt ? Commençons. Numéro 1, Stark. C' est un plugin Figma, Sketch et Adobe XD. Il vous permet de vérifier votre taux de contraste des couleurs et de simuler différentes déficiences de vision des couleurs. Vous avez juste besoin de sélectionner un plan de travail et d'exécuter le plugin et Stark gère le reste. Numéro 2, Contraste. C' est un plugin Figma qui vous permet de vérifier le rapport de contraste de vos couleurs. Contrairement à Stark, qui vous permet de vérifier le rapport de contraste seulement trois fois avec le plan gratuit, Contraste n'a pas de limite à cet égard, et il a également une fonctionnalité cool qui scanne ensemble de votre conception pour trouver des problèmes de contraste de texte . Numéro 3, whocanuse.com. C' est un site Web étonnant qui vérifie non seulement le rapport de contraste des couleurs, mais montre également comment les combinaisons de couleurs peuvent affecter différentes personnes ayant une déficience visuelle. Essayons. abord, nous spécifions la couleur de notre arrière-plan, puis nous définissons notre couleur de texte et spécifions la taille et le poids de la police. Ici, nous pouvons voir le rapport de contraste, qui est assez élevé, et un classement qui est AAA. De plus, nous pouvons voir comment différentes personnes peuvent traiter cette combinaison de couleurs, donc nous avons la vision régulière, les déficiences de cécité des couleurs les plus populaires, et d'autres problèmes de vision. Nous avons aussi la situation ou les événements de vision, ce qui est assez intéressant parce que nous pouvons voir comment notre combinaison de couleurs est accessible en simulant l'effet de la lumière directe du soleil, un mode nuit sur un téléphone ou un écran. 27. Inspiration des couleurs: En tant que designers, nous recherchons toujours l'inspiration partout pour suivre les tendances du design, trouver de nouvelles idées, etc. Être inspiré fait partie de notre vie. C' est une très bonne chose parce que ça nous aide à ouvrir nos esprits et à essayer de nouvelles choses. Nous pouvons nous inspirer pour notre mise en page ou même pour créer nos palettes de couleurs. Les sources inspirantes sont partout. Nous pourrions nous inspirer de la nature, des couleurs de vos fleurs, ou même de votre objet personnel. Je vais vous poser une question. Quelle harmonie des couleurs avons-nous ici ? Tu as raison. Complémentaire. Et ici ? Si votre réponse est monochromatique, vous avez tout à fait raison. Nous avons une harmonie des couleurs monochromatiques ici aussi. Vous pouvez également visiter certains sites Web pour vous inspirer comme Dribble, où vous pouvez choisir une couleur et voir comment d'autres designers l'utilisent dans leurs œuvres. Vous pouvez consulter un autre site appelé Color Hunt, où vous pouvez trouver de nombreuses palettes de couleurs différentes pour vos projets. Le site suivant s'appelle Muzli. Vous pouvez aller à colors.muz.li, choisir votre palette de couleurs désirée, et il vous montrera à quoi ressemble votre jeu de couleurs sur une interface. 28. Outils en ligne pour la création de palette de couleurs: Il y a beaucoup d'outils différents qui vous permettent de créer vos palettes de couleurs harmonieuses. Dans cette vidéo, je vais vous montrer une palette de couleurs utile qui génère des sites Web. Êtes-vous prêt ? Commençons. Numéro 1, refroidisseurs. Comme je l'ai déjà mentionné, c'est l'outil que j'utilise pour trouver des combinaisons de couleurs harmonieuses pour mes projets. Vous pouvez essayer aussi. Laissez-moi vous montrer comment ça marche. Une fois que vous ouvrez le site, vous pouvez cliquer sur le bouton Générer dans le menu et voici le générateur de palette. Si vous appuyez sur la barre d'espace de votre clavier, toute cette palette change. Une fois que vous trouvez une couleur que vous aimez, vous pouvez aimer cette couleur en cliquant sur l'icône de verrouillage. Continuez maintenant à appuyer sur la barre d'espace jusqu'à trouver une deuxième couleur. C' est amusant, n'est-ce pas ? Je dois mentionner que maintenant, seules les meilleures couleurs assorties sont choisies en fonction des couleurs que vous avez aimé. Vous devez continuer à faire ce processus jusqu'à ce que vous sélectionnez toutes les couleurs. Vous pouvez maintenant exporter votre palette de couleurs et l'utiliser dans votre logiciel de conception. Si vous avez une couleur principale spécifique, vous pouvez simplement coller le code de couleur hexadécimal ici, le verrouiller et appuyer sur la barre d'espace pour générer votre palette de couleurs. Une fois que votre palette de couleurs est prête, vous pouvez utiliser d'autres fonctionnalités intéressantes de ce site Web. Par exemple, vous pouvez ajuster les attributs de toutes les couleurs en même temps à l'aide de l'option Ajuster la palette. Vous pouvez également vérifier l'accessibilité de votre couleur à l'aide de l'option de daltonisme. Mais que faire si vous voulez créer une palette de couleurs en utilisant une harmonie de couleurs spécifique ? Ne vous inquiétez pas, vous pouvez le faire aussi. Il vous suffit de vous diriger vers le menu Plus et de cliquer sur Générer la méthode. ce menu déroulant, vous pouvez spécifier l'harmonie des couleurs que vous souhaitez utiliser pour créer des palettes de couleurs. Voulez-vous voir vos palettes de couleurs en mode niveaux de gris ? Il suffit de cliquer sur la carte de luminance View. Vous pouvez également créer une palette à partir d'une photo. Pour ce faire, cliquez sur le bouton de l'appareil photo et téléchargez votre image ici. Votre palette de couleurs est prête. Si vous recherchez des dégradés, vous pouvez simplement vous rendre à la section Explorer les dégradés et trouver d'innombrables dégradés pour vos projets ici. Parlons du 2ème outil que vous pouvez utiliser pour créer vos propres palettes de couleurs, MyColour.Space. C' est un autre grand site Web qui vous donne toutes les couleurs dont vous avez besoin en fonction de votre couleur primaire. Choisissez simplement votre couleur ici et cliquez sur « Générer ». Comme vous pouvez le voir, il vous montre différentes catégories de couleurs que vous pouvez choisir en fonction de vos besoins. L' outil suivant s'appelle Adobe Color. C' est un outil avancé qui vous permet de créer facilement des palettes de couleurs en choisissant différentes harmonies de couleurs et en les ajustant sur le sélecteur de couleurs, comme ceci. Vous pouvez également vous rendre à la section Explorer et parcourir d'innombrables palettes de couleurs prises à partir de photos. Si vous allez dans la section Tendances, vous pouvez découvrir les tendances actuelles des couleurs dans différents secteurs comme la mode, graphisme, l'illustration, etc. Sous l'onglet Outils d'accessibilité, vous pouvez vérifier l'accessibilité de votre couleurs aussi bien. Aimez-vous utiliser l'intelligence artificielle ou l'intelligence artificielle pour créer vos palettes de couleurs ? Si vous le faites, j'ai de bonnes nouvelles pour vous. Le prochain site Web dont nous allons parler s'appelle Khroma et il utilise intelligence artificielle pour former un algorithme alimenté par réseau neuronal pour créer des palettes de couleurs personnalisées. Eh bien, comment ça marche ? Tout d'abord, vous devez choisir vos 50 couleurs préférées pour former l'algorithme du générateur. Une fois que vous avez choisi vos couleurs, cliquez sur le bouton « Démarrer la formation » pour commencer le processus de formation. Une fois que c'est fait, vous serez présenté avec des centaines de paires de couleurs différentes et de palettes de couleurs. C' est si cool, n'est-ce pas ? 29. Appliquer une palette de couleurs à un site Web - Partie 1: Hé tout le monde, bienvenue à une autre vidéo de ce tutoriel. Dans cette vidéo, je vais vous montrer comment créer une palette de couleurs afin d'appliquer des couleurs à une page de destination. Si vous ne savez pas comment trouver les couleurs primaires, secondaires et accentuées, ne vous inquiétez pas. Je vais vous accompagner à travers toutes les étapes nécessaires pour créer une palette de couleurs belle et harmonieuse. Aussi, je vais vous montrer comment vous pouvez l'appliquer à une page de destination. Pour ce projet, j'ai déjà conçu une page de destination dans Figma. Ce que je veux que vous fassiez, c'est télécharger le fichier de démarrage de la page de destination à partir de la section ressources et l'importer dans votre tableau de bord Figma. Si vous n'êtes pas familier avec Figma, laissez-moi vous dire que Figma est une application populaire basée sur un navigateur qui vous permet de concevoir des interfaces utilisateur. Nous allons l'utiliser pour appliquer tout ce que vous avez appris jusqu'à présent à un projet réel. Pour importer un fichier de démarrage de page de destination, il suffit de cliquer sur ce bouton « Importer » en haut à droite et de choisir le fichier sur votre ordinateur. Une fois qu'il est importé, il suffit de double-cliquer dessus pour l'ouvrir. Laisse-moi zoomer. On y va. Voici un projet conceptuel que j'ai conçu pour cet exercice. Comme vous pouvez le voir, je l'ai préparé en mode de couleur à l'échelle de gris, sauf pour le logo et les images, ceux-ci sont colorés. Cette page de destination s'adresse à une entreprise imaginaire appelée Draft, fournit des services d'assurance en ligne aux entrepreneurs. Tout va se faire sous une demande appelée Draft. Permettez-moi de le prévisualiser afin que nous puissions voir toute la page de destination. En haut, nous avons une barre de navigation ordinaire, puis voici notre section héros. Sur le côté gauche, nous avons le contenu, le titre, le sous-titre et un appel à l'action, ce bouton. Sur le côté droit, nous avons quelques cartes et aussi cette marque. Maintenant, je vais faire défiler vers le bas. Voici la section clients. Comme vous pouvez le voir, ceux-ci sont colorés parce que nous ne allons pas modifier leurs couleurs de toute façon, donc je les ai gardés colorés. Laisse-moi faire défiler. Il s'agit de la section des fonctionnalités. Comme vous pouvez le voir, nous avons six cartes différentes et chaque carte représente une caractéristique. Le contenu ici n'est pas réel et j'utilise des textes Lorem Ipsum ici. Vous pouvez les modifier, mais dans le but de ce tutoriel, cela n'a pas d'importance car nous allons nous concentrer sur les couleurs. En bas, nous avons un bouton Explorer tout. Laisse-moi faire défiler. Ici, nous avons une section de témoignage. Encore une fois, les logos sont colorés. Je vais faire défiler vers le bas. Ici, il y a une autre section qui fournit à l'utilisateur les services les plus importants qu'il peut obtenir de cette société. Nous avons quelques images et le contenu sur le côté droit. Laisse-moi faire défiler. Cette section est la section de la LTC. C' est là que nous demandons à l'utilisateur d'installer l'application sur son téléphone. Laisse-moi faire défiler. Enfin, nous avons le pied de page. Comme vous pouvez le voir, nous avons quelques catégories, quelques liens, les coordonnées, ainsi qu'une brève description de Brouillon. Nous avons également un bouton Appel à l'action ici. En bas, nous avons un avertissement de copyright et les icônes des médias sociaux. Laissez-moi vous dire ce que nous allons faire. Tout d'abord, nous devons créer une palette de couleurs, puis nous devons appliquer cette palette de couleurs à cette page de destination, aux éléments de cette page de destination. Pour ce faire, je vais utiliser le site Web appelé Coolors que je vous ai déjà présenté. Laissez-moi aller de l'avant et cliquez sur « Générer ». Quelle est la première étape ? Vous avez raison, nous avons besoin d'une couleur primaire ou d'une couleur de base. Mais comme cette marque n'a pas de couleur primaire, nous en tant que designers, devrions trouver la couleur primaire. Qu'en pensez-vous ? Quelle couleur est la plus appropriée pour une compagnie d'assurance ? Pensez-vous que nous devons utiliser des couleurs fraîches ou des couleurs chaudes ? Quelle harmonie de couleurs devrions-nous utiliser pour créer cette palette de couleurs ? Ce sont les questions typiques que vous devriez vous poser chaque fois que vous voulez créer une palette de couleurs pour vos projets. Jetons un coup d'oeil au contenu. Tout d'abord, pour trouver la couleur primaire, nous devons penser à la marque. Quelle est l'idée derrière elle, qui est leur public cible et ce que les utilisateurs attendent de la marque ? Tout d'abord, pensons aux caractéristiques de cette marque. Il s'agit d'une compagnie d'assurance et les utilisateurs devraient se sentir en sécurité et leurs actifs sont sécurisés, et aussi s'attendre à des attitudes professionnelles de la marque. Puisque nous parlons de professionnalisme et de confiance, je pense que le bleu est la meilleure option parce que le bleu est populaire parmi les hommes et les femmes, donc il n'y a pas d'obstacle à cet égard. Je pense qu'on pourrait utiliser le bleu pour la couleur primaire. Cool. Maintenant, allons de l'avant et choisissez notre couleur primaire. Mais quel genre d'harmonies de couleurs devrions-nous utiliser ? Puisque nous n'avons pas d'illustrations et que je ne veux pas obtenir de couleurs contrastées, je pense que la meilleure option serait de choisir analogue. Nous pourrions utiliser monochromatique aussi bien, mais je ne pense pas que gratuit ou split gratuit serait de bonnes options. Je vais aller avec analogue, afin que nous puissions choisir des couleurs qui sont à côté de l'autre sur la roue de couleur. Je vais le sélectionner et laissez-moi appuyer sur la « Barre d'espace » de mon clavier pour obtenir une bonne couleur bleue. Ici, nous avons différents types de bleu. Je vais sélectionner l'un d'eux et le modifier manuellement pour obtenir ma couleur principale. Je pense que celui-ci est une bonne option. Je vais cliquer sur ce code couleur et je vais changer le modèle de couleur en HSB. Permettez-moi de changer un peu la teinte pour voir si je peux obtenir une meilleure couleur de base ou non. Ce bleu est cool ; cependant, il est trop lumineux. Je vais donc diminuer la luminosité de 85 à environ 30, peut-être 31. La saturation est bonne. Peut-être que je peux l'augmenter à 84. Parfait. C'est cool. Maintenant que notre couleur primaire est prête, laissez-moi la verrouiller et je vais la faire glisser sur le côté gauche, comme ça. Maintenant, je vais continuer à appuyer sur la barre d'espace de mon clavier pour obtenir d'autres couleurs. J' aime aussi cette couleur bleu clair. Je vais aussi le verrouiller et laisser moi appuyer à nouveau sur « Space Bar ». Cette couleur moyenne a l'air bien aussi, mais elle est un peu désaturée, donc je vais la modifier d'une manière ou d'une autre. Tout d'abord, permettez-moi de déplacer légèrement le curseur de teinte vers le côté droit pour voir si je peux obtenir une meilleure couleur de base ou non. Je pense que 227, c'est bien. Comme vous pouvez le voir, la saturation est réglée à 78, et je vais l'augmenter pour obtenir une couleur saturée. Quatre-vingt et un peu Mais qu'en est-il de la luminosité ? Il fait trop sombre. Laisse-moi aussi augmenter la luminosité. Je vais le mettre à 74. Parfait. Je vais le verrouiller et continuer à appuyer sur la barre d'espace. Maintenant, je cherche une couleur d'accent. Il pourrait s'agir d'une couleur verte ou pourpre, puisque nous utilisons une harmonie de couleurs analogue. Voyons voir si nous pouvons utiliser cette couleur verte ou non. Je pense que cela a l'air bien ; cependant, il faut le modifier un peu. Je vais cliquer sur le code de couleur hexadécimal ici. Comme vous pouvez le voir, il est trop saturé et ce serait un problème en termes de contraste des couleurs et d'accessibilité. Je vais le rendre un peu désaturé. Laisse-moi le mettre à 88. Aussi, je vais changer la couleur de base. Cent soixante et un semble bien ; cependant, il fait trop sombre pour être une couleur accentuée. Je vais augmenter un peu la luminosité. Je pense que 82 a l'air bien. J'aime ça. Laisse-moi le verrouiller et je vais appuyer sur « Espace » sur mon clavier. Maintenant, je cherche deux couleurs neutres. Je n'aime pas ces couleurs. Ce que je vais faire est de copier le code couleur primaire ici. Je vais aller à Hex. Je vais le copier et me laisser coller ici. On a la couleur primaire. Maintenant en utilisant le sélecteur de couleurs. Je peux créer un ton ici pour obtenir ma couleur neutre désirée. Permettez-moi de déplacer le sélecteur de couleurs sur le côté gauche pour ajouter du gris à notre couleur de base. C' est ainsi que nous créons un ton, si vous vous en souvenez, juste comme ça. Maintenant, laissez-moi aller à HSB pour voir les attributs de ma couleur. La saturation est bonne ; cependant, je vais la rendre un peu désaturée. Permettez-moi de diminuer la quantité de saturation à 20. Aussi, pour la luminosité, je vais l'augmenter à peut-être 44. Ça a l'air bien. Joli. Laisse-moi le verrouiller. Maintenant, je vais ajouter une couleur neutre de plus, mais une couleur légère. Si je survolais cette section, je peux cliquer sur cette icône « Ajouter une couleur ». Laisse-moi coller ce code couleur ici, juste comme ça. Maintenant, je vais modifier la couleur. Laissez-moi passer au modèle de couleur HSB. La teinte va être la même, mais je vais la rendre désaturée pour créer une teinte de cette couleur. Laisse-moi le rendre désaturé comme ça. Je pense que si je le réduis à six, ce serait génial. Aussi, je vais augmenter la luminosité à 99. Cool. C'est une grande couleur neutre. Je vais le verrouiller et j'ai besoin d'une couleur de plus, et ça va être blanc parce que nous allons l'utiliser pour nos cartes. Laisse-moi le changer en blanc. Parfait. Cool. Notre palette de couleurs est prête. Maintenant, il est temps de l'exporter. Je vais cliquer sur le bouton « Exporter » et vous pourriez utiliser le format que vous voulez, mais je préfère SVG, alors laissez-moi le télécharger. Maintenant, je vais aller à Figma et laissez-moi glisser et déposer la palette de couleurs exportée ici. On y va. Je vais l'agrandir. Cool. Laisse-moi le déplacer ici. Très bien, les gars, c'est tout pour la première partie de ce projet. Dans la vidéo suivante, nous allons commencer à appliquer nos couleurs à notre conception. On se voit alors. 30. Appliquer une palette de couleurs à un site Web - Partie 2: Maintenant que notre palette de couleurs est prête, nous devons définir le rapport de nos couleurs parce que nous allons utiliser la règle 60-30-10. Permettez-moi d'aller de l'avant et de supprimer ce texte. Quelles couleurs vont être nos couleurs primaires en termes de ratio ? Ce bleu va certainement être notre couleur primaire. Ces deux couleurs vont également être nos couleurs primaires en termes de ratio. Les trois premières couleurs vont être appliquées à 60 pour cent de notre design. Ces trois couleurs sont nos couleurs secondaires et vont être appliquées à 30 pour cent de notre design, et enfin, mais non des moindres, l'écran va agir comme notre couleur d'accent, et il couvre 10 pour cent de notre design. Cool. Habituellement, nous devons créer des styles de couleurs avant d'appliquer des couleurs à notre projet. Cependant, comme ce n'est pas nécessaire pour ce tutoriel, je vais sauter cette étape et nous allons commencer à appliquer nos couleurs à nos éléments. Sans plus tarder, commençons. Tout d'abord, commençons par l'arrière-plan. Pour l'arrière-plan, nous pouvons utiliser l'une de ces trois couleurs. Je pense que cette couleur neutre claire va être une bonne option pour nos couleurs de fond. Je vais aller de l'avant et copier son code de couleur hexadécimal, et laissez-moi sélectionner mon tableau d'art et le coller pour l'arrière-plan. Aussi, je dois m'appliquer à d'autres sections aussi. Pour la barre de navigation, je vais l'appliquer ici, et aussi pour ces clients section, laissez-moi la coller. Je vais faire défiler vers le bas. Comme vous pouvez le voir, pour la section des témoignages, nous devons utiliser un fond sombre. Pourquoi ? Parce qu'ici, nous avons une ombre sombre. Alors, quelle couleur peut être utilisée pour cette section ? Je pense qu'une de nos couleurs secondaires serait une bonne option. Je vais aller avec ce bleu moyen, laissez-moi copier son code couleur, et je vais appliquer à cet arrière-plan. Cool. Comme vous pouvez le voir, nous avons un bon contraste entre les cartes et notre arrière-plan. Cool. Et ici ? Comme vous pouvez le voir ici, nous devons également utiliser une couleur foncée. Pour cette section, je vais utiliser notre couleur primaire. Laissez-moi copier le code de couleur hexadécimal et je vais l'appliquer, juste comme ça. On y va. Nos couleurs d'arrière-plans ont été appliquées avec succès. Maintenant, il est temps de passer à d'autres sections. Commençons par le haut. Pour ces liens, je vais utiliser ma couleur secondaire, celle-ci. Je vais copier le code de couleur hexadécimal et me laisser sélectionner tous ces liens, ainsi que cette icône de flèche, et je vais l'appliquer à tous ces calques de texte. Ils ont l'air super. Mais qu'en est-il du contenu de la section héros pour ces deux calques de texte, je pense que la couleur primaire serait bonne parce que nous allons créer un rapport de contraste élevé entre notre arrière-plan et notre premier plan donc je vais aller avec cette couleur primaire. Laissez-moi le copier et sélectionner ces deux calques de texte, et je vais le coller. Cool. La dernière chose que nous devons modifier ici est le bouton CTA ou appel à l'action. Comme vous le savez, pour les CTA, nous utilisons généralement une couleur d'accent parce qu'elle doit attirer l'attention de l'utilisateur sur elle. Je vais copier le code de couleur hexadécimal de notre couleur d'accent, et laissez-moi le coller ici. Pour le texte, je vais utiliser le blanc pour l'instant. Je ne suis pas sûr du rapport de contraste, mais pour l'instant, nous n'avons pas besoin de nous en soucier car plus tard, nous validerons nos couleurs en termes de rapport de contraste et d'accessibilité des couleurs. Puisque nous devons être cohérents tout au long de notre projet, je vais également utiliser la même couleur pour ce texte. Laissez-moi le copier, et je vais le coller pour ces deux calques de texte. Ici aussi. En outre, nous allons appliquer la même couleur à tous ces calques de texte. Je vais les sélectionner tous et coller la couleur. Voyons maintenant quelles couleurs doivent être utilisées pour nos cartes ici. Les cartes vont être blanches. Comme vous pouvez le voir ici, nous avons des cartes blanches, et ici, nous avons aussi deux cartes blanches, et elles ont l'air propre et incroyable. Mais les choses dont nous avons besoin pour modifier nos icônes, les calques de texte, et aussi ce bouton Explorer. Pour ces icônes, comme vous pouvez le voir, nous avons trois nuances différentes, par conséquent, nous devons utiliser trois couleurs différentes. Je vais utiliser nos couleurs secondaires et accentuées pour ces icônes. Permettez-moi d'aller de l'avant et de copier le code de couleur de la couleur secondaire. Maintenant, au lieu de changer la couleur de ces icônes une par une, sur le côté droit, sous les couleurs de sélection, vous pouvez voir que nous avons trois nuances différentes. Je vais sélectionner le premier et coller le code couleur. On y va. Nous avons appliqué la première couleur. Maintenant, il est temps d'appliquer la deuxième couleur, qui est celle-ci. Je vais aller de l'avant et copier le code de couleur de mon autre couleur secondaire. Je vais sélectionner la liste des entités, et l'ombre suivante sera celle-ci, alors laissez-moi la coller. On y va. Ils ont déjà l'air incroyables. Pour la dernière couleur, je vais utiliser la couleur d'accent. Laissez-moi copier le code couleur, sélectionner les cartes, et je vais cliquer sur voir les cinq couleurs. On y va. Je vais le coller. Ils ont l'air génial, n'est-ce pas ? Comme vous pouvez le voir, la couleur de notre bouton Explorer a également été modifiée. Parce que la même teinte a été utilisée pour cela auparavant, nous n'avons donc pas besoin de la modifier. Pour le texte, je vais aller de l'avant et copier la couleur primaire et la coller ici. Cool. Pouvez-vous voir à quel point cette section est belle et propre ? La raison en est que nous avons utilisé une harmonie des couleurs pour trouver ces palettes de couleurs, et nous avons également utilisé la règle 60-30-10. Maintenant, il est temps de modifier notre bouton Explorer tout ici. Pour ce bouton, je vais utiliser notre couleur d'accent, qui est ce vert. Pour le texte et cette icône de flèche, je vais utiliser le blanc pour l'instant. Et ici ? Les cartes sont correctes, mais nous devons modifier la couleur de ces textes. Je vais les sélectionner et me permettre d'appliquer notre couleur primaire à tous ces textes. Pour ce texte, je vais utiliser la couleur neutre que nous avons créée auparavant. Laissez-moi y aller et copier son code couleur. Maintenant, je vais appliquer les mêmes couleurs à tous ces contenus. Permettez-moi de faire avancer rapidement ce processus afin de gagner votre temps. C' est fait. Maintenant, permettez-moi de modifier la couleur de ce grand titre. Je pense que notre couleur neutre lumière serait génial pour ça. Laisse-moi choisir ça. Qu' en est-il de ces guillemets ? Bien, évidemment, nous devons utiliser notre couleur secondaire pour ça. Mais le bleu clair, celui-là. Je vais copier le code de couleur hexadécimal, et laissez-moi le coller ici. C' est trop lumineux donc je vais diminuer l'opacité à 20 pour cent. Maintenant, ça a l'air beaucoup mieux. Cette section est également faite. Maintenant, nous pouvons passer à une autre section. Ici, comme vous pouvez le voir, nous avons trois cercles différents derrière ces photos et ce sont des teintes légères. Nous devrions également diminuer l'opacité de nos couleurs ici. Pour le premier, je vais utiliser notre couleur primaire pour cela, et laissez-moi diminuer l'opacité à 20 pour cent. Pour le second, je vais utiliser notre couleur secondaire bleue et je vais diminuer l'opacité à 20 pour cent aussi. Pour le dernier, je vais utiliser notre couleur d'accent, et aussi diminuer l'opacité à 20 pour cent. Puisque ces titres voiture, bureau, et maison, correspondent à ces photos, je vais modifier la couleur de ces points de puces juste avant ces titres. Le premier va avoir notre couleur primaire, mais nous n'avons pas besoin de diminuer l'opacité ici. La seconde aura notre couleur secondaire, et la dernière aura notre couleur d'accent. Cette section a l'air bien aussi. J' espère que ça vous plaira. Passons maintenant à la section suivante. C' est ce qu'on appelle la section de la CTA. Ici, nous devons modifier la couleur du texte uniquement. Pour le texte, je vais utiliser notre couleur neutre que nous avons utilisée pour notre arrière-plan, juste comme ça. Enfin, nous devons également appliquer des couleurs à notre pied de page. Pour ce texte et ces catégories en haut, je vais utiliser notre couleur neutre terne, qui est celle-ci, alors laissez-moi choisir cela. Cool. Comme vous pouvez le voir, il a été appliqué à tous ces calques de texte. Pour ces boutons CTA, je vais utiliser la couleur d'accent, celui-ci, et aussi pour le texte, je vais utiliser le blanc. Pour ces liens, je vais utiliser notre couleur primaire, celle-ci. Qu' en est-il de ce diviseur, cette clause d'exclusion de responsabilité, et aussi de ces icônes de médias sociaux ? Je pense que si nous utilisons notre couleur neutre terne, ce serait génial, celui que nous avons utilisé pour ce texte. Je vais le copier et le coller pour tous ces éléments, et aussi pour ces icônes. Comme vous pouvez le voir, nous avons oublié de changer la couleur de ce mot, brouillon. Je vais utiliser notre couleur secondaire pour ça. Cool. Notre page d'apprentissage est prête. Nous avons créé avec succès une palette de couleurs et appliqué toutes ces couleurs à notre conception selon la règle 60-30-10. Prévisualisons ça. Notre section héros a l'air bien, la barre de navigation a l'air propre, nous avons la barre CTA en utilisant la couleur accentuée, nos cartes ici sont blanches, ces voitures ont l'air bien aussi, ces voitures ont l'air bien aussi, nous avons utilisé le pour ces icônes, la section de témoignage semble propre aussi. Pour cette section, nous avons utilisé la couleur primaire et certaines teintes de nos couleurs secondaires et accentuées. Pour cette section, nous avons utilisé notre couleur principale comme arrière-plan et une couleur neutre pour notre contenu de premier plan. Enfin, nous avons utilisé nos couleurs primaires, secondaires et accentuées pour le pied de page. Tout a l'air cool. Cependant, maintenant, nous devons vérifier nos couleurs et voir si elles réussissent ou non le test du rapport de contraste. Je vais commencer par le haut et ensuite passer à d'autres sections. Tout d'abord, laissez-moi sélectionner l'un de ces liens, par exemple, sur, et puis je vais cliquer avec le bouton droit sur cela. Je vais exécuter le plugin de contraste. Comme vous pouvez le voir, ces couleurs ont passé le test du rapport de contraste pour les niveaux double a et triple a, et c'est fantastique. Mais qu'en est-il de ces textes ? Il a également passé tous les tests et c'est génial. Maintenant, je vais sélectionner ces, nous faire commencer le texte. Comme vous pouvez le voir, bien qu'il semble très bon sur notre interface, il a échoué le test de rapport de contraste. On doit arranger ça. Nous avons deux options. Nous pouvons soit modifier notre couleur d'accent, ce qui n'est pas une bonne idée à mon avis, soit modifier la couleur de notre texte. Au lieu du blanc, je vais aller de l'avant et choisir notre couleur primaire pour ces textes. Maintenant, comme vous pouvez le voir, il passe le test du rapport de contraste. Pouvez-vous voir à quel point il est important de valider vos couleurs en termes de rapport de contraste ? Permettez-moi d'aller de l'avant et de modifier tous les autres boutons, comme ici, et aussi ici. Cool. Mais qu'en est-il ici ? Si je sélectionne ces textes, vous pouvez voir qu'il passe le test du rapport de contraste. Qu' en est-il de ce bouton Explorer ? Il a également passé un test de rapport de contraste. Ici, comme vous pouvez le voir au-delà du test de rapport de contraste. Nous avons déjà vérifié ces couleurs sur notre fond afin que nous sachions qu' il a passé le test du rapport de contraste et pour ces textes aussi. Mais qu'en est-il ici ? Laisse-moi le sélectionner. Comme vous pouvez le voir, il passe le niveau AA pour texte normal et les niveaux AA et AAA pour le texte volumineux, donc ce n'est pas un problème. Ici, nous avons déjà vérifié cette couleur sur notre fond, et c'est essentiellement tout. Maintenant que nous avons validé nos couleurs en fonction du rapport de contraste, il est temps de valider nos couleurs en fonction des carences en matière de daltonisme. Je vais sélectionner mon plan de travail. Ce n'est plus le mode échelle de gris. Ensuite, je vais exécuter un plugin appelé filtres de couleur. Si je clique sur l'échelle de gris, nous pouvons voir que nous avons à nouveau un mode échelle de gris. Nous avons différentes nuances de gris donc la hiérarchie visuelle semble très bonne. Nous avons un bon rapport de contraste ici pour notre contenu et nos boutons. Tout a l'air génial. Maintenant, prenons une autre carence de couleur. Je vais annuler le processus, Commande+Z ou Ctrl+Z, et laissez-moi exécuter à nouveau ce plugin et choisir, par exemple, aveugle rouge. Nous avons aussi de bonnes nuances, donc tout semble propre aux personnes souffrant de ces déficiences de vision des couleurs. Last but not least, vérifions-le pour une autre carence de couleur. Par exemple, monochromacy cône bleu. De toute évidence, nous avons des nuances grises, sorte que les gens ne rencontreront aucun problème lors de l'utilisation de ce site Web. Prévisualisons notre page d'apprentissage pour la dernière fois. Pouvez-vous voir à quel point ces pages d'apprentissage sont propres ? Les couleurs sont harmonieuses et accessibles à tout le monde. Très bien, les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 31. Appliquer une palette de couleurs à une application - Partie 1: Hé, tout le monde. Bienvenue de retour. Dans cette vidéo, nous allons créer une autre palette de couleurs et l'appliquer à une application mobile. Mais tout d'abord, assurez-vous de télécharger le projet de démarrage d'applications mobiles à partir de la section Ressources et de l'importer dans votre tableau de bord Figma. Vous pouvez le faire glisser et le déposer dans cet environnement ou vous pouvez cliquer sur le bouton « Importer » en haut à droite et le choisir sur votre ordinateur. Laisse-moi l'ouvrir. C' est le projet que nous avions déjà préparé pour vous. Nous allons créer une palette de couleurs étape par étape et l' appliquer à notre conception selon la règle 60-30 et 10. Si vous êtes prêt, commençons. Comme vous pouvez le voir ici, j'ai préparé un plan de travail, appelé Couleurs, pour vous avec beaucoup d'échantillons. Par exemple, nous avons des graphiques sémantiques primaires et neutres et la visualisation des données. Nous devons modifier la couleur de tous les échantillons, mais tout d'abord, laissez-moi vous montrer le projet. Le projet sur lequel nous allons travailler est une application de financement personnel qui permet aux utilisateurs de gérer leurs finances facilement. J' ai conçu toutes les pages en mode couleur à l'échelle de gris que nous pourrions facilement distinguer les nuances et appliquer nos couleurs à tous ces éléments. Comme vous pouvez le voir ici, nous avons trois pages de connexion différentes. Fondamentalement, le design est le même, cependant, celui-ci est le signe principal dans la page. Le deuxième est la page de connexion, mais nous avons le nom d'utilisateur, le mot de passe, et aussi une erreur ici. Sur la troisième page, nous avons cette icône d'avertissement comme vous pouvez le voir, laissez-moi zoomer que vous pouvez voir clairement cela, et un CTA ou un appel à l'action, et quelques liens. Sur la page d'accueil, nous avons un grand titre, deux cartes de crédit différentes, et un dialogue qui présente les trois dernières transactions à l'utilisateur. Enfin, mais pas le moindre, nous avons la page des finances. Sur cette page, nous avons un diagramme circulaire en haut. Juste en dessous, nous avons quelques informations sur les dépenses. Aussi, ici, nous avons les données relatives à ce graphique à secteurs. De quelle sorte de couleurs avons-nous besoin pour ce projet ? Tout d'abord, nous devons trouver une couleur primaire et, aussi, nous pourrions avoir des couleurs secondaires, mais je ne pense pas que ce soit nécessaire. Cette fois, nous n'allons pas utiliser Coolors ou tout autre site Web pour trouver notre palette de couleurs. Je vais vous montrer comment vous pouvez le faire vous-même manuellement. Comme il s'agit d'une application financière et que les utilisateurs doivent faire confiance à cette application, encore une fois, nous allons utiliser le bleu comme couleur principale. Mais cette fois, au lieu d'utiliser une harmonie de couleurs analogue, je vais utiliser une harmonie de couleurs monochromatique. Êtes-vous prêt à commencer à créer notre palette de couleurs ? Commençons. Laisse-moi zoomer ici. Je vais sélectionner ma première nuance et laisser me diriger vers la section Remplissage et cliquer sur cette couleur pour ouvrir le sélecteur de couleurs. Comme je l'ai mentionné, je vais utiliser le bleu comme couleur primaire. Je vais déplacer le curseur vers la section bleue. Je pense que ce bleu a l'air bien. Peut-être que je pourrais changer la teinte en 217, quelque chose comme ça. Ça a l'air beaucoup mieux maintenant. Pour la couleur primaire, je vais la rendre un peu désaturée. Permettez-moi de diminuer la saturation de 94 à environ 90 ou peut-être 89. Ça a l'air bien. En outre, la luminosité va être d'environ 70 ou peut-être 75. Ça a l'air sympa. Notre couleur primaire est prête. Maintenant, il est temps de passer à d'autres couleurs. Puisque nous allons utiliser une harmonie des couleurs monochromatiques, notre couleur de base va être la même. Je vais sélectionner tous ces échantillons. Maintenez la touche Maj enfoncée de votre clavier, sélectionnez tous les échantillons, et changez simplement leur couleur en couleur principale comme ça. Maintenant, je vais sélectionner la deuxième nuance et je vais créer une nuance foncée de notre couleur primaire parce que nous allons en avoir besoin pour nos calques de textes. Tout d'abord, permettez-moi d'augmenter l'intensité ou la saturation de ma couleur de 90 à 100 comme ça. En outre, je vais diminuer la luminosité pour ajouter du noir à ma couleur de base. Si je déplace mon sélecteur de couleurs comme ça, je peux facilement y ajouter du noir. Mais je pense que si je le mets à environ 45 ou peut-être 43, ce serait génial. Ça a l'air sympa. Notre deuxième couleur est prête aussi, mais qu'en est-il de la dernière couleur ? Celui-ci va être utilisé comme notre couleur d'accent donc il doit être vibrant et lumineux. Permettez-moi d'aller de l'avant et de modifier la saturation et la luminosité. Puisque cette couleur est en quelque sorte brillante, nous pouvons facilement la rendre plus lumineuse si nous réglons la saturation et la luminosité à 100 pour cent. Maintenant, nous avons besoin de trois couleurs neutres. Laissez-moi sélectionner cette nuance, puis je vais créer un ton de notre couleur de base. Si vous vous souvenez, pour créer un ton, nous devons ajouter du gris à notre couleur de base. Si je déplace simplement mon sélecteur de couleur vers la zone grise, je peux créer un ton. Comme vous pouvez le voir, nous obtenons une couleur terne, et c'est exactement ce que nous voulons, mais laissez-moi le rendre un peu plus lumineux en augmentant la luminosité. En ce moment, la luminosité est réglée à 43. Laisse-moi le mettre à 49. Ça a l'air bien. La deuxième couleur neutre va être une teinte de notre couleur de base, nous devons donc ajouter du blanc à notre couleur de base. Laisse-moi passer à la section blanche comme ça. Je vais régler la saturation à cinq et la luminosité sera à 100 pour cent. Comme vous pouvez le voir, nous avons une belle couleur neutre. La dernière couleur neutre va être blanc pur. Pourquoi avons-nous besoin de ça ? Parce que nous allons l'utiliser comme couleur de premier plan, par exemple, pour les icônes et aussi pour certaines couleurs de nos textes. Je te montrerai plus tard. Cool. Nos couleurs primaires et neutres sont prêtes. Maintenant, nous devons passer à la section suivante, les couleurs sémantiques. Comme vous le savez, avoir des couleurs sémantiques dans votre palette de couleurs est facultatif. Cependant, comme je vous l'ai montré, nous avons ici les pages de connexion, et nous avons une erreur ici, et aussi un avertissement ici. Pour ces deux états, nous devons avoir des couleurs sémantiques. Laissez-moi aller de l'avant et sélectionner la première nuance ici. Je vais aller à la section Remplissage pour ouvrir notre sélecteur de couleurs. Puisque nous avons besoin d'une couleur rouge, assurez-vous de mettre le H, ou teinte, à zéro, car c'est ainsi que nous pourrions obtenir une couleur rouge pur. Mais comme vous pouvez le voir, c'est trop lumineux et dynamique, alors nous allons corriger ça. Laisse-moi le sélectionner. Si je me dirige vers la section du sélecteur de couleurs, je peux facilement diminuer l'intensité en abaissant la saturation à peut-être 60, laissez-moi vérifier, ou peut-être 65. Aussi, je vais régler la luminosité à 95 pour la rendre un peu plus sombre, juste comme ça. Maintenant, je vais créer deux teintes de cette couleur. Tout d'abord, permettez-moi de sélectionner la deuxième nuance. Je vais utiliser cette couleur, alors, je vais y ajouter du blanc. Pour le dernier, je vais le déplacer encore plus loin pour obtenir une très légère teinte de notre couleur. Parfois, si vous voulez créer une carte ou une icône, ces teintes sont très utiles pour créer un bon rapport de contraste entre vos éléments de premier plan et d'arrière-plan. Passons à la deuxième couleur sémantique dont nous avons besoin. Le premier est requis pour le message d'erreur, mais le second est requis pour l'icône d'avertissement. Pour avertissement, comme vous le savez, nous devons utiliser le jaune. Laissez-moi aller de l'avant et choisir un jaune en utilisant le sélecteur de couleurs. Je pense que c'est une couleur cool. Maintenant, je vais sélectionner la deuxième nuance et obtenir notre couleur jaune mais cette fois, au lieu d'avoir deux teintes, je vais créer une teinte et une nuance de notre couleur de base. Pour créer une nuance, je vais ajouter du noir à ma couleur. Si je diminue la luminosité comme ça, je pourrais créer une grande nuance. Cependant, je pense qu'il doit être un peu désaturé, alors laissez-moi diminuer la saturation à environ 70 ou peut-être 68. Oui, ça a l'air bien. moment, vous pouvez penser que ce n'est pas une bonne combinaison de couleurs, cependant, lorsque nous commençons à l'utiliser, vous pouvez voir à quel point ces couleurs seraient harmonieuses. Pour la dernière nuance, encore une fois, je vais choisir notre couleur de base, et cette fois je vais créer une teinte de notre couleur. Laissez-moi y ajouter du blanc, juste comme ça. La saturation va être de 40 et la luminosité va être de 100. Parfait. Nos couleurs sémantiques sont également prêtes. Mais comme vous pouvez le voir, nous avons une autre section à remplir, les graphiques et la visualisation des données. Pourquoi avons-nous besoin de ces couleurs ? Eh bien, parce que nous avons des graphiques et des données ici. Lorsque vous travaillez sur une application mobile de finance ou une application web de finance, il est presque inévitable d'utiliser ces couleurs car nous devons présenter les données d'une manière qui soit reconnaissable et claire à reconnaître. Si vous vous souvenez de la visualisation des graphiques et des données, nous pourrions utiliser trois combinaisons de couleurs différentes, catégorielles, séquentielles et divergentes. Habituellement, lorsque nous voulons présenter des données sans aucune valeur numérique comme dans ce graphique, nous utilisons un schéma de couleurs catégorique. Pourquoi ? Parce qu'en utilisant le schéma de couleurs catégoriques, nous pourrions trouver des couleurs contrastées élevées que les utilisateurs pourraient facilement distinguer entre eux. Allons de l'avant et finissons cette section aussi. Tout d'abord, je vais sélectionner ma première nuance ici et me laisser aller de l'avant et choisir ma première couleur. Pour la première couleur, je vais utiliser le bleu. Ça pourrait être n'importe quel bleu. Ce n'est pas nécessairement l'un des bleus primaires. Cependant, puisque ce bleu semble bon, je vais copier le code de couleur hexadécimal et l' utiliser aussi pour nos graphiques et la visualisation des données, donc je vais le coller ici. Cependant, je pense que je pourrais modifier cela d'une manière ou d'une autre parce que cette couleur est tellement saturée. Permettez-moi de réduire la saturation de 90 à environ 80 ou peut-être 82. Cela a l'air bien, et aussi, je vais augmenter la luminosité de 73-78. Cool. Mais qu'en est-il de la couleur suivante ? Gardez à l'esprit que l'ordre de ces couleurs importe beaucoup. Pourquoi ? Parce que les personnes ayant des déficiences en vision des couleurs devraient facilement traiter ces couleurs lorsqu'elles sont placées les unes à côté des autres. Si ce n'est pas compréhensible en ce moment, c'est très bien. Une fois notre palette de couleurs prête, je vais vous montrer un exemple que vous pourriez l'obtenir parfaitement. Mais pour l'instant, allons-y et complétons notre palette de couleurs. Pour le second, je vais utiliser une couleur verte. Laisse-moi aller à la section verte. Je pense que ce vert a l'air bien. Peut-être que je pourrais diminuer la teinte à 150 et maintenant laissez-moi diminuer la saturation et la luminosité pour rendre cette couleur un peu plus sombre. Cool. Ça a l'air sympa. Maintenant, laissez-moi aller de l'avant et sélectionner ma troisième nuance, et pour celle-ci, je vais utiliser le jaune. Laissez-moi choisir ma couleur sémantique jaune, celle-ci, et juste modifier la saturation et la luminosité. Pour la luminosité, je pense que 100, c'est bien. On pourrait peut-être le modifier à 99, mais pour la saturation, je vais le rendre désaturé beaucoup. En ce moment, il est réglé à 90, mais je vais en faire 60 ou peut-être 66. Ouais, ça a l'air cool. Tu vois le modèle que j'utilise ici ? Pour la première couleur, comme vous pouvez le voir, la luminosité était de 77, ce qui est la valeur de notre couleur. Pour le suivant, la luminosité est de 63, donc nous l'avons rendu plus sombre. Pour le suivant, la luminosité est de 97, donc nous l'avons rendu plus léger. C' est pourquoi j'ai dit que l'ordre de ces couleurs est important parce que si quelqu'un avec, par exemple, la vision monochrome veut traiter ces couleurs, ils peuvent facilement les distinguer. Laissez-moi sélectionner la prochaine nuance. Pour la prochaine, je vais utiliser ma couleur sémantique rouge, et je vais la modifier un peu. Peut-être qu'on pourrait réduire la saturation à 60 ou 62, quelque chose comme ça. La luminosité a l'air bien. Last but not least, pour celui-ci, je vais utiliser une couleur bleu foncé. Permettez-moi de déplacer le curseur de teinte vers la section bleue. Je pense que cette couleur a l'air bien. Peut-être que je peux diminuer la teinte à 247, et pour la saturation, je vais le faire autour de 65 ou peut-être 61. Cependant, il doit être trop sombre, alors laissez-moi diminuer la luminosité de 74 à environ 30 ou 35. Laisse-moi voir à quoi ça ressemble, 36 a l'air bien. Cool. Notre schéma de couleurs de visualisation graphique et de données est également prêt. Maintenant, il est temps de vous montrer pourquoi l'ordre de ces couleurs importe. Tout d'abord, laissez-moi aller de l'avant et sélectionnez ce plan de travail, et je vais faire un clic droit ici pour exécuter un plugin que je vous ai déjà montré dans les vidéos précédentes, il s'appelle filtres de couleur. Si je vais aux simulations en aveugle des couleurs, je peux choisir la monochromie par exemple, et pour l'instant, vous pouvez voir que la valeur de ces couleurs change continuellement et nous n'avons pas deux nuances sombres l'une à côté de l'autre. Par exemple, nous n'avons pas cette couleur ici car il serait trop difficile pour l'utilisateur de les distinguer. C' est pourquoi l'ordre des couleurs importe ici. Laissez-moi annuler le processus. C' est tout pour la première partie de ce projet. J' espère que ça vous a plu et je vous verrai dans la prochaine partie. 32. Appliquer une palette de couleurs à une application - Partie 2: Maintenant, il est temps d'appliquer nos couleurs à notre design. Si vous êtes prêt, commençons. Tout d'abord, je vais commencer par ces pages de connexion. Pour l'arrière-plan, je vais d'abord sélectionner ce plan de travail, et sur le côté droit sous les couleurs de sélection, je vais cliquer sur voir les neuf couleurs, juste comme ça. Ici, nous avons neuf nuances de gris différentes, et nous devons les modifier une par une. Celle-ci est notre expérience. Pour l'arrière-plan, je vais utiliser notre couleur neutre clair. Laisse-moi utiliser la pipette et choisir notre couleur neutre claire, juste comme ça. Si vous ne savez pas quelles couleurs correspondent à quels éléments, vous pouvez cliquer sur cette icône pour trouver les éléments particuliers pour lesquels ces couleurs sont utilisées. Par exemple, je vais cliquer dessus. Ici, vous pouvez voir que nous avons une ombre portée en utilisant ces couleurs. Maintenant, permettez-moi d'aller de l'avant et de modifier la couleur de notre titre. Pour le titre, comme vous pouvez le voir, il fait trop sombre, donc nous avons une nuance sombre. Par conséquent, nous devons utiliser notre teinte foncée que nous avons créée ici. Permettez-moi de modifier sa couleur, comme ça. Mais qu'en est-il des champs de texte ? Les champs de texte seront blancs, alors nous allons les laisser tels qu'ils sont. Cependant, les éléments ici comme ces icônes et ces calques de texte doivent être modifiés. Pour ces icônes, je vais utiliser notre couleur d'accent. Laissez-moi aller de l'avant et modifier leur couleur comme ça. Mais qu'en est-il de ces deux calques de texte ? Pour ces calques de texte à nouveau, nous avons besoin d'une teinte foncée. Mais au lieu d'utiliser notre couleur primaire, je vais utiliser notre couleur neutre, celle-ci. Laisse-moi aller de l'avant et choisir notre couleur neutre, juste comme ça. Nos champs de texte sont presque prêts. Cependant, comme vous pouvez le voir, nous avons un trait autour d'eux et nous devons également modifier leur couleur. Pour le trait, nous avons une couleur, mais avec une opacité de 50 pour cent. Pour cette couleur, je vais utiliser notre couleur neutre à nouveau. Permettez-moi de réduire son opacité à 50 pour cent pour celui-ci aussi. Laissez-moi faire le même processus. Maintenant, nos champs de texte sont prêts. Mais il y a trois autres éléments que nous devons modifier, ce lien de mot de passe oublié, ce CTA, et ce lien. Tout d'abord, laissez-moi sélectionner ces deux liens et je vais utiliser notre couleur d'accent pour eux. Je vais choisir notre couleur d'accent comme ça. Mais qu'en est-il de notre CTA ? Comme vous le savez, pour le CTA, nous utilisons également notre couleur d'accent. Ça va être si facile. Laissez-moi choisir notre couleur d'accent. Cependant, n'oubliez pas de modifier la couleur de notre ombre, car ce n'est pas une bonne pratique d'utiliser une ombre portée noire pour les éléments colorés. Je vais choisir le calque d'ombre. Permettez-moi de choisir la même couleur et de diminuer son opacité à 32 pour cent. Comme vous pouvez le voir, notre première page de connexion est prête et elle est belle et propre. J' espère que ça vous plaira aussi. Maintenant, nous devons aller de l'avant et appliquer les mêmes couleurs à toutes ces pages de connexion. Je vais accélérer ce processus pour vous faire gagner du temps. Nos pages de connexion sont prêtes. J' ai appliqué les mêmes couleurs à tous ces éléments sauf ce message d'erreur et cette icône d'avertissement, parce que nous allons le faire ensemble. Pour ce message d'erreur, nous devons utiliser une couleur sémantique. Laissez-moi aller de l'avant et choisir la couleur sémantique. Je vais copier le code de couleur hexadécimal et le coller ici. Cela a l'air bien, mais plus tard, nous devons également valider nos couleurs en termes de rapport de contraste. Mais pour l'instant, on va le laisser tel quel. Mais qu'en est-il de cette icône ? Pour cette icône d'avertissement, comme vous pouvez le voir, nous avons deux couleurs différentes. Nous avons une teinte légère et une nuance noire. Pour cette teinte légère, je vais utiliser notre teinte légère que nous avons créée ici. Je vais copier le code de couleur hexadécimal et laissez-moi le coller pour le cercle. Pour ces deux éléments, je vais utiliser notre teinte foncée, celle que nous avons créée auparavant. Laisse-moi le coller ici et là c'est. Pouvez-vous voir à quel point ces couleurs sont belles et harmonieuses maintenant ? C' est pourquoi c'est toujours une bonne idée de créer différentes nuances et différentes teintes de vos couleurs sémantiques. Nos pages de connexion sont parfaitement remplies. Maintenant, nous pouvons passer à la page suivante, qui est notre page d'accueil. Ici, nous avons beaucoup d'éléments. Nous avons un titre, deux cartes de crédit, un dialogue et quelques transactions. Laissez-moi commencer par le titre. Quelle couleur devrait être utilisée pour cela ? Si votre réponse est la nuance noire de notre couleur primaire, vous avez raison à 100%. Nous devons utiliser les couleurs de manière cohérente tout au long de notre projet. Je vais copier cette couleur et me laisser coller pour ce titre. Mais qu'en est-il de l'arrière-plan ? Pour l'arrière-plan, je vais utiliser la même couleur neutre lumière, juste comme ça. Appliquons maintenant des couleurs à nos cartes de crédit. Pour la carte principale, je vais utiliser ma couleur d'accent, celle-ci, mais assurez-vous de choisir le calque correct dans la liste des calques. Depuis que j'utilise le masque, ça s'appelle le rectangle sept. Je vais choisir ça. Laisse-moi utiliser notre couleur d'accent pour ça. On y va. Ces textes seront blancs et ce logo MasterCard restera blanc. Mais qu'en est-il de ces lignes ? Pour celui-ci, je vais utiliser la teinte foncée de notre couleur primaire, celle que nous avons utilisée pour notre titre, celui-ci. Celle-ci va être blanche. Ça a l'air génial. Mais qu'en est-il de cette carte ? Comme vous pouvez le voir ici, nous avons une teinte de notre couleur. C' est un peu plus lumineux. La couleur que nous allons utiliser sera la même que notre couleur d'accent. Cependant, comme vous pouvez le voir, c'est plus lumineux parce que je diminue l'opacité de la carte principale, ici MasterCard deux, à 50 pour cent. Si je l'augmente à 100 %, vous pouvez voir que nous n'avons pas une bonne hiérarchie visuelle. Puisque la carte principale n'est pas sélectionnée ici, il est préférable de la faire 50 pour cent. Mais qu'en est-il de ces cartes ? Le dialogue lui-même va être blanc. Cependant, ces cartes vont utiliser notre couleur neutre, celle que nous avons utilisée pour notre arrière-plan. Cette couleur a déjà été appliquée à ces cartes parce que nous utilisons la section des couleurs de sélection, donc nous n'avons pas besoin de les modifier. Mais qu'en est-il de cet indicateur ? Pour celui-ci, je vais utiliser ma couleur primaire, qui est celle-ci, et ensuite je vais diminuer son opacité à 15 pour cent. Maintenant, nous devons passer à nos éléments. Comme vous pouvez le voir, ces carrés n'ont pas une nuance très noire comme cette nuance noire, comme vous pouvez le voir ici. Par conséquent, je vais utiliser notre couleur d'accent pour eux. Si vous comparez les couleurs de ces éléments les unes avec les autres, vous pouvez voir qu'ils utilisent tous la même teinte sauf celle-ci. Si je sélectionne simplement mon plan de travail de page d'accueil, je peux facilement choisir cette couleur et je peux utiliser la couleur d'accentuation comme ça. Toutes ces nuances ont été changées immédiatement. Mais qu'en est-il de ces dates ? Pour ces dates, nous allons utiliser notre couleur neutre terne. Je vais les sélectionner tous, et laissez-moi aller de l'avant et choisir notre couleur neutre sombre, juste comme ça. Ils ont l'air super. Maintenant, nous devons passer à notre dernière page, qui est la page des finances. En haut, nous avons une barre de navigation. Les éléments de cette barre de navigation doivent utiliser la même couleur. Je vais les sélectionner tous, et je vais utiliser la couleur primaire pour eux, celle-ci. En utilisant la pipette, je peux sélectionner ma couleur primaire. Voilà, la couleur a été appliquée à tous. Ici, nous avions un graphique à secteurs, et pour ces graphiques, nous devons utiliser un schéma de couleurs graphique et de visualisation de données. Par conséquent, nous ne sommes plus limités à utiliser notre schéma de couleurs monochromatiques. D' accord. Commençons par ces grandes formes. Je vais choisir ça, et je vais choisir notre couleur bleue ici. Laissez-moi déplacer ces couleurs tableau d'art ici, laissez-moi sélectionner celui-ci et en utilisant la pipette, je vais sélectionner cette couleur. Fantastique. Mais ces formes ont également une ombre portée, donc si vous choisissez ce calque bleu, celui sous notre forme principale dans la liste des calques, vous pouvez également modifier la couleur de notre ombre portée, tout comme cela et diminuer l'opacité à 30 %. Maintenant, pour la prochaine forme, je vais utiliser le vert. Assurez-vous de garder la même commande, par exemple, n'utilisez pas de rouge et placez-le à côté de notre bleu, parce que les personnes souffrant de déficiences de vision des couleurs peuvent faire face à des difficultés dans ce cas. Pour la forme suivante, je vais utiliser le vert, et je vais également modifier la couleur de l'ombre portée. Je vais sélectionner le vert et diminuer l'opacité à 30 pour cent et pour la forme suivante, je vais utiliser celle-ci, jaune. J' ai déjà modifié le nom des calques que vous pouvez facilement comprendre quelle forme devrait utiliser quelle couleur. Maintenant, permettez-moi de modifier également la couleur des ombres portées, et de diminuer l'opacité à 30 %. La forme suivante va utiliser notre couleur rouge, aussi l'ombre portée doit être rouge avec une opacité de 30 pour cent, et enfin, laissez-moi utiliser notre dernière couleur et nous n'avons pas besoin d'avoir une ombre portée ici. Ça a l'air très bien, n'est-ce pas ? Il est maintenant temps d'appliquer des couleurs à ces calques de texte. Ici, nous avons deux nuances différentes. L' un est trop sombre, et ces deux-là sont un peu plus brillants. Je vais sélectionner ce calque et celui-ci, et je vais utiliser notre couleur neutre pour eux comme ça. Cependant, pour celui-ci, nous devons utiliser une nuance plus foncée, par conséquent, la nuance sombre de notre couleur primaire semble bonne ici. Pouvez-vous voir à quel point il est facile d'appliquer des couleurs à notre design lorsque nous avons déjà conçu notre projet en mode niveaux de gris ? Mais qu'en est-il de ces données ? Pour ces cercles, nous devons utiliser les mêmes couleurs que celles que nous avons utilisées pour notre graphique. Donc celui-ci, qui est le plus gros, va être bleu. Je vais sélectionner ce cercle et juste utiliser ce bleu et cette ligne va utiliser le même bleu aussi. Pour le second, qui est la prochaine grosse dépense, il va être jaune, donc je vais utiliser celui-ci, le même jaune ici. La prochaine sera verte, donc je vais sélectionner ces deux formes en même temps, et je vais choisir notre couleur verte. Celui-ci, les achats en ligne va être rouge, donc je vais sélectionner le rouge, et enfin, les autres groupes ont besoin d'utiliser notre nuance la plus sombre, qui est cette couleur. Mais qu'en est-il de ces couches de textes ? Pour les titres, par exemple, loyer, épicerie, restaurants, etc. Je vais utiliser notre couleur primaire sombre, celle que nous avons utilisée pour ce montant, alors laissez-moi utiliser celui-ci. Pour ces transactions et ces montants, je vais utiliser notre couleur neutre terne. Je vais les sélectionner tous, maintenir la touche Maj enfoncée et cliquer dessus un par un, et enfin, choisir notre couleur neutre. Ils ont l'air fantastiques, n'est-ce pas ? Le dernier est notre CTA, le bouton Télécharger la déclaration. Pour celui-ci, je vais utiliser notre couleur d'accent, qui est celle-ci, et aussi pour l'ombre portée, je vais utiliser la même couleur, cependant, avec une opacité de 32 pour cent. Joli. Une chose que nous avons oublié de changer est l'arrière-plan de cette page. Alors laissez-moi sélectionner le tableau d'art, et modifiez simplement la couleur de fond à notre couleur bleue neutre. Pouvez-vous voir à quel point ces pages sont belles ? J' espère que ça vous plaira. Maintenant, laissez-moi aller de l'avant et les prévisualiser un par un. Voici notre première page de connexion, celle-ci est la deuxième page de connexion avec ces états d'erreur. Celui-ci a une icône d'avertissement avec nos couleurs sémantiques, et ici nous avons utilisé notre schéma de couleurs monochromatiques pour les cartes de crédit et tous les autres éléments. Enfin, pour l'écran des finances, puisque nous avions un graphique catégorique, nous avons utilisé un schéma de couleurs catégoriquement appelé pour eux. Nous avons presque fini. La seule chose que nous devons faire maintenant est de valider nos couleurs en fonction du rapport de contraste des couleurs. Permettez-moi de sélectionner le titre de connexion, par exemple, et je vais exécuter un plugin appelé contraste, celui que nous avons utilisé auparavant. Tout comme ça, comme vous pouvez le voir, il a passé tous les tests de rapport de contraste pour tous les niveaux, niveaux double A et triple A. Qu' en est-il de ce texte ? Il a passé presque tous les tests, cependant, il a échoué pour le niveau triple A pour le texte normal, mais c'est totalement correct parce qu'il a déjà passé le niveau double A. Et celui-là, notre couleur sémantique ? Comme vous pouvez le voir, il a échoué pour le texte normal, cependant, si vous regardez le rapport de contraste, qui est de 3. 1:1, vous pouvez voir qu'il n'est pas si bas et qu' il est acceptable d'utiliser cette couleur pour ce calque de texte, pourquoi ? Parce que pour ce calque de texte, nous avons utilisé un poids semi-gras. Si je le change à régulier, maintenant, ce n'est pas acceptable, mais pour le texte semi-gras ou gras, cette couleur est acceptable tant que le rapport de contraste n'est pas inférieur à 3. 1:1. Et celle-là ? Il passe aussi le test requis, et celui-ci, fantastique. Mais qu'en est-il ici ? Pour le titre, nous avons déjà vérifié cela. Permettez-moi de sélectionner les calques de texte sur ces cartes. Comme vous pouvez le voir, il a passé tous les tests. Qu' en est-il ici, la couleur d'accent contre cette couleur neutre ? Il a passé tous les tests, et aussi notre couleur neutre terne contre notre couleur neutre lumière, il a encore passé tous les tests. Laissez-moi vérifier le contraste de ces textes aussi, je vais exécuter le plugin une fois de plus. Comme vous pouvez le voir, il a passé tous les tests. Nous n'allons pas valider d'autres couleurs, par exemple, celles-ci parce que nous les avons déjà vérifiées. Tous les bons gars. C'est tout pour cette vidéo, j'espère que vous l'avez appréciée et je vous verrai dans la prochaine vidéo. 33. Que faire ensuite ?: Très bien les gars, c'est tout pour ce cours. J'espère vraiment que vous l'avez apprécié et que acquis des compétences utiles pour votre parcours de conception. Maintenant, c'est à vous de mettre en pratique ce que vous avez appris et de devenir un meilleur designer. J'aimerais connaître vos commentaires sur ce cours afin de l' améliorer de plus en plus pour vous. Si vous souhaitez être informé d' une mise à jour de cours ou de mes nouveaux cours, vous pouvez également me suivre sur Skillshare. Si vous voulez devenir concepteur d'interface utilisateur et que vous ne savez pas par où commencer, vous pouvez consulter mon cours Figma sur Skillshare, où je vous apprendrai tout ce que vous devez savoir pour devenir une interface utilisateur Designer UX. Si vous souhaitez en savoir plus sur conception UX de l' interface utilisateur et améliorer vos compétences en matière de conception. J'ai une bonne nouvelle pour toi. J'ai une chaîne YouTube où je publie des tonnes de contenus gratuits qui pourraient vous intéresser. Assurez-vous donc de vous abonner à ma chaîne pour ne pas rater mes prochains tutoriels. Enfin et surtout, je tiens à vous remercier d'avoir suivi ce cours et j'ai hâte de voir vos palettes de couleurs et vos œuvres d'art. bientôt et au revoir.