Couleur sur le web II : Concevoir pour plus de clarté et de conformité

1. Bande-annonce: Dans la deuxième partie de cette série de Color on the Web, nous apprendrons comment ajouter de la couleur à un design de site Web. Nous travaillerons pour une entreprise fictive appelée Bike Book, une société de location de vélos avec une touche. Tout d'abord, nous allons tout apprendre sur le daltonisme. Qu' est-ce que c'est ? À quoi ça ressemble ? Et comment concevoir pour cela ? Ensuite, nous allons entrer et appliquer la palette de couleurs que nous avons conçue en classe 1 à la maquette du site Bike Book. Parce que nous nous concentrerons uniquement sur la couleur, le design sera fourni pour vous. Enfin, nous allons apprendre à ajouter nos choix de couleurs à un guide de style pour rendre le travail aux développeurs un jeu d'enfant. Tout ce dont vous avez besoin est une copie de Photoshop ou Illustrator à suivre avec les leçons. Cette classe s'adresse aux débutants qui veulent améliorer leurs compétences en couleur et aux concepteurs chevronnés qui veulent perfectionner leur flux de travail de couleur. À la fin de la classe, vous aurez une maquette colorée à partager avec la communauté Skillshare ainsi qu' une solide compréhension de la façon de choisir et d'appliquer la couleur à votre propre travail à l'avenir. Commençons. 2. Introduction: Salut les gars, bienvenue à mon deuxième cours de Skillshare sur le flux de travail des couleurs. Donc, si vous venez de terminer ma première classe et de soumettre votre projet, vous devriez avoir un seul pilote choisi avant de passer à ces leçons. Dans ce cours, nous allons mettre en œuvre notre palette de couleurs, mais pas avant d'en apprendre un peu sur un autre sujet important. Donc, voici une citation que j'aime vraiment de Josef Albers, « Dans la perception visuelle, une couleur n'est presque jamais vue comme elle est vraiment... Ce fait fait fait de la couleur le médium le plus relatif de l'art. » Albers était un peintre abstrait et professeur d'Allemagne, et il a publié un cours très influent sur la théorie des couleurs en 1963. Il avait tout à fait raison. La couleur est très relative, non seulement dans la façon dont elle apparaît différemment sur différents appareils et écrans, mais elle peut également être vue différemment par différentes personnes. Et c'est quelque chose dont nous devons vraiment être plus attentifs lors de la conception. Lorsque vous pensez aux types de handicaps qui peuvent influer sur la façon dont les gens utilisent la technologie, les premières choses qui pourraient vous venir à l'esprit sont probablement plus extrêmes. Donc, vous pourriez penser à une personne totalement aveugle, ou vous pourriez penser à quelqu'un qui a un handicap grave et qui ne peut utiliser qu'un clavier ou une souris. Vous êtes probablement encore plus susceptible de penser aux personnes âgées et d'envisager tailles de police appropriées pour les personnes qui ont des difficultés à lire de petits textes sur les écrans. Mais la cécité des couleurs, est également un type de handicap qui affecte un pourcentage étonnamment élevé de la population. On ne parle pas de ça si souvent. Donc, la cécité des couleurs signifie très rarement que vous ne pouvez voir aucune couleur du tout. Cela ne veut pas dire que les gens voient les choses en échelle grise. Il s'agit en fait d'une diminution de la capacité à voir la couleur, ou d'une diminution de la capacité à distinguer les couleurs les unes des autres. cécité des couleurs est un trait lié au sexe, et il est beaucoup plus fréquent chez les hommes que chez les femmes. Dans l'ensemble, il se produit chez huit pour cent des hommes, mais seulement 0,5 pour cent des femmes. Pensez-y une seconde. C' est près de 5 % de la population totale. Nous ne pouvons ignorer que beaucoup de gens sont dans notre travail. Je parlerai plus de pourquoi dans la prochaine leçon. 3. Comment cela affecte le public: J' ai la chance d'avoir une bonne vision des couleurs, mais je ne vais pas mentir. Comme tous ceux qui ont une bonne vision des couleurs, c'est certainement quelque chose que j'ai pris pour acquis. Je n'ai jamais vraiment réfléchi aux effets du daltonisme jusqu'à ce que je rencontre quelqu'un qui a appris à vivre avec ça. Je pense que la première personne que j'ai rencontrée qui parlait ouvertement d'être aveugle était mon instructeur de photographie au collège, et il y a quelques années, j'ai repris contact avec lui et il m'a dit comment il a découvert qu'il l'avait. Mon professeur de design, John Solowski m' a signalé une ma première année et l'Université Ryerson. J' ai vraiment été tout à fait inutile en tant qu'imprimante couleur. Je suppose que c'est pour ça que la photographie en noir et blanc m'a tellement plu. Donc, pour mon instructeur, cela signifiait qu'il a décidé de travailler moins en photographie couleur et plus en noir et blanc. Mais pour d'autres personnes, cela peut avoir des conséquences beaucoup plus dévastatrices. Beaucoup d'industries effectuent effectivement des tests de dépistage pour les carrières où la vision des couleurs est une exigence absolue. Donc, les gens qui espéraient devenir pilotes, électriciens, ingénieurs et techniciens de laboratoire doivent généralement passer un test avant d'être embauchés, et parfois, c'est après avoir consacré beaucoup d'argent et beaucoup de temps à leurs études. Beaucoup de ces personnes ont le sentiment d'être victimes discrimination après avoir échoué aux tests de révision alors en réalité, elles n'ont absolument aucun problème dans l'exécution de l'une ou l'autre des tâches de leur travail. Donc, j'ai lu une fois une histoire personnelle d'un homme qui a obtenu un diplôme d'associé en science de laboratoire médical. Lorsqu' on l'a évalué pour un emploi potentiel, il a échoué au test de couleur et le médecin lui a dit qu'il était temps de trouver une nouvelle carrière. Donc, même s'il était plus que capable de remplir les fonctions et qu'il obtenait des notes très élevées dans ses cliniques, il était considéré comme une responsabilité envers l'hôpital sur papier. Certains d'entre vous pensent peut-être, « Eh bien, nous sommes juste en train de concevoir des sites Web, n'est-ce pas ? Qu' est-ce que cela a à voir avec nous ? Eh bien, la réponse simple est que nous devrions tous nous efforcer de rendre notre travail aussi accessible que possible par respect pour nos lecteurs, et je pense que c'est la bonne chose à faire. Mais si vous n'êtes toujours pas convaincu, cela constitue également un cas d'affaires pratique. Donc, si une personne trouve qu'il est impossible ou une douleur totale de naviguer sur votre site Web en raison d'un problème de couleur, elle va juste trouver une alternative. Si vous vous souvenez que cinq pour cent de la population totale est touchée, il est assez facile de voir comment ce genre de problème peut se traduire par une perte de lectorat et de ventes, et personne ne veut que cela arrive à son entreprise. Sur une note plus sérieuse, les problèmes d'accessibilité peuvent vous atterrir dans un peu d'eau chaude dans le monde juridique. En 2011, trois femmes aveugles de Californie et Kansas ont reçu l'autorisation d'un juge pour intenter une action collective. Il a été déposé contre la Walt Disney Company pour avoir un site Web qui était inaccessible aux applications de lecteur d'écran, et les femmes ont effectivement gagné. Ils ont en fait conclu un accord à l'amiable avec Disney avant d'aller au procès. Je ne veux pas vous effrayer, les gars, mais pensez-y. Seriez-vous prêt à faire face aux conséquences si ce genre de chose vous arrivait ? Probablement pas. Mais heureusement, le daltonisme n'est pas difficile à comprendre et ce n'est pas difficile à concevoir, donc il n'y a absolument aucune raison pour que vous ne puissiez pas faire cette partie de chaque flux de travail. 4. À quoi cela ressemble-t-il ?: Alors, parlons un peu de la façon dont le daltonisme se produit réellement. On va regarder à l'intérieur de l'œil humain pour voir comment ça marche. Donc, ceci est une illustration de coupe transversale de l'intérieur de la rétine humaine typique. Il y a deux types de cellules réceptrices à l'intérieur : les tiges et les cônes. Les tiges sont les cellules qui nous permettent de voir l'obscurité et la lumière, ainsi que la forme et le mouvement. Les cônes sont les cellules qui nous permettent de percevoir la couleur. Il existe trois types de cônes ; chacun est responsable de l'absorption des longueurs d'onde bleues, rouges et vertes dans le spectre. problèmes de vision des couleurs se produisent lorsqu'un ou plusieurs de ces types de cônes sont défectueux ou totalement absents. Ces défauts peuvent être hérédités par génétique ou effectivement acquis par des choses comme un traumatisme, exposition à la lumière ultraviolette, dégénérescence avec l'âge et un diabète efficace ou d'autres facteurs divers. J' ai mentionné plus tôt à propos du Dr Jay Neitz, le chercheur en vision des couleurs au Medical College de Washington, et bien qu'il ait dit qu'une personne avec vision des couleurs pleinement fonctionnelle peut distinguer jusqu'à un million de couleurs différentes, une personne manquant un type de cône est limitée à seulement 10 mille couleurs. Donc, avec ce genre de défaut, il est beaucoup plus probable qu'une personne manque un type de cône soit complètement consciente de son état. Donc, il y a trois types principaux de daltonisme. Je vais montrer des images simulées des versions les plus sévères. Les personnes présentant les types les plus courants de cécité colorante comme la protanopie et la deutéranopie ont de la difficulté à distinguer les teintes rouges et vertes. Donc, une image d'une roue de couleur pourrait ressembler à ceci, à quelqu'un avec une cécité des couleurs de type protanopie et ça pourrait ressembler à ça pour quelqu'un avec deutéranopie. Bien que les problèmes de couleur rouge-vert soient les plus courants, il existe aussi des formes de cécité des couleurs comme la tritanopie, qui affectent les teintes bleues et jaunes. Ce qui veut dire que notre roue de couleur pourrait ressembler à ça. Dans les prochaines leçons, nous allons parler de quelques étapes simples que vous pouvez faire pour créer designs plus accessibles sans sacrifier l'esthétique. 5. Noms de couleur: Donc, bien que certaines combinaisons de couleurs devraient être évitées chaque fois que possible, comme le rouge et le vert. Nous ne devrions pas passer tout notre temps à nous soucier d'obtenir la palette parfaite. Il y a beaucoup d'autres astuces et astuces que nous pouvons utiliser pour améliorer l'expérience d'un utilisateur sans coloris. Donc, la première chose à garder à l'esprit est de vous assurer d'inclure des étiquettes de nom de couleur, à côté des nuanciers de couleur que vous utilisez sur un site Web. Donc, voici des gars qui portent des costumes bleus vraiment élégants. Droit ? Non, c'est ce qu'une personne avec une protanopie sévère pourrait voir. Donc, dans une situation plus pratique, disons que vous avez un site Web qui vend des T-Shirts, si vous montrez seulement une photo du T-Shirt, il peut être impossible pour une personne de dire quelle couleur de la chemise est vraiment. Donc, pour aider à éviter toute confusion, assurez-vous de référencer le nom de la couleur dans la description du produit. Les travailleurs de United Pixel vendent des T-shirts en ligne, et ils font un très bon travail de suivre cette règle sur leur site Web. Donc, je suis de St. John's et voici nos T-shirts et la palette de couleurs est basée sur notre drapeau local, qui est un drapeau non officiel rose, blanc et vert. C' est une combinaison de couleurs que j'imagine que quelques personnes n'aiment pas trop. Mais la description est claire, il y a une rose Cabot Tower sur une chemise Kelly Green. Cela signifie qu'il ne devrait pas y avoir de surprises si une personne aveugle voit cela. Comme les gars en costume rose, il y a une énorme différence ici. Peut-être que rouler sur un vélo rose n'est pas si important, mais vous devez également être prudent lorsque vous choisissez des noms de couleur. Si la couleur est pourpre, appelez-le en fait violet au lieu de quelque chose comme le raisin. Si vous y pensez, les raisins peuvent être verts ou jaunes, il y a des raisins rouge clair, rouge foncé, et si la couleur est grise, appelez effectivement un gris clair au lieu de la fumée. La fumée peut être à peu près n'importe quelle couleur marron, noir, bleu ou autre. Tenez-vous avec peu de noms autant que possible. Il y a une plus grande chance que le spectateur comprenne réellement qu'une chemise violette est violette, plutôt que n'importe quel autre nombre de couleurs, et cela ne les forcera pas à demander à une autre personne de clarifier pour eux. Donc, ici sur notre site Web Bike Book, vous remarquerez que l'option de couleur pour choisir votre vélo est vert clair au lieu de menthe, sarcelle ou mousse de mer ou quelle que soit la couleur que vous voudrez appeler. C' est certainement la voie à suivre. Dans la leçon suivante, nous parlerons des instructions spécifiques aux couleurs et de la façon d'éviter de les utiliser dans votre travail. 6. Instructions spécifiques aux couleurs: Donc, la prochaine chose dont je vais parler est nos instructions spécifiques à la couleur. Donc, ce que je veux dire par là, c'est, ne dites pas à une personne de faire des choses comme cliquer sur le bouton vert pour acheter un produit ou cliquer sur le bouton rouge pour annuler votre commande. Parce que les gens aveugles vont probablement avoir du mal, en fait trouver ce bouton sur votre page. Je vais vous montrer quelques exemples. C' est un bon exemple de ce qu'il ne faut pas faire lors de la conception de formulaires. Évitez d'étiqueter les champs obligatoires avec du texte coloré uniquement. Si vous êtes une personne aveugle des couleurs, il est probable que vous ne serez pas en mesure de dire quelles étiquettes sont mises en surbrillance. Ils vont tous avoir l'air noir. Il est plus sûr d'utiliser un symbole q comme un astérisque, qui est indépendant de la couleur. Mais vous devez également garder à l'esprit que certains lecteurs d'écran utilisés par les personnes handicapées ne lisent pas d'astérisque à haute voix. Donc, une solution encore meilleure est d'utiliser une référence de texte directement dans l'étiquette des forums. Peu importe la nudité d'une personne, vous savez qu'elle va être en mesure de le lire. Un autre problème qui vient avec la couleur InDesign est dans les infographies et les graphiques. Donc, nous utilisons des inforgraphies ou des graphiques sur le site Web du carnet de vélos. Mais il est toujours très important de comprendre comment cela peut être un gros problème pour une personne ayant une déficience visuelle. Jetez un oeil à ce tableau. Si vous n'êtes pas en mesure d'étiqueter directement vos régions de données, ne vous fiez pas au codage couleur seul comme celui-ci le fait. Vous devriez essayer d'utiliser une combinaison de couleur avec la texture ou un motif avec des étiquettes précises et refléter cela dans la clé, comme celle ici en haut. Lorsque vous combinez l'arrière-plan avec un motif unique, il donnera toujours à l'utilisateur deux informations à utiliser. La même chose s'applique aux graphiques linéaires. Les graphiques linéaires peuvent être assez difficiles à lire s'ils contenaient un chemin d'intersection. Sur la droite, vous pouvez voir comment les chemins se mélangent complètement pour une personne atteinte de Deuteraopia. Donc, dans ce cas, vous pouvez essayer d'augmenter l'épaisseur d'une ligne et de lui donner un style différent. Vous pouvez voir ici que cet exemple est beaucoup plus évident et plus facile à lire. Voici un exemple de graphique bien conçu de Google Analytics. Sur le côté gauche est la clé, et sur le côté droit est le graphique circulaire avec chaque tranche directement étiquetée. Ainsi, même dans cette simulation en aveugle des couleurs, vous pouvez toujours donner un sens à l'information. Malheureusement, les graphiques ne sont pas vraiment cohérents. Dans une autre zone de la même taille, le graphique est sur des étiquettes et il peut sembler assez déroutant, surtout lorsque les portions du graphique sont de taille similaire. Les cartes peuvent être un autre gros problème. J' utilise cet exemple un lavage, du système de métro de Londres. Malheureusement, la conception de la carte souterraine a beaucoup de couleurs qui sont fondamentalement indiscernables les unes des autres à une personne ayant un problème de vision, comme dans cette image stimulée. Cela est vrai non seulement pour le London Underground, mais aussi pour tout autre système de recherche de chemin qui repose sur le codage couleur comme la seule clé d'une légende. Il y a en fait une version imprimable de la même carte disponible sur le site Web Transport for London en noir et blanc. Celle-ci utilise des motifs et des nuances dans les lignes, mais le fait est qu'il n'y aurait pas besoin de ce type de carte si elle était conçue avec l'accessibilité dès le début. Alors, rappelez-vous, combinez la couleur avec le motif ou la texture, étiquettez vos champs, et vos informations seront beaucoup plus faciles à lire pour tout le monde. 7. Conformité et test: Donc, il existe de nombreux outils pour simuler différents types de daltonisme, et il est vraiment important de vérifier votre conception pour détecter tout problème potentiel à l'avance. N' oubliez pas que toutes les personnes aveugles ne verront pas les mêmes couleurs qu'elles apparaissent dans le simulateur de couleurs, car les simulateurs ne sont destinés qu'à imiter la vision des personnes les plus touchées. Donc, mon outil préféré absolu pour tester le cécité des couleurs est disponible sur macOS, Windows et Linux, et il s'appelle Color Oracle, et c'est gratuit. Je veux que vous téléchargez ce tout de suite et vérifiez sur colororacle.org. Cette application simule les types les plus courants de daltonisme lorsque vous utilisez des applications sur votre propre écran. Donc, c'est essentiellement un filtre plein écran qui fonctionne dans tout le système d'exploitation et peu importe l'application que vous utilisez. Vous pouvez également vérifier les deux types de daltonisme les plus courants directement dans Photoshop ou Illustrator lors de la conception, et vous pouvez trouver cette option dans le menu Affichage et configuration de la preuve. Le contraste des couleurs est également incroyablement important à tester, et cela peut infecter n'importe qui, pas seulement les personnes atteintes de daltonisme. Je pense que beaucoup d'entre nous designers, nous pouvons vraiment être coupables de faible contraste conçu beaucoup trop souvent. Ce que nous pourrions considérer comme un effet subtil et beau, pourrait en fait être impossible pour, disons, votre grand-mère de voir. Certains d'entre vous connaissent peut-être le W3C. Il s'agit d'une organisation internationale qui élabore des normes pour le Web afin de l'aider à atteindre son plein potentiel. En fait, le W3C a élaboré des lignes directrices sur l'accessibilité du contenu Web, qui sont des recommandations pour rendre le contenu sur le Web plus accessible aux utilisateurs handicapés. Il y a trois niveaux de conformité. A étant le plus bas, AA étant le deuxième meilleur, et AAA étant le plus élevé et le plus strict. Le rapport de contraste des couleurs minimum au niveau AA pour texte et les images de texte doit être de 4,5 à 1. En d'autres termes, la couleur de la lettre d'une paire doit avoir quatre fois et demie plus de luminance que la couleur plus foncée. La conformité au niveau AAA nécessite un rapport de contraste de sept pour un. Jetez un oeil au texte dans le pied de page de ce site Web. Même pour une personne avec une bonne vision, c'est incroyablement subtil et difficile à lire. Le taux de contraste est en fait de 2,36, ce qui est inacceptable et ne répond à aucun des niveaux de conformité. Personnellement, je recommande que tout le corps du texte soit conforme à l'AAA, avec des titres plus gros et des copies moins importantes répondant à la conformité AA. Ces gars devraient viser à faire le contraste de ce pied de page au moins 4.5. Donc, le développeur Leaver Rue est venu avec cet excellent outil, où vous pouvez entrer un code couleur pour le texte et un code couleur pour un arrière-plan et il vous dira si le rapport de contraste des couleurs est suffisant. J' adore cet outil car il prend en charge toutes les couleurs CSS que le navigateur prend en charge, pas seulement les codes hexadécimaux. Il prend également en charge les transparents qui peuvent vraiment être utiles. Donc, nous pouvons taper à peu près n'importe quelle couleur ici et le rapport de contraste se mettra à jour à la volée. Vous pouvez également copier l'URL, mettre en signet et l'envoyer à quelqu'un d'autre pour la voir. Donc, si vous avez une couleur qui ne passe pas le test, vous pouvez consulter cet outil avant de revenir en arrière et de modifier votre palette. Je l'ai découvert il y a quelques semaines. Ça s'appelle le Tanaguru Contrast-Finder. Donc, je vais vérifier la palette que j'ai fait pour le livre d'octets. Donc, je vais juste aller dans Illustrator ici et je vais tester l'écran. Donc, j'ai imaginé que cette couleur pourrait être bonne pour une couleur de fond pour un bouton. Donc, je vais prendre le code hexadécimal ici et visiter ce site Web. Donc, ici, je vais sortir dans la couleur de premier plan. Donc, si ça doit être du texte blanc, je vais juste rendre ça blanchâtre, et ensuite je prendrai le code de fond, et il est là. Donc, s'il doit être modifié, je peux changer le composant à éditer ici. Donc, je voulais éditer la couleur de fond, évidemment, et le ratio minimum devrait être de 4,5. Donc, ici vous avez deux options et je vais laisser celui-ci sur une gamme de couleurs valides juste pour voir ce qui est disponible pour nous. Ensuite, nous faisons défiler vers le bas, et ici nous allons réellement montrer que le rapport en ce moment de ce texte blanc sur cette couleur est de 2,8, qui est assez bas et toutes ces couleurs en dessous, toutes sont approuvées et ont des rapports supérieurs à 4,5. Donc, je peux juste faire défiler vers le bas et sélectionner quelle couleur je pense est la meilleure correspondance. Bien sûr, beaucoup d'entre eux semblent assez différence et certains d'entre eux ne seront complètement rien comme ce que j'ai choisi, mais celui le plus proche du sommet est en fait pas trop mal. Donc, je peux aller ici, sélectionner cette nouvelle couleur, et la remettre dans Illustrator. Je vais faire une nouvelle nuance parce que je peux garder cette vieille couleur pour les illustrations et les choses qui ne sont pas importantes ou les choses qui n'ont pas besoin de texte sur elles. Donc, cela peut être ma nouvelle couleur et un nouvel ajout à la palette. Maintenant, je veux que vous alliez et testez votre palette pour tout problème de contraste potentiel. Si vous en trouvez des plus importants, voyez si vous pouvez les modifier jusqu'à ce que vous puissiez trouver le bon rapport de contraste. Après cela, nous serons prêts à les mettre en œuvre dans notre conception. 8. Pour commencer: Donc, vous êtes arrivés jusqu'ici et je suis vraiment contente que vous ayez coincé avec ça. Vous avez probablement remarqué maintenant combien de travail de fondation va réellement dans le choix des combinaisons de couleurs efficaces. Donc, toutes les informations que vous avez appris sur théorie des couleurs, le message et la signification et l'accessibilité, peuvent sembler complètement accablantes au début, mais plus vous le faites, plus cela devient facile, et éventuellement, vous serez en mesure de le fusionner dans votre flux de travail assez naturellement. Je sais que la première fois que j'ai commencé à apprendre sur le daltonisme, je teste toujours absolument tout ce que j'ai fait, mais finalement c'est devenu seconde nature et maintenant j'ai un meilleur oeil pour repérer les problèmes à l'avance au lieu de les trouver à la fin, et vous y arriverez aussi. Maintenant, il est temps d'entrer dans la partie vraiment amusante et d'acétate notre palette et de la mettre en œuvre dans le site BikeBook. En fait, la mise en œuvre de votre palette dans un design peut être la partie la plus difficile pour de nombreux designers, mais comme toujours, il y a des astuces que nous pouvons utiliser. L' une des astuces les plus faciles à utiliser est la règle des 60, 30, 10 qui est utilisée par beaucoup de designers d'intérieur et vous pouvez faire ce travail dans le design web aussi et cela fonctionne même dans l'assemblage des tenues. Donc, si tu n'es pas le meilleur pour t'habiller, tu n'auras plus d'excuse. Donc, je vais vous montrer un design de page sans aucune couleur appliquée similaire à notre maquette BikeBook en échelle de gris et ma palette là-bas sur la droite. abord, 60 pour cent de la couleur est ajoutée aux murs ou dans notre cas l'arrière-plan de la page. Cela peut également inclure le blanc ou le noir si c'est à cela que vous voulez que votre page ressemble. Trente pour cent de la couleur est ajoutée aux rideaux et aux revêtements de sol. Donc, dans notre cas, ce serait la bannière de la page et le pied de page de la page. Dix pour cent de la couleur est donnée aux accessoires et illustrations et pour nous cela signifie boutons, liens et autres couleurs d'accentuation. Je vais le démontrer plus loin en utilisant ma palette et le site Web de BikeBook. Donc, comme avant, je vais utiliser Illustrator car c'est ce que je suis à l'aise et c'est ce que je préfère montrer aux développeurs pour la direction si je conçois des filaires mais j'ai également inclus un fichier Photoshop si vous voulez pour travailler avec cela à la place. Donc, je vais ouvrir Illustrator et mes fils de BikeBook. Maintenant, je veux vous montrer ceci d'abord, si vous regardez la palette des calques, vous remarquerez que tous les calques de chaque section de la page sont ici. Ainsi, vous pouvez effectuer une exploration vers le bas à l'intérieur de ceux-ci pour voir les objets ou les formes dont vous pourriez souhaiter modifier la couleur. Donc, je vais m'assurer que ma palette de nuances est ouverte ici. Ce que j'ai fait, c'est que j'ai placé ma dernière palette ici. Donc, ce que je vais faire est de sélectionner toutes mes couleurs, de venir dans la palette de nuances, le menu déroulant et de créer un nouveau groupe de couleurs. Je vais le garder en tant qu'œuvre sélectionnée, Convertir processus en Global et je vais l'appeler BikeBook. Cela nous permet d'avoir toutes ces couleurs dans nos échantillons. Nous pouvons les supprimer et aller de l'avant et commencer à appliquer la couleur. J' ai donc développé cette palette basée sur la photographie de la route. Donc je vais aller de l'avant et placer cette photo dans mes fils. Je vais le clipser et je peux le positionner comme je veux. Alors, n'hésitez pas à déplacer ce texte si vous le souhaitez, si vous avez l'impression qu'il ne fonctionne pas avec votre photo. Donc, je vais commencer par appliquer le violet le plus foncé à certains de ces panneaux sur la page et le premier suivant la photo aidera à définir le ton pour le jeu de couleurs pour le reste de la page. C' est en fait l'une des premières couleurs qu'un utilisateur va voir lorsqu'il visite un site. Donc, ça va faire une grande impression. Vous ne voulez pas vraiment enterrer vos principales couleurs de marque trop loin sur la page. Donc, j'ai fait mon texte blanc pour m'assurer que j'ai un bon contraste et maintenant nous allons défiler vers le bas et faire la même chose à ce panneau comment faire. Briser la couleur aidera à attirer votre œil de chaque section à la suivante et à l'empêcher d'avoir l'air trop ennuyeux. Donc, évidemment, ne vous inquiétez pas trop de l'un des éléments gris sur le dessus encore. Nous voulons jeter les bases et laisser tout se mettre en place à la fin, et si ce n'est pas le cas, nous pouvons toujours le modifier plus tard jusqu'à ce que nous soyons heureux. Encore une fois, je vais sauter cette section avec les formulaires. Je crois que je les veux en blanc. Donc, je vais appliquer ce violet à nouveau sur ce panneau de localisation. Donc, fondamentalement, nous avons trois sections principales avec le même violet. Nous avons ce que c'est, comment ça marche et où vous pouvez le trouver. Ensuite, je vais appliquer 30 pour cent de ma couleur à l'en-tête de la page et au pied de page. Donc, dans ce cas, notre en-tête va être la barre de navigation. Je veux dire que l'en-tête inclut aussi la photo mais comme l'a déjà fait en couleur, j'ai besoin de quelque chose pour faire ressortir cette navigation. Donc, une astuce que j'aime essayer est d'ajouter un poids visuel à l'en-tête et au pied de page en choisissant une couleur plus foncée. Il aide à agir comme une ancre pour rendre la navigation remarquable sans regarder hors de l'endroit. Donc, je vais juste choisir le violet le plus sombre de ma palette qui est presque noir. Je pense que le noir pur sera trop dur sur ma page, sorte que le violet le plus sombre fonctionne en fait assez bien. Ensuite, je vais faire défiler jusqu'au pied de page et je ferai la même chose. Donc, à ce stade, nous devrions avoir nos deux premières couleurs de palette en place. Comme je l'ai dit tout à l'heure, ne vous inquiétez pas trop si vous n'étiez pas encore satisfait, vous y arriverez. Nous avons encore nos couleurs d'accent à ajouter, que nous en discuterons plus dans la prochaine leçon. 9. Assurer la cohérence: Donc, une chose importante à retenir lorsque vous implémentez des couleurs dans votre conception est de garder vos couleurs cohérentes. Fondamentalement, ce que cela signifie est de ne pas devenir trop fou avec votre palette et de faire de chaque bouton et lien sur la page une couleur différente. Lorsqu' un spectateur voit un changement de couleur, il peut l'interpréter comme un changement de message ou de signification. Donc, une bonne règle est si vous avez des propriétés partagées, utilisez une couleur similaire et si vos éléments de conception ont des idées différentes, peut-être utiliser des couleurs différentes. C' est la même chose que le codage couleur. Gardez la couleur cohérente de votre messagerie d'erreur. Gardez les liens leur propre couleur et si vous avez quelque chose qui devrait vraiment se démarquer sur une page comme un bouton d'appel à l'action, celui qui dit acheter maintenant ou inscrivez-vous maintenant, vous pourriez envisager de faire cela une couleur tout de son propre. Je vais montrer sur notre site. Donc, pour nos liens de texte, essayons de choisir une couleur et de coller avec elle. Je vais essayer notre violet moyen ici. Il n'y a pas trop de liens sur cette page, juste ici sur la bannière Instagram. Je vais garder mes liens soulignés pour les aider à se démarquer afin qu'il n'y ait pas d'erreur que ce sont des liens. Ensuite, je vais travailler sur les gros titres de la page. Donc, je vais choisir un violet plus foncé et l'appliquer à tout ce qui, à mon avis, devrait agir comme un titre tant que c'est sur un fond blanc. Je vais aussi faire ces étapes de la même couleur. Il aidera le lecteur le long et briser l'emplacement et leur faire des étapes claires. C' est une différence subtile, mais vous voulez la garder cohérente. Ensuite, je vais travailler sur chose probablement la plus ennuyeuse dans la conception web et c'est les formulaires. formulaires ne sont certainement pas les plus amusants au monde, mais je pense que leur donner un peu de TLC supplémentaire peut vraiment faire une énorme différence dans l'apparence globale de votre site Web. Donc, je vais mettre un peu de mon violet ici, mais je vais le rendre vraiment subtil. Donc, je vais utiliser le dernier violet que j'ai et je vais ajouter un peu plus foncé violet pour la bordure et je vais répéter cela pour le reste des éléments de formulaire. Je vais fondre tous ces textes de calendrier aussi et je vais agiter les zones d'en-tête de notre calendrier au même violet foncé que nous avons utilisé dans notre navigation. D' accord. Donc, comme vous pouvez le voir, j'ai gardé tout assez cohérent, mais tout a l'air assez violet. J' ai changé ça en violet et j'ai aussi donné quelques détails violets ici. Donc, faisons défiler vers le haut de la page et jetons un coup d'oeil à notre bouton d'appel à l'action. Donc, je veux vraiment que ça se démarque. Lorsqu' un client potentiel atterrit sur cette page, nous voulons qu'il le voie immédiatement, surtout s' sait déjà qu'il veut réserver un vélo et qu'il veut simplement le faire. Donc, je vais ajouter ma sarcelle plus foncée ici et je vais rendre mon texte blanc, qui me semble vraiment bien au-dessus de cette photo et nous allons descendre la page. Vous avez peut-être remarqué que j'ai passé ces illustrations et nous les ferons en dernier. Donc, ici sur le calendrier, faisons ce sélecteur de plage de dates aussi sarcelle. Il doit absolument se démarquer car il doit être clair quelles dates l'utilisateur choisit. Nous passons à nouveau et maintenant nous allons changer notre bouton de livre maintenant. Enfin, le dernier bouton d'envoi de message. Une autre astuce ici à garder à l'esprit est que si vous avez un site Web avec beaucoup de pages différentes, essayez de ne pas changer toute la couleur de la page, l'arrière-plan d'une page à l'autre comme si votre arrière-plan est rouge sur une page, puis bleu, puis un autre page pourpre. J' ai vu beaucoup de sites Web faire cela et seulement quelques-uns l'ont vraiment retiré. Je pense que la plupart du temps, il peut simplement affaiblir les impressions des téléspectateurs de votre marque. Si vous êtes une entreprise vraiment établie, vous pourriez être en mesure de vous en sortir, mais si vous travaillez simplement sur un site pour une startup et que chaque page est d'une couleur différente, vous enlevez une autre chose dont vos spectateurs se souviendront de vous par. C' est comme des magazines qui obscurcissent tellement le logo hors du modèle de couverture que vous ne pouvez même plus le lire. Je pense qu'ils peuvent se permettre de le faire parce que leurs lecteurs savent déjà ce qu'ils recherchent. Alors, n'oubliez pas d'essayer de le garder cohérent. 10. La couleur dans les icônes: Alors les gars, on est presque là. La dernière chose à finir sur notre page sont la façon d'illustrer une icône. Donc, je vais modifier mes couleurs ici dans le modèle de page complète, mais j'ai créé des fichiers Illustrator et Photoshop séparés pour ceux-ci si vous préférez les utiliser un à la fois. J' aime éditer le mien dans le contexte réel sur lequel ils vont être utilisés juste pour voir comment tout fonctionne ensemble, mais vraiment c'est à vous de décider. Donc, je vais m'assurer que ma nuance est à nouveau ouverte, et je vais appliquer la couleur de la même manière avant. Mais cette fois, je pense que je vais commencer par la sarcelle à la place. Nous n'avons pas vraiment beaucoup de choses sur notre page en ce moment, et je pense que c'est une bonne excuse pour commencer à en utiliser. J' aime m'assurer d'avoir au moins une instance de chaque couleur dans ma palette dans mes icônes si je peux. Je trouve que cela aide vraiment tout lier avec le schéma de couleurs si vous pouvez le refléter ici dans les icônes, aussi. C' est aussi génial parce qu'il suffit de penser au potentiel d'illustrations sur la route, de revenir en arrière ou de planifier l'expansion. Toutes ces illustrations pourraient être tirées ici et utilisées dans la publicité, dans des affiches ou autre chose, et elles vont déjà avoir toutes les couleurs de la marque là-dedans. Donc, voici mon design fini. J' ai fait quelques petits ajustements si nécessaire. J' ai ajouté un petit point culminant ici pour montrer la section sur laquelle nous sommes. J' ai ajouté une subtile petite bordure noire autour ces illustrations juste pour le faire se démarquer un peu plus de l'arrière-plan. J' ai également retiré le contraste du texte d'un 100 pour cent noir à environ 80 pour cent noir, comme je l'ai mentionné plus tôt dans la première classe, juste pour le rendre un peu moins tendu sur les yeux. Il va toujours avoir un bon rapport de contraste qui est la partie la plus importante. Tout est cohérent et tout est fini. N' oubliez pas que vous devrez peut-être faire des tests de couleur de fichier dans le navigateur. Nous faisons essentiellement une maquette pour les développeurs ou autres concepteurs à suivre, et vous ne pouvez faire que beaucoup dans le programme destiné à la conception d'impression comme Illustrator ou Photoshop. Donc, vérifiez toutes vos couleurs, en particulier les couleurs de texte dans le prototype de travail dans le navigateur juste pour être sûr. Je veux que vous vérifiiez votre design, faites une vérification finale avec Oracle couleur pour le cécité des couleurs, et vérifiez toutes les zones que vous pensez avoir un problème potentiel de contraste des couleurs. Lorsque vous êtes prêt, téléchargez une version finale du site Web du livre d'octets pour examen. Ils ont hâte de voir ce que vous allez trouver. 11. Guides de style: Donc, les gars, vous avez livré votre projet, mais nous avons encore quelques choses à parler. Ce qui arrive à votre palette une fois votre design terminé peut être tout aussi important que ce qui se passe avant et pendant votre prise de décision. Alors, combien d'entre vous ont travaillé avec un autre designer ou un développeur et vous venez de leur remettre une maquette finie, et vous revenez deux semaines plus tard et tous vos choix de couleurs sont complètement faux ? Vous semblez familier ? Je pense que nous avons tous été là à un moment ou à un autre, mais il y a plusieurs façons d'empêcher ce genre de choses de se produire. Le plus important est de créer un guide de style pour les autres personnes impliquées dans votre projet à suivre. Un guide de style traditionnel est généralement produit par une agence de publicité et il est destiné à couvrir les règles et les lignes directrices relatives à l'utilisation de toute la succursale. Cela peut inclure tout ce qui va de la taille du logo à l'emplacement du logo, comment utiliser la photographie, quel type de polices vous devez utiliser et comment la couleur doit être utilisée. Habituellement, ces documents finissent par être une énorme pile de papier. Une fois, j'ai reçu un guide de style de 50 pages sur mon bureau pour une seule marque. Les guides de style sont de plus en plus courants dans la conception web de nos jours, mais ils sont généralement très différents des guides traditionnels pour l'impression. Beaucoup de guides de style ont des choses comme des modules réutilisables, extraits de code et des modèles auxquels les développeurs peuvent se référer, à utiliser sur tout un site Web. C' est un très célèbre de Starbucks sorti il y a quelques années. Je pourrais parler de guides de style en détail pour toujours, mais cela prendra probablement une toute nouvelle classe Skillshare. Donc, si l'un d'entre vous est vraiment sérieux au sujet de la conception web, je recommande fortement de lire un livre d' Anna Debenham appelé le Guide de poche pour les guides de style front-end. C' est un petit livre génial. Elle vous enseigne à peu près tout ce que vous voulez savoir sur la création de guides de style pour le web. Mais pour ce cours, nous allons juste vous parler de la façon de préparer vos choix de couleurs pour d'autres développeurs et designers. Donc, voici un fichier très basique que que je me moquais que je pourrais envoyer à un développeur. Ce n'est pas trop détaillé, mais cela peut suffire si vous travaillez sur un petit site comme BikeBook. J' aime inclure des valeurs RVB et des codes hexadécimaux pour chaque nuance. Si vous savez que vos couleurs seront utilisées dans les impressions et que vous n'avez pas besoin d'encres spéciales telles que les encres Pantone, vous pouvez également inclure des valeurs de couleur CMJN. J' aime aussi étiqueter les couleurs si elles ont des fonctions très spécifiques. Donc, celui-ci doit être utilisé pour les éléments de navigation. Celui-ci est utilisé pour les états de vol stationnaire, et tout ce dont vous avez besoin. Vous pouvez également exporter votre nuance en tant que fichier ASE et l'envoyer avec votre maquette pour que d'autres concepteurs et développeurs puissent le télécharger. Vous pouvez donc ouvrir votre palette de nuances ici dans Illustrator. Si vous sélectionnez ce dossier de vos échantillons et accédez à la bibliothèque de nuances enregistrées en tant qu'ASE, vous pouvez alors l'appeler Bikebook.ase, et vous pouvez ajouter un lien vers ce fichier dans votre guide de style, vous pouvez l'envoyer à d'autres concepteurs ou tout ce que vous voulez. Si vous n'avez pas de simulation, vous pouvez utiliser le site Web Adobe couleur pour exporter votre palette à la place. Gardez à l'esprit cependant que les développeurs apprécient vraiment, vraiment si vous leur donnez juste les numéros de valeur de couleur. Cela rendra les choses beaucoup plus rapides pour eux, sorte qu'ils n'ont pas à aller dans Photoshop, Illustrator, ou n'importe quelle application que vous avez utilisée et obtenir les numéros de couleur pour eux-mêmes. Spectrum peut en fait gérer cela pour vous aussi. Essayez d'exporter votre palette et de l'enregistrer en tant que fichier CSS. Il y a différentes options ici pour CSS, pour Sass, PNG. Nous faisons glisser ce fichier dans notre éditeur de texte. Vous pouvez voir que toutes les couleurs sont prêtes à l'emploi. En outre, si vous connaissez le HTML et le CSS de base, vous pouvez simplement construire votre propre guide de style fonctionnel, qui est la meilleure option. Vous pouvez collaborer sur le guide avec d'autres développeurs et le tenir à jour chaque fois que quelque chose change ou que de nouvelles couleurs de marque sont ajoutées. J' aime vraiment ce guide de base de MailChimp, qu'ils ont rendu public sur leur site Web. C' est simple, mais ça fait le travail. Toutes les couleurs sont listées. Vous pouvez copier le code couleur ou télécharger l'ASE pour le charger dans Illustrator ou Photoshop. Donc, j'espère que vous avez déjà appris beaucoup de choses sur la couleur, et pas seulement pour le web, mais pour le travail de design et d'illustration que vous pourriez faire aussi. Une des plus grandes choses que je peux souligner comme après avoir fait ce cours est que, choisir la couleur est plus un art qu'une science. À moins que vous ayez déjà un œil incroyable pour choisir des palettes qui vont ensemble, il faudra beaucoup de pratique à améliorer, comme tout autre dans le design. Joseph Alvarez était un grand croyant en cela aussi. Il avait l'habitude d'amener ses élèves à apprendre en le faisant. En fait, mettre les couleurs les unes à côté des autres et voir comment elles interagissaient. Il ne suffit pas d'apprendre la science et la théorie derrière elle. Tu dois juste le faire. Si vous n'avez pas la chance de travailler avec la couleur aussi souvent, essayez de l'adapter à votre journée par d'autres moyens, même si cela signifie penser très dur à jeter une tenue ensemble. Pensez-y lorsque vous faites des rénovations domiciliaires, décorez vos appartements ou que vous allez dans un magasin. Pensez-y tout le temps. Commencez un petit tableau Pinterest d'inspiration couleur. Il suffit de prendre des photos de jeux de couleurs que vous aimez vraiment, puis jetez un oeil et essayez de comprendre pourquoi il semble bon ensemble. N' oubliez pas qu'il est tout à fait normal d'utiliser des outils pour vous aider. C' est pour ça qu'ils sont là. Si vous n'êtes pas satisfait de votre projet, revenez-y à une date ultérieure. Revenons-y dans une semaine, ou un mois, et regardez-le à nouveau avec un esprit clair. Vous pourriez voir exactement pourquoi une certaine couleur vous dérangeait, et vous pourriez être en mesure de le réparer tout de suite. Tout cela fait partie du processus créatif. Donc, j'espère que vous vous amusez avec vos nouvelles compétences en couleur, et merci de suivre le long. 12. Découvrir la conception sur Skillshare: façon.