Transcription
1. Intro: Cette semaine, dans ce module, nous allons créer
une palette de couleurs spécialement conçue pour la conception de l'interface utilisateur
ou de l'interface utilisateur. d'abord, nous examinerons
les couleurs qui vous sont réellement disponibles sur écran de
votre ordinateur
en conception numérique, puis nous
examinerons les différents espaces colorimétriques,
les spécifications, la façon dont vous le dites votre ordinateur de la couleur que vous souhaitez
afficher, s'il vous plaît. Ensuite, nous examinerons
quelles combinaisons de couleurs se ressemblent
naturellement ensemble. Ce sont des combinaisons de couleurs objectivement
bonnes. Nous parlerons un peu des
raisons pour lesquelles vous êtes probablement mieux d'ignorer ces tableaux de psychologie des
couleurs que vous voyez en ligne qui sont
probablement un peu aussi,
trop simplifiés, mais comment la couleur a un peu
sens plus subtil. Et nous devrions expérimenter et apprendre à rechercher ces sentiments. Enfin, nous
examinerons le but de chacune des couleurs dans la conception d'
une interface utilisateur afin de pouvoir choisir celles qui
répondent
à ces objectifs. Enfin, nous
sélectionnerons
notre palette de couleurs prête à l'emploi pour une conception
d'interface utilisateur. Il y a beaucoup de choses à prendre en compte lorsque nous choisissons
une palette de couleurs. Et les couleurs peuvent vraiment créer ou briser le design de
l'interface utilisateur. Passons donc un peu
de temps à apprendre à créer une palette de couleurs qui fonctionne
pour la conception de l'interface utilisateur.
2. Espaces de couleur: Nous avons terminé notre module sur le fonctionnement des
couleurs en
parlant des espaces colorimétriques disponibles dans vos programmes
informatiques. Et comment, lorsque vous
créez un site Web, vous avez affaire à sRGB, RVB
standard, qui s'appellera
normalement RVB. Vous avez peut-être remarqué dans vos programmes graphiques
et parfois dans CSS2 qu'il existe différentes façons de référencer les couleurs. Hsl, hexadécimal, HSB ou CSS ici. Il s'agit de différentes façons de référencer exactement le
même ensemble de couleurs. Donc, si nous regardons ce
tableau de toutes les couleurs, toutes ces HSL, HSP, elles font toutes référence à
cette même gamme de couleurs ou à la même gamme de couleurs. Nous pouvons donc traduire
de l'un à l'autre sans perdre de
couleurs dans notre palette. Cela signifie que vous décidez si vous
référencez vos couleurs en RVB ou HSL dépend
entièrement de vous. C'est entièrement à la hauteur de
ce dans lequel vous travaillez le mieux. Chacun d'entre
eux a ses propres avantages et inconvénients. Voyons donc pourquoi vous pouvez définir votre programme graphique sur l'
un plutôt que sur l'autre. Donc, si nous jetons un
coup d'œil à cette couleur violette, j'en ai beaucoup utilisé. Nous savons déjà que
pour le définir comme RVB, nous regarderions à
quel point il est éloigné des coins de ce
triangle gamma que nous avons pris plus tôt. La référence exacte pour cela
est quelque chose comme 7976231. Si vous avez déjà écrit un CSS, vous saurez que vous l'avez
probablement écrit un peu plus comme ça. Il s'agit de référencer exactement
la même couleur de la même manière. C'est juste plutôt que d'utiliser
trois chiffres pour chacun, il le simplifie et y ajoute
quelques lettres dont a, B, C est supérieur à neuf. C'est ce qu'on appelle un code hexadécimal. Il s'agit simplement d'une
version raccourcie de
l'écriture des valeurs RVB sur 255. Les avantages de travailler
avec un code hexadécimal sont purement qu'ils réduisent un peu
la taille de votre fichier. Cela a beaucoup de
sens lorsque vous enregistrez une photo en très
haute définition, mais lorsque vous créez
un site Web et
que vous
n'utilisez pas autant de couleurs, vous n'avez pas vraiment besoin d'
utiliser l'hexadécimal. code tellement. Le problème avec couleurs
RVB est qu'il
n'est pas vraiment très intuitif. Nous avons affaire à eux
simplement parce que ce sont
les trois lumières de
l'écran de l'ordinateur. Mais si nous devons l'ajuster,
il est très difficile pour
nous de savoir exactement comment
désaturer la couleur, exactement comment modifier
ces trois chiffres. Il est beaucoup plus intuitif
pour nous de penser au HSL, à la
teinte, à la saturation et à la légèreté. La teinte est une valeur sur
360 en fonction du nombre de
degrés autour. La roue chromatique,
la saturation est un pourcentage avec 0 étant complètement
désaturé ou gris, et 100 étant
complètement saturé. Ainsi, une couleur et une
légèreté très pures sont également un pourcentage. Il s'agit donc d'un nombre
sur 100, 0
étant noir et 100 % blanc. Maintenant, tout au long de ce cours, nous avons parlé de
cette valeur comme valeur. Et c'est parce que
dans certains contextes, la légèreté signifie quelque chose plus similaire
à une luminosité. Dans le contexte de
l'espace colorimétrique TSL, le L signifie exactement la même chose que
nous avons appelé la
valeur jusqu'à présent, quantité de blanc ou de noir. Nous avons donc un réel
avantage d'utiliser HSL, c'est un peu plus
intuitif de travailler avec. Nous pouvons ajuster les chiffres et
nous savons comment la
couleur va changer. Mais examinons
quelques autres avantages. Je peux très facilement créer un
ensemble de trois couleurs avec une valeur similaire et une saturation similaire
avec des teintes différentes. Et ils vont ressentir à peu près la même importance sur une page. Vous remarquerez donc que
ces trois couleurs ont une saturation de 45
et une ressemblance de 60. Ils ont juste une teinte différente et ils ressentent à peu près la même chose. La teinte est calculée par
une roue chromatique comme celle-ci. 10 serait un
rouge parfait comme avec 360, et il fonctionne juste dans le sens des aiguilles d'une montre à partir de
là. Et un réel avantage
d'avoir q comme nombre est que nous pouvons trouver
rapidement le
contraste de couleur. Nous pouvons simplement prendre une distance de 180
degrés ou
l'ajouter selon que le nombre
est supérieur ou inférieur à 180. Et nous pouvons trouver instantanément
notre couleur contrastée. Nous pouvons également voir à partir de
ces chiffres sont
vraiment, très faciles s'ils ont une saturation contrastée et une légèreté contrastée. Il est également très facile
avec HSL d' obtenir
une couleur exactement la même teinte. Une variation de saturation. Peut-être que tout au long de notre conception, nous voulons différentes
versions saturées de cette couleur. Mais rappelez-vous que lorsque nous
choisissons nos couleurs étaient
très, très rarement, ajustaient complètement
la saturation ou la légèreté d'elles-mêmes. Dans l'exemple à l'écran, la couleur à droite
semble un peu trop brillante et la couleur à gauche semble presque boueuse ou grise. Il n'a pas l'air
particulièrement joli. Nous aurions probablement ajusté
quelques éléments avec
ces deux couleurs pour
les rendre plus agréables avec notre palette. De même, il peut être très, très utile de simplement ajuster la valeur l et
d'obtenir une
version plus claire ou plus foncée de la même couleur. Mais encore une fois, nous n'
utiliserons jamais vraiment ces valeurs exactes et notre palette de couleurs
car nous obtenons des couleurs qui ne sont pas
particulièrement belles. L'espace colorimétrique TSL ne va pas résoudre
tous nos problèmes, mais pour corriger cette couleur à gauche et il y a une
couleur à droite. Au moins, nous avons des chiffres un peu plus intuitifs
à utiliser dans Figma et dans d'autres programmes
graphiques Il y a aussi une valeur HSB. Le B est synonyme de luminosité, mais encore une fois, cela ne
signifie pas la luminosité. Cela signifie encore une fois que la couleur est
sombre ou claire. La seule différence ici
réside uniquement dans les dimensions. Vous remarquerez que le cyan
le
plus saturé à gauche se trouve au milieu, alors qu'à droite, il se trouve dans
le coin supérieur droit. Dans Coral Draw, Affinity Designer et
d'autres programmes graphiques, vous
pouvez voir quelque chose comme
ce triangle appelé H WB ou Hugh, White, Black. Vous remarquerez que l'un
des coins est blanc, l'autre est noir et l'
autre est la teinte. C'est probablement un espace
colorimétrique encore plus intuitif avec lequel travailler, mais n'en
parlons pas trop parce que vous ne pouvez pas l'utiliser en CSS et cela va
être difficile pour vous de transfère
les valeurs entre les deux. Je recommande
simplement d'utiliser HSL. Il existe plusieurs façons référencer les couleurs
sur votre site Web, mais elles
vont essentiellement vous donner accès aux mêmes couleurs. RVB va probablement
être un peu
plus difficile à utiliser. Donc, peut-être devrions-nous laisser ça. Hsl, en revanche, va nous donner accès
aux mêmes couleurs, mais peut-être un moyen légèrement
plus intuitif de choisir ces couleurs. Nous voulons toujours éviter d'être trop paresseux lors du réglage de
ces couleurs. N'oubliez pas que nous voulons
rarement saturer une seule couleur sans modifier la teinte et valeur pour nous assurer
qu'elle soit toujours belle.
3. Harmonies de couleur: Nous avons déjà beaucoup
parlé des harmonies de
couleurs dans cette section, et même un peu dans
certaines sections précédentes. Mais examinons cela
un peu plus en détail
et présentons
certains des termes techniques que vous pouvez entendre maintenant. couleurs complémentaires
désignent donc
les couleurs exactement
opposées dans la roue chromatique. Et c'est parce que, comme nous
le savons, si nous mélangeons toutes les si nous mélangeons toutes les ondes lumineuses de ces
deux couleurs ensemble, nous avons toute la
gamme des ondes lumineuses. Ainsi, cela stimulera et détendra les cônes dans nos yeux même manière que nous regardons
autour du design .
Nous avons également examiné cet
exemple où trois couleurs équidistantes
autour de la roue chromatique. Maintenant, ce sont des couleurs triadiques. Si nous devions avoir
trois couleurs très bien définies et très puissantes
dans notre design. Nous voudrions peut-être les choisir équidistants autour
du cercle comme ceci, nous pourrions choisir
des couleurs séparées gratuitement. Et là encore, c'est un
ensemble de trois couleurs, mais cette fois, elles
ne sont pas équidistantes. Une seule des couleurs
est la couleur dominante, et les deux autres couleurs
sont le même nombre de degrés de
cette couleur dominante, tétrads, les couleurs lorsque nous utilisons deux jeux différents de
compléments. couleurs. Idéalement, ils ne devraient pas
être trop proches les uns des autres, mais ils n'ont pas
nécessairement besoin d' être équidistants
autour du cercle. Soit. Nous pourrions choisir
des couleurs comme celle-ci. Oh, on pourrait
les choisir plus comme ça. Il existe de nombreux sélecteurs de couleurs en ligne
pour vous aider à créer ces premiers jeux de couleurs à l'aide de l'une de ces techniques
mathématiques. Je vais recommander
celui-ci que je viens de trouver appelé HTML color
coordinates.com. Et je le
recommande parce que rappelez-vous que beaucoup de gens ont la couleur, nous allons la créer de manière incorrecte. Et j'ai vérifié
cela et non seulement il a la
bonne roue chromatique, mais aussi vous pouvez
facilement changer entre les couleurs
complémentaires ou les couleurs triadiques
ou
n'importe laquelle de ces autres
harmonies de couleurs . dont nous venons de parler. Personnellement, je trouve
plus facile de simplement travailler directement dans Figma car Figma possède cette
fonctionnalité très agréable où je peux faire des mathématiques dans une boîte de saisie. Disons donc, par exemple, j'avais choisi ce bleu
comme couleur dominante. Et je voulais créer un jeu de
couleurs complémentaire divisé. Eh bien, ce bleu est 100%
saturé et a une valeur de 50, il est
donc juste entre le
blanc et le noir. Et j'ai simplement
choisi que l'une de mes couleurs complémentaires
sera de moins 90 degrés. Un sera de plus 90 degrés. Je peux donc simplement ajouter 92 la
teinte et soustraire 92, la teinte de la couleur suivante. Et nous avons maintenant
la palette de couleurs. Si nous devions choisir une harmonie de
couleurs partagée complémentaire comme celle à l'écran ici, car cela n'utilise que
1,5 de la roue chromatique. Nous n'utilisons pas d'
orange, de rouge ou de jaune. Nous allons utiliser
le violet et le vert beaucoup plus dans notre design. Imaginez que nous
essayons
d'avoir une pondération égale
autour de la roue. Nous ne voulons pas trop de
couleurs d'un côté. La prochaine chose est que nous
ne voulons jamais que nos couleurs soient parfaitement harmoniques. C'est un peu trop parfait. Il supprime un peu d'intérêt
visuel. Je vais donc modifier un peu
les teintes. Et bien sûr, nous n'
aurons jamais de couleurs complètement saturées ou complètement à 50 sur l'échelle de la clarté
à l'obscurité. Et peut-être que
quelque chose comme ça est le point de départ pour
créer ma palette de couleurs. Nous avons donc examiné
quelques façons différentes de choisir une palette de
couleurs harmonieuse. Mais ils
impliquent essentiellement le choix de couleurs également réparties
autour de la roue chromatique. Si nous les sélectionnons en
fonction des mathématiques dans Figma ou en utilisant un site Web comme
celui que je viens de vous montrer. Nous allons vouloir
ajuster un peu la teinte. Nous ne voulons pas qu'il soit parfait parce que nous
voulons qu'il y ait
un intérêt
visuel pour nos designs finaux. Et bien sûr, si nous utilisons un outil comme celui-ci pour
sélectionner nos couleurs, elles vont nous
donner des couleurs très, très saturées et très vives. Nous allons vouloir ajuster la saturation et la valeur des couleurs afin qu'elles soient un peu plus utilisables
pour nos sites Web.
4. Émotions: À l'université d'art, j'ai assisté à une conférence
en psychologie des couleurs. Et je me souviens
qu'on m'a dit que les équipes de football qui portent rouge sont plus susceptibles gagner parce
qu'elles sont
plus agressives, dominantes et elles
craignent leurs adversaires. Cependant, bien sûr, ce n'
est que de la science psuedo. En fait, personne n'a jamais remporté
la Coupe du monde de rugby en portant une chemise rouge et un
hockey sur glace que vous êtes plus susceptible de
gagner si vous portez du bleu. C'est juste un bruit
statistique standard. Ça ne devrait vraiment pas
être dans le journal. C'est le genre de peluches
que l'
on entend normalement lorsque les gens essaient de
trouver quelque chose à dire. Comme si vous recherchez la psychologie des couleurs dans Google
Images, vous verrez tous ces diagrammes
absurdes de personnes qui tentent de
décider ce que
signifient les couleurs et leur signification
sont normalement
trompeuses et elles crossover
et n'a aucun sens. Bien sûr, il y a un million de
nuances de rouge et elles ne sont pas toutes en colère et certaines d'entre elles
sont plutôt calmantes. ne s'agit là
que d'une simplification excessive standard. Mais cela ne signifie pas
que les couleurs n' expriment ni émotion ni sentiment. En fait, ils font probablement
plus que tout. Mark Rothko a fait toute
une carrière en créant de l'
émotion avec les couleurs, mais il a utilisé un mélange de couleurs. Et l'émotion d'une couleur
dépend de son contexte, comme
tout
le reste. La plus petite couleur d' une application Web qui
va
changer complètement ce qu' elle
transmet, ce qu'elle ressent et l'émotion de
l'application entière. Mais malheureusement, je ne peux pas
vous donner un petit
tableau pratique qui dit, comme agressif, que nous devons faire un peu
plus de travail que cela. Supposons une seconde que
nous avons créé une page d'
accueil
très, très en noir et blanc pour un site Web, et je souhaite ajouter une
seule couleur. Quelle couleur pourrais-je ajouter ? Eh bien, j'ai ce genre
de vert
très relaxant en arrière-plan ici. Mais peut-être que je veux que
la page soit plus grande entreprise. Eh bien, je pourrais le saturer. Peut-être que je ne
change pas forcément autant la teinte. J'ai peut-être changé
la saturation. Vous pouvez voir que
tout est différent maintenant en
choisissant cette couleur, je fais une déclaration tout aussi
audacieuse, mais je fais une déclaration très
différente. Ou peut-être que
je veux qu'il soit plus créatif. Je le rends donc rose. Peut-être que les roses et les
violets se sentent plus créatifs parce qu'ils étaient un
peu plus rares dans la nature. Et c'est donc
plus alternatif. Ou peut-être que c'est plus audacieux
juste parce qu'il est si lumineux. Il est difficile de communiquer
comment changer cette couleur et
l'arrière-plan modifient ce que nous ressentons à ce sujet. Mais nous sommes tous d'
accord pour dire que c'est le cas. Lorsque vous regardez des
sites Web dans la nature, essayez de réfléchir à
ce qu'ils fabriquent. Vous ressentez. Cette fine
ligne orange, ces formes audacieuses et
plates, ce grand vert
fluorescent, ou
ce bleu non coloré. Bien que cela soit partiellement
subjectif et que vos utilisateurs peuvent ressentir quelque chose d'un
peu différent pour vous. Nous voulons
nous entraîner à être
particulièrement doués pour
ressentir les couleurs de la même manière qu'un musicien est très
doué pour repérer ce que ressentent les
différentes notes dans le contexte de
différentes chansons. Et une bonne façon de nous entraîner
à le faire est de
voir les couleurs dans un contexte ou en contraste avec
une couleur différente, ce bleu violacé utilisé dans le dessin en
bas à droite. Vous pensez peut-être que cela ressemble
beaucoup à celui que j'ai utilisé lors du
générique d'ouverture de cette vidéo. Et si je voulais être sur la marque, j'utiliserais
peut-être ce bleu
comme couleur d'arrière-plan. Ou encore une seconde, supposons que j'ai juste inondé toute la
page de ce bleu. Il suffit de regarder ça une seconde. Reconnaissez ce que vous avez champ, mais n'
essayez pas nécessairement de le nommer. Et puis je soulignerai
que ce n'est pas le bleu que j'ai utilisé lors du générique
d'ouverture, mais celui-ci est instantanément, je ressens quelque chose de différent. Peut-être que ça aide si on les
regarde l'un à côté de l'autre. La couleur à gauche me
semble plus propre. C'est un peu parfait. Alors que celui de droite
semble un peu plus tactile, je peux vraiment le ramasser un bout de papier et
interagir avec lui. Il y a une différence distincte
entre ces deux couleurs que je n'ai remarquée que lorsque je les ai
placées l'une à côté de l'autre. Comme comment un
musicien bien formé peut probablement entendre la différence
entre un C et un C. Et je ne peux entendre
la différence lorsqu'ils viennent l'un à côté de l'
autre sur une chanson. Cependant, si une chanson utilise un
C-sharp quelque part et que soudainement quelqu'un le change en C. je peux instantanément ici que
la chanson n'est pas correcte. Je ne pouvais pas le remarquer tout seul. Mais quand je l'entends dans
le contexte de la chanson, je vois en quelque sorte
que c'est faux. Il est donc très important que nous ayons la bonne impression de ces
couleurs. Mais la façon de le faire est
probablement de les regarder dans un contexte quelconque ou en
contraste avec d'autres couleurs. Il y a donc beaucoup de simplification excessive quant à
ce qu'une couleur peut signifier, ce que signifie le rouge et
ce que signifie le bleu. Mais il y a toutes sortes de nuances
différentes,
donc nous pouvons ignorer
la plupart de ces choses. Mais la couleur fait le lien
émotionnel le plus
rapide et le plus fort. Il est donc très
important que nous nous
entraînions à identifier
les émotions en couleurs. Le moindre changement de couleur peut affecter
massivement les
émotions qu'il invoque. Et il est beaucoup plus facile pour nous d' identifier les différences
lorsque nous les disons dans leur contexte. Faisons ça ensuite.
5. Exercice d'émotion: Donc dans la dernière vidéo, j'ai mentionné que
pour nous aider à
nous entraîner à sentir les couleurs, c'est bon de les voir ensuite,
deux couleurs contrastées. Et c'est également bon de les
voir dans leur contexte. Maintenant, j'ai choisi
des mots contrastés ,
puis j'ai essayé de trouver des couleurs qui leur conviennent et de les mettre les unes à
côté de l'autre pour voir si la couleur en colère que j'ai gauche se sent en colère
à côté de
la couleur calme que j'
ai à droite, je n'ai bien sûr
pas choisi un cliché, rouge et bleu pour être
en colère et calme, mais je crois avoir trouvé une couleur en colère et une couleur
calme, néanmoins. titre d'exemple, j'ai
choisi deux autres mots, créatifs et organisés de
manière à ce que les mots soient contrastés avec moi. Et j'ai choisi ces
deux couleurs qui, selon moi communiquent
ces deux mots. J'ai encore quelques exemples
de couleurs contrastées, mais je vais vous faire
deviner lequel ? Pour cela, j'ai choisi
les mots amusants et sérieux. Lequel pensez-vous que
j'ai décidé d'être amusant ? Oui. C'est peut-être un peu évident, mais en créant ensemble
les deux couleurs
émotionnelles contrastées, il est beaucoup plus facile pour moi de
choisir une couleur pour m'amuser. La prochaine série de mots que j'ai
choisis était bruyante et silencieuse. Et j'ai fini par choisir ces deux couleurs en
quelques exemples. J'ai choisi les mots
nature et technologie, et voici les deux
couleurs avec lesquelles j'ai fini. Et j'ai choisi les
mots « jeune et vieux ». Et ce sont les deux
couleurs avec lesquelles j'ai fini. La première moitié de
cet exercice consiste donc à
penser à un adjectif ou un mot décrivant qui aide à expliquer un message de marque vous pourriez avoir sur votre site Web. Peut-être que vous créez le
site Web pour une banque, et donc le mot
pourrait être sécurité. Pensez ensuite au mot
de contraste pour la sécurité, le
mot contrastant serait risqué. Ensuite, essayez d'identifier les bonnes couleurs qui communiquent ces
deux mots, la sécurité et le risque,
et mettez-les dans un contraste et une composition
semblables à celles de l'écran. Essayez de faire au moins un de ces éléments lorsque vous ne
changez pas la teinte, vous jouez simplement avec la
légèreté et la saturation. Cela nous empêche d'utiliser ces idées
fatiguées comme le rouge est la passion comme béquille et nous fait réellement
regarder les couleurs. Cela ne
facilite pas simplement la recherche de la
couleur ici. En prime, il vous aide à trouver des
couleurs que vous
voudriez vraiment éviter. Si vous essayez d'éviter que
votre site Web ne soit risqué, vous voulez éviter
les couleurs que vous pourriez associer au risque. Une fois heureux, nous avons identifié une bonne couleur
émotionnelle. Voyons à quoi ça
ressemble dans une gamme. C'est donc le rose que j'ai choisi
pour la création plus tôt. J'ai peut-être des tons plus sombres et plus clairs
sur mon site Web. Essayons donc de créer
un peu de gamme. Bien sûr, j'ai ajouté
un peu de rouge
aux teintes plus sombres
et un peu de jaune aux teintes plus claires. J'ai fait la même chose
avec ma couleur amusante. Et comme dernier exemple, j'ai créé une gamme
avec ma couleur calme, ce ne veut pas dire que toute
cette gamme
fera partie de ma palette de couleurs
finale. Tout à l'heure, j'ai quelques options à jouer quand j'ai compris
les couleurs dont j'ai besoin. Et je peux essayer mes
couleurs calmes dans le contexte d' un design réel
maintenant et voir laquelle sera belle
comme cette couleur d'arrière-plan, par
exemple, ou laquelle de mes couleurs
créatives paraîtront bien ? Bien sûr, nous allons avoir un
design plus compliqué que celui-ci, mais nous voulons essayer les
couleurs dans le contexte
du design pour nous
assurer qu'ils
ressentent toujours ce que nous voulions qu'ils ressentent. Votre exercice pour cette vidéo
consiste à choisir une émotion ou décrire un mot que vous souhaitez votre site Web communique. Réfléchissez ensuite à ce qu' est
le mot contrastant et trouvez une couleur pour ces deux mots choisissant et en modifiant
ces deux couleurs ensemble, nous allons le voir en
contraste avec son adversaire et cela va vraiment
nous aider à choisir la teinte exacte. Et enfin, une fois que nous sommes
satisfaits de notre couleur, créons une gamme. Nous avons donc les versions les plus sombres
et les versions plus légères. Ensuite, essayez-les simplement dans le contexte d'un site Web
pour vous assurer qu'ils ont l'air bien et s'assurer qu'ils ressentent les émotions
censées ressentir.
6. Objectif de la couleur: Pour que nous puissions choisir la
palette de couleurs exacte que nous
allons utiliser pour notre application
Web. Cela vaut la peine de
penser à quel sera
le but de chacune des
couleurs. Voyons donc
ce design que j'ai créé un peu
plus tôt et regardons toutes les couleurs qui y sont déjà et à quoi
servent-elles ? Tout d'abord, nous
avons bien sûr nos noirs et nos blancs. Ou dans ce cas,
j'ai un
bleu marine foncé et un gris bleuâtre clair. À moins d'essayer de créer
un style très formel ou créer un
point très spécifique avec le noir et blanc, je vais très rarement utiliser un noir
parfait et
un blanc parfait. Ils vont presque
toujours avoir un
peu de teinte là-dedans. Il peut y avoir une teinte très
désaturée qui a une valeur très
élevée ou très faible. Il y
en aura aussi beaucoup,
beaucoup plus que vous ne le pensez. En fait, si vous
regardez ce design, j'ai environ six noirs et
blancs dans ce design. Et il ne s'agit que d'
une seule page. Il peut même y avoir une utilité
pour moi en avoir quelques autres. N'oubliez pas que la plupart des
couleurs de votre site web, je vais être
très désaturée. Vous allez
avoir très, très peu couleurs vives
vraiment saturées. Donc en fait ces
noirs et blancs ou ces blues très désaturés, qu'ils sont vraiment importants parce qu'il y a la
plupart du site Web. Pourtant, les gens ne pensent même pas vraiment à
ces couleurs car il est très difficile d'obtenir une palette de
couleurs décente. Les gens utilisent souvent une palette de couleurs qu'ils ont
trouvée ailleurs et
oublient probablement celles qui se trouvent en
arrière-plan et au premier plan, comme cet ensemble de couleurs ici. Ensuite, nous avons ces couleurs
vraiment évidentes. Celles auxquelles vous pensez
toujours, les marques et
les appels à l'action. J'ai donc un gros bouton d'
appel à l'action orange vif. C'est la
chose la plus importante sur le site Web. Il se démarque vraiment
et dit cliquer sur moi. Le but de cette couleur est d'attirer vos yeux
tout de suite. Et puis nous avons la
marque bleue ici. Le but de cette couleur
est de créer un
message de marque
cohérent et cohérent. Nous pouvons également utiliser cette couleur comme couleur
secondaire pour les boutons. Nous voulons qu'il se démarque
moins que l'orange. J'ai également choisi
ce bleu parce qu'il contraste très bien
avec l'orange. Et si nos yeux étaient un
peu trop habitués à
regarder l'orange, nous pouvons lui donner une couleur vive
différente. C'est donc surtout pour nos
couleurs de marque vraiment évidentes dans tout ce design. Si nous avions une application plus
compliquée, nous pourrions avoir une troisième
couleur de marque que nous utilisons ailleurs. Mais le but de ces couleurs est qu'elles se démarquent le plus et qu'elles créent le plus de personnalité
pour notre application. Enfin, nous avons
nos couleurs d'accent. Maintenant, ils sont utilisés
ici derrière les pastilles et le statut est sur la page afin que nous puissions nous
souvenir des étapes. Nous pouvons nous souvenir de choses comme nombre de
messages non lus que nous avons. Nous n'avons pas
besoin qu'ils nous sautent dessus, mais nous devons les trouver
quand nous les cherchons. Souvent,
il peut s'agir d'une variation de nos couleurs primaires et
secondaires ou quelque chose qui contraste
bien avec elles. Mais nous aurons presque toujours
un rouge vif, un vert vif et
un jaune vif dans cet ensemble de couleurs d'accent. Et c'est parce que
la seule chose qui est universelle dans notre compréhension
de la couleur sur le Web est que tout le monde
sait maintenant que les messages d'avertissement sont rouges et que les
messages de réussite sont verts. Cependant, nous pouvons ajuster un peu le rouge
et le vert. Il faut être évident que c'est le rouge d'avertissement et
le rouge du succès. Mais dans cet exemple que
j'ai donné ici, j'ai joué un peu avec eux. Je les ai rendus ni trop
saturés, ni trop brillants. Mais je pense qu'il y a toujours bien
évidemment le succès et les couleurs d'avertissement et le jaune sont souvent
utilisés à titre d'information. Voici donc mes couleurs d'accent. Ils
seront utilisés avec parcimonie, parfois juste pour un
peu de flair visuel. Et parfois, ils attirent un
peu l'attention, mais pas autant que nos boutons d'
appel à l'action. Nous avons donc trois types
de couleurs distinctes dans
cette application, nous avons nos noirs et nos blancs qui sont très rarement
noirs et blancs. Nous avons nos couleurs primaires
et secondaires, et nous avons nos couleurs accentuées. Une fois que nous savons quelles sont
nos couleurs, nous devrions également prendre un certain temps vérifier celles qui
fonctionnent ensemble. Certaines couleurs ne
vont tout simplement pas fonctionner sur
d'autres couleurs. Et nous voudrions peut-être en
prendre note pour que
les gens ne s' en servent pas
accidentellement. Maintenant, parce que la
couleur ressemble à son environnement. La seule façon de
vérifier cela est
de regarder avec nos yeux. Comme nous l'avons fait avec les exercices de Joseph Alberta, vous pouvez créer une boîte
plus petite à l'intérieur d'
une boîte plus grande et vérifier apparence des couleurs les unes
à l'intérieur de l'autre. Ainsi, par exemple, cette
orange sur ce gris, ou même le gris sur l'orange, ça a l'air vraiment bien. Je vois très clairement la
différence de couleurs. Ce gris très clair
avec cet orange, cela a l'air absolument fantastique. Je pense que ces couleurs peuvent
aller les unes au-dessus ou
à l'intérieur de l'autre. Cependant, cet autre gris avec cet orange, ça ne fonctionne pas. Il est très difficile de voir la ligne
définie entre eux. C'est presque un peu floue. C'est très douloureux pour
mes yeux d'être honnête. Il y a beaucoup de contraste entre les teintes orange
et grise. Mais les valeurs et les saturations
ne sont pas si différentes. y a tout simplement pas assez de
contraste entre eux. Je veux donc probablement m'
assurer que tout le monde sait que nous ne pouvons pas utiliser ces
deux couleurs ensemble. Cet orange ne peut pas aller sur
ce fond gris, et nous ne pouvons pas avoir ce
texte gris sur un bouton orange, voudrons faire le même test avec chaque combinaison de couleurs. Ce n'est pas grave si une
couleur ne fonctionne pas avec une autre
tant que nous prenons des notes, mais nous voulons
également nous assurer que la plupart de nos couleurs fonctionnent avec
la plupart de nos autres couleurs. Nous avons donc trois
groupes de couleurs distincts. Nous avons nos noirs et nos blancs, nous avons nos couleurs primaires et nos couleurs accentuées. La plupart des gens qui créent
la plupart des sites Web ne pensent pas vraiment tous ces différents
types de couleurs. Et pourtant, la majeure partie de notre site Web
est composée de Noirs et de Blancs. Nous voulons donc
nous assurer que tous ces produits sont
beaux lorsque nous avons
toute notre palette de couleurs, nous voulons vérifier qu'elles fonctionnent
les unes sur les autres. Et la seule façon de le faire
est de
les placer les uns sur les autres et de
vérifier qu'ils ont l'air bien.
7. RÉSUMÉ: Nous avons finalement créé
une palette de couleurs. Cela peut changer au fur et à mesure que nous concevons nos pages dans notre application et constaterons sans aucun doute que certaines couleurs sont moins
utiles que nous ne le pensions, ou que nous avons besoin d'
une autre couleur lorsque nous commençons à concevoir
pages individuelles. L'important
est que nous ayons une palette de couleurs convenue avec
notre équipe ou nos clients. Et si cela change, nous pourrons avoir une conversation
à ce sujet. À l'époque. Les couleurs transmettent les
émotions de notre marque, mais elles sont
largement désaturées. Nous aurons donc un impact
émotionnel subtil sur l'utilisateur de notre application
Web. Bien que certaines de nos couleurs
soient très saturées, elles seront très peu
utilisées autour du design. Ceux-ci se démarqueront et attireront facilement l'attention des
gens. Parmi toutes les couleurs désaturées, les
couleurs ont un but qui restera le
même tout au long de la conception de l'
application, ce qui permettra aux utilisateurs de
naviguer facilement pages
futures une fois qu'ils auront une compréhension inconsciente
de ce que chaque colonne signifie. Nous sommes maintenant prêts à appliquer
nos couleurs à notre design. Mais tout d'abord, choisissons quelques images et
illustrations appropriées à
utiliser dans notre conception.
Rob Sutcliffe, UI Designer / Developer
