Transcription
1. Bienvenue en cours: Si vous avez déjà eu du mal à
choisir des couleurs qui
fonctionnent réellement ensemble ou si vous vous êtes
retrouvé avec des motifs un peu décalés, ce cours vous aidera. En quelques minutes,
nous passerons d' une couleur unique à une
palette complète équilibrée, polyvalente et prête à être
utilisée dans un véritable design. Tout le monde. Je m'appelle Adi. Bienvenue dans ce court
cours sur la création vos propres palettes de couleurs
pour le Web et la conception d'interfaces utilisateur. Nous allons commencer par explorer les harmonies de
couleurs à l'aide d'
outils tels qu'Adobe Color Ensuite, nous passerons à la création teintes et de nuances
directement dans Figma Enfin, nous appliquerons
notre palette à une mise en page prête à afin que vous puissiez la voir immédiatement en
action. Pas besoin d'être un expert en théorie des
couleurs. Nous veillerons à ce que cela reste pratique
et pratique, et à la fin, vous saurez exactement
comment créer et appliquer vos propres palettes
en toute confiance. J'ai inclus un fichier de démarrage dans la section Projet de classe
avec tout ce dont vous avez besoin. Des instructions, un espace
pour votre palette et un exemple de mise en page avec lequel
vous pouvez jouer. Très bien, plongeons-nous dans le vif du sujet et
commençons à créer notre palette.
2. Comprendre les harmonies des couleurs: Avant de passer à Figma, parlons des harmonies de
couleurs Une harmonie de couleurs est
essentiellement un ensemble de règles pour choisir des couleurs qui
fonctionnent naturellement bien ensemble. Vous avez probablement vu des termes tels que complémentaire,
analogue, triadique Il s'agit essentiellement de raccourcis pour créer des palettes équilibrées. Chacun a son propre usage. La gratuité est
idéale lorsque vous recherchez contraste
fort, par exemple pour faire ressortir
une action de quota. Analogous crée des schémas unifiés
calmes, parfaits lorsque vous souhaitez utiliser des couleurs similaires les unes aux Et le triadique vous offre une variété, souvent utilisée dans des designs ludiques et plus colorés
tels que les infographies Maintenant, tu n'as pas besoin de tout
mémoriser. L'avantage, c'est que des outils comme Adobe Color font le
gros du travail à votre place. Alors allons-y et
générons rapidement des palettes. Nous pourrons ensuite affiner Figma. Avant de commencer, laissez-moi vous
montrer sur quoi nous
travaillons. Donc, ici, j'ai une copie
du fichier de démarrage que vous pouvez télécharger en suivant
les liens dans la description du
cours. Et à l'intérieur, nous trouverons des
instructions sur ce que nous devons faire, ainsi que
des ressources. Ensuite, nous avons une mise en page pratique que
nous pouvons utiliser pour appliquer notre jeu de couleurs
, puis quelques cadres supplémentaires
pour définir nos couleurs. Nous en avons une pour la couleur principale
ou la couleur de la marque. Nous en avons un pour le gris, puis un pour l'harmonie. En parlant d'harmonie, laissez-moi vous
montrer un outil que j'utilise tout le temps pour créer des palettes de
couleurs, savoir Adobe Color. Vous pouvez donc y accéder en vous
rendant sur color.adobe.com, puis en
cliquant sur Créer Ici, vous devez essentiellement
choisir votre couleur de base. C'est celui-ci au milieu, et tu peux cliquer
ici pour changer de couleur. Je ne sais pas, peut-être que tu veux un vert plus foncé,
quelque chose comme ça. Et une fois que vous avez sélectionné
cette couleur, vous devez aller ici
où il est écrit harmonie des couleurs et choisir parmi les
différentes harmonies. Par défaut, une harmonie
analogue est sélectionnée, ce
qui crée essentiellement
une palette de couleurs pour les couleurs situées les unes à côté des autres
dans la palette de couleurs Mais si nous passons
, par exemple, à un monochrome,
c'est totalement différent Maintenant, cela nous donne différentes
nuances de cette couleur. Vous pouvez voir qu'ils sont
en ligne droite. Mais si nous passons en triade,
cela permet couleurs à partir de points
équidistants de
la palette de couleurs Nous avons cet orange très pastel. Nous avons ce genre de couleur magenta
ou lavande, donc totalement différente, non ? Et vous verrez que si je change la couleur ici
sur la roue chromatique, les autres couleurs se
mettent à jour automatiquement tout en conservant le même
algorithme. Ensuite, nous avons également un service gratuit. C'est très utilisé. Cela sélectionne essentiellement
les couleurs
opposées les unes aux autres
sur la roue chromatique. Et puis vous en avez d'
autres, divisés gratuitement. Vous avez un composé carré. Nous n'allons pas vraiment
les examiner pour le moment, mais n'hésitez pas à
jouer avec eux. Il s'agit donc d'une façon de générer une palette de couleurs basée
sur une couleur de départ. Autrement, vous pouvez
cliquer sur Explorer, et Adobe Color possède un tas de palettes de couleurs
dans sa base de données. Vous pouvez rechercher, par exemple, des aliments, et cela
vous donnera des palettes de couleurs
liées aux aliments. Et il existe même des palettes de
couleurs dérivées d'une photo spécifique
comme celle-ci ici. C'est donc une excellente ressource
pour trouver des couleurs. Un autre site que je pourrais
recommander est coolers.co. Vous pouvez démarrer le
générateur
ici et vous pouvez simplement
appuyer sur la barre d'espace, ce qui générera une palette de
couleurs pour vous, même si, pour autant que je sache, cela ne vous permet pas vraiment de
créer des palettes de couleurs
basées sur des harmonies C'est donc quelque chose que
vous devez garder à l'esprit. Revenons à notre projet et créons
réellement une
harmonie pour cela. Et la couleur par laquelle je
vais commencer
pour ce projet est l'orange. C'est du f97 400. Je trouve que c'est une couleur qui
convient bien à ce type de projet. Évidemment, chaque couleur de marque doit être propre à ce projet
en particulier, mais pour cette démo, je vais utiliser cette orange. Je
vais donc le copier, et je vais
revenir à Adobe Color, et je vais créer une palette de couleurs. Je
vais cliquer ici. Je vais coller
cette couleur, et je vais choisir la couleur
complémentaire, car couleurs
complémentaires
fonctionnent généralement très bien ensemble. Ils se
complètent, non ? Et ils offrent également un haut
degré de contraste les
uns par rapport aux autres car ils se situent de part et d'autre de la roue chromatique. C'est donc exactement ce que je vais utiliser
pour ce projet, et je vais simplement
cliquer pour copier cette couleur, et je vais la
coller dans mon fichier Figma Copiez ceci, collez-le ici, puis je vais prendre
celui-ci et celui-ci, et mon
harmonie sera prête. J'ai donc ma couleur primaire, et j'ai mon harmonie. Maintenant, est-ce que je vais utiliser
ces quatre couleurs complémentaires ? Pas nécessairement, mais je les
ai juste au cas où
j'en aurais besoin, non ? J'ai de quoi travailler. Et je pense que cela devrait être la toute première étape
du processus de conception. Déterminez
la couleur principale de votre marque
, puis créez une harmonie sur cette
base. Et quelle harmonie, quel type d'harmonie
dépend vraiment du projet. Dans la plupart des cas, je
suggère d'opter pour un service gratuit
parce que c'est, je suppose, la valeur sûre, mais il en existe d'autres, n'hésitez pas à
les parcourir et à choisir celui
qui vous semble le mieux
adapté à votre projet. D'accord. Vous disposez maintenant d'un ensemble de couleurs de base avec lequel
travailler. Ensuite, nous allons rendre cette palette plus polyvalente en ajoutant
des teintes et des nuances Cela fonctionne donc pour les arrière-plans, les
accents et
tout le reste.
3. Créer des teintes et des nuances l'ensemble sur: est bon d'avoir quelques
couleurs principales, mais dans les vrais designs, vous avez besoin de variations plus claires et
plus foncées pour la profondeur, la hiérarchie
et le contraste. C'est là que les teintes
et les nuances entrent en jeu, et vous pouvez
les créer très facilement dans Figma ou sur le
Web. Laisse-moi te montrer. Alors tout d'abord, laissez-moi vous expliquer les teintes et les nuances.
C'est très simple. Une teinte est une
variation plus claire d'une couleur. Une teinte est une variation plus foncée. C'est comme ajouter du blanc ou du noir
à cette couleur en particulier. Et il existe de nombreuses façons de créer des teintes et des nuances Permettez-moi de vous montrer une méthode très
rapide dans Figma, savoir en utilisant
le mode couleur HSL Donc, si nous sélectionnons un élément
et que nous ouvrons le remplissage, nous pouvons cliquer ici,
et par défaut, l'hexadécimal sera
probablement sélectionné C'est le format de couleur
que nous connaissons tous. Mais si nous passons à HSL, cela signifie
saturation des teintes et luminosité. Et c'est une autre façon
de représenter une couleur. Dans ce cas, 28 est la teinte, et elle est contrôlée par
ce curseur situé ici Cela nous montre essentiellement la couleur
pure que nous utilisons. Cette valeur représente
la saturation, donc quel est le degré de saturation de cette couleur. Et vous verrez que
si on baisse cette couleur vers le bas, la couleur devient
plus pastel. Et si on descend jusqu'en bas, ça devient juste une couleur
grise, non ? Maintenons-le à 100 pour le moment. Et puis le troisième paramètre
ici est la légèreté. Désormais, la luminosité détermine le degré
de clarté ou de noirceur d'une couleur. Et c'est votre principal outil
pour créer des teintes ou des nuances. Donc, si vous commencez par
la couleur de base, qui est celle-ci dans notre cas, et que vous faites apparaître le
curseur vers le haut, vous
créez des versions plus claires de cette couleur, car vous déplacez essentiellement
le curseur vers Si vous sélectionnez
la même couleur, mais que vous déplacez
le curseur vers le bas ou que vous
diminuez la luminosité, vous créez en fait des versions
plus sombres de cette couleur, n'est-ce pas ? Donc, juste comme ça, oui, nous avons créé une teinte de
cette couleur de base, et nous avons également créé une nuance
de cette couleur de base. Maintenant, comme je l'ai dit, il existe
de nombreuses façons de le faire. Vous pouvez, par exemple,
sélectionner ou copier la couleur, et vous pouvez accéder au Web et il existe de nombreux outils
de ce type. Par exemple, créez
tints shades.com. Ici, vous entrez essentiellement le code hexadécimal et vous cliquez sur
Créer des teintes et des nuances. Et cela va créer un tas de variations
de votre couleur, et vous pouvez simplement cliquer
pour copier ce code couleur. Et cela fonctionne au format hexadécimal. Il existe également un outil de Noel Delgado que
j'utilise fréquemment, appelé Shadow Lord, qui
fonctionne exactement de la même manière Vous collez votre couleur. Vous sélectionnez le nombre d'
étapes que vous souhaitez ici. En gros,
vous pouvez le faire par incréments de 5 %, ce qui
générera un tas de teintes et de nuances
pour votre projet Cependant, si vous voulez
le moyen le plus simple, vous pouvez utiliser un FigmaPlugin, et il existe un tas
de plugins Je vais
juste vous montrer l'un d'entre eux. Découvrons donc
les actions ici. Nous passerons aux plug-ins
et nous rechercherons des teintes. Et cela vous
donnera un tas de suggestions de
plug-ins de la
part de la communauté. Et ici, je
vais choisir Hue Hue. OK, je vais le sauvegarder, puis je vais le lancer. Et le plugin
ressemble à ceci. Je
vais cliquer ici. Je vais utiliser le compte-gouttes, sélectionner ma couleur principale Je vais choisir le nombre de
teintes et de nuances que je souhaite. Cinq, c'est assez bien pour moi. Orientation verticale, et je vais appuyer sur
Générer les couleurs. Et cela génère un
ensemble ou, dans ce cas, cinq teintes et cinq nuances de
la couleur que j'ai sélectionnée, qui est surlignée
ici au milieu C'est essentiellement la couleur de base. Je vais donc garder ça
de côté pour le moment. Maintenant, lorsque vous créez des palettes de
couleurs, il est très important d'en
avoir une pour les gris également, car il existe
différentes variations de couleur grise dans un dessin Par exemple, vous pouvez utiliser un gris foncé pour le texte. Vous pouvez utiliser un gris très clair pour une bordure ou un
arrière-plan, n'est-ce pas ? C'est pourquoi il est très important d'avoir le choix entre plusieurs couleurs de
gris. Maintenant, comment
créez-vous ce gris ? Ouvrez simplement le sélecteur
de couleurs et vous le faites simplement, en gros C'est possible, mais ce que
j'aime faire, c'est créer une couleur grise basée sur la couleur
primaire réelle. OK ? Il contient un peu de
cette couleur primaire,
et j'ai trouvé que c'est ce qui me
donne les meilleurs résultats. Voici donc ce que je vais faire. vais sélectionner cette case
grise ici, appuyer sur I dans Figma, et je vais échantillonner
ma couleur principale Ensuite, je vais
ouvrir mon sélecteur de couleurs, et je vais
faire ce qui suit Je vais d'abord réduire la
luminosité,
afin de créer
une version très foncée
de cette couleur. Je pense qu'environ 10 %
fonctionne très bien. Ensuite, je vais
réduire la saturation, en supprimant
essentiellement
beaucoup de couleurs. Et je vais m'arrêter
à environ quatre. Et je pense que je vais en fait augmenter un peu la
légèreté, juste pour que nous puissions voir les choses
un peu mieux. OK, donc j'en suis très
content. C'est ma couleur grise.
L'étape suivante consiste donc à générer quelques teintes et
nuances à partir de cela Je vais donc redémarrer
le branchement. Je vais appuyer sur Ctrl K ou Commande K si vous êtes sur Mac. Je vais choisir Hue Hue, échantillonner cette couleur grise
et générer des couleurs. Cela générera essentiellement des teintes et des nuances
pour ma couleur grise Et je vais
les mettre de côté pour le moment à
côté de mes teintes et
nuances principales Notre palette semble maintenant complète. Nous avons des couleurs claires, des couleurs
sombres et
tout le reste. Mettons-le à l'épreuve en l'
appliquant à une mise en page réelle.
4. Application de votre palette à une mise en page apprenant aune: C'est la partie la plus amusante, c'est de
prendre votre palette et de la faire fonctionner
dans un design réel. Je vais appliquer la mienne à la
mise en page du fichier de démarrage, afin que vous puissiez voir comment j'utilise chaque couleur pour différents
rôles tels que les arrière-plans, le texte et les appels à l'action. Cela dit,
commençons. Je vais commencer par appliquer
des couleurs au texte car il constitue la majorité
du contenu de notre page. Donc, le plan est je veux appliquer un gris foncé à tous les titres, un gris légèrement plus clair aux
autres éléments du texte Revenons donc à notre palette. C'est la couleur de base à partir de
laquelle nous sommes partis. Allons-y avec
celui-ci, par exemple. Donc, copions-le,
je vais sélectionner tous les titres et je
vais les coller dans cette couleur Voyons maintenant quels sont les éléments de texte
habituels. Et une autre chose que
je vais faire est de copier cet élément
à partir des teintes
et des nuances présentes et de le
coller dans le cadre gris Et cela
va juste me dire quelles couleurs j'ai fini par
utiliser dans mon design. Commençons par
la couleur grise de base. Appliquons cela à un élément
et voyons à quoi il ressemble. Et à mes yeux, je trouve que c'est beau. Essayons avec une version
légèrement plus légère, peut-être celle-ci. Appliquons-le ici. Et je pense que cela me donne un
peu meilleur contraste. Sélectionnons-les également
et appliquons cette couleur. Oui, je pense que cela
me donne un bien meilleur contraste entre l'
élément de texte réel et le titre. Et aussi, une chose très
importante que je dois vérifier ici est le
contraste des couleurs pour l'accessibilité. C'est donc en fait
très facile à faire Figma. Si je sélectionne un élément avec une couleur de remplissage et que je clique dessus, nous obtenons ce graphique ici dans
le sélecteur de couleurs, en gros Si la couleur que vous avez sélectionnée
se trouve dans cette zone du
sélecteur de couleurs qui n'est pas en pointillé, cela signifie que le
contraste de couleur de cette couleur par rapport à
celui de l'arrière-plan est
suffisant pour répondre
aux normes de
contraste A dans ce cas Et c'est pour des raisons
d'accessibilité, non ? Il s'adresse aux personnes
malvoyantes qui ont mal à déchiffrer
un texte lorsqu'il n'y
a pas assez Et vous pouvez
voir que nous avons un contraste de
7,45 pour un Je ne vais pas entrer dans les
détails pour le moment, mais juste pour que vous sachiez que c'est une vérification importante à faire. N'oubliez donc pas de le
faire à chaque fois. OK, voyons où je
peux appliquer cette couleur de texte d'autre. Eh bien, je pourrais l'appliquer
ici dans ces onglets, non ? Alors sélectionnez-le et
appliquez-le ici. Oups. Peut-être même celui-ci parce qu'il appartient
en quelque sorte à la même catégorie
de texte que les autres. Ils seront colorés
différemment car ce
sont des sortes de badges dont ils ont besoin pour
se démarquer un peu plus. Mais le texte relatif au temps de cuisson et à
la difficulté de la recette doit
être coloré de la même manière. Je vais donc l'
appliquer à ceux-là également. Maintenant, comme j'ai utilisé
cette couleur pour le texte, donc 553, je vais juste copier cet élément et
je vais le
coller dans mon gris ici OK, finissons
d'appliquer le gris. Nous avons d'autres éléments UA qui devraient utiliser
certaines des couleurs grises. Et là, je
parle tout d'abord des bordures
de ces éléments, de ces boutons, des cartes elles-mêmes. Et nous devons également déterminer une couleur de fond
pour cette liste déroulante. Commençons donc par les frontières. Choisissons la
couleur la plus claire que nous avons ici, qui dans notre cas est DD, DC DC. Et sélectionnons
ces quatre éléments et nous allons changer la couleur de
leur trait en fonction de cet élément directement. Et nous allons juste y jeter un coup d'œil ,
cela me convient parfaitement. Allons-y sélectionnons ces éléments ici et
changeons la couleur de leur trait. Et je pense qu'ils ont l'
air bien aussi. Nous allons donc nous contenter de ça. Alors laisse-moi le copier. Je vais le
coller juste pour savoir quelles couleurs j'ai utilisées. Et maintenant, voyons cet élément du
menu déroulant, n'est-ce pas ? Je vais donc le sélectionner, appuyer sur I, et je vais juste échantillonner cette couleur. Voyons donc à quoi cela ressemble. Ça a l'air plutôt bien. J' aimerais peut-être que ce
soit un peu plus léger. Et si nous examinons la
palette de couleurs que nous avons générée, nous n'en avons pas réellement de version
plus claire. Et dans ce cas,
nous pourrions, vous savez, régénérer l'ensemble des
teintes et des nuances pour cette
couleur et choisir d'autres étapes, en
gros, ou nous pouvons simplement
créer notre propre Vous pouvez donc totalement le
faire. Vous pouvez le sélectionner. Vous pouvez ouvrir le remplissage des
couleurs ici, et nous pouvons travailler en mode HSL,
comme je vous l' ai déjà montré, et nous pouvons simplement augmenter la luminosité jusqu'à ce qu'elle soit
très proche du blanc. Donc 94, dans mon cas, crée une couleur suffisante pour ce fond en particulier. J'en suis donc content, et je vais simplement
copier cette couleur de remplissage, et je vais l'
ajouter ici même. Je vais coller
cette valeur, et je vais également l'appliquer
à cet élément. Voilà pour
appliquer les gris. La mise en page de notre cabinet
est maintenant totalement différente ce
que nous avions auparavant, car nous avons pris soin de colorier
la typographie, les bordures et
tous les éléments qui
nécessitaient essentiellement une couleur grise Passons maintenant à autre chose et commençons à appliquer notre couleur
principale ou notre couleur de marque. Et permettez-moi de le
dire dès le début. Cela devrait être utilisé
avec parcimonie, non ? Il doit s'agir plutôt
d'une couleur d'accent, pas être présente partout
sur votre design. Dans cet esprit, sélectionnons
la couleur principale de la marque et voyons où nous pouvons l'
appliquer telle quelle, directement. Et de mon point de vue, un bon endroit pour le faire est de l'appliquer à
ces icônes, n'est-ce pas ? Je vais
donc simplement double-cliquer et
double-cliquer jusqu'à ce que je
sélectionne le bon cadre, et je vais simplement
remplacer la couleur noire ici. Là où il est indiqué les couleurs de sélection, je vais simplement coller
ma couleur principale. Et cela va simplement
cibler les éléments, les icônes, en gros,
ceux que nous utilisons en noir. Et je vais faire
la même chose ici et je vais faire la
même chose ici. Et ici. Rien qu'en faisant
cela, nous avons maintenant un peu de cette
couleur d'accent dans notre design, et cela
rend tout simplement plus cohérent Mais examinons maintenant
les autres éléments qui
nécessitent notre attention. Et ce sont ces deux badges, où il est écrit « dîner italien »
ou « déjeuner méditerranéen ». Ils peuvent également utiliser
cette couleur primaire. Mais le fait est que si nous les
sélectionnons et que nous choisissons utiliser la couleur complète de la
marque,
ils vont trop se
démarquer. Ils vont attirer notre
attention sur cette section
plutôt que sur cette section où il est
dit « Voir la recette ». Cela devrait être
appelé action, non ? C'est sur cela
que les gens devraient cliquer. Et en appliquant la couleur
complète ici, nous attirons trop
l'attention sur cette zone. Donc, ce que nous devons faire, c'est simplement atténuer un peu plus ces
couleurs. Comment faisons-nous cela en
utilisant des teintes et des nuances ? Nous allons donc revenir à notre
liste de teintes et de nuances. Je vais sélectionner
la couleur la plus claire, la teinte la plus claire de
cette couleur primaire. Et je vais l'appliquer comme arrière-plan
de cet élément. Et ça me convient parfaitement. Ce n'est pas trop de couleur, mais c'est suffisant pour rendre l'ensemble du
design plus cohérent Maintenant, pour le texte lui-même, eh bien, que diriez-vous de saisir
une nuance de cette couleur. C'est donc la base. Prenons
celui-ci, par exemple, collons-le
et voyons à quoi il ressemble, sélectionnons-les deux, collons-le dedans. Et je trouve que ça
a l'air vraiment bien. Ce n'est pas comme le noir. C'est juste une version plus foncée
de notre couleur primaire. Et je trouve que ça
a l'air vraiment bien. Appliquons donc cela
aux autres éléments. Donc, tout d'abord, laissez-moi
sélectionner les autres éléments, et voyons si nous pouvons les trouver. C'est celui-ci juste là. Comme ça. Ensuite, pour le texte, sélectionnons-le. Et tout en maintenant la touche Ctrl enfoncée ou
Commande+Shift, je peux simplement cliquer pour sélectionner
tous ces éléments, coller la nouvelle couleur, et c'est terminé pour
la couleur de la marque. Maintenant, le dernier élément auquel
nous devons appliquer des couleurs est ce bouton
d'affichage de la recette. Alors, que pouvons-nous faire ici ? Eh bien, souvenons-nous
du fait que nous avons une harmonie qui est prête pour
nous et que nous n'avons pas utilisée. Mais en fait, j'ai presque oublié puisque nous avons utilisé certaines teintes et nuances de
cette couleur
primaire, sélectionnons-la et copiez-les dans le cadre de
couleurs de notre marque principale, juste pour savoir quelles couleurs
nous avons utilisées dans notre design OK. Revenons maintenant à l'harmonie
complémentaire. Prenons cette couleur, copiez-la, et utilisons-la pour
les boutons. Je vais donc sélectionner ceci, et je vais simplement remplacer le noir pur par cette couleur. Et dès le départ, c'est trop brillant. C'est bien trop clair. Et comme c'est beaucoup trop clair
sur ce fond blanc, il n'y a pas assez de contraste. Si nous vérifions rapidement ici, vous verrez que
le sélecteur de couleur se trouve à l'intérieur de la zone en pointillés et que nous ne respectons pas la norme de contraste
DA Donc, une chose que vous pouvez faire dans Figma est de
cliquer sur ce bouton, et cela déplacera
automatiquement le sélecteur de couleur vers la première couleur qui
répond à la norme Vous pouvez également créer des teintes et des nuances pour cette couleur, puis en
choisir une. Sélectionnons en fait cette couleur que nous avons créée
avec notre harmonie, et voyons à quoi
elle ressemblera. Sélectionnons-le donc, changeons le contour
et la couleur du texte. Et si nous examinons le sélecteur de
couleurs ici, vous pouvez voir que nous avons maintenant un contraste de couleur suffisant
pour ces éléments Sélectionnons donc toute
cette section, et je vais simplement remplacer cette
couleur bleu vif par celle-ci. Et c'est terminé. Jetons un dernier coup d'œil à ceci : voici quoi ressemble notre mise en page
actuellement. Des gris sont appliqués à la plupart des
éléments, y compris le texte. Ensuite, nous avons ajouté une partie de cette couleur
principale de la marque accentuer
notre design Et nous avons utilisé à la fois la
couleur brute sur ces icônes, mais également les teintes et les nuances de cette couleur sur ces badges ici Et pour l'action principale de Qualta, nous avons utilisé la couleur complémentaire que nous avons obtenue grâce à notre harmonie Et juste comme ça, votre palette n'est pas simplement un ensemble de couleurs. Cela fait partie d'un véritable design
fonctionnel. Nous avons commencé avec une seule couleur. Nous avons élaboré une
palette complète en utilisant des harmonies, des teintes et des nuances et nous l'avons appliquée à une mise en page pour voir comment le tout
fonctionne ensemble Ces mêmes étapes s'appliquent à tous
les projets de conception, qu'il s'agisse de
créer un site Web, une API ou même des actifs de marque Plus vous vous
entraînez à créer de telles palettes, plus vite vous
pourrez choisir couleurs qui s'harmonisent
parfaitement. Maintenant c'est ton tour. Téléchargez le fichier de démarrage à l'aide du lien figurant dans la description du
cours, créez votre propre palette
en utilisant les techniques que nous avons abordées et appliquez-la à
la mise en page fournie. Vous pouvez suivre exactement mon
approche ou vous l'
approprier entièrement. Cela dépend de vous. Et si vous voulez relever un défi
supplémentaire, essayez de créer une version
claire et une version foncée en utilisant la même palette. Lorsque vous avez terminé,
partagez votre travail dans la galerie de projets de classe. J'adorerais connaître votre point de vue à ce sujet. Et si vous aimez ce cours, consultez mes autres cours Skillshare pour
des leçons de conception Web plus rapides et pratiques C'est bon. Merci d'
avoir regardé, bonne conception, et je vous verrai au
prochain cours. Au revoir pour le moment.