Transcription
1. Intro: Cette semaine, nous
chercherons à créer un langage visuel pour nos sites Web ou notre application
Web. Nous commencerons par choisir des photos qui se
complètent mutuellement et qui
fonctionnent bien ensemble et comment modifier un peu ces photos. Nous identifierons les formes qui existent
déjà dans votre
police de caractères, votre logo ou tout autre élément
afin que nous puissions réutiliser
ou utiliser ces formes
pour d'autres éléments. Nous choisirons un style d'
illustration qui complète les
formes existantes que nous possédons. Nous allons ensuite essayer de
trouver des textures qui fonctionnent bien avec ce
style d'illustration et ces motifs. Nous examinerons les
dégradés et la façon de choisir ou sélectionner un dégradé efficace
pour travailler avec vos conceptions. Et enfin, nous
choisirons un ensemble
d' icônes et nous
parlerons de la façon dont nous pouvons modifier un ensemble existant pour fonctionner avec nos conceptions plutôt que toujours créer un tout nouveau jeu. Le langage visuel
sera normalement très,
très subtil sur une
interface utilisateur ou sur la conception d'un site Web, mais il peut vraiment ajouter de la personnalité
et il est toujours là. Nous devons donc en être conscients et travailler avec elle
plutôt que contre.
2. photographies: Vous avez donc défini vos
couleurs et votre composition, mais dès que vous ajouterez une photo, cela va tout changer. Il a ses propres couleurs, et il a aussi sa
propre composition. Si vous n'avez pas de photographe
professionnel ou d'un bon ensemble de photos, cela vaut probablement la
peine de ne pas utiliser de photos du tout. Vous pouvez acheter un ensemble
de photos de stock relativement bon marché comme celles
que j'ai à l'écran ici. Mais ils n'auront
pas beaucoup de caractère. Ils vont utiliser une palette de couleurs très
standard, compositions
très, très standard. Il n'y aura pas
trop d'unique à ce sujet. Et à moins que vous ne puissiez
dépenser de l'argent
fou un photographe professionnel, pour un photographe professionnel,
cela va
vous causer des problèmes. Ici. J'ai choisi presque au hasard neuf photos de bureau qui ne fonctionnent tout simplement pas ensemble. Ces deux-là ont un style similaire, mais ils sont beaucoup
trop orchestrés. L'un d'eux pose
directement pour l'appareil photo et l'autre est
tout simplement malhonnête. Il se sent bon marché, faux et peu digne de confiance. Voici une autre
photo de notre plateau. Cela semble beaucoup mieux. C'est comme si un tir d'action se trouvait
au milieu d'
un appel important. C'est plus
crédible comme si c'est une personne qui travaille dur. C'est ce qu'on appelle la photographie
de sniper. On dirait qu'ils ne savaient pas
que la caméra était là. Et peut-être pouvons-nous
construire un ensemble avec ce style spécifique comme celui-ci. Un autre ici, c'est peut-être un
bon ensemble à mon avis, mais nous voudrions trouver d'autres
photos dans ce style. Peut-être pourrions-nous créer une sorte
de gens qui parlent, gens qui ont des conversations
autour du bureau. Et encore une fois, il a une sensation
plus authentique. On dirait qu'ils ne
posent pas pour la caméra. Malheureusement, cet ensemble
de photos ne
sera probablement pas beau aucun site Web car
il est assez chaotique. Il se passe beaucoup de choses dans
la photo et nous avons passé beaucoup de temps à essayer d'équilibrer le chaos et la conformité
et notre site. Nous ne voulons pas ajouter
une couche supplémentaire de chaos dans un endroit où il
n'est pas forcément beau. Cependant, nous pourrions
collecter un ensemble de photos dans ce style,
mais les recadrer. Il y a donc un seul point d'intérêt
central, ou du moins moins dans
la photo. En ayant un certain style ou règles concernant la façon dont nous
recadrons les photos, nous pouvons les faire en sorte qu'elles se sentent alignées
sans avoir à obtenir des photos qui se sentaient alignées à
l'origine. Ces deux photos ont
un gimmick visuel similaire. Ils ont ces lignes
répétées fortes, les lignes répétées
comme technique très courante
en photographie. Et bien que cela donne à
ces photos un aspect vraiment cool et qu'elles
fonctionnent bien ensemble, il pourrait être trop fort un gimmick visuel pour aller
et mettre sur notre site Web sous ces lignes
verticales fortes pourrait être désordre un peu avec notre
grille existante. Il serait préférable de
créer un ensemble de photos en utilisant une version beaucoup plus subtile de cette technique photographique. Ces deux photos ont des lignes
continues
et elles ont également l'avantage que ces
deux photos reposent sur un
pilier central au milieu. Il serait beaucoup plus facile d' intégrer
ces photos dans notre composition
existante et de pouvoir aligner cette ligne centrale d'une
manière ou d'une autre sur notre grille existante. Donc, sur les options que
j'ai proposées pour créer un ensemble à partir
des photos que j'avais. J'ai choisi ce style ici. Nous avons normalement environ 2,5
personnes dans une conversation
qui ne regardent pas la caméra avec
une faible profondeur de champ E, l'arrière-plan est floue. Il y a moins de chaos
en arrière-plan. Et les poses semblent assez
naturelles pour que cela ressemble à un ensemble de photographies raisonnablement
haut de gamme. Je suis donc retourné et j'ai cherché des sites Web de
photographie de stock, et j'ai trouvé quatre
des photos et je les ai
recadrées pour
avoir le même style. Ils ont tous deux
personnes sur la photo. Aucune des personnes ne regarde directement la
caméra ou ne pose. Ils ont tous une faible profondeur
de champ et ils sont tous profondément impliqués dans une conversation
importante. Le problème, c'est qu'ils
n'ont pas tous été pris dans le
même bureau en même temps. Donc, une partie de la
balance des blancs est erronée. On dirait qu'il y a un éclairage
différent dans les différentes images. Maintenant, ne vous inquiétez pas si vous n'êtes pas un expert en photographie, moi
non plus moi. Mais ce que j'ai fait ici,
c'est que je viens d'ajuster la balance des blancs et une balance des blancs légèrement plus froide. J'ai ajouté des nuances bleues. Cela ne résout pas tout, mais c'était très simple
et maintenant cela rend toutes les images
un peu unifiées. Bien sûr, ce n'est pas particulièrement
intéressant et ce ne sont
peut-être pas
mes couleurs de marque. Je ne sais pas pour cette série de photos
exactes. Essayons encore, mais cette fois avec une balance des blancs plus chaude. Cette fois, nous ajoutons
des nuances jaunes. Cela a l'air bien,
mais je pense que je peux le
rendre un peu plus intéressant. Ce que j'ai fait ici,
c'est que j'ai
refroidi les ombres et
réchauffé les points forts. C'est ce qu'on appelle le tonifiant divisé J'ai également ajouté une
subtile teinte violette. Peut-être que maintenant je le regarde en fait, ce n'est pas si subtil, mais au moins on peut le
voir dans la vidéo. Et maintenant, je crois que ces
photos sont toutes belles, mais elles croyaient aussi qu'elles
appartenaient ensemble et qu'elles appartenaient peut-être à une marque. Je viens de créer
ici
une simple maquette qui
ressemble à une banque. Encore une fois, si je suis honnête. Et maintenant, vous pouvez voir que cette image
est assez belle avec ces boutons, le texte
et les autres couleurs. Mais je pourrais changer ça
avec n'importe laquelle de ces photos. Et ça ne
va pas seulement paraître beau, on aura l'
impression qu' il faisait partie
du même site Web. Si nous ne parvenons pas à obtenir des photos de bonne
qualité, nous voudrions
simplement éviter d'utiliser photographie dans notre application
Web ou notre site Web, nous voulons généralement éviter tout ce qui semble paraître
un peu trop inventé, mais aussi tout ce qui
semble trop complexe. Nous ne voulons que des
photos très, très simples sur notre site Web
parce que nous avons déjà travaillé dur pour nous
assurer qu'il n'y avait pas trop de chaos lors du choix de
nos séries de photographies, nous voulons probablement avoir des choses similaires qui se passent
sur les photographies, ainsi que
dans un style similaire. Nous pouvons créer des règles façon dont une photo
doit être recadrée, ainsi que pour des filtres spécifiques nous pourrions vouloir y placer. Faisons-le ensuite.
3. Les formes: Voici donc quelques formes, nous les avons vues plus tôt. Ils ont certaines caractéristiques, ou le triangle possède ces points
très précis et peut être utilisé davantage
sur un site d'ingénierie. Un carré est très équilibré et les utiliserait
peut-être davantage dans secteur bancaire ou quelque chose
qui veut paraître sûr ou faisant autorité. ensemble, les cercles sont beaucoup
plus doux et ont l'impression d'être un tout. Probablement utilisé plus
dans le bien-être ou les
sites que l'on semble
calme d'une certaine manière. Je ne lirais pas trop
de choses là-dessus. Similaire à croire aux couleurs
signifie des choses différentes. Il y a des niveaux de
subjectivité ici. Et de toute évidence, ce
ne sont pas les seules formes. Il y en a avec plus de points, il y en a d'autres avec
des angles différents. nombre presque infini de formes que nous pourrions utiliser pour créer des icônes ou simplement
des textures différentes autour de notre site Web. Chaque forme comporte
des centaines de variantes. L'épaisseur de la ligne. La ligne paraît-elle plus épaisse
à une extrémité que l'autre ? Est-ce qu'il a des bords arrondis ? Les bords sont-ils effilés ? Il y a beaucoup d'autres
variantes ici. Alors, comment décider
quelle forme et combien de formes peuvent être utilisées dans nos icônes et nos illustrations ? Eh bien, comme
le point de départ
de notre grille de base devrait être notre police de caractères car elle constitue la majeure partie du site Web. Peut-être le point de départ pour
choisir les formes qui
fonctionnent dans nos icônes, dans nos illustrations, devrait
également être la police de caractères choisie. C'est déjà
des milliers d'endroits autour de la conception de mon site Web
sans même essayer. Veillons donc à ce que tout le
reste fonctionne bien avec ça. Ainsi, avec ma police de caractères
choisie, nous pouvons voir qu'il y a un
contraste frappant dans la largeur de ligne. Il y en a des
très épais et très fins utilisés
dans tout le type. Si je devais créer
une icône qui, je croyais, fonctionnerait bien
avec cette police de caractères. Je ferais en sorte qu'il ait également
ce contraste frappant dans les largeurs de
lignes. Cette police utilise également
un angle très spécifique tout au long de cette courbure très
spécifique que vous pouvez voir au
bas du T ici, je viens de
démontrer avec cette forme d'œuf qui
suit cette même courbe utilisée
également dans
cette police de caractères est ce type
de cône épais à fin. Il ne se transfère pas
directement d'une ligne épaisse vers une ligne fine. Il se rétrécit et il
ne se termine jamais sur un point. Il a toujours un bord
légèrement plat. En regardant tous
les glyphes, nous voyons qu'ils utilisent
principalement les mêmes formes et angles de
largeur de ligne. Cette police utilise en fait beaucoup
la forme du coin. Il s'agit d'une
forme très spécifique pour cette police de caractères. Nous pourrions donc utiliser cette même forme dans nos icônes, nos illustrations ou tout autre
langage graphique pour que tout soit
un peu unifié. Nous parlerons de
la création d'icônes et illustrations plus loin
dans cette vidéo. Mais ce sont les
formes que nous pourrions potentiellement utiliser pour
créer ces choses. Mais n'oubliez pas que chaque fois
que nous applaudissons les choses dans notre conception, nous voulons toujours qu'il y ait
un élément de conformité et un
élément de contraste. Si nous n'avions qu'une
seule police de caractères ou si nous avions des faces de type qui
ne contrastent pas trop, nous voudrions peut-être aller dans l'
autre sens et utiliser des formes et un style
d'illustration général complètement différent. Ce site Web, par exemple, comporte des textes de
titres très similaires, mais il a un style d'
illustration. Il a l'air presque dessiné à la main. C'est une illustration très simple et il n'y a rien
d'autre sur la page, c'est juste un arrière-plan
unicolore complètement uni. Le contraste frappant entre
les faces de type et le style d'
illustration fonctionne parfaitement dans ce
contexte car il y a si peu de contraste
sur la même page. Si nous avons une police de caractères
assez compliquée, nous voudrions peut-être que les
éléments visuels de la page le contrastent en étant
particulièrement simples. Supposons donc que j'ai
ces deux polices de caractères ici. Maintenant, la police de caractères
est assez complexe. Donc, dans ce cas, je voudrais que le langage visuel renversé soit assez simple, mais prenons certaines
des formes que j'ai identifiées plus tôt de la police principale et utilisons pour cette fenêtre
contextuelle modale ici. Donc, tout d'abord, au lieu
de coins arrondis, j'ai pensé qu'il pourrait
sembler intéressant avoir ces coins légèrement
effilés utilisant le même
angle que celui utilisé par le coin sur la police
de caractères. Ensuite, j'ai ajouté une
croix comme une sorte de bouton de fermeture pour
cette fenêtre contextuelle modale. Et j'ai choisi
d'utiliser un contraste similaire dans les poids des
lignes qui sont également utilisés dans la police de caractères de titre, avec la ligne plus fine utilisée
comme découpe sur le x. Et finalement, j'ai ajouté
une sorte de gris Swoosh en bas
à gauche de
cette fenêtre contextuelle modale, qui est le même angle de swoosh que celui utilisé en bas
des lettres minuscules t, a, e et de
nombreuses autres lettres que j'ai
identifiées dans cette police de caractères. Maintenant, je crois que cette fenêtre contextuelle
modale correspond davantage au style
de la police utilisée sans la
compliquer ni ajouter trop de
contraste au design. Ce n'est qu'un exemple
très simple de la façon dont je peux utiliser les formes que
j'ai identifiées
à partir de la police de caractères dans un simple élément d'interface utilisateur. De même, lorsque
nous parlons de couleur, nous ne parlons pas seulement d'une poignée de
noms de couleurs que nous avons. Quand on parle de formes. Il ne s'agit pas seulement de carrés, de
triangles et de cercles. Il y a toutes sortes de
formes pour lesquelles nous n'avons
même pas vraiment de noms
connus. Les qualités de ces formes
peuvent changer radicalement en modifiant la largeur de ligne et
les qualités de la ligne. Lorsque nous choisissons des formes
que nous pouvons utiliser dans le
langage visuel de nos conceptions, nous voulons savoir à
quel point les formes
sont complexes dans les polices de caractères que
nous avons déjà choisies. Si la police de caractères est
déjà choisie, il y a beaucoup de contraste et
beaucoup de types de formes
différents. Nous ne voulons pas introduire trop de nouvelles formes
dans nos conceptions. Si nous avons commencé avec des faces de type beaucoup
plus simples, nous pouvons probablement ajouter beaucoup
plus de contraste dans les formes. Et nous examinerons quelques exemples
de cela lorsque nous examinerons l' illustration et la création d'icônes.
4. Illustrations: Parce que la topographie de
ce site est si simple, cela signifie qu'ils peuvent jouer un
peu plus avec les illustrations et même
ce fond de fond, cette illustration
est assez grande, elle est assez complexe, et utilise aussi une certaine texture. Rien de tout cela ne
serait possible s'il y avait une police de
caractères très compliquée en haut
et, bien sûr, une palette de couleurs relativement
petite. Et voici un autre exemple de topographie très simple, beaucoup d'espaces blancs,
ce qui nous permet de
jouer un peu plus avec l'illustration. Je sais que je montre
beaucoup de pages d'accueil ici. Il suffit donc de faire défiler vers le bas
et de voir une grande partie de l'iconographie et des animations
subtiles sont beaucoup plus complexes à
ce sujet car il y tellement d'espaces blancs
et il a une police de caractères si simple. Et dernier exemple, celle-ci possède
également des polices très,
très standard. Il peut donc utiliser ce
style d'illustration très
rayant, très réaliste, dessiné à la main, et il a fière allure. Le contraste entre
ces deux choses fonctionne parfaitement parce qu'
il n'y a pas trop de couleur, il n'y a pas trop
de complexité sur la page. C'est donc un bel exemple
contrastant avec le dernier que nous avons examiné. Ceci a une typographie un peu plus
compliquée, une
palette de couleurs légèrement plus complexe avec la couleur de
fond ici. Il a donc un style d'illustration légèrement moins complexe. Voici donc un design
que j'ai créé plus tôt. Vous m'avez vu créer cela, et je ne suis pas particulièrement
satisfait de l'illustration. Je viens d'en enfoncer une ici
sans trop réfléchir, je vais retirer cette
illustration pour que nous puissions essayer d'en coller
différentes ici. Mais avant de le faire, je voudrais suggérer que vos couleurs ne
doivent pas nécessairement être réalistes. Rappelez-vous, plus tôt, nous avons
dit que la valeur est beaucoup
plus importante que la teinte quand il s'agit de choisir les couleurs
, c'est particulièrement vrai lorsque nous trouvons
comment choisir nos Hughes, ce type a un vert. ordinateur portable, ce qui est un peu étrange. Vous pouvez probablement
le voir dans le monde réel, mais vous pouvez également avoir une illustration où
le ciel est orange, où la
peau de la personne est verte, où l'eau est rouge. Et tant que nous aurons
les bonnes valeurs, elles auront fière allure. Mais en jouant avec les teintes, on peut le rendre plus intéressant. Et bien sûr, nous pouvons obtenir nos couleurs de marque
dans leur impossibilité. Alors que nous venons de parler
de formes, nous voudrions peut-être créer
une illustration qui n'
est qu' un motif de formes. Et donc peut-être que j'ai ces
triangles et cercles de couleur aléatoire ici. Maintenant, je me suis donné un
défi parce que la police de caractères que nous utilisons ici pour afficher
le texte est très complexe, mais elle est aussi un peu géométrique. Ces formes géométriques que j'ai ajoutées à titre d'illustration ici. Je ne pense pas que cela
fonctionne aussi bien. Et c'est parce que
nous n'avons pas vraiment contraste entre le texte affiché et
l'illustration. Bien que cela signifie qu'il est
beau et uniforme, cela signifie qu'il y a une
illustration qui n' ajoute rien
au design et
qu'il n'y a pas vraiment d'intérêt visuel ici. Si semblable à l'un des
exemples que nous venons de regarder, je vais utiliser une illustration
dessinée à la main, mais je vais la garder un
peu dans un cercle. Il y a un
endroit très précis où il vit. Maintenant, j'ai choisi cette illustration de
chat sans autre raison que le fait qu'il
a ce coin est, et ce coin pied gauche et le poisson sur son
tableau blanc ont un visage de coin. Et il y a beaucoup
de coins dedans, comme ma police de caractères
contient beaucoup de coins. Je suis donc conscient des
formes de la police de caractères, mais je ne
les copie pas dans le même style, donc il y a toujours
le contraste. Examinons maintenant ce design. Un nouveau, mais cette fois, nous avons changé les visages
de type
en quelque chose qui ressemble plus à
ce que vous allez probablement travailler avec une agence de conception web
moderne. La police de caractères est
beaucoup plus standard. C'est très boxy, c'est sans empattement, et plus encore,
c'est trop utilisé. Ainsi, tout le monde a
l'habitude de voir ces
polices de caractères partout et potentiellement embarqué. Il s'agit
maintenant d'un défi très
différent car pour créer une illustration qui
fonctionne avec ces polices de caractères, il peut être beaucoup plus
complexe d' obtenir un certain
contraste. Mais cela doit aussi être
dû au fait que sinon cette
conception risque d'être visuellement monotone et d'endormir nos
utilisateurs. C'est une illustration nous avons utilisée plus tôt dans le
cours qui pourrait
très bien fonctionner ici, c'est ce style 3D cool qui est
très à la mode en ce moment. Et il ajoute beaucoup
d'intérêt visuel, offre beaucoup de contraste avec
la police de caractères et s'intègre très
bien dans cette section. Un gros inconvénient est
que je n'ai pas eu temps de créer mes
propres illustrations, et vous le faites rarement. C'est une
illustration très surutilisée est un
style d'illustration très surutilisé à tout le moins. Je ne
veux donc pas vraiment utiliser cela à côté d'une police de caractères très
surutilisée. On pourrait vous pardonner
de penser que
vous avez déjà
vu ce design. Nous voudrions peut-être
simplement créer quelque chose de sauvage et de chaotique. Sinon, nos
designers cherchent juste loin d'être conformes et ennuyeux. Donc, au contraire,
je viens de créer des formes farfelues sans aucune
raison réelle consciente pour elles. Personnellement, je
pense que cela contraste
bien mieux
avec la topographie. Nous pouvons rendre cela plus
intéressant dans une vidéo ultérieure. Mais lorsque nous
parlons de textures motifs
et de dégradés, similaires à
différentes polices de caractères. Lorsque nous choisissons un style d'
illustration, nous voulons qu'il y ait un certain
niveau de contraste entre nos éléments existants
et la police de caractères, mais nous voulons surtout qu'ils se sentent
connectés et qu'ils se sentent connectés.
conformité. Plus le reste
des éléments de notre conception est propre et
simple , plus
l'illustration peut être loufoque et
folle. Et si nous
avons déjà beaucoup de contraste entre les éléments
existants, nous allons vouloir une
illustration un peu plus contenue et un
peu moins folle.
5. LES TEXTURES: La plupart des concepteurs Web
vont
examiner la typographie et la couleur et peut-être penser à
la composition ou apprendre à améliorer
un peu leurs compositions. Mais ils vont rarement
penser à quel langage
visuel. Et même si c'est le cas, c'est normalement dans le
contexte des formes, comme nous venons de parler. Cependant, le
langage visuel est toujours présent,
que nous y réfléchissions ou non. Et tout comme si
nous essayons de choisir une police de caractères sans personnalité, juste dans l'espoir que nous
ne communiquerons rien en
utilisant simplement des couleurs plates, par exemple, était encore
très communiquant. quelque chose. Cela signifie que la plupart
des sites Web éviteront même considérer les textures, les
motifs ou les dégradés. Nous voudrions donc au moins envisager de les ajouter
à nos sites Web ou applications, car il
sera très facile pour nous de
créer une personnalité unique et une application Web mémorable. Nous pourrions potentiellement le
rendre plus utilisable en attirant
peut-être davantage l'
attention sur un élément
interactif. Par exemple, lorsque
nous utilisons des dégradés sur un bouton pour le faire apparaître
un peu plus en 3D. Nous pourrions peut-être utiliser
une texture à la place. Nous pouvions donc parfois
utiliser une texture pour rendre quelque chose plus
réaliste ou plus skeumorphique. Et peut-être que parfois les gens
veulent interagir avec elle. Je ne pense pas que les designers en
parlent assez,
mais j'ai un stylo sur mon bureau en ce moment et je clique souvent sur
le bouton au verso alors
que je n'en ai pas vraiment besoin. Par exemple, personne n'a jamais
besoin de cliquer sur ce bouton juste parce que
quelque chose est agréable. Et nous allons examiner cela
dans le prochain module sur l'animation beaucoup plus loin. Mais si le bouton est plus agréable, nous allons
vouloir cliquer dessus. Passons un peu de
temps à chercher une texture qui, selon nous,
fonctionne avec notre image de marque. Maintenant, nous pouvons être tentés de simplement copier un site qui a fière
allure sur un autre site Web, mais nous essayons de créer une expérience unique pour
notre site marketing ici, ou de donner une personnalité unique
à un tableau de bord. Essayons donc de trouver
un modèle unique. Nous pouvons rechercher
quelque chose comme Pinterest. Et les gens ont en fait
téléchargé toutes sortes de textures
et de motifs différents ici. Et nous pourrions l'utiliser comme source
d'inspiration, ou nous pourrions peut-être simplement
copier certaines textures que nous avons trouvées. Nous parlerons un
peu de la différence entre une texture
et un motif sous peu. Mais d'abord, je vais
regarder les textures. Voici maintenant le design que j'ai
créé un peu plus tôt. Et si je changeais
cette ligne droite en une texture fraîche peinte à la main
sur l'écran comme celle-ci. Maintenant, personnellement, je pense qu'il y a instantanément l'
air super cool. Il y avait une
ligne ennuyeuse sur la page, et maintenant cela semble
vraiment intéressant, mais cet intérêt
attire notre attention. Cela crée une énorme quantité de contraste dans un endroit
qui n'est pas très important et c'est presque maintenant la première chose que je remarque
sur cette page, rappelez-vous, la seule raison pour laquelle nous avons une couleur différente dans
l'arrière-plan lorsque nous faisons défiler la page pour
briser la monotonie visuelle, idéalement, faites-le avec une
sorte de rythme. Par conséquent, la ligne droite en arrière-plan
où nous passons du blanc au violet n'est particulièrement importante
ni intéressante. Et si quoi que ce soit, nous voulons attirer moins d'attention sur elle, pas plus. C'est peut-être un très
mauvais endroit pour utiliser une texture. Quelque chose comme la topographie pourrait être beaucoup plus important. Le plus
important est probablement que nous
puissions apprendre de
n'importe où, à tout moment. Donc, à mon avis, le meilleur endroit pour dessiner
plus de contraste serait des mots
trop spécifiques
dans cette rubrique, faisant un peu
de texture ici,
probablement le meilleur endroit où
nous pourrions en mettre. Nous pourrions également ajouter des textures intéressantes à cette illustration bizarre
d'un chat que j'ai. Parce que nous avons déjà un certain
intérêt visuel pour cette illustration. Nous ne voulons probablement pas
une texture vraiment dure, vraiment compliquée comme
celle-ci. Nous pourrions peut-être
adoucir ou simplifier cette texture pour qu'elle soit un
peu moins dure. Mais encore une fois, il s'agit ici d'un cercle de
fond. Ce n'est peut-être pas l'
endroit le plus important pour mettre de la texture. Ce que j'ai fait
ici, c'est que j'ai directement ajouté de la texture
à l'illustration. Il lui donne un aspect un peu plus
tactile, rend plus intéressant
visuellement. En fait, je l'ai
fait directement dans un programme de dessin pour qu'
il soit très unique. J'ouvre simplement l'illustration
dans Procreate sur iPad, choisi une texture et j'ai
juste griffonné quelques couleurs sur certaines
zones. Mais cela
ajoute très facilement une texture unique. Et il s'agit maintenant d'un ballon flambant neuf. J'ai d'autres
illustrations plus petites ici, presque des icônes, mais un peu trop grandes et complexes pour
être considérées comme des icônes. Je peux maintenant ajouter les mêmes
pinceaux et des trucs sont utilisés sur cette illustration supérieure pour ajouter un peu de
texture à ceux-ci, ce qui les
rend plus alignés. Étant donné que je n'ai créé
aucun ensemble d'illustrations, cela leur donne l'impression d'appartenir un peu plus ensemble. Bien sûr, j'ai déjà
ajusté les couleurs de ces illustrations pour qu'elles aient le même genre
de couleurs. Les textures peuvent être utilisées
lorsque nous voulons rendre notre application Web ou notre
site Web très unique. Nous pouvons même trouver une texture
peinte à la main très
personnalisée , ou
même créer nôtre, les importer et les
utiliser dans nos images. Il semble probablement un peu trop unique pour être utilisé pour une marque
très corporative. Cependant, pour quelque chose
qui est un peu corporatif, nous pourrions tout de même utiliser
des textures assez subtilement comme je l'ai fait avec l'
illustration du chat dans cette vidéo. Et comme le
langage visuel est si unique, cela signifie qu'il faut réunir
tous nos éléments de marque, tous nos différents
visuels sur le site Web
deviennent alors très faciles. Chaque partie de notre site Web instantanément l'
impression d'appartenir à la même marque, car
elle utilise une texture qui n'est vraiment utilisée nulle part
ailleurs sur Internet.
6. Motifs: Maintenant, un motif est légèrement
différent d'une texture ou un motif est quelque chose qui se
répète sur une grande surface. Cela signifie qu'ils peuvent
être utilisés beaucoup plus subtilement dans le contexte
de quelque chose. Cela signifie qu'ils peuvent couvrir
une zone plus grande évidemment, mais ils présentent également un avantage de
développement, savoir qu'il peut s'agir
d'une image particulièrement petite ou d'un SVG répété
sur une grande surface. L'image originale est donc
très petite et
très rapide à charger. Par exemple, si
nous voulions ajouter un motif à ce même design nous venons d'
ajouter des textures. De façon réaliste, je ne le
ferais probablement pas parce qu'il y a peut-être
trop de complexité dans le design dans l'ensemble. Peut-être aurais-je de nouveau opté pour
cette forme de coin triangulaire, qui est maintenant utilisée
dans mon illustration, ainsi que dans ma police d'affichage. Je pourrais donc avoir un motif
répétitif simple en utilisant des triangles de
couleur légèrement différents. Dans ce cas, je
suggère que ce motif ne
fonctionne pas parce qu'il y a beaucoup trop peu de contraste entre le motif
et la police de caractères. Non seulement ils
utilisent tous les deux des formes de coin, mais
ils sont également
très géométriques. Et pour cette raison,
j'ai l'impression que j'aurais besoin d'un peu de contraste pour que le motif
ajoute quelque chose au design. Parce qu'à l'heure actuelle, je ne
pense pas que cela ajoute autre
chose qu'une complexité
inutile, peut-être semblable à la façon dont nous avons choisi ce chat dessiné à la main au sommet, nous voulons des triangles légèrement plus
dessinés à la main . Au lieu de cela, si nous avions choisi une police légèrement plus
humaniste ou quelque chose même dessiné à la main
, les triangles géométriques
pourraient fonctionner un peu mieux. Mais avec tous les
triangles pointus de la police de caractères, je crois que les triangles
dessinés à
la main en arrière-plan ici
vont mieux fonctionner ici. Et remarquez que j'ai ajouté une petite boîte violette
derrière le texte, sorte que nous n'avons pas
la distraction du motif
directement derrière le texte. Donc, un motif sera
normalement beaucoup plus subtil. Il sera moins distrayant pour un utilisateur, car il s'agira de
la même façon de couvrir la zone. C'est également moins de travail techniquement. Il est plus facile à entretenir, il est plus facile de charger la page
Web. Normalement, nous pouvons nous en sortir davantage sur un tableau de bord
plus
professionnel ou professionnel de notre application Web. Il suffit de le différencier d'une manière ou d'une autre, rendre plus unique et de lui donner une sensation légèrement plus haut de gamme.
7. Les gradients: Les dégradés peuvent être un moyen très
simple de créer langage
visuel un peu plus compliqué que les couleurs de base. Si les couleurs de votre marque
étaient orange et bleu, il y a probablement beaucoup d'
entreprises avec un orange très similaire
et un bleu très similaire. Mais lorsque nous créons un dégradé orange à bleu à
un certain niveau, nous sommes peut-être la
seule entreprise utiliser ce dégradé exact, ce qui va rendre
nos applications un peu plus agréables.
unique et
un peu plus mémorable. J'ai créé ce design plus tôt lorsque nous
parlions de formes. Nous avons cette
police sans empattement très boxy. Nous voulons donc vraiment que les
formes, les autres formes, les motifs ou les textures
que nous utilisons
soient très fluides et fluides. Travailler avec une police de caractères comme
celle-ci peut être
très amusant lorsque vous arrivez à ce stade, car nous avons choisi des polices de caractères si
simplistes, nous pouvons nous amuser un
peu plus avec le visuel. langue. Bien sûr, nous pouvons ajouter des dégradés subtils à ces formes et à l'
ensemble de l'arrière-plan. Et c'est moins distrayant
derrière cette police car nous avons beaucoup plus de
place pour créer du contraste. Remarquez que ces dégradés
se situent essentiellement entre des nuances de bleu légèrement
différentes. Nous voulons très rarement choisir
des couleurs
aux extrémités opposées de
la roue chromatique. En fait, si je
voulais, par exemple, créer un dégradé
jaune à bleu, nous savons déjà que le milieu
va être gris et nous voulons éviter de
griser dans nos dessins.
dans la mesure du possible. Nos dégradés ne devraient idéalement pas se déplacer trop loin autour de la roue
chromatique dans son ensemble. Cela signifie que les
dégradés que nous créons
exigeront un peu moins d'
attention de la part de nos utilisateurs. Mais cela signifie aussi que la
couleur au milieu
du dégradé
sera toujours très vibrante. Une bonne solution si nous
voulions créer un
dégradé légèrement plus compliqué pour les zones plus petites, c'est que vous pouvez bien sûr placer un troisième arrêt au
milieu de votre dégradé. Et cela créera
quelque chose d'un
peu plus unique pour notre marque, mais veillera également à ce que
la couleur au milieu soit encore assez vibrante
et non pas grise. Bien sûr, dans mon exemple ici, il pourrait y avoir
des problèmes de lisibilité. Nous ne
traitons que de trois lignes de texte au-dessus du dégradé. C'est donc moins important ici. Mais nous voulons toujours
être conscients que même si le contraste des couleurs entre le premier plan et l'
arrière-plan est bon, s'il y a beaucoup de
complexité en arrière-plan,
cela va encore rendre
la tâche plus difficile. pour lire le texte. Quelque chose comme un dégradé n'est pas aussi compliqué qu'un motif. Et donc normalement, c'est bon. Chaque
combinaison de couleurs imaginable est
déjà utilisée pour une marque
quelque part en ligne. Il est très difficile
pour vous de proposer
un jeu de couleurs unique
pour votre marque si vous n'utilisez pas l'autre langage visuel tout au long du reste
de ce module. Une chose que vous pouvez faire
est de créer un dégradé. Les dégradés sont instantanément
plus uniques qu' une
simple couleur plate
et il ne s'agit
pas d'un travail technique
à ajouter à un site Web. Nous voulons toujours
qu'ils soient subtils, donc nous
voulons presque toujours utiliser des couleurs donc nous
voulons presque toujours utiliser des couleurs proches les unes des autres
sur la roue chromatique, ce qui nous empêchera également
d'obtenir une horrible couleur grise quelque part dans
au milieu de notre dégradé. Et si nous utilisons un dégradé excessif dans nos conceptions, surtout s'il s'agit d'un arrière-plan, nous voulons
réduire la complexité des autres couleurs et images
utilisées dans la conception. Et nous voudrions peut-être augmenter les espaces blancs dans d'autres régions.
8. Icônes: Les icônes peuvent faire une énorme différence
pour une application Web. Je sais que nous sommes un peu
plus tard dans ce cours, mais ne sous-estimez pas à
quel point les icônes peuvent être importantes. Ils peuvent facilement avoir toute la personnalité d'
un logo pour communiquer message de
votre marque tout en résumant ce que signifie
quelque chose dans
un seul symbole. Cela signifie que les gens
peuvent le repérer très rapidement avant de commencer à
lire quoi que ce soit sur une page. Vous pouvez normalement trouver le bouton Enregistrer et le bouton
Pièces jointes. Et les icônes traduisent normalement les langues et les dialectes beaucoup
plus rapidement que tout autre chose. Aidez les gens à identifier
où se trouve une icône. Et pour garder un message cohérent, nous voulons que notre ensemble
d'icônes ait l'impression qu'ils
appartiennent ensemble. Maintenant, à moins d'avoir un budget
particulièrement important, nous allons normalement
acheter un jeu d'icônes et probablement
les ajuster un peu. Il y a des
icônes totalement gratuites très faciles
à utiliser comme
Font Awesome et l'icône de héros. Nous n'allons vraiment les
utiliser que pour le prototypage. Ils ne possèdent
pas vraiment les caractéristiques uniques que nous voulons pour nos jeux d'icônes. Si nous utilisons ces
applications très rapidement, on dirait dix autres applications que
vous avez déjà vues. Mais créer nos propres
jeux d'icônes est vraiment difficile. Nous voulons qu'ils soient
cohérents sur l'ensemble de notre site. Nous voulons parfois qu'ils travaillent à
différentes tailles. Et nous avons besoin qu'ils
communiquent facilement quelque chose. Vous allez donc très rarement en
créer un à partir de zéro non plus. Pendant que nous
recherchons un ensemble d'icônes, nous voulons toujours conserver ces mots-clés de
marque dans notre cerveau, mais nous voulons également savoir à
quoi ressemble notre police de caractères. Encore une fois, car
ils vont toujours
rester à côté de certains textes. Nous voulons qu'ils n'aient vraiment trop de contraste avec
la topographie. Presque comme s'ils appartenaient
à la typographie. Donc, si notre typographie
est assez géométrique, nous voudrions peut-être une icône
géométrique à côté de celle-ci. S'il a l'air dessiné à la main ou
comporte un élément humaniste, nous pourrions vouloir une icône légèrement plus
humaniste à côté de celle-ci. Ou si comme ces deux polices de caractères que
j'utilise ici, une d'elles a
beaucoup de contrastes, de lignes
épaisses et fines. Nous voudrions peut-être conserver ce
contraste dans les icônes. Alors que si nous utilisions
l'autre police de caractères pour nos boutons et
les éléments généraux de l'interface utilisateur, nous voudrions peut-être avoir une icône avec un poids de ligne
cohérent. À mon avis personnel, lorsque vous recherchez des jeux d'icônes, vous souhaitez
regarder les formes et les caractéristiques de
votre typographie, particulier celle qui
sera utilisée par les deux icônes suivantes. Et c'est probablement plus important que les mots-clés
de votre marque. Une fois que vous avez acheté un
jeu d'icônes que vous avez choisi, des jeux d'icônes gratuits. Vous aurez souvent 200 icônes ou un numéro fou
comme celui-ci dans l'ensemble. Vous ne
voulez pas vraiment les utiliser tous. Vous souhaitez sélectionner
celles qui seront utiles pour l'
application spécifique que vous créez. Vous utiliserez un sous-ensemble de ces
icônes que vous partagerez avec d'autres concepteurs ou développeurs
lors de la création de nouveaux éléments. Lorsque je décide de la signification de
chaque icône, je trouve normalement utile d'accéder
à Google Images et écrire des pièces jointes, des
icônes, par exemple. Maintenant, pour cela, c'est
relativement facile. Chaque image qui
revient est constituée d'un trombone. Parfois, un trombone avec un petit plus ou une
croix à côté, ce qui signifie probablement quelque chose
d'un peu différent. Si vous accédez à Google
Images et que vous recherchez quelque chose
comme une icône d'avertissement, et au moins la moitié des
images sont de la même icône. Vous savez en quelque sorte que c'est un
symbole universellement accepté pour cette chose. Parce que c'est ainsi que
les gens ont balisé leurs images sur
leurs propres sites Web. Je ne peux pas penser à
un seul exemple où j'ai fait
cela et je n'ai pas trouvé résultat assez concluant pour quelle icône je devrais
utiliser pour quelque chose. Une fois que nous avons obtenu notre
sous-ensemble d'icônes et que nous avons décidé ce que chaque
icône représente pour nous. Nous allons probablement vouloir
faire quelques ajustements. Vous obtenez rarement un jeu d'icônes
qui fonctionne parfaitement avec votre police de caractères et avec
votre message de marque. Peut-être devriez-vous arrondir un peu
les bords ou avoir des
lignes plus fines ou quelque chose comme ça. Un problème courant,
surtout si j'avais jeux d'icônes
assez uniques
comme celui que j'ai, est qu'à un moment donné,
j'aurai besoin d'une icône que je
n'ai pas dans cet ensemble. Par exemple,
j'ai peut-être besoin d'une icône de sauvegarde. Cet ensemble ne
possédait pas d'icône de sauvegarde. J'ai fait une recherche d'
image Google pour icône
Enregistrer et j'ai trouvé qu'il s'agissait
normalement d'une vieille disquette. Maintenant, j'ai parcouru le jeu
d'icônes d'
origine à la recherche de formes
que je pourrais utiliser pour créer une disquette. Ensuite, je peux simplement faire
quelques modifications subtiles, découper les
bits que je veux conserver et y apporter quelques petits
ajustements pour créer une nouvelle forme de disquette sans
créer de nouvelles lignes, courbes, angles ou tout autre
type de choses. Vous voudrez également créer
des règles spécifiques concernant couleur
qu'ils peuvent être et
le type de taille qu'ils peuvent être. C'est une chose très utile à documenter dans votre système de conception. Ainsi, les autres concepteurs travaillant
sur la même application ne vont pas coller des icônes de la mauvaise taille ou de
la mauvaise couleur. Une erreur très courante que
j'ai vue dans différentes conceptions
d'applications Web est les gens utilisent des icônes
pour la mauvaise taille. Si vous avez une icône, c'est très simpliste et que
vous l'explosez trop gros, cela aura l'air mal. C'est comme obtenir une police de caractères très simpliste et
en faire un gros titre. Une petite icône très simple
ne fonctionne pas en grand. Il n'a pas la personnalité ni les caractéristiques
nécessaires pour y parvenir. De même, une icône très
compliquée, avec plus d'une couleur, par
exemple, ne sera pas
trop belle lorsque vous la
rendez vraiment petite. Si vous avez une icône et
qu'elle ne fait que 30 pixels sur 30 pixels, vous ne pouvez pas avoir de largeurs de
ligne différentes. Ça va juste
ressembler à un petit gâchis bizarre. Nous devons donc imposer des
restrictions quant à la façon dont nos jeux d'icônes peuvent être utilisés. Et je suis très rare dans
certaines applications, nous voudrions peut-être qu'une
version volumineuse de l'icône et une petite version de la même icône soient utilisées
à différents endroits. Nous voulons choisir un jeu d'
icônes qui correspond nos mots de marque et à
notre image de marque existante. Mais nous voulons également que notre
ensemble d'icônes corresponde à la
topographie à laquelle il sera utilisé lors du
choix de nos polices de caractères, nous préférerions choisir celle vous payez pour obtenir
quelque chose de plus unique. et c'est un
peu plus professionnel et fonctionne dans plus de circonstances. Avec icônes. C'est encore plus vrai parce que
vous n'avez pas besoin d' autant d'argent pour obtenir un ensemble d'icônes
décent. Nous voudrons créer des règles
très spécifiques concernant les
tailles et
les couleurs que ces icônes peuvent être utilisées dans notre
application ou notre site Web. Par conséquent, les autres concepteurs
et développeurs ne vont pas les rendre trop grands ou trop petits alors que nous savons déjà
qu'ils ne fonctionneront pas comme ça.
9. Résumé: Les illustrations,
photos, textures ou motifs que nous utilisons
tout au long de notre conception, nous communiquons tous davantage le message de la
marque. Nous voulons avoir un style
cohérent que nous utilisons dans tous nos
designs pour une seule marque. Si nous avons choisi une police de caractères
forte, nous disposons d'une grille unique et d'une palette de couleurs
intéressante. Nous ne devrions
utiliser notre langage visuel très parcimonieusement
tout au long de notre conception. Les principaux endroits où nous utiliserons le langage
visuel sont sur nos sites marketing ou notre
application, la page d'accueil, où nous avons besoin de
travaux supplémentaires pour attirer l'attention des
gens
et communiquer les valeurs de notre marque. Pour un tableau de bord ou une section d'
administration de notre site, nous utiliserons un langage visuel
beaucoup plus parcimonieux, mais cela ne
signifie pas qu'il n'existera pas. style d'icône, par exemple, peut être tout à fait unique pour s'adapter à notre marque et bien fonctionner
avec notre typographie. Chaque application dispose d'une
sorte de sites marketing ou page d'accueil et à propos de nous une
page de contact. Ce sont des pages que les gens
voient lorsqu'ils n'ont pas encore beaucoup
traité avec votre entreprise
ou votre marque. On connaît moins
la personnalité ou le
sens de la marque. Cependant, ce sont les domaines dans lesquels notre langage visuel
sera le plus important. Et nous voudrons
trouver des illustrations ou des photographies qui
ne sont pas seulement uniques, mais
qui communiquent vraiment qui nous sommes.
Rob Sutcliffe, UI Designer / Developer
