Transcription
1. Introduction: Passez des heures à peaufiner les couleurs
pour vous retrouver avec une palette
qui ne semble toujours pas agréable Bonjour. Je suis Ruben Suspez, concepteur de produit
principal chez Del Technologies et partenaire
d'Adobe 20 ans dans le design m'ont
appris une vérité. La couleur fait ou défait un produit. Quelle que soit la théorie de la couleur blanche, créez des palettes accessibles
dans Figma et Adobe XD Vous éviterez les détails et
découvrirez un flux de travail reproductible. Choisissez une teinte de base,
étendez-la en couleurs primaires, secondaires et accentuées. Testez ensuite le tout par rapport au contraste
WCAG en quelques secondes. Nous nous entraînerons en direct, créer une palette et à
l'appliquer sur les titres, les
boutons, les arrière-plans
et le mode sombre Vous verrez pourquoi de petites
modifications de la saturation et de température peuvent guider l'
œil pour améliorer la Vous maîtriserez les dégradés, arrêterez les superpositions et intégrerez les
marques Ensuite, franchissez le cap en
redessinant deux écrans de n'importe quelle application ou site Web
avec votre nouvelle palette Publiez-le, recevez mes commentaires
et passez rapidement au niveau supérieur. Quels outils
allons-nous utiliser ? C'est à vous de décider. Vous pouvez
utiliser Figma ou Adobxt Et en prime, vous
recevrez mon livre numérique de 100 pages à succès, gratuitement
mon livre numérique de 100 pages à succès,
Conquering y Design Alors, êtes-vous prêt à
commencer à deviner et concevoir en
toute confiance, en un clin d'œil, et en moins d'un après-midi, vous expédierez des
palettes de couleurs superbes et adaptées à tous.
Rendez-vous en classe. Faisons de la couleur
votre arme secrète.
2. Basiques de la théorie des couleurs: Bonjour et bienvenue à cette
leçon sur la théorie des couleurs. La couleur est un élément essentiel du design et il est essentiel de comprendre son
fonctionnement pour créer des interfaces
efficaces et visuellement
attrayantes. Dans cette leçon, nous aborderons
les bases de la théorie des couleurs, notamment la roue chromatique, les couleurs
primaires, secondaires et tertiaires, le rôle de la teinte, de la
saturation et de la valeur. Parlons d'abord de la roue chromatique. La roue chromatique est une représentation
visuelle
des couleurs du spectre
disposées en cercle. C'est un outil utile
pour comprendre comment couleurs sont liées les unes aux autres et pour créer des combinaisons de
couleurs. Les couleurs primaires sont le
rouge, le jaune et le bleu. Ces couleurs ne peuvent pas être créées
en mélangeant d'autres couleurs et constituent la base de toutes les autres couleurs de
la roue chromatique. Les couleurs secondaires
sont créées en mélangeant deux couleurs primaires. Ils incluent l'orange
à base de rouge et de jaune. Le vert est fait de bleu et de jaune et le violet
de bleu et de rouge. Les couleurs tertiaires sont
créées en mélangeant une couleur primaire et
une couleur secondaire. Ils incluent des couleurs comme le jaune, vert, le rouge, le violet
et le bleu-vert. Parlons maintenant de la teinte, de
la saturation et de la valeur. teinte fait référence à la couleur elle-même, telle que le rouge, le bleu ou le jaune. La saturation fait référence
à l'intensité ou à la pureté de la couleur. Les couleurs les plus saturées apparaissent plus vives et les couleurs moins
saturées apparaissent plus atténuées. La valeur fait référence à la luminosité
ou à l'obscurité d'une couleur. Plus les couleurs
apparaissent claires, plus les couleurs
sont foncées et plus atténuées. En comprenant ces
concepts de base de la théorie des couleurs, vous disposerez d'une
base solide pour travailler avec la couleur dans vos projets de conception d'
interface utilisateur. Dans la leçon suivante, nous allons explorer les
différentes méthodes de sélection des palettes de couleurs. Merci d'avoir regardé.
3. Choisir une palette de couleurs: Dans cette leçon,
nous allons explorer différentes méthodes pour choisir une palette de couleurs pour
votre interface. Le choix de la bonne
palette de couleurs est très important car cela peut avoir un impact important sur l'aspect général de votre design. Vous
pouvez adopter
différentes approches pour choisir
une palette de couleurs. Commençons par examiner les schémas
monochromes. Une
palette monochrome est composée de différentes nuances et
teintes d'une seule couleur. Cela peut créer un look cohérent
et harmonieux, mais il peut également sembler
limité s'il est utilisé seul. Une
palette de couleurs analogue est composée de couleurs
adjacentes sur la roue chromatique,
telles que le bleu, le bleu, le
vert et le vert. Ils peuvent créer un look harmonieux
et cohérent,
mais ils peuvent également sembler sûrs et inintéressants s'ils ne
sont pas utilisés de manière créative. Une
palette de couleurs complémentaire est composée de couleurs opposées sur
la roue chromatique,
telles que le bleu et l'orange. Cela crée un
effet de contraste élevé qui peut être très frappant. Mais il peut aussi se sentir jaïn
s'il n'est pas utilisé avec précaution. Une
palette de couleurs triadique est composée de trois couleurs espacées de
manière égale autour de
la roue chromatique, telles que le rouge, le jaune et le bleu. Cela crée un équilibre
dans un look harmonieux, mais il peut aussi se sentir trop
dynamique et chaotique
s'il n'est pas utilisé avec modération. Lorsque vous choisissez une palette de couleurs, il est important de prendre en compte
l'objectif de l'interface, le public cible et l'esthétique
générale du design. Vous devez également faire
attention à l'accessibilité des couleurs
et vous attention à l'accessibilité des couleurs assurer que votre palais est lisible et accessible
à tous les utilisateurs. Dans la leçon suivante, nous verrons comment la couleur
peut être utilisée pour créer une hiérarchie et une accentuation
dans la conception de l'interface utilisateur. Merci d'avoir regardé.
4. Utiliser la couleur pour créer une hiérarchie et une attention: Dans cette leçon,
nous allons découvrir comment la couleur peut être utilisée
pour créer une hiérarchie. Et l'accent est mis sur la conception de l'interface utilisateur. La hiérarchie fait référence à l'importance
relative des différents éléments
d'une page ou d'un écran. Et l'accent est utilisé pour attirer l'attention sur un élément
spécifique. L'une des techniques pour créer hiérarchie et une accentuation
est le contraste des couleurs. En utilisant
des couleurs à contraste élevé, vous pouvez faire
ressortir certains éléments et attirer le regard. Par exemple, l'utilisation d'
une couleur claire sur un fond sombre peut créer un contraste élevé
qui attire l'attention. Saturation. C'est un autre outil que vous pouvez utiliser pour mettre l'accent. Les couleurs plus saturées ont tendance à
attirer davantage l'attention que les couleurs moins
saturées. L'utilisation de couleurs très
saturées peut aider à attirer l'attention sur des éléments
importants. La taille est un autre facteur important dans la création de la hiérarchie
et de l'accent. Les éléments plus grands ont tendance à être plus visibles et à attirer
davantage l'attention. donc être efficace d'utiliser
des éléments plus grands pour mettre en évidence peut donc être efficace d'utiliser
des éléments plus grands pour mettre en évidence des informations
importantes. Il est important d'utiliser
ces techniques
avec modération et de tenir compte de
la conception générale, esthétique et de l'objectif
de l'interface. Trop d'accent peut
être accablant et utiliser trop de
couleurs contrastantes peut être choquant. Dans la leçon suivante, nous aborderons l'importance de l'accessibilité des couleurs
dans la conception de l'interface utilisateur. Merci d'avoir regardé.
5. Accessibilité aux couleurs: Dans cette leçon,
nous aborderons l'importance de l'
accessibilité des couleurs dans la conception de l'interface utilisateur. s'assurer que votre interface est essentiel de s'assurer que votre interface est
accessible à tous les
utilisateurs. Cela inclut la conception
pour les utilisateurs souffrant daltonisme et d'autres déficiences
visuelles. Le daltonisme est une
affection qui touche environ 8 % des hommes
et 0,5 % des femmes. Il peut être
difficile pour les gens de différencier
certaines couleurs. Et il existe plusieurs
types de daltonisme. Le plus courant est le daltonisme
rouge-vert, qui peut rendre difficile la distinction entre
ces deux couleurs. Pour concevoir une solution adaptée au daltonisme, il est important de prendre en compte contraste des
couleurs et d'
utiliser une combinaison de couleurs à
contraste élevé et faciles
à différencier. Par exemple, l'utilisation du bleu et du jaune
ou du noir et blanc peut créer un
effet de contraste élevé qui sera plus facile à voir pour les personnes
daltoniennes. Il est également important de prendre en compte les
autres déficiences visuelles, telles que la malvoyance ou la sensibilité à certaines combinaisons de
couleurs. Utiliser du texte clair et de grande taille. En évitant les combinaisons
de couleurs difficiles à lire, vous
pouvez rendre votre interface plus
accessible à tous les utilisateurs. Dans la leçon suivante, nous allons explorer le rôle de la
couleur dans l'image de marque et comment intégrer ces couleurs de
marque dans conception de
notre interface utilisateur.
Merci d'avoir regardé.
6. Le rôle de la couleur: Dans cette leçon, nous allons
explorer le rôle de la couleur dans marque et comment intégrer ces couleurs de marque
dans la conception de votre interface utilisateur. La couleur est un puissant
outil de marque peut aider à créer une identité visuelle
forte et un lien émotionnel
avec les clients. Différentes couleurs peuvent évoquer différentes émotions
et associations. Il est donc important de
prendre en compte le message
que vous souhaitez transmettre lors du
choix des couleurs de marque. Une fois que vous avez défini les couleurs de
votre marque, il est important de les utiliser manière cohérente sur tous les supports
marketing, y compris votre site Web ou votre application. Cela contribue à créer une apparence
cohérente et renforce l'identité de
votre marque. Lorsque vous intégrez
les couleurs de votre marque à la conception de votre interface utilisateur, il est important de prendre en compte l'esthétique générale et
l'objectif de l'interface. Vous souhaiterez utiliser ces
couleurs de manière à
améliorer l' expérience utilisateur et à soutenir la conception globale. Il est également important de prendre en compte l'accessibilité des
couleurs et s'assurer que les couleurs de votre
marque sont lisibles et accessibles
à tous les utilisateurs. L'utilisation de couleurs
à contraste élevé pour éviter les
combinaisons de couleurs
difficiles à lire peut vous aider à rendre votre interface
plus accessible. Dans la leçon suivante,
nous aborderons les techniques avancées
permettant d'utiliser la
couleur dans la conception de l'interface utilisateur, telles que le dégradé, la
fusion et la superposition. Merci d'avoir regardé.
7. Techniques de couleur: Dans cette leçon,
nous aborderons les techniques
avancées permettant d'utiliser la couleur dans la conception de l'interface utilisateur. Ces techniques peuvent ajouter de la
profondeur et de l'intérêt à vos interfaces et contribuer à créer une
apparence plus cohérente. Une technique avancée
consiste à utiliser le dégradé. Un dégradé est une transition
douce entre deux couleurs ou plus. Il peut être utilisé pour ajouter de la profondeur et intérêt à des éléments plats
tels que des boutons ou des arrière-plans. Les dégradés peuvent être créés
à l'aide d'un outil de dégradé ou
en utilisant plusieurs couches de couleur et en ajustant
cette transparence. Mélange. Il s'agit d'une autre
technique avancée qui peut être utilisée pour créer
des transitions fluides entre les couleurs en utilisant les modes de fusion Vous pouvez créer une
gamme d'effets, tels que la superposition d'une
couleur sur une autre ou la création d'un effet
hollandais coloré. Superposition. C'est une autre technique
qui peut être utilisée pour
créer de la profondeur et des intérêts
sur votre interface. En superposant différents éléments, vous pouvez créer une impression de profondeur et créer une hiérarchie
visuelle. Vous pouvez également utiliser la superposition pour ajouter la texture et des intérêts
à des éléments plats, exemple en superposant un motif sur une couleur unie. Ces
techniques avancées peuvent aider à améliorer abcdef et les intérêts
de vos interfaces, mais il est important de
les utiliser avec modération et de prendre en compte l'esthétique générale et l'objectif de
votre interface. Dans la leçon suivante, nous examinerons des études
de cas sur l'
utilisation
efficace et inefficace de la couleur dans la conception de l'interface utilisateur. Merci d'avoir regardé.
8. Analyser des études de cas dans le monde réel: Nous
examinerons des études de cas sur l' utilisation
efficace et inefficace
de la couleur dans la conception d'
une interface utilisateur .
Des exemples concrets de lysine peuvent vous aider à comprendre comment les différents choix de couleurs peuvent avoir un impact sur l'apparence
générale d'une interface. Tout d'abord, examinons un exemple d'utilisation
efficace de la couleur. Site officiel de BMW. La marque automobile utilise une palette de couleurs harmonieuse
qui comprend des nuances de bleu, couleur
foncée et pourquoi. Ces couleurs fonctionnent bien ensemble et créent un look
cohérent et accueillant. Le site Web utilise également la couleur de
manière efficace pour créer une
hiérarchie et des accents. Utiliser des
éléments plus grands et plus saturés pour attirer l'
attention et guider l'utilisateur. site Web de BMW utilise cette palette de couleurs
ou règle de couleurs
603010, avec 60 % de
couleur primaire, le blanc, constituant l'arrière-plan et
30 % de la couleur secondaire. Super, est utilisé comme superposition
sur des photos dans des textes. Alors que dix pour cent
de la couleur d'accent. bleu apparaît sur les icônes, les
graphismes et les boutons. Examinons maintenant un exemple
d' utilisation inefficace de la couleur. La conception de la page d'accueil de NYU présente quelques
défis pour les utilisateurs. L'utilisation d'une seule couleur, le
violet, pour la navigation, corps du texte et le pied de page crée un manque de contraste qui
rend
difficile la distinction entre les
différentes zones
du site qui peuvent prêter à confusion et rendre la
navigation plus difficile. De plus, la
disposition en grille du corps de la section, qui est principalement
composée de blocs avec une seule
couleur d'arrière-plan unie dans certains textes, donne l'impression que la
page n'est pas complètement chargée. Pour remédier à ce problème, l'intégration plus d'images ou l'utilisation de couleurs d'arrière-plan
différentes pour les blogs peut aider à fournir des contextes qui rendront la page
plus attrayante visuellement. Ces études de cas
illustrent l'importance de bien prendre en
compte les couleurs
lors de la conception
d'une interface . Une palette de
couleurs cohérente et harmonieuse peut améliorer l'expérience utilisateur et
créer un aspect cohérent. Alors qu'un palais chaotique ou mal
pensé peut être accablant
et confus. Dans la leçon suivante, nous
allons
apprendre ensemble à sélectionner une palette de couleurs et à l'appliquer à une
maquette de site Web. Il est temps de laisser libre cours à
notre créativité et expérimenter différentes combinaisons de
couleurs mélanger et de les assortir
jusqu'à ce que nous trouvions une palette de couleurs harmonieuse et
équilibrée pour donner vie à notre
site de maquettes. Êtes-vous prêt pour une expérience
pratique ? Donc aussi amusant
qu'éducatif ? Passons ensuite à
la leçon suivante. Je te verrai là-bas.
Merci d'avoir regardé.
9. Appliquer une palette de couleurs : pratiquons ensemble: Salut, bon retour.
Dans cette leçon, nous allons mettre en pratique
ce que vous avez appris jusqu'à présent. Nous avons parlé des
bases de la théorie des couleurs. Nous avons parlé de la sélection
d'une palette de couleurs. Nous avons parlé de l'accessibilité des
couleurs, qui est très importante. Nous avons parlé de l'
utilisation des couleurs de marque
ainsi que de techniques avancées
telles que les dégradés, les modes de
fusion et la superposition. Dans cet exercice d'entraînement,
nous allons donc sélectionner
une palette de couleurs. Nous allons sélectionner
une palette de couleurs complète. Et nous allons l'appliquer à cet incroyable site Web que
j'ai créé pour vous. C'est un site de meubles
et je l'ai appelé. Permettez-moi de zoomer sur
le confort douillet. Nous allons donc
créer cette palette de couleurs, effectuer certaines recherches,
effectuer des tests
d'accessibilité des couleurs. Ensuite, nous allons
appliquer cette palette de couleurs. Une fois que nous serons satisfaits de notre
palette de couleurs, nous
l'appliquerons à ce site Web. Ainsi, vous
aimerez apprendre comment nous pouvons appliquer de la couleur à vos conceptions d'interface utilisateur. Pour cet exemple,
nous allons
utiliser la règle 603010, qui représente 60 % de l'
ensemble. Et je vais clarifier
cela parce que certaines personnes se confondent avec cette règle 603010. Cela signifie que 60 % de l'ensemble de la conception de votre interface utilisateur aura cette couleur,
cette couleur primaire, qui est généralement composée de couleurs douces comme les blancs et les nuances d'éclairage, ou même de couleurs supérieures à 30 %, ce sera votre couleur
secondaire. Ensuite, les 10 % seront
un peu comme votre couleur d'accent, qui est parfois la couleur principale en
fonction de votre marque. Mais nous allons utiliser cette règle et je vais vous
montrer
comment nous pouvons y parvenir. Donc, tout d'abord, puisque nous créons un site Web sur les
meubles, nous devons aller de
l'avant et chercher des idées. Quand on parle de couleurs. Nous devons réfléchir à la signification de
la couleur qui se cache derrière tout cela. Dans ce cas, nous n'
utilisons pas de directives de marque. Nous aimons simplement créer
notre propre palette de couleurs. Donc, quand vous pensez à l'université, vous devez réfléchir à
la signification qui se cache derrière tout cela, comme le rouge, qui signifie passion, énergie
et danger. Par exemple, le violet signifie spiritualité,
unicité, royauté. Jaune, un peu
comme le bonheur, l'
amitié et l'énergie. Noir, qui signifie pouvoir et sophistiqué dans
la mort et le mystère. Pourquoi cette impureté, cette propreté, cette
simplicité et toutes ces choses amusantes. Lorsque nous pensons à un
site Web pour les meubles, nous pensons à la propreté. Nous réfléchissons à la
propreté et à l'élégance qu'ils doivent avoir, parce que c'est
ce que nous recherchons. C'est ce que nous visons. Ainsi, lorsque nous sélectionnons
une palette de couleurs, vous
pensez à un produit. Vous devez
penser à celui d'un utilisateur. Vous devez vous demander si l'intention
qui
sous-tend tout cela en termes couleur joue un rôle assez important. Quand il s'agit
de tout cela, qu'il s'agisse d'un meuble, site Web ou d'un produit, vous
pensez à la propreté , aux tons terreux. Pensez aux bruns et nous
pensons à la couleur blanche, ou nous pensons à
des jaunes, des
oranges et des verts
, selon, quelle est votre
intention ? Nous allons donc commencer
à expérimenter. C'est pourquoi je l'ai créé ici à côté pour
faire un peu d'exploration. Et c'est ce que nous
allons faire maintenant. Nous allons y aller et
chercher de l'inspiration.
C'est une chose. Nous allons passer sur behance.net et,
comme dans la recherche, nous allons taper
Furniture website, n'est-ce pas ? Et nous pouvons juste voir
ce qu'il y a dehors et quels, vous savez, vous savez, nous avons des greens ici. Nous en avons, nous avons un fond
très clair. Comme si la plupart d'entre eux
ressemblaient à un fond clair, ce
qui est bien
parce que c'est ce que nous
recherchons, regardez ça. C'est super simple. C'est ce
dont je parle quand
on pense aux couleurs. blanc est prédominant
ici parce qu' il reflète la simplicité et c'est ce
que vous
essayez de viser. Et je pense que nous allons
faire quelque chose comme ça. Ce que je vais faire maintenant, c'est juste
prendre une capture
d'écran de tout cela. Donc, de cette façon, nous avons quelque chose. Je vais le sortir et
le déposer ici. D'ailleurs, j'utilise Adobe XD, mais vous pouvez utiliser n'importe quel outil avec lequel
vous vous sentez à l'aise, que
ce soit Figma, Sketch
ou Adobe XD, voire Photoshop. Si vous utilisez Photoshop pour concevoir votre site Web, cela n'a pas d'importance. Nous avons donc ici
une source d'inspiration dont nous pouvons certainement nous inspirer. Tu vois ces couleurs. C'est vraiment sympa. C'est vraiment sympa aussi. J'adore ces couleurs. Et je vais vous montrer une astuce
très simple. Pour. Création d'une palette de couleurs rapide en
matière de design. Très bien, donc en plus, celui de Joe
, réduisez-le un peu. Mets ça juste ici, mais ça juste ici, je l'
ai juste comme référence. Ils n'ont rien de
spécial. C'est juste que j'
aime vraiment beaucoup celui-ci. Et je vais
vous montrer une astuce pour créer une
palette de couleurs rapide si vous le souhaitez. Nous allons continuer et
choisir l'outil rectangulaire. Je vais juste créer
un rectangle et ensuite
choisir une couleur au hasard. Et je vais
probablement faire quatre couleurs. Je vais donc maintenir la touche Option enfoncée
sur Mac, Alt sur PC. Je suis juste en train de le dupliquer. Je peux donc avoir quatre carrés
différents pour des
couleurs différentes. Je peux donc choisir certaines des
couleurs que j'aime. J'aime bien cet endroit. Donc,
je vais juste appuyer sur I pour la pipette. Et je vais
commencer à choisir certaines de ces couleurs,
comme celle-ci, par exemple J'aime bien celle-ci. Voyons voir, celui-ci. C'est là aussi. Alors probablement comme ce gris
clair et peut-être que
je peux. Je vais les
changer tout suite, puis choisir celui-ci
et le mettre ici. C'est un peu comme,
euh, une façon de choisir une palette de couleurs
très rapidement. Bien sûr, vous devez
explorer et expérimenter, et un peu comme si vous vouliez le
rendre un peu plus léger, il vous
suffit d'entrer ici
et de le rendre un peu plus léger.
Je remonte ça vers le haut. Disons par exemple que si vous
aimez celui-ci, par exemple, nous allons faire
la même chose. Nous allons, nous allons
dupliquer cette
palette de couleurs en appuyant sur Alt. Et puis j'aime bien
ces couleurs ensemble. Je vais donc commencer par
la couleur claire. Regarde comme c'est léger. Et ensuite, à partir de là, je vais m'installer
dans le canapé. Peut-être que cette couleur est plutôt jolie. C'est bien. Il a un peu ton terreux
que
nous recherchons. Alors nous allons probablement
dessiner celui-ci ici. Et enfin, probablement le vert, probablement quelque chose
comme ça. Regarde comme ça a l'air cool. Nous avons déjà créé
une palette de couleurs, deux palettes de couleurs différentes
uniquement à partir d'images, n'est-ce pas ? Et puis ce que je vous
suggère de faire, c'est un peu comme jouer
avec ces couleurs. Si vous voulez faire quelque chose de
totalement différent, par exemple si vous voulez le rendre
un peu écologique et
plus percutant. Et vous pouvez simplement le déposer vers le bas, peut-être quelque chose
comme là. Peut-être que tu en veux un plus vert, peut-être que celui-ci tu
veux qu'il soit super léger. Vous pouvez donc le
rendre un peu plus léger. J'adore ce ton terreux, ce brun, et puis ce gris
clair est génial. C'est ainsi que vous pouvez créer une palette de
couleurs simple mais directe. Maintenant, je vais vous montrer
une autre façon d'utiliser leurs incroyables sites Web
qui peuvent vous
aider à créer et à
générer des palettes Carlo. Celui que j'ai le plus aimé, je dirais, c'est Adobe Color. Et vous pouvez vous rendre sur color.adobe.com, une barre oblique
vers l'avant, créer une barre
oblique, une roue chromatique. Et puis ici, vous
pouvez expérimenter et faire
comme Analogous
monochromatic. Nous en avons déjà
parlé lors des leçons précédentes. Mais ce que nous allons
faire, c'est entrer dans la section d'exploration. Ensuite, ce que nous
allons faire ici, c'est simplement taper ce que
nous concevons pour elle, savoir une entreprise de meubles. Nous allons donc fabriquer des meubles. Appuyez sur Entrée,
puis nous
verrons de nombreuses options différentes. Comme nous en avons parlé. Il y a beaucoup de
bruns, de tons terreux, mais nous avons dit qu'il y a aussi
des verts,
ce qui est génial. Et l'avantage d'
Adobe Color est que vous pouvez réellement ajouter ces
palettes de couleurs. Disons, par exemple si vous aimez celle-ci, vous souhaitez l'ajouter
à votre bibliothèque. Vous pouvez l'ajouter à
votre bibliothèque de couleurs. Bien entendu, vous devez configurer
votre compte Adobe pour cela. Et puis, lorsque vous accédez
à vos bibliothèques, vous pouvez
déjà trouver ces couleurs dans votre bibliothèque,
ce qui est génial. Et vous pouvez l'utiliser
sur de très
nombreuses plateformes au sein d'Adobe ,
comme vous pouvez le faire : Express,
Photoshop, Illustrator,
InDesign,
quelle que soit plateforme sur laquelle
vous concevez. Vous pouvez donc voir qu'il y a
tellement de Browns. C'est celui qui est le
plus prédominant, comme si j'aime vraiment celui-ci. C'est vraiment sympa. Nous allons donc en choisir un. C'est juste que celui-ci est plutôt agréable. Vous pouvez également le télécharger, en prendre une capture d'écran ou simplement
télécharger le JPEG. Ensuite, une fois que vous aurez
téléchargé le JPEG, nous allons l'
afficher dans le Finder. Je vais poursuivre
notre exploration et simplement
le déposer ici. Regardez ce que ce
programme peut faire pour vous. Il vous fournit le
code hexadécimal avec tout ce qu'il contient. Et vous pouvez également échantillonner ces couleurs à l'aide de la
pipette si vous le souhaitez. Je vais donc le
déposer ici, quelque chose comme là. Et puis, en fait, je vais aborder cette question et
commencer à explorer différentes options pour
notre palette de couleurs ici. Donc, ce que
j'aime faire, c'est y mettre
du vert
d'une manière ou d'une autre, peut-être ce type de vert. Je vais donc simplement choisir
l'une de ces couleurs et choisir ce vert. Je dois dire que
j'aime bien cette couleur que nous avons choisie
ici, elle est plutôt jolie. Donc, ce que je vais faire, c'est
comme si j'allais le laisser tomber. Je vais juste copier
cette couleur ici. Ensuite, nous devons
ajouter certaines de ces couleurs,
comme la couleur claire, peut-être celles-ci, ces
couleurs crème que nous avons là. Ensuite, nous avons
voulu ajouter d'autres couleurs. Nous pouvons certainement le faire. K. Cela pourrait
donc être
notre couleur principale, mais la couleur principale pour le, pour l'image de marque, mais pas
nécessairement pour notre page. Disons que celui-ci, je veux une
version plus légère de celui-ci, donc il fait probablement quelque
chose comme ça. Peut-être que pour celui-ci je
ferai une version plus sombre. Peut-être que je vais
me lancer dans les greens et
simplement descendre un tout petit peu. Peut-être autour des cheveux, peut-être. Et puis, pour celui-ci également, nous allons également opter pour
la super légèreté si nécessaire. Bon, le truc, c'est que
c'est suffisant. Et puis nous avons, super. Voyons voir. On peut être encore
plus neutre avec cette couleur. Parfait. Je pense que je suis content de
cette palette de couleurs. Et ce que je vais
faire,
c'est simplement sélectionner toutes ces couleurs et les ajouter à mes styles afin de pouvoir les utiliser tout de suite. Je vais donc simplement cliquer sur Plus. Il va tous
les additionner. Maintenant, je pense qu'il est temps de
commencer à ajouter
des couleurs et des graphismes. Nous pouvons ainsi appliquer
cette palette de couleurs notre
nouveau site Web de meubles. Une chose que je voulais mentionner est l'accessibilité des couleurs est très, très importante. Et je vais vous montrer
une astuce rapide et comment tester vos couleurs.
Disons par exemple que nous avons cette
couleur et que nous voulons la
tester sur fond
blanc. Donc, vous
allez simplement copier cette couleur. Nous allons copier cette couleur. Nous allons nous rendre sur notre site Web et nous
allons entrer ici, à les
ressources de webaim.org pour son dernier correcteur de
contraste. Et nous allons vérifier par rapport à notre couleur de fond,
qui est le blanc. Ensuite, nous allons
mettre notre nouvelle couleur, qui est ce brun. Et nous
allons le tester. Et c'est ce qu'
un peu comme
vous fournir , c'est vous dire que
les textes normaux comme
celui-ci passent par l'accessibilité
WA WA. C'est ce qu'il va faire, c'est-à-dire vous indiquer
si les balises de vos éléments graphiques passent ,
grâce à
l'accessibilité. Et nous pouvons voir ici que
le Double, Double est passé, mais que le AAA ne passe pas parce qu'il n'y a pas
assez de contraste pour cela. Mais si vous voulez le
rendre un peu plus sombre, vous pouvez le faire
jusqu'à ce que vous obteniez le laissez-passer. Si c'est quelque chose
que vous devez faire, il est très important tester le contraste des couleurs de toutes vos, vos, de vos couleurs. Parce que c'est très important
pour l'accessibilité. Vous voulez vous assurer que vous êtes un designer
universel et que vous offrez l'accessibilité aux
personnes malvoyantes. Et vous allez vous
assurer que toutes vos couleurs fonctionnent. Et parfois, il
y a des compromis, bien sûr. Mais comme vous pouvez le constater, notre couleur passe pour la
plupart. Et même les éléments graphiques
tels que les boutons et
autres éléments de ce genre. Ils passent, ce qui est une bonne chose. Et ils passent même pour
certains textes. Donc, c'est plutôt bien. Assurez-vous donc de bien comprendre l'accessibilité des
couleurs. Nous en avons parlé dans
les leçons précédentes, où nous avons parlé de l'
importance de l'accessibilité. Et comment travailler avec le contraste des
couleurs et utiliser d'autres
techniques avancées pour
vous assurer que tout est prêt lorsqu'il s'agit de
concevoir pour un site Web, concevoir pour une application mobile ou de concevoir un logiciel
ou une application Web. Revenons donc à notre design et commençons simplement à
expérimenter et à utiliser de l'adénine, certaines de ces couleurs pour nous
assurer qu'elles fonctionnent toutes. Très bien, donc tout d'abord, nous avons un fond blanc
ici, un week-end, faire quelque chose
de fou dès le départ. Et nous allons
commencer par ajouter, par exemple, nous obtenons cette couleur, par exemple je suis désolée, revenons en arrière. J'ai sélectionné le mauvais dossier. Nous allons donc continuer et cliquer sur l'arrière-plan réel. Ensuite, nous allons faire glisser cette couleur si nous le voulons. C'est une chose de le faire. Nous pouvons le rendre un
peu plus sombre si vous le souhaitez. Si nous voulions nous assurer
que toutes les couleurs fonctionnent. Mais puisque c'est le cas, je pense que nous devons apporter un peu de photographie ici. Je vais donc me
lancer dans Photoshop. J'ai déjà découpé
cette magnifique chaise. Alors je vais juste prendre ça. Quand je l'aurai copié, je reviendrai ici. Je vais coller ça. Et je vais
juste m'amuser et mettre celui-ci ici. Nous voyons comment la couleur
fait son chemin. Je ne me sens pas très à l'
aise avec cette couleur moment car je
pense que le contraste est un peu trop faible. Mais ce que je vais
faire, c'est y aller, je vais
simplement sélectionner cette couleur, que nous avons déjà ici. Ensuite, il y a des
taxes et d'autres éléments que nous devons
transférer ou utiliser un code
couleur différent pour cela. Ce que je vais faire,
c'est utiliser la pipette. Et puis je vais
choisir ce genre de vert
qui fera la même
chose ici, peut-être. Pour la navigation également, nous pouvons peut-être choisir ce vert
foncé. De cette façon, nous avons
plus de contraste. Et puis ici,
peut-être que nous allons
ajouter du gris foncé. Peut-être que nous pouvons aller de l'avant et avoir quelque chose comme
une forme de violence. D'accord. Je vois, je vois. Peut-être pour les textes. Peut-être que je n'aime pas ça. Le gris. Je suis désolée. Je n'aime pas le
vert pour les textes. Je pourrais peut-être ajouter une
nouvelle couleur au texte. Et puis ce que je vais faire, c'est probablement choisir cette couleur, peut-être. Voyons si cela fonctionne. OK, je vais l'
ajouter à ma palette ici. Et je vais modifier
cette couleur parce que je n'aime
toujours pas son apparence. Bien trop sombre. Peut-être. Peut-être qu'il n'est pas marié. Vas-y un
peu mieux comme ça. Assurez-vous simplement de le
tester par rapport blanc ou à toute autre couleur. Si vous avez un disque en arrière-plan
et que vous utilisez le test assurez-vous qu'il passe les tests
d'accessibilité. OK, je pense que j'en suis
content. Voyons donc à quoi cela
ressemble sur le TX. D'accord. Très bien, c'est pas mal. Je voudrais peut-être ajouter
un peu plus
de rembourrage là-dedans. OK, ça marche. Je pense que je vais
ajouter, je vais faire, je vais ajouter quelque chose
là-dedans, derrière cette chaise. Et je vais probablement utiliser l'une de ces couleurs. Nous avons dit que nous allions
le faire 603010. C'est donc ce que je vais faire. C'est peut-être trop sombre, mais on peut le rendre un
peu plus clair. Cette couleur, ici. Nous allons donc modifier
cette couleur et nous allons simplement la
rendre un peu plus claire, juste un tout petit peu. Voyez comment cela a changé ici, afin d'avoir plus de contraste. C'est très, très important. Alors d'accord, j'aime bien ça. Nous allons donc
ajouter quelques éléments. Je ne sais pas, peut-être quelques graphismes au dos
pour le rendre plus dynamique. Je vais utiliser cette couleur. Peut-être. Je vais
juste le ramener, probablement en réduisant
l'opacité. Je ne veux pas que
ce soit trop. Peut-être quelque chose autour de
ceux qui sont là-bas. C'est génial. Ajoutons simplement un bouton
ici pour
avoir une couleur d'accent. Nous allons donc continuer et choisir l'outil rectangulaire. C'est ce
dont je parle lorsque nous disons qu'il faut y mettre une
couleur d'accent. Nous allons
soit choisir cette couleur qui est jolie, soit choisir cette couleur pour plus de contraste.
Celui-ci est plutôt sympa. Nous allons donc
tester celui-ci sur. Nous allons tester cela sur
le correcteur de contraste des couleurs. Je vais continuer
et disons que nous avons un arrière-plan
de cette couleur, puis
les textes signifieront blanc, 123456. Nous allons le tester
et nous verrons qu'il passe tout, ce
qui est bien. Ce n'est pas un transfert de l'AAA. Mais ce que vous pouvez faire, c'est
le rendre un
peu plus sombre, peut-être, si vous le souhaitez. Vous pouvez continuer et le pousser vers
la gauche jusqu'à ce que vous le trouviez à droite, jusqu'à ce que vous obteniez cette passe. Le rapport de contraste, qui est de
sept, est bon. Mais parfois ce n'est pas le cas. Nous avons certaines contraintes et vous avez des
compromis, et c'est très bien. Vous pouvez y aller et,
pour le plaisir de le
faire, continuons comme ça. Cette couleur est
notre couleur d'accent. Ensuite, nous
pouvons, je ne sais pas, peut-être juste pour cela, nous allons dire « achetez maintenant »
ou quelque chose comme ça. Peu importe à ce stade, nous allons probablement
faire preuve d'audace. Et voyons voir. K nous allons au centre, c'est un peu plus grand. Peut-être que nous pouvons le réduire
un peu. Comme ça, ce n'est
pas dans ta figure. Un peu comme là-bas. Ensuite, nous
allons simplement regrouper cela et l'avoir ici. Nous l'avons donc un peu
comme couleur d'accent, ce qui est plutôt cool. Ensuite, nous allons
passer à la section suivante, qui est notre philosophie. Nous allons
continuer et utiliser
cette couleur, c'est celle que nous avons choisie à
quatre couleurs pour nos textes, mais ensuite, je pense,
pour nos titres, nous pouvons utiliser la même couleur. C'est ce que nous allons faire. Nous allons le faire aussi pour
l'accueil. Parfait. Alors n'oubliez pas que nous
allons le faire. Je vais le faire 603010. Donc, ce que je vais faire c'est choisir
celui-ci qui est le 60. Je vais le mettre
ici sur les côtés. Donc, de votre point de vue,
nous en avons 60. Ensuite, nous
allons avoir celui qui est
celui qui représente les 30 %. Et puis nous allons avoir
celui-ci qui est le dix, qui est la couleur d'accent. Ensuite, nous
allons le réduire. C'est donc ce que nous sommes en train de faire. Pour que tu le
voies un peu mieux. Je vais le mettre ici. C'est donc ce que nous ferons : 60 %
de l'ensemble de notre design
sera de cette couleur claire et
super claire. Ensuite, 30 %, qui seront composés
probablement de nos textes, peut-être sous forme de graphiques ou autres, seront en gris foncé. Et puis la couleur d'accent. C'est 10 %, ce qui correspond
probablement à nos titres dans certains éléments graphiques tels que des boutons et d'autres éléments de ce
genre. Donc, vous aimeriez avoir une idée de la
direction que nous allons prendre. Alors allons-y
et continuons à concevoir ce truc amusant pour ces icônes. Ce que nous pouvions faire,
bien sûr, pour le texte. Tout d'abord, mettons-le
en majuscules. Et puis pour la taxe, je vais, je vais utiliser cette couleur qui est notre couleur secondaire.
Vous pouvez le renommer. Ainsi, vous pouvez, vous savez, comme si c'était ma couleur secondaire
ou principale,
ce sont mes couleurs tertiaires ,
comme si vous pouviez les nommer comme vous
voulez. Nous allons donc continuer et ajouter
de la
couleur à ces icônes. Donc, ces icônes, celle-ci, nous pouvons utiliser les 30, je veux dire, les couleurs d'accent. Nous allons donc le faire en vert. Nous allons faire la
même chose pour celui-ci et pour celui-ci également. De cette façon, nous voyons une certaine
mise en œuvre de nos 30 %, qui
sont ce gris foncé, puis de notre couleur d'accent, qui est ce vert. Ça a l'air vraiment sympa. Je pense qu'il y a du bon. Très bien, pour ces services, je veux faire quelque chose de vraiment
spectaculaire, faire quelque chose complètement différent
et utiliser quelque chose comme Super Dark, peut-être que quelque chose comme
ça est génial. Peut-être voulons-nous en
apporter un peu. Certaines de ces couleurs beige
clair ressemblent à cette couleur
crème, d'une manière ou d'une autre. Donc, pour cela, je vais
probablement utiliser celui-ci. Je vais faire la même
chose pour celui-ci. Et pour celui-ci. Nous pouvons utiliser le
vert clair que nous avons créé, mais ce n'est pas nécessaire. Alors,
mettons-le en blanc. Et je vais
juste, pour les icônes, probablement utiliser
notre couleur d'accent. Ensuite, pour celles-ci, nous allons utiliser notre
couleur suivante, qui est celle sur. Et puis, pour ces mauvais garçons, il n'y a pas assez de contraste, comme vous pouvez le voir ici. Essayons donc quelque chose ici. Tout dépend de notre
expérience, non ? Nous avons donc cette couleur et notre palette de couleurs que nous pouvons utiliser, mais vous pouvez voir que
ce n'est pas suffisant. n'y a pas assez de
contraste. C'est difficile à voir. Si on y retourne et qu'on voit ça. C'est vraiment difficile à voir. Comme si tu pouvais à peine le voir. n'est pas ce que nous voulons. Je veux m'assurer que
nous avons suffisamment de contraste. C'est vraiment nul. Si on teste ça. Ça ne va pas passer. Et je peux te le montrer tout de
suite assez rapidement. Alors je vais me lancer
et prendre cette couleur. Je vais entrer dans
mon testeur de couleurs et je vais mettre
la couleur de fond, qui est celle-ci. Ensuite, je vais aller chercher
la couleur de police, qui est cette copie. Je vais le
mettre au premier plan. Tu vois tout. Cela échoue parce que vous
ne pouvez pas lire ceci. Pour que vous puissiez
lire ceci, vous
devez également
avoir un contraste élevé. Donc, ce que
nous allons faire, c'est par exemple l'augmenter
comme couleur de fond. Tu vois comment il change, non ? Donc, ce que nous essayons de faire ici, il y aura toujours
des contraintes et des compromis. Alors, allons-nous essayer
de le rendre plus sombre, comme celui-ci probablement, qui passe probablement. Tout dépend. Si
nous voulons tester
cela, faisons-le à nouveau. Assez vite. Je vais copier cette couleur. Je vais le coller ici. Alors cette couleur, je
pense qu'on la change. Nous allons donc y retourner.
Nous ne trichons donc pas. Je ne pense pas qu'il va
passer jusqu'au bout. C'est pourquoi vous devez tester l'accessibilité
des couleurs. Il passe le
premier. Elle est douée. Certains graphismes,
des éléments graphiques comme celui-ci, flottent dedans
et, pour ce qui est des impôts, c'est éphémère. Nous sommes donc bien là si
vous devez réussir parce que c'est nécessaire pour votre site Web, passez 33 A, puis vous devez faire en sorte que les
contrats fonctionnent pour cela. Pour le moment, nous
allons le laisser tel quel. Et nous allons le faire
pour ces deux icônes. Ce que j'aimerais faire, c'est
probablement y apporter un peu de ce brun, peut-être, juste
pour voir à quoi ça ressemble. J'aime ne pas
aimer
ça parce que c'est un peu trop. Donc soit j'y vais, voyons voir. Pour utiliser le même. Nous pouvons, si nous le voulons. Le seul problème, c'est
que je devrai
peut-être alléger
un peu celui-ci et celui-ci. Ainsi, nous avons plus de
contraste, suffisamment de contraste. Alors regarde ça. Nous avons donc,
vous savez, une différence entre ces deux et ces deux-là. Mais j'en veux plus. J'en veux plus. Je vais
peut-être recommencer. Peut-être. Peut-être que je ne sais pas,
peut-être que je peux utiliser celui-ci aussi
bien que celui-ci. C'est pourquoi il est très
important d'expérimenter. Parce que lorsque vous expérimentez, vous pouvez voir ce qui fonctionne
et ce qui ne fonctionne pas. Pour le moment,
ces deux couleurs ne fonctionnent probablement pas. Mais c'est en plus de cela. Et puis c'est exactement
ce qui compte le plus l'icône fiscale et réelle. Donc, si vous avez suffisamment de contraste
ici, c'est suffisant. Nous allons donc le
laisser de côté pour le moment. Nous avons probablement
besoin d'un arrière-plan, une texture ou de
quelque chose qui se cache derrière tout cela. Ainsi, une certaine dynamique se produit
en arrière-plan. Mais nous allons en rester
là pour le moment. Ensuite, nous allons passer à
la section suivante, qui est notre collection. Peut-être que nous venons de ce super. Section sombre, peut-être que maintenant
celle-ci doit être plus claire. Nous allons donc continuer
et utiliser notre couleur d'accent. Ensuite, nous allons
utiliser la couleur de notre texte. Alors, pour cette section,
nous allons probablement l'utiliser d'une manière plus légère. Nous allons aller de l'avant
et le rendre très léger. Peut-être. Je vais probablement aller de l'avant et faire quelque chose comme ça. Et je pense que ce n'est pas
parfaitement centré. Je vais donc y aller. Je vais les
sortir du dossier. Et je vais me centrer, c'est parfaitement centré. D'accord ? Mes yeux me jouent des
tours. heure actuelle. 36, Faisons 42, peut-être un peu plus d'espace. Je pense que nous avons
besoin d'autres images ici. Peut-être que nous, peut-être que nous l'avons aligné à
gauche. Peut-être que nous le ferons. Peut-être que nous pouvons y aller et apporter des
meubles ici. Nous allons donc aller de l'
avant et aller unsplash.com et simplement
chercher une solution plus soignée. Nous allons y aller
et en choisir un qui, tu sais, choisissons celui-ci. Puisque nous avons affaire
à un environnement plutôt vert. Accédez à Photoshop. Nous allons
simplement coller ce nouveau meuble. Et je vais faire
quelque chose assez rapidement. Je vais le dupliquer,
sélectionner le sujet. Il va sélectionner un sujet. Je vois qu'il y a de
la folie ici. Nous allons donc nettoyer
ça assez rapidement. Je vais donc simplement supprimer
cette section ici. OK, je pense que c'est bien. Peut-être déplacons-nous cette section
pour la rendre plate. Canne aussi bien. Voyons voir, nous en avons un autre
ici que nous devons déplacer. D'accord ? D'accord. Je pense que nous avons une
très bonne sélection. Il nous manque quelque chose
au milieu. Nous allons donc utiliser la méthode magique et
l'inclure
là-dedans. Oups, attends. Et voilà. Et il nous manque
cette partie ici. Alors je vais juste
y aller et tenir bon. Je vais utiliser l'outil Lasso. Ça va être beaucoup plus rapide. Si je fais ça. Je vais simplement sélectionner ici, continuer et sélectionner celui-ci, puis je vais
sélectionner le masque. Voyons voir si tout
va bien, c'est bien. J'aime jouer un
peu avec ça. Nous sommes dans Photoshop en ce moment, juste en train de récupérer des
images pour nos fichiers. Nous allons simplement continuer. Et je n'aime pas cette partie, donc je vais simplement la
supprimer de la photo. Je n'aime pas cette
partie ici. Je vais donc simplement procéder à la suppression
de cette partie. Soyez indulgent avec moi. Je vais simplement le
supprimer à partir de là. Peu importe. Très bien, je
vais donc copier ceci. Je vais l'apporter
à XD. Je vais le coller ici. Oups, je pense que ça a
tout collé. Attendez 1 s. Quand je le supprime et que je
reviens dans Photoshop, je pense que c'est bien trop gros. Sûrement. Voyons voir. C'est bien trop grand. Donc je vais probablement
redimensionner le tout dans les années 2000. Je vais tout sélectionner. Et je vais coller ça
ici. Et voilà. Oh, voilà. Et regardez cette couleur. C'est une excellente combinaison venant d'ici
avec la même couleur. Et puis venir ici. Parfait. Cela a plutôt bien fonctionné. Donc je vais peut-être l'agrandir un
peu et peut-être comme là-bas. Je vais y aller et y
arriver peut-être. Excellent. Je l'ai vraiment aimé jusqu'à présent,
parfaitement au centre. Ensuite, à partir de là, nous
allons nous contacter. Je ne suis toujours pas d'accord
avec ces couleurs. Je n'aime plus ces
couleurs, cette couleur. Peut-être que nous pouvons y faire
quelque chose, mais nous allons nous en
occuper dans un petit moment. La dernière section pour le
moment est donc la section Contactez-nous. Donc, ce que nous allons
faire, c'est sélectionner Passons à nos styles de couleurs
et nous allons sélectionner notre couleur, puis la couleur de
notre texte. Et puis, pour ces
boutons et tout le reste, nous utilisons la
même couleur d'accent. Nous allons donc procéder
à toutes ces sections. Ils ont une
ligne extérieure pour le TextField. Nous allons donc choisir notre couleur d'accent. Et puis, pour les textes, n'oubliez pas que nous avons
les 30 %, qui sont cette taxe sur les couleurs. Nous allons donc
nous assurer de l'avoir dedans. Peut-être que celui-ci est le cortex, mais celui-ci est
en fait notre couleur d'accent. OK, parfait. OK, je pense que ça
marche vraiment bien. Peut-être que pour ce canapé, nous avons besoin d'une
sorte d'ombre,
peut-être derrière. Alors je vais me lancer
et créer cette ombre. heure actuelle. Alors cette ombre sera probablement
notre couleur d'accent. C'est sûr. Ramenez ça. Et nous allons brouiller
quelque chose comme ça. Ensuite, nous
allons simplement baisser l'opacité,
vraiment, vraiment,
vraiment, vraiment. Ou tu te mets juste un
peu dans l'ombre. Il y a donc de l'ombre là-dedans. Parfait. Souvenez-vous donc de la façon dont
nous avons commencé et que nous avons un peu comme implémenté Nous avons commencé à implémenter
notre palette de
couleurs 603010, vraiment bien équilibrée. Nous en avons. Notre couleur d'accent est ce
vert, ce vert olive. Nous en avons environ 30 %, ce qui revient à couvrir les 30 % de l'ensemble de notre design, c'
est-à-dire que nous
l'utilisons sur le TX. Nous l'utilisons dans notre couleur d'accent. Ensuite, nous utilisons d'
autres couleurs qui
soutiennent cette palette de couleurs, savoir cette crème super légère, genre dix, nous
l'utilisons également ici aussi. Vous devez vous assurer,
comme lorsque vous utilisez couleur, que le pneu l'ensemble des champs de conception sont
cohérents et agréables au toucher. Il faut
expérimenter, bien sûr, comme je l'ai dit, je ne suis pas un
grand fan de celui-ci. Par exemple, je
vais simplement reproduire l' ensemble de
cette mise en page
et expérimenter. Parce que tu dois expérimenter. Peut-être que nous n'avons pas besoin
d'utiliser cette couleur. Ou peut-être que nous le faisons parce que j'aime cette section entre dans cette section, ce qui
est plutôt sympa. C'est comme ici, ces couleurs
ne me conviennent pas. Essayons donc
quelque chose de différent ici. Voyons ce que cela fera si nous
faisions quelque chose comme faisions quelque chose comme si
nous dupliquions cet arrière-plan ? C'est ce
dont je parle quand il s'agit d'explorer. Et je vais dupliquer
cet arrière-plan. Je vais
choisir
une autre couleur,
peut-être à partir d'ici. Peut-être que je vais
aller choisir cette couleur juste pour
tester les choses. Il suffit de le tester pour l'envoyer, juste pour voir ce qui fonctionne. Faites-le, nous pouvons même le rendre un peu plus sombre si vous le souhaitez. Par exemple, si nous
voulions le rendre plus sombre, comme cette section,
cela pourrait fonctionner. Bien sûr, nous avons
plus d'informations de base, mais lorsque nous
combinons des couleurs, nous nous assurons
que les couleurs fonctionnent. Et c'est ce que je vais faire. Je vais juste faire en
sorte que ça soit un peu comme ça. Peut-être, peut-être,
je ne sais pas, nous ne faisons que tester des choses. Encore une fois. clé, c'est d'expérimenter. Et si nous utilisions cette couleur
d'accent ici ? Juste pour
tester les choses. Très bien, peut-être que nous pouvons
le remettre en blanc. De cette façon, nous avons
plus de contraste. Et peut-être aussi les icônes. Je veux dire, en ce moment, ils passent parce que ce sont des éléments
graphiques. Mais restons-en au blanc, pour avoir
plus de contraste. Très bien, alors regardez
ça, ce n'est pas si mal du tout. Je dirais que c'est bien
trop proche de la taxe. Peut-être que pour les textes, nous n'avons
peut-être pas besoin de
toute cette copie. Peut-être pouvons-nous nous en
débarrasser et réduire un peu
le texte. Peut-être comme là-bas. Peut-être avons-nous
besoin d'un bouton. Nous allons donc procéder à la duplication
de ce bouton. Et puis ce bouton,
nous allons inverser. Le fond
sera probablement blanc. Ensuite, le texte à
l'intérieur du bouton sera
probablement notre couleur d'accent, qui est celle-ci. Ensuite, nous allons
probablement changer cela
en Je ne sais pas. Je ne sais pas. Je suis en train de toucher quelque chose
comme là-bas. Parfait. On peut déplacer ça. Le rembourrage est très important, alors assurez-vous d'
avoir suffisamment de rembourrage. Ensuite, vous saisissez vos
trois éléments. Ici, 12312 Dans trois. Juste parfaitement centré. Cela, peut-être que cela fonctionne, peut-être que cela ne fonctionne pas pour moi, fonctionne en ce moment. Encore une fois, vous devez expérimenter et vous assurer que les combinaisons de
couleurs que vous utilisez fonctionnent. Pour l'instant, je n'ai pas impression que ce n'est pas grave. Mais ces deux couleurs
ne fonctionnent pas du tout
parce qu' il n'y a pas
assez de contraste elles ne fonctionnent pas ensemble. Mais ici, bien sûr, nous ajoutons une
version plus foncée de cette couleur. Et puis il y a plus de contraste
et plus d'harmonie. Ici, il n'y a
pas assez d'harmonie. Et c'est ce dont je
parle lorsqu'il s'agit de
créer une harmonie entre les couleurs et de travailler avec les couleurs. la même heure. Ensuite, pour les besoins
de cet exemple, je vais simplement le
dupliquer à nouveau. Ou mêm
10. Votre projet de cours: Préparez-vous à laisser libre cours votre créativité et à ajouter de la
couleur au monde numérique. Pour le projet de classe, vous allez créer
une palette de couleurs pour notre site Web musical
et notre application mobile. Ensuite, vous ajouterez la nouvelle
palette de couleurs au fournisseur. Wireframes peu fidèles, la palette de couleurs doit
être visuellement attrayante et compléter l'esthétique
générale du site Web et de l'application mobile. Les possibilités sont infinies. Accédez à l'onglet Projet et ressources pour télécharger
les fichiers de démarrage, que vous
préfériez Figma ou Adobe XD. J'ai ce qu'il vous faut. J'ai hâte de voir les
chefs-d'œuvre que vous allez créer. Et n'oubliez pas de montrer votre talent dans
la galerie de projets. Époustonnons la
communauté avec vos créations.
11. C'est dans la boîte !: C'est la fin de notre cours
sur l'utilisation de la couleur dans la conception de l'interface utilisateur. J'espère que vous avez beaucoup
appris et sentez plus confiant
dans votre capacité à créer des interfaces visuellement attrayantes dans interfaces conviviales époustouflantes. N'oubliez pas le principal point à retenir, par exemple le premier, la couleur peut
avoir une grande incidence sur l'expérience utilisateur. Et il est important de comprendre
la psychologie de la couleur. La théorie des couleurs est un outil
essentiel pour créer une palette de
couleurs cohérente, visuellement
attrayante et agréable. Troisièmement, jouez avec différentes combinaisons de couleurs et essayez créer
quelque chose d'unique. Il est maintenant temps de mettre vos
nouvelles compétences à l'épreuve. Publiez vos projets dans la galerie de projets et laissez la communauté voir
votre cœur travailler. Et n'oubliez pas de me laisser
un avis et de me suivre sur Skillshare pour plus de conseils
et d'astuces sur la conception d'interfaces utilisateur.
Ruben Cespedes, Principal Product Designer, Mentor & Educator
