La couleur sur le web I : Concevoir des palettes cohérentes

1. Bande-annonce: Dans la première partie de cette série sur la couleur sur le web, nous apprendrons les premières étapes pour créer une palette harmonieuse pour un site Web. Vous commencerez par le mémoire client à suivre comme un vrai projet. Nous travaillerons pour une compagnie fictive appelée Bike Book. Une entreprise de location de vélos avec une touche. Parce que nous nous concentrerons uniquement sur la couleur, le balisage du site Web vous sera fourni. Tout ce dont vous avez besoin est une copie de Photoshop ou Illustrator à suivre avec les leçons. Nous allons passer en revue les termes de couleur de base, apprendre des conseils de recherche, parler du message et de la signification des couleurs, et comprendre comment choisir les couleurs appropriées pour votre public. Ensuite, nous sauterons et nous créerons nos palettes en fonction des compétences fondamentales que nous avons acquises. Cette classe s'adresse à la fois 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 deux granulés harmonieux pour votre projet, et vous serez prêt à passer à la deuxième classe, où nous apprendrons sur l'accessibilité des couleurs, les tests, guides de style et comment implémenter notre palette dans le Site web du livre. 2. Une palette de couleurs: Hé les gars. Merci de m'être inscrit à mon Skillshare. Il s'agit en fait d'une série de deux classes, sur le flux de travail couleur dans la conception web. Donc, la première classe va se concentrer sur le développement d'une palette de couleurs pour un site Web et la deuxième classe, ce que j'espère que vous le faites aussi, va se concentrer sur la mise en œuvre effective de votre palette dans un design de site Web. Donc, la bonne nouvelle est que le design est déjà fait pour vous. Donc, pour ces cours, on va juste se concentrer sur la couleur. Je pense que l'une des raisons pour lesquelles beaucoup de designers luttent avec la couleur, c'est parce qu'ils ont tendance à le faire à la volée pendant qu'ils travaillent sur la mise en page ou essaient de choisir des photos ou de chercher la police parfaite. Tu sais ce que c'est. Vous êtes simplement tenté de jeter de la couleur tout au long du chemin sans trop planifier à l'avance. Sachez juste que vous n'êtes pas seul dans votre lutte. C' est tout à fait normal et j'espère que vous trouverez ces classes utiles dans vos projets. À la fin de cette classe, vous aurez deux palettes de couleurs de travail, et à la fin de la deuxième classe, vous prendrez une de ces palettes et l'implémenterez dans la conception. Donc, avant d'entrer, je veux passer en revue quelques termes de couleur de base que vous devriez tous connaître. Beaucoup d'entre vous vont déjà les connaître et c'est tout à fait cool, mais un examen rapide ne fera pas mal d'autant plus que je vais les utiliser tout au long du cours. Ainsi, les couleurs réellement créées à travers différentes longueurs d'onde de lumière. Lorsque ces longueurs d'onde sont réfléchies sur une surface ou émises sous forme de lumière, elles sont interprétées par notre système optique comme de la couleur. Les longueurs d'onde les plus longues sont les rouges, les longueurs d'onde les plus courtes sont les violettes et toutes les autres longueurs d'onde composent les couleurs entre les deux. La possibilité de distinguer les couleurs repose sur trois attributs : teinte, saturation et légèreté. Donc, la teinte est une propriété de couleur et c'est ce que nous faisons référence quand nous disons que quelque chose semble rouge, jaune, vert, bleu ou violet comme les couleurs que nous décririons dans un arc-en-ciel. saturation se réfère à la force d'une teinte, où la teinte la plus saturée est la couleur la plus pure et la moins saturée apparaît grise. légèreté est également appelée valeur et qui se réfère à la légèreté ou l'obscurité de la couleur et est obtenue en ajoutant du blanc ou du noir. L' ombre est obtenue en ajoutant du noir pour augmenter l'obscurité et une teinte est obtenue en ajoutant du blanc pour augmenter la luminosité. Donc, les couleurs comme le brun, ce sont en fait des nuances plus sombres d'oranges et jaunes et les couleurs comme le rose sont en fait des teintes plus claires de rouge. Alors, pensez à quand vous étiez enfant à l'école et vous avez probablement appris que le rouge, le bleu et le jaune, étaient les couleurs qui constituaient toutes les autres couleurs. Droit ? En fait, c'est un peu plus précis que ça. C' est ce qu'on appelle cyan, magenta et jaune. Ils ne sont pas tout à fait pareils. Ces couleurs avec l'ajout de noir, composent le modèle de couleur soustractive qui est la base d'encre. Donc, on l'appelle soustractive parce que l'encre soustrait en fait la quantité de lumière réfléchie sur une feuille imprimée. Il est largement utilisé dans l'impression offset et nous n'allons pas approfondir cela aujourd'hui parce que, en tant que concepteurs web, notre travail vit dans le modèle de couleur additive. Le modèle de couleur additif est basé sur la lumière et qui se compose de couleurs primaires rouges, vertes et bleues et ils se mélangent pour créer le spectre complet. Ainsi, les écrans d'ordinateur, les téléviseurs, les projecteurs, les scanners de tablettes, les appareils photo numériques, ce sont tous des appareils RVB. Donc, voici un fait assez étonnant de la part du Dr Jay Knights, chercheur en vision des couleurs à l'Université de Washington. Il y a quelques années, il a déclaré que la personne moyenne peut distinguer environ un million de teintes différentes et certaines personnes peuvent distinguer encore plus que cela. J' aime penser que c'est pourquoi la couleur peut être une partie si difficile du design pour beaucoup d'entre nous et il est difficile de savoir par où commencer parfois. Donc, dans la prochaine leçon, je vais vous apprendre comment réduire vos options pour rendre les choses beaucoup moins effrayantes. 3. Le projet: Parlons du projet sur lequel vous allez travailler. Nous allons développer une palette de couleurs pour une startup fictive appelée Bike Book. L' objectif de Bike Book est donc de lancer un service de location de vélos à partir de New York, San Francisco et Portland, et de s'étendre à d'autres villes plus tard. Bike Book est un peu différent du magasin de location de vélos moyen. Il ne transporte pas une grande variété de vélos, juste ceux qui sont élégants, simples et beaux lorsque vous les conduisez. Ils ciblent les jeunes cyclistes urbains soucieux de la mode, plutôt que les touristes occasionnels qui cherchent juste un moyen de voir la ville. Certains des vélos qu'ils louent sont de la Mission Bicycle Company, PUBLIC Bikes, et ils ont également des vélos vintage restaurés. Ainsi, les clients peuvent pré-réserver un vélo dans une ville de leur choix sur leur site Web à l'adresse bikebook.me, ce qui n'est pas vraiment une vraie URL. Ensuite, ils ont pu récupérer le vélo au magasin et le retourner à la fin de la période de location. Donc, je veux que vous lisiez vous-même le mémoire. Vous pouvez le télécharger sur la page de leçon avec les autres modèles dont nous aurons besoin pour ce projet. Donc, vous pourriez penser que la lecture du mémoire n'est pas vraiment nécessaire, mais c'est le cas, et ce devrait être la première étape de tout projet que vous faites. Il peut être vraiment tentant de sauter sur un ordinateur tout de suite et de commencer à expérimenter, mais si vous lisez le mémoire en premier, vous aurez une meilleure idée de ce que votre client recherche. Je vous recommande même de lire le mémoire et de faire vos recherches un jour, puis attendre le lendemain après que vous ayez eu le temps que cette information s'insère avant d'entrer dans les choses amusantes. S' il y a quelque chose dans le mémoire dont vous n'êtes pas sûr, le moment est venu de demander des éclaircissements au client. Poser des questions, comprendre le projet le mieux possible à cette étape aidera certainement à éviter tout malentendu dans les étapes ultérieures. Vous aurez l'air plus préparé et plus confiant si vous avez une justification solide derrière vos décisions. Je parie que beaucoup d'entre vous ont été là avec un client et qu'ils veulent changer ce beau bleu que vous choisissez pour quelque chose comme le rouge vif parce que c'est leur couleur préférée ou quelque chose comme ça. Mais, si vous êtes en mesure d'expliquer la raison spécifique pour laquelle vous avez choisi ce bleu, vous aurez beaucoup plus de facilité à convaincre ce client de faire confiance à votre expertise. Donc, sinon, ça va juste être votre couleur préférée par rapport leur couleur préférée et ils vont gagner à chaque fois. Alors, allez-y et lisez le mémoire et jetez un oeil à la conception du site Web inclus et jetez un oeil au logo lorsque vous avez terminé. 4. Directives de marque: Donc, la première chose vous devriez faire chaque fois que vous démarrez un nouveau projet est de vérifier les directives de marque existantes que le client pourrait avoir. Les lignes directrices sur l'image de marque ont parfois des noms différents. La plupart des concepteurs et développeurs web les appelleront des guides de style, et si vous venez d'un fond d'impression comme moi, vous pouvez utiliser le terme manuel des normes graphiques. Donc, ces manuels peuvent en fait aller d'être super simples et juste définir comment et où un logo peut être utilisé, mais d'autres manuels peuvent être beaucoup plus détaillés. Donc, nous allons parler plus de ceux de la deuxième classe. Ceci est un exemple de Skype. Les couleurs de leurs marques sont clairement définies, donc si vous êtes un designer travaillant pour Skype, vous aurez besoin d'un argument assez fort pour introduire de nouvelles couleurs si elles ne font pas partie de ce guide. Donc, dans notre cas, tout ce que nous avons est le logo du bikebook en niveaux de gris, et si vous lisez le mémoire, vous apprendrez que le logo n'a pas besoin d'utiliser du noir ou du gris. Vous pouvez l'utiliser de la manière qui vous semble la plus appropriée, condition que vous ne modifiez pas la structure du logo lui-même. Donc, cette situation rend notre choix de couleur un peu plus difficile puisque nous n'avons aucune direction à partir de laquelle travailler. Mais je vais vous montrer comment trouver un point de départ dans la prochaine leçon. 5. Message et signification des couleurs: Donc, il est important de se rappeler que la couleur est une méthode de communication incroyablement puissante. Et je dirais que la plupart des gens ne réalisent pas vraiment les effets psychologiques que cela pourrait avoir sur eux. Donc, vous avez peut-être entendu des histoires sur les astuces que peuvent faire les designers d'intérieur et les architectes pour influer sur la façon dont les gens se comportent à l'intérieur d'un espace ou d'un magasin. Ainsi, les restaurants de restauration rapide utilisent parfois des oranges, des rouges et jaunes dans leur intérieur pour rendre l'environnement un peu plus inconfortable, et cela aide les gens à bouger pour faire de la place aux nouveaux clients. Donc, j'aime vraiment cette citation de Manet. « La couleur est une question de goût et de sensibilité », et c'est vrai. La couleur porte toutes sortes de messages et parfois ils se contredisent complètement. Mais il y a des moments où certaines palettes seront plus appropriées à utiliser que d'autres. Le bleu est une couleur que nous pourrions associer au sentiment de tristesse ou de dépression et nous voyons rouge quand nous sommes en colère et nous pouvons être verts avec envie quand nous sommes jaloux. Mais en même temps, le bleu est souvent associé à la technologie et la communication ou industries professionnelles d'entreprise et le rouge est la couleur de l'amour et de la passion. Et le vert peut représenter des attitudes positives, la nature et une bonne santé. Nous devons donc comprendre le message que nous devons transmettre dans ce projet. Comment voulez-vous que le public se sent ? Quel genre d'adjectifs décrivent réellement ce sentiment ? Donc, vous allez trouver la plupart des réponses dans la section tonalité du mémoire. Donc, j'ai une copie du mémoire ici et j'ai besoin que vous preniez note que c'est un peu différent du vôtre. Donc, je veux que vous fassiez votre travail en fonction de vos informations dans le mémoire. Donc, nous devrions finir avec des résultats assez différents à la fin de la classe. C' est pourquoi je ne peux pas insister assez sur le fait que c'est important pour vous de le lire. Donc, voici la section de ton de mon mémoire. BikeBook se perçoit comme étant détendu, confortable et cool. Pensez à des promenades paresseuses le week-end pour brunch et traîner dans les parcs. du vélo à partir de BikeBook devrait avoir l'impression d'être membre d'un club exclusif. J' aime chercher des mots-clés dans le mémoire et les noter dans mon carnet de croquis ou les souligner. Donc, nous avons des choses comme détendu, confortable, et cool, paresseux, peut-être décontracté pourrait être un meilleur mot là-bas, exclusif. C' est un très bon. Je vais continuer à passer en revue les autres sections du mémoire et ajouter plus à ma liste et je veux que vous fassiez la même chose avant de passer à autre chose. 6. Public cible: Maintenant, il est temps de parler de notre public cible, qui est un groupe très spécifique de personnes qui seront ciblées par la publicité du client. Un public cible est généralement composé de données démographiques comme l'âge, le sexe, la langue culturelle, les emplois, la situation financière et bien plus encore. Alors, rappelez-vous quand vous envisagez le public cible dans votre projet de ne pas peindre tout le monde avec le même pinceau. est probablement pas une bonne idée de lire que le public cible est adolescentes ou quelque chose et de rendre automatiquement toutes vos affaires roses. Tu dois vraiment faire attention à ça. Donc, en gardant cela à l'esprit, nous pouvons parler de la façon dont la couleur peut vraiment affecter votre public. L' âge est vraiment grand. Donc, si vous concevez quelque chose pour les enfants ou les pré-adolescents. Votre schéma de couleurs va probablement sembler beaucoup différent de quelque chose que vous conceviez pour les personnes âgées. Vous allez probablement vouloir montrer quelque chose d'un peu plus accrocheur. Pas nécessairement super fou, mais juste plus excitant et accrocheur que si vous conceviez quelque chose pour les personnes âgées. Les différences culturelles sont aussi quelque chose à penser. Purple est un très bon exemple ici. Ainsi, le pourpre aux yeux des cultures occidentales pourrait être associé à la royauté, mais il a aussi des connotations fortes avec la mort et le deuil et certaines cultures européennes catholiques. McDonald's est un excellent exemple d'une entreprise qui adapte sa stratégie marketing et sa conception pour différents pays. Voici trois couleurs différentes des sites Web actuels de McDonald's, Canada, le Japon et la France. Le Français est certainement un départ énorme. Vous devriez également penser au revenu et à la situation d'emploi de votre auditoire. Est-ce qu'un produit que nous concevons pour un article de luxe ou un service de luxe ? Ou est-ce abordable pour tout le monde, mais il doit encore ressembler à un peu cher. Il peut être tout à fait approprié de faire ce look bon marché si c'est l'objectif visé, cela ne signifie pas qu'il doit avoir l'air moche. Alors, pensez simplement à des entreprises comme Target. Je pense que Target fait un très bon travail de ressembler à un magasin abordable mais ils ont toujours un bon design et bien sûr IKEA est de la même façon. Donc, je vais jeter un coup d'oeil à mon mémoire et lire la section du public cible et encore une fois prendre note d'un mot clé qui me semble utile. Je veux que vous fassiez la même chose avant de passer à autre chose. 7. Recherche sur la concurrence: Donc, vous êtes en train de constituer votre liste de mots et d'inspiration pour votre palette et vous avez peut-être déjà quelques couleurs à l'esprit que vous pensez vouloir essayer dans votre projet. Mais avant d'en arriver à cette étape, jetons un coup d'oeil à nos concurrents. Donc, l'une des pires choses qui puisse arriver est de se retrouver avec une palette incroyablement similaire à un concurrent direct et qui peut causer des ennuis au client et à vous en tant que concepteur. Certaines entreprises vont en fait jusqu'à la couleur de copyright, Tiffany, la société de bijoux a en fait leur marque de commerce de couleur bleue aux États-Unis. Est un nombre Pantone réel, numéro 1837, mais il n'est pas imprimé dans les livres Pantone. Ce qui, je pense, est assez fou. Cadbury violet est également une marque déposée, UPS brun, T-Mobile rose, et bien sûr Coca-Cola, mais ce n'est pas vraiment une surprise. Heureusement, notre client a fait la plupart des recherches pour nous et ils ont énuméré certains concurrents dans le mémoire. Donc, je vais jeter un oeil à un seul pour l'instant, un concurrent new-yorkais appelé RentBike NYC. Donc, la première impression de ce site est qu'il est évidemment très vert. Je vais juste jeter un coup d'oeil autour, certainement beaucoup de vert. Probablement pas grand-chose d'autre qui se passe ici en couleur en fait. Donc, je vais devoir garder cela à l'esprit que je ne choisirai probablement pas cette nuance de vert de ma couleur primaire au moins. Donc, je veux que vous regardiez d'autres concurrents dans le dossier. Prenez quelques notes avant de passer à la partie amusante qui est en fait la construction de notre palette. 8. Schémas de couleur: J' espère que vous avez fini vos recherches et que vous l'avez laissé tomber un peu avant de passer à autre chose. Maintenant, nous allons creuser et apprendre à choisir notre palette de couleurs. Donc, ce que j'aime faire ici, c'est de saisir mon carnet de croquis et de jeter un oeil informations que j'ai recueillies sur mon public cible et sur le message que je dois transmettre. La première étape que j'aime faire lors du choix de ma palette est de déterminer si le design doit être plus lumineux audacieux ou plus doux et plus moelleux. Donc, dans mes notes, j'ai des mots comme détendu, confortable, cool, premium, élégant. Donc, ce genre de m'aide à décider que la couleur devrait être un peu plus douce et plus modérée. Donc, je ne pense pas que je vais utiliser beaucoup de couleurs saturées super lumineuses ici. Donc, cela aide à réduire un peu mes choix, mais rappelez-vous que vous pouvez avoir des mots légèrement différents dans votre mémoire différent, surtout dans la section tonalité. Alors, assurez-vous de prendre des notes. De là, nous pouvons commencer à choisir des teintes appropriées et à construire une palette harmonieuse. Donc, c'est là que ça peut devenir un peu intimidant, mais ne vous inquiétez pas, il y a des astuces et des outils pour vous aider. Donc, je vais parler de trois types communs de jeux de couleurs que vous pouvez utiliser comme point de départ ; analageux, triade, et split gratuit. Les combinaisons analogues impliquent la sélection d'une couleur primaire et des deux couleurs adjacentes sur une roue de couleur. Ces types de couleurs reflètent des longueurs d'onde similaires de lumière et sont généralement harmonieuses. Les schémas de triade impliquent la sélection de trois teintes, espacées équidistantes les unes des autres sur la roue de couleur créant un triangle. Les schémas complémentaires fractionnés impliquent le choix d'une teinte primaire et de deux teintes secondaires adjacentes au complément de teintes sur la roue de couleur. Ne vous inquiétez pas si ça n'a pas de sens pour vous. Je vais vous montrer quelques astuces pour vous aider à mettre ces schémas à utiliser après la prochaine leçon sur le contraste des couleurs. 9. Contraste de couleurs: Donc, si l'un d'entre vous est illustrateur ou artiste, vous saurez probablement que l'une des clés les plus importantes d' une bonne peinture est l'utilisation efficace du contraste. contraste peut créer une mise au point dans la hiérarchie, et il peut attirer l'attention sur les parties les plus importantes d'une peinture ou d'un dessin. Le contraste est également l'un des facteurs les plus importants dans l' augmentation de la lisibilité pour une personne ayant une déficience visuelle. Nous parlerons plus des déficiences visuelles dans la deuxième classe de cette série. Donc, ne vous inquiétez pas trop à ce sujet maintenant. contraste des couleurs peut être obtenu de différentes manières, certaines étant plus efficaces que d'autres. Donc, je vais vous montrer quelques exemples. Le contraste entre les couleurs claires et foncées est l'attribut le plus important lors de la création d'un contraste efficace. Essayez de ne pas utiliser des couleurs qui ont une légèreté similaire l'une à côté de l'autre dans un design. Vous pouvez voir ici que les couleurs rouge et vert sur la gauche partagent une légèreté similaire, et qu'elles ne fournissent pas assez de contraste par elles-mêmes sans faire quelques ajustements. La version à droite est beaucoup plus efficace. contraste peut également être obtenu en choisissant couleurs complémentaires qui sont opposées les unes aux autres sur la roue de couleur, mais une exception est bien sûr, rouge et le vert, ce qui peut causer des problèmes pour les personnes atteintes de cécité des couleurs. Comme vous l'apprendrez dans la deuxième partie, il est préférable de les éviter autant que possible. Les paires de couleurs complémentaires offrent généralement un meilleur contraste que le choix des teintes adjacentes sur la roue. Le contraste existe également entre les couleurs froides et chaudes sur la roue de couleur. Donc, si nous prenons cette roue de couleur et la divisons en couleurs fraîches comme les bleus, violets et les verts, puis comparons les couleurs chaudes comme les rouges, les oranges et les jaunes. Choisir une nuance sombre d'une couleur fraîche jumelée à une teinte légère d' une couleur chaude fournira un meilleur contraste que deux couleurs chaudes ou deux couleurs fraîches. contraste de saturation se produit lorsqu' une couleur terne est placée à côté d'une couleur saturée plus intensément. Mais, cette technique n'est pas aussi efficace que le contraste clair et sombre, donc je ne recommande pas de compter sur elle pour informations importantes comme la copie ou les éléments de navigation. Donc, si vous avez regardé les fichiers du projet, vous remarquerez probablement qu'ils sont tous en niveaux de gris. Donc, l'une des astuces les plus faciles pour obtenir un bon contraste est de travailler en niveaux de gris avant d'introduire n'importe quelle couleur du tout, même si vous avez déjà votre palais à l'esprit. Si vous pouvez rendre votre design agréable en niveaux de gris, il y a des chances que cela fonctionne lorsque vous introduisez la couleur, et il aura de meilleures chances de conserver le contraste requis par un public plus large. Donc, c'est un concept pour un site web que j'ai fait, et je savais que mon palais allait utiliser le rouge, noir et le blanc dans ma tête, mais je n'avais pas à être trop accroché sur les emplacements et où toutes ces couleurs allaient aller pendant que j'étais travailler sur la mise en page, et cela a vraiment accéléré mon flux de travail à la fin. Vous regardez l'essai de cette méthode d'ajout de couleur à une maquette en niveaux de gris dans la deuxième classe de la série. Mais en ce moment, nous sommes prêts à sauter dans quelques mains sur le travail. 10. Outils de schéma de couleur: Donc, j'ai réalisé que j'ai laissé tomber beaucoup de connaissances sur vous dans la première partie de ce cours, et c'est très bien si vous ne comprenez pas tout de suite. La couleur est certainement un sujet compliqué et nous pouvons tous utiliser un peu d'aide pour choisir nos couleurs. Donc, il n'y a absolument aucune honte à utiliser des outils pour guider et je sais que je l'utilise tout le temps. Il y a beaucoup d'outils que vous pouvez utiliser pour réduire au minimum les conjectures qui entrent dans le choix d'une palette. Certains que vous devez payer et d'autres sont gratuits. Donc, une application que je vais vous montrer s'appelle Spectrum et c'est une application payante disponible pour macOS. Je vais également vous montrer un appelé Adobe Kuler, qui est disponible en ligne dans le navigateur. Donc, je vais ouvrir Spectrum ici et te montrer. Je vais construire un jeu de couleurs basé sur les informations que j'ai recueillies dans ma version du mémoire. Donc, je veux quelque chose d'un peu calme, relaxant, cool mais toujours un peu premium à la recherche. Je ne veux pas que ça ressemble à un site Web de style torus. C' est donc le panneau principal où vous pouvez modifier vos couleurs et voici un onglet où vous pouvez voir toutes les palettes que vous avez enregistrées. Spectrum est également livré avec certaines de ces palettes prédéfinies que vous pouvez jouer avec. Donc, je vais faire une nouvelle palette ici et l'appeler BikeBook. Je vais cliquer sur Modifier pour revenir à l'écran. Maintenant, cela fait un étrange schéma de couleurs par défaut, mais je vais vous montrer comment nous pouvons rapidement corriger cela et le rendre beaucoup mieux. Donc, ici, en bas de l'écran, vous pouvez voir des exemples de différents jeux de couleurs que vous pouvez utiliser pour les guides. Donc, je vais commencer par quelque chose de plus simple et choisir analogue. Je vais supprimer quelques-uns de ces échantillons juste pour le rendre un peu plus facile à utiliser en ce moment. Ainsi, chacun de ces trois échantillons est mappé à l'un de ces points sur la roue. Si vous faites glisser ces points, les couleurs vont changer. Plus vous les retirez, plus ils sont saturés, et ils ont l'air un peu bizarres. Mais plus vous arrivez vers le centre, ils deviennent un peu moins saturés et vous pouvez déjà voir les couleurs qui semblent beaucoup plus prometteuses. Donc, si vous retirez ce nœud, il élargira cette sélection, puis il inclura une plus grande gamme de couleurs. Donc, je pense que je veux quelque chose d'un peu terreux, peut-être quelque chose comme ça. J' aime ça. Je pense que c'est doux et relaxant et facile pour les yeux, mais je ne suis pas sûr si je suis heureux avec ce brun, donc je peux cliquer sur ceci et je peux effectivement utiliser ces curseurs ici pour rendre cela un peu plus brun si j'aime, un peu plus rougeâtre et changer la saturation. Je peux changer la valeur. Donc, si je retourne à mon onglet ici, je peux voir qu'il a fait ma palette. Je peux le dupliquer si je veux. Retournez à éditer celui-ci, puis nous savons que nous avons toujours des sauvegardes pour travailler avec. Donc, si je veux faire des nuances et tendues de chacune de ces couleurs, ce que je vais faire est de dupliquer chacune et de faire trois de chaque couleur. Ensuite, je peux commencer à négocier et à faire une teinte de chaque couleur jusqu'à ce que je sois heureux. Évidemment, vous allez passer plus de temps que moi pour cette démonstration, mais vous comprenez l'idée. Si vous faites une erreur, vous pouvez toujours échanger votre couleur et c'est tout. Si vous n'avez pas de Mac, vous pouvez également utiliser Adobe Kuler qui est orthographié K-U-L-E-R. Donc, vous pouvez simplement aller à kuler.adobe.com. Vous devrez créer un compte si vous voulez sauver l'un de vos palais, mais vous pouvez simplement jouer avec si vous voulez. Donc, vous remarquerez que cela fonctionne d'une manière très similaire à Spectrum. Je peux choisir mon jeu de couleurs ou ma règle de couleur comme ils l'appellent et je peux faire glisser le nœud en surbrillance au milieu autour de la roue pour changer ma palette. Donc, une chose à propos de la couleur est, vous pouvez réellement copier cette URL ou la mettre en signet et y revenir plus tard. Pour l'instant, je veux que vous jouiez avec l'un ou les deux de ces outils et que vous créez une palette qui vous semble appropriée pour le site BikeBook. 11. Utiliser des photos: Maintenant que vous avez une palette conçue, nous allons faire une deuxième option en utilisant une photo pour l'inspiration. Donc, la clé ici est de choisir des photographies qui ont un schéma de couleurs évident de leur propre. Donc, si la photo est incroyablement occupée avec toutes sortes de couleurs sursaturées folles qui se produisent, votre palatte va probablement regarder de la même façon, et ce ne sera pas très joli. Donc, je vais ouvrir le dossier photo fourni ici, qui sera également dans vos fichiers. Je vais choisir une photo qui me semble appropriée pour mon jeu de couleurs. Encore une fois, je veux que mon plan ait l'air un peu modéré, un peu apaisant. Alors, regardons ce qu'on a ici. Donc, j'aime vraiment celle-là. Je pense que les couleurs ont l'air différentes. Je pense que beaucoup de ces tons violets doux et bruns naturels en 10 couleurs pourraient très bien fonctionner. Certaines de ces autres photos peuvent être plus appropriées pour votre version du projet ou vous pouvez supprimer complètement la couleur. Vous pourriez penser qu'une seule photo couleur monotone plus approprié. Vous avez ici la liberté de choisir ce que vous voulez ou de modifier les photos comme vous le souhaitez, à condition que vous estimiez que c'est approprié pour le client. Donc, je vais ouvrir Illustrator pour ça. Vous pouvez utiliser Photoshop si vous le souhaitez ou vous pouvez même utiliser un sélecteur de couleurs et insérer les codes dans une feuille de style. Mais je vais utiliser Illustrator. Donc, j'ai ma photo placée ici avec des nuances noires en dessous. Je vais à nouveau diviser ces neuf couleurs en trois couleurs de base : une couleur primaire, une couleur secondaire, puis une troisième couleur pour les accents. Donc, je vais sélectionner les trois premiers échantillons. Je vais juste utiliser mon outil de pipette et commencer à échantillonner ma couleur primaire, qui, je pense, va maintenant être violet. Une chose à garder à l'esprit lorsque vous échantillonnez des couleurs à partir de photos, certains de ces pixels peuvent sembler un peu boueux. Donc, vous devrez regarder autour de vous et faire un peu de peaufinage pour vraiment obtenir la couleur dont vous avez besoin. Donc, je pense que c'est bon. Choisissez ma couleur secondaire de la même manière. Il suffit d'explorer autour de la photo un peu. En fait, ça a l'air plutôt bien Ensuite, pour ma couleur d'accent, il n'y a pas grand-chose dans le reste de la photo en termes de troisième teinte. Donc, je vais choisir un vert pour notre couleur d'accent. Donc, je vais juste passer ici et chercher un vert que je pense approprié. Maintenant, nous pouvons revenir en arrière et faire la même chose pour chacun. Faire une nuance. Faites une teinte plus claire jusqu'à ce que nous ayons exactement ce dont nous avons besoin. Maintenant, je vais vous dire que vous pouvez également tricher avec cette technique et utiliser le spectre ou la couleur pour charger une photo, et cela va extraire la palette pour vous. Alors, allez-y et jouez avec ces techniques et créez une deuxième option de palette qui vous semble appropriée pour votre projet. 12. Conseils et astuces: C' est maintenant un bon moment pour vous donner quelques conseils et des choses supplémentaires à considérer lors du choix de la couleur. Le premier est quelque chose que j'ai appris au fil des ans en étudiant la peinture et l'illustration. La même chose s'applique dans la conception. Les ombres ne sont pas noires. Il est bon d'utiliser une ombre grise ou noire si vous avez un fond gris ou blanc. Ça a l'air très bien. Mais dès que vous ajoutez une ombre sur un fond coloré, vous devez échantillonner la couleur de l'arrière-plan et la mélanger avec votre noir, en faisant une nouvelle couleur personnalisée pour votre palette. Voici donc ce que vous pourriez être tenté de faire lorsque vous choisissez des nuances dans Photoshop ou Illustrator. Vous pouvez choisir une couleur et choisir ces nuances plus sombres en suivant une ligne verticale droite vers le haut et vers le bas. Mais en réalité, les reflets et les ombres semblent beaucoup plus naturels si vous les choisissez dans le sélecteur de couleurs sur une courbe progressive vers le noir. Une autre chose que vous devriez penser est d'ajouter une nouvelle nuance pour le corps du texte dans votre palette. Donc, au lieu de rendre votre texte à 100 pour cent noir, essayez de le rendre 80 pour cent noir ou 90 pour cent noir, pour le rendre un peu moins dur sur les yeux. Nous parlerons plus du contraste dans la deuxième classe, mais une astuce comme celle-ci est bonne à penser à l'avance. Enfin, pensez à prendre votre choix de couleur totalement hors ligne. Beaucoup d'entre vous n'ont peut-être pas accès à une nuance pantone, ce qui est très bien parce que la plupart d'entre eux sont destinés à être utilisés pour la conception d'impression de toute façon. Mais si vous faites beaucoup de brainstorming en groupe, ou peut-être que vous montez beaucoup de planches d'humeur pendant vos recherches, allez chercher quelques éclats de peinture à l'atelier de peinture. Je ne veux pas dire les prendre tous, mais s'il y en a quelques-uns que tu aimes, ramene-les au studio des officiers, découpez-les et commencez à jouer avec eux. Parcourez les disques, les magazines, allez dans un magasin de tissus. Tant d'imprimés de tissu dans les motifs sont parfaits pour l'inspiration des couleurs. Vous ne savez jamais ce que vous pourriez trouver si vous pouvez juste rompre avec l'ordinateur. 13. Créer votre palette: Donc, j'avais l'habitude de montrer mes concepts de couleur aux clients en mettant les couleurs dans la maquette réelle de la conception du site au tout début que j'ai rapidement appris était une idée terrible. Il y a tellement de choses qui peuvent mal tourner ici. Si vous montrez à votre client deux ou trois modèles de site différents, et chaque conception a un schéma de couleurs différent, vous pouvez à peu près garantir que le client va choisir la conception du site avec la couleur qu'ils aiment le mieux, même si l'autre sites ont une meilleure conception globale. C' est pourquoi j'aime montrer à mes clients mes idées de couleurs initiales. Bien avant qu'ils voient n'importe quelle mise en page. Vous voulez que le client se concentre sur la couleur uniquement sans être influencé par quelque chose d'autre comme la photographie, contenu manquant, ne pas comprendre ce qu'est lorem ipsum, ou quoi que ce soit d'autre. C' est ce que vous allez faire pour moi. Pour votre projet final dans cette classe, je veux que vous preniez vos deux palettes, deux palettes différentes, celles que vous avez choisies en recherchant et en expérimentant, et que vous les affichiez dans la communauté de partage de compétences pour obtenir des commentaires. Quand vous les publiez, je veux que vous expliquiez réellement pourquoi vous avez choisi chaque jeu de couleurs. N' ayez pas peur de montrer votre processus non plus. Vous pouvez montrer tout ce que vous utilisez pour l'inspiration, vous pouvez montrer vos carnets de croquis, peu importe. Mais ne montrez pas les palettes dans le design du bikebook. Ça va faire partie de la classe 2. N' hésitez pas à montrer vos choix de couleurs comme vous le souhaitez. Mais si vous ne savez pas comment, consultez cette feuille de calcul de palette que j'ai incluse pour vous. Donc, j'aime montrer comment le logo pourrait ressembler, et comment il pourrait ressembler à l'envers, dans une couleur claire sur un fond plus sombre, et bien sûr, je voudrais montrer des exemples de chaque nuance, et la tension dans les nuances de chacun. À la fin du processus de rétroaction, vous devriez avoir une palette de couleurs qui vous satisfait avant de passer à l'étape. J' espère que vous allez me rejoindre en classe 2. 14. Découvrir la conception sur Skillshare: façon.