Transcription
1. Introduction à l'UI Bootcamp: Bienvenue dans la conception de
l'interface utilisateur Bootcamp. Vous apprendrez à rendre vos conceptions d'interface utilisateur
esthétiquement belles. Le facteur le plus important qui
influe l'expérience de l'utilisateur si votre application est
sa qualité. Alors, allons bien faire ça. 95 % de votre
application est topographique. Nous chercherons donc d'abord à bien
faire cela, nous allons exposer quelques-uns des mythes courants que vous
entendez sur
la lisibilité. Vous découvrirez l'
historique des polices de caractères, comment elles sont souvent interprétées, puis vous allez créer votre
propre système typographique. Des activités vous seront proposées pour améliorer votre
utilisation intuitive de la couleur. Ensuite, vous suivrez des exercices
pratiques pour développer une palette de couleurs
pour votre application. alignement de vos éléments sur une grille est le moyen le plus rapide que j'ai vu pour un designer junior d' améliorer
instantanément
ses créations. Vous suivrez de nouveau
des exercices pour entraîner votre œil et améliorer intuitivement
vos compétences en composition. Et vous allez suivre
des exercices pour créer une grille qui fonctionne sur le développement Web moderne
basé sur des composants. En comprenant des éléments
sur la façon dont les sites Web sont créés, vous allez créer des grilles
qui fonctionnent dans les scénarios réels, souvent négligés par les éléments de conception de
l'interface utilisateur. Ce cours comporte une tonne de théorie, mais il est surtout pratique
et vous encourage à mettre votre apprentissage en pratique. Vous aurez un meilleur œil et une meilleure intuition pour la conception de l'interface utilisateur. Les paris sont des décisions esthétiques dans les conceptions de votre interface utilisateur. Et vous aurez une meilleure
compréhension et un meilleur vocabulaire pour pouvoir communiquer ces décisions avec
votre équipe ou votre client. Cette première semaine est
consacrée à la composition. Chaque vidéo s'
appuiera sur la dernière, vous
apprenant les éléments qui font une composition magnifique de votre projet de classe
sera de télécharger un gribouillage très simple
à partir de chaque vidéo. Il est vraiment important de le
faire,
car ces gribouillis construisent votre intuition pour
vous aider à mieux voir et travailler
avec les compositions. C'est génial de le faire
avant de commencer à vous inquiéter de tous les
éléments de la page Web. Si vous souhaitez
commencer à créer superbes conceptions d'
interface utilisateur, c'est l'étape dont
vous aurez besoin pour commencer. Alors, nous allons gribouiller.
2. La composition: Lorsque nous
parlons de la conception d'une application ou d'un site Web, une grande partie de
ce dont nous
parlons consiste à concevoir
une composition. Et vraiment, nous pouvons nous
inspirer beaucoup du monde de l'art pour commencer. Voici un tableau de John Constable il y a environ
200 ans. John Constable était assez célèbre parce qu'il était l'une
des premières personnes à faire quelque chose où il
sortait dans le champ et
qu'il dessinait une vache, il dessinait un arbre, et il dessinait un arbre, et il dessinait. un pont. Mais ensuite, il ramenait tous
ces dessins
au studio et
cherchait à les
assembler ensemble sur la page. Quel est le moyen le plus
agréable visuellement ? Disposez-les sur cette toile. Donc, en réalité, ces
vaches n'étaient peut-être pas dans cette position. Peut-être que ce bâtiment l'était, et Dieu sait ce qui
d'autre dans ce tableau n'était pas vraiment dans
cet endroit exact. Ce sont simplement
les positions dans lesquelles John Constable croit
qu'ils auraient fière allure. À mon avis, la chose la
plus dominante dans ce tableau était cette vache. En bas à gauche
de l'image. C'était une vache ? Pourquoi était-ce un bon
endroit pour mettre cette vache ? Nous voulons vraiment qu'il y
ait une chose sur la photo. C'est la première chose que les gens remarquent qui attire
leur attention en premier. Et cette vache était ce que
John confortable a décidé. Mais n'aurait-il
pas attiré plus d'attention s'il était au milieu ? Et cela
n'aurait-il pas plus d'impact si la vache était plus grosse au
cas où vous ne pouviez pas le dire. s'agissait de questions rhétoriques. Je ne connais pas la réponse. Et la réponse
va également
dépendre largement de ce qu'il y a
d'autre dans la photo. Tout au long de ce premier module, je vais vous donner beaucoup d'exercices
très, très courts. Vous pouvez les faire avec un
crayon et un morceau de papier. Vous pouvez les faire pendant que vous
passez un appel téléphonique à quelqu'un. Vous pourriez probablement les faire
pendant que vous regardez la télé. Ces exercices visent à aider à former et à développer nos muscles
mentaux afin identifier ce qui va être une bonne composition lorsque nous commencerons à ajouter de la topographie, ajouter des couleurs et à ajouter des
images à notre site Web, si nous voulons pouvoir créer intuitivement
une bonne composition, lorsque nous créons un site Web, nous devons être en mesure de le faire
assez bien avant
d'avoir 1000 autres réflexions
en tête sur quelle police nous utilisons
et quelle couleur est quelque chose. Donc, pendant ce module, nous
ne parlerons boutons, de
textes et d'illustrations. Nous ne
parlerons même pas de vaches, de
bâtiments et de rivières. Nous parlerons simplement de
formes, de lignes et de marques. Et nous allons le
construire lentement. Nous allons le construire
très lentement, une étape à la fois et améliorer
progressivement
nos compositions. Mais cela ne
signifie pas que vous devez passer beaucoup de temps
à chaque exercice. En fait, je vous exhorte à
résister à ce
besoin lancinant de perfectionnisme. Peu importe s'
ils sont un peu moches, s'ils ne sont que des
gribouillis au dos d' une serviette, c'est tout à fait parfait. Nous allons entraîner
nos yeux et notre intuition, donc c'est là quand
nous en aurons besoin plus tard. Alors assurez-vous de faire
ces exercices avant d'
ajouter quoi que ce soit à cette page, je veux au moins que vous compreniez que c'est
vraiment une composition. Cette page blanche simple
est une bonne composition. Et en fait,
de nombreux artistes
au fil des ans ont créé des
œuvres d' art qui ne sont qu'
une toile blanche unie et les salent pour un
peu d'argent. Cette composition ne
répondra absolument jamais
aux exigences de votre site Web
ou de votre application Web. Mais n'oubliez pas
que si vous n'avez pas
besoin d' ajouter quelque chose
à votre composition, vous ne devriez probablement pas ajouter quelque chose à
votre composition. La prochaine composition la plus simple que nous pourrions créer si nous venons d'
ajouter une seule ligne droite au
milieu de notre page. Il s'agit sans aucun doute
d'une composition. J'ai dit que nous allions le faire lentement. Maintenant, il est probablement un
peu trop ennuyeux d'avoir
cette ligne au milieu. Mettons-le sur le côté quelque part. Cela pourrait rendre notre composition
plus intéressante, comme la façon dont nous ne mettions pas simplement la vache au milieu
de l'image. Maintenant, même si nous ne voulons pas que
les choses soient trop ennuyeuses, nous ne voulons pas non plus que ce
soit trop fou. Si nous déplacons la ligne beaucoup
trop près du bord,
elle peut sembler mal à l'aise. On peut avoir l'
impression qu'il va
tomber ou qu' il a été
mal imprimé ou quelque chose comme ça. Peut-être que ce n'est pas
tout à l'
aise et
parfois c'est ce que nous voulons. Peut-être que c'est différent si la légèreté d'un côté de la page plutôt que de l'autre, sans
trop réfléchir à ce
que chacune de ces
compositions fera, nous pouvons reconnaissez qu'il y a un
sentiment légèrement différent de chacune de ces compositions
alors qu'il s'agit littéralement d'une ligne au
milieu d'un carré. Actuellement, c'est un
peu trop simpliste
pour que vous vous souciez de sortir
votre crayon. Il y a une variable
, c'est-à-dire l'axe des X, quelle distance se trouve cette ligne. Mais vous pouvez simplement voir
à partir de ces exemples j'ai mis à l'
écran qu'ils
modifient le
ressenti de la composition pour votre première tâche, ce que je veux que vous fassiez,
c'est cadrer un carré. Voyez combien de
façons différentes vous pouvez faire cet exercice très, très simple de
positionner un carré à l'intérieur d'une boîte. Pensez à cela comme si
vous cadrez une photo. Maintenant, une astuce courante que les gens font lors du cadrage est
qu'ils laissent en fait un peu plus d'espace en bas qu'en haut. Il y a peut-être plus d'espace d'
un côté que de l'autre. Peut-être que R-square est
vraiment, vraiment petit. Il suffit donc d'utiliser
la taille et la position ici et de voir combien de
compositions différentes vous pouvez créer. Je pense que c'est intéressant
parce que vous pouvez avoir un seul élément sur
une seule page Web. Et il y a 100
000 façons
différentes le faire. Donc, pour votre premier exercice, je veux que vous encadriez
quelques carrés. Vous allez passer deux
minutes à prendre un bout de papier, dessiner autant de carrés
que possible. Ce seront vos cadres
, puis vous allez
dessiner un carré à l'intérieur. Il peut y avoir différentes tailles. Elles peuvent être différentes
distances par rapport aux bords et voir combien de variations
vous pouvez obtenir. Imaginez qu'il s'agisse d'une page Web qui
comporte un élément. Où
va l'élément et quelle est sa taille ? Ils n'ont pas besoin de bien paraître. C'est juste pour nous aider à commencer. C'est juste pour faire
fonctionner un peu notre cerveau. Voyez combien de carrés
différents vous pouvez encadrer en deux minutes.
3. Expression: Dans le prochain module,
nous allons
commencer à parler de typographie. Mais pour l'instant, je veux que vous regardiez ces deux A. Maintenant, ils ne parlent pas de
la même voix, n'est-ce pas ? Ils ont des sentiments et
des émotions très, très
différents et ils transmettent des choses
très différentes. Parfois, les gens essaient
simplement de trouver des lettres qui ne
semblent pas communiquer autant, qui ont l'air très standard et qui pensent que
cela ne dit rien. Mais si c'est le cas, vous
transmettez toujours une sorte de message avec ces décisions. Il y a toutes sortes de
détails subtils dans la lettre. Le contraste entre les lignes
épaisses et fines, les angles occupés par
les
espaces, ajoutent à la personnalité
des lettres. Mais avant de nous
inquiéter de toutes ces choses, nous allons construire
cela lentement. Voyons si nous pouvons créer une certaine émotion avec seulement R. carré. Cette composition que j'ai
créée ici à gauche et cette composition à
droite ont une sensation très différente d'elles. Quelque chose sur la quantité d'
espaces autour d'eux, la variation de taille. Il y a toutes sortes de
choses que nous avons maintenant contrôle sur ce
changement, ce qu'ils ressentent. Si vous deviez regarder ces deux images et
dire ce qu'elles vous ont fait ressentir ou quel genre de personnalité
vous pensez avoir. Vous me trouverez probablement des réponses
légèrement différentes, mais vous arrivez probablement à
quelque chose de vaguement similaire. Maintenant, dans un instant, je
vais vous demander faire cet exercice pour créer une composition simplement en utilisant des carrés qui transmettent une
émotion ou un sentiment. Et vous n'allez pas tous
créer la même composition. Il n'y a pas de bonne
ou de mauvaise réponse. Nous allons créer des compositions très
différentes à partir des mêmes mots Lu, le but
réel de l'
exercice est de vous amener à penser que les compositions
expriment une émotion. Ainsi, en
réfléchissant à ce que chaque forme, sa position et son angle
transmettent ce qu'elles communiquent. Et nous voulons y
réfléchir très simplement tout seul avant de commencer à
penser à autre chose, afin qu'il soit intuitivement disponible lorsque nous
créons nos compositions, que nous
pensons toujours à ce sujet un niveau
conscient ou inconscient lorsque nous commençons à construire
le reste des choses. Pour ce premier exemple, je me suis donné le mot « ivre ». J'ai beaucoup aimé l'idée d'
avoir beaucoup de poids d'
un côté de
la page et l'autre non, cela le rend mal à l'
aise et ajoute à ce sentiment
qu'
il va
tomber comme bien sûr, ayant les
formes les plus lourdes vers le haut et les formes plus légères
vers le bas, il donne l'impression que le haut est lourd. Cela lui donne cette sensation
instable, comme si elle pourrait tomber. Et les angles et les différentes tailles lui donnent une
certaine sensation d'énergie. C'est un peu énergique. Nous utiliserions très rarement un
angle dans la conception d'une page Web, mais actuellement nous
réfléchissons simplement à la façon d'
exprimer un sens
avec les formes. Deuxièmement, je me suis donné
le mot claustrophobe. Et il y avait quelque chose que j'ai trouvé assez anxieux à propos d'
avoir une
ligne de blocs très ordonnée. Et il y avait quelque chose
que beaucoup se sentent aussi un peu mal à l'aise d'avoir quelque chose qui était si
bizarre avec un peu incomplet
au milieu. Et puis, bien sûr, cet espace blanc piégé
au milieu est très petit et on se sent très fermé en le regardant. Et maintenant, vous n'êtes peut-être pas du
tout
d'accord avec mon raisonnement sur l'une ou l'autre de ces
compositions, mais c'est très bien. En fait, le fait de
devoir expliquer pourquoi vous pensez que quelque chose
transmet une émotion est un
élément très important de cette tâche 2, car il s'agit toujours
d'une conversation que vous pourriez avoir avec un
client ou membre de l'équipe. Et si vous êtes une personne tout à fait
logique, vous n'êtes jamais allé à
l'école d'art ni étudié. Tout cela semble probablement
un peu dégoûtant, mais restez avec moi pour le moment et donnez un coup de fouet. Donc, lorsque vous
pensez à l'expression, votre exercice consiste à créer très rapidement
quelques compositions l'aide de mots décrivant. Qu'en est-il du conflit ou de l'extase ? Vous pouvez choisir vos
propres mots ou
choisir ces deux
exemples que j'ai donnés. Et juste très, très rapidement
griffonné quelques carrés sur une composition qui, selon
vous, transmet ce message. Et des points bonus complets. Voyez si vous pouvez justifier pourquoi
vous avez fait ces choix. Voyez si vous pouvez expliquer pourquoi votre disposition de
formes signifie de l'extase. Il n'y a absolument aucune bonne
ou mauvaise réponse à ces questions. Alors n'hésitez pas à devenir fou. Et bien sûr, plus
vous essayez cette expérience, et comme je l'ai dit
plus tôt, vous pouvez faire pendant que vous
passez un appel téléphonique. Le mieux c'est, ce sera le meilleur que
vous allez y arriver.
4. Équilibre: Une émotion que nous
allons presque toujours vouloir
transmettre est la stabilité. Notre marque, notre application
peut avoir une émotion, ont été un peu sauvages,
libéraux et créatifs. Ou peut-être qu'il a le
sentiment d'être très sensé, conservateur
et sûr. Mais l'un ou l'autre de ces opposés
polaires veut
toujours se sentir stable. Restons dans le
monde de l'art un peu plus longtemps. Imaginez que vous peignez un arbre. Maintenant, si vous peignez l'arbre, sorte que toutes les branches
étaient d'un côté, cela donnerait au spectateur une sensation inconfortable parce qu' à un certain niveau inconscient, ils pourraient penser qu'
ils regardent. quelque chose qui va tomber ou, et c'est une
théorie importante qui sous-tendra beaucoup de choses dont nous
parlerons dans ce cours. Ils vont ressentir ce
qu'ils regardent, quelque chose qui n'est pas naturel et qui nous procure une sensation
inconfortable. Nous aimerions comprendre
le monde qui nous entoure. Donc, pour être gentil avec nos spectateurs, quelles que
soient les caractéristiques de l'arbre, nous allons toujours
vouloir qu'il ait un nombre égal de branches d'un
côté à l'autre. Ou si nous avons une grosse branche
lourde d'un côté, peut-être que nous avons quelques
branches plus légères de l'autre. Créer un équilibre
ne
signifie pas nécessairement qu'il soit conservateur. Cela ne veut pas dire
avoir l'air ennuyeux, et cela ne signifie certainement pas
que nous devons le rendre symétrique. Cela signifie simplement faire
croire qu'il existe dans le monde réel et qu'il obéit aux lois de
la physique. Si nous avons commencé par créer cette composition
vraiment simple, il y a juste une grosse boîte
lourde sur le côté gauche. Et nous voulons maintenant
contrer cela parce que
notre page est pondérée d'un côté. Nous pourrions donc, par exemple, placer une boîte plus petite sur le côté droit si elle
était plus éloignée du centre. Imaginez une seconde que
les pages sur une balançoire, si une forme plus petite est plus
éloignée du centre, cela va bien
équilibrer la forme plus grande. Alors peut-être que cette petite
boîte à droite est convertie en une
composition un
peu plus équilibrée. Nous pourrions également avoir des boîtes
encore plus petites sur
le côté droit, mais
peut-être plus d'entre elles. Cela va donc créer un poids
supplémentaire de ce côté. Et pour
ce prochain exercice, je vais
vous suggérer que vous puissiez jouer avec la lumière ou l'obscurité des
boîtes. Parce que si nous faisons
la boîte à gauche, par exemple, un peu moins sombre, elle a moins de contraste
avec l'arrière-plan, ce qui lui donne
moins de poids. Et enfin, nous pouvons bien sûr équilibrer notre composition en la rendant
simplement symétrique. Bien sûr, dans le
monde réel de la création d'un site Web, vous aurez très rarement
la possibilité de faire
une composition qui,
simplement, un équilibre symétrique dans création d'une composition signifie il devrait y avoir être une quantité
égale de signal
visuel des deux côtés. Et cela vaut
vraiment la peine de le pratiquer maintenant, car lorsque nous intégrerons plus d'
éléments dans notre composition, toutes les différentes couleurs,
formes et densités, il va devenir très, très difficile de l'obtenir
. équilibre droit. Donc, plus nous le pratiquons maintenant, plus notre intuition sera en mesure de travailler
avec elle plus tard. Votre exercice pour cette
vidéo est donc très simple. Nous allons créer des
compositions à l'aide de carrés, en utilisant au moins deux
ou trois carrés où la composition
est équilibrée. Nous pouvons jouer avec la forme, nous pouvons jouer avec
leur obscurité. Nous pouvons jouer avec quelques éléments différents
pour essayer
de créer un équilibre sur la page et voir combien vous pouvez créer en
quelques minutes.
5. Contraste: Si vous êtes un peu trop
intelligent pour votre propre circonférence, vous avez probablement réalisé que vous pouvez créer une composition équilibrée en ne dessinant absolument
rien sur la paye, bien joué. Mais votre équipe marketing ne
sera
probablement pas très satisfaite de
ce design, mais elle ne
serait probablement pas très satisfaite de ce design complètement
symétrique. Soit. Les gens aiment naturellement les environnements
béninois et regardent des designs
qui ne les confondent pas, mais qui présentent une complexité
visuelle
très faible, une palette de couleurs
très limitée, une quantité très limitée de
formes sur la page. Mais nous ne
remarquons pas non plus ces choses. Nous ne faisons pas vraiment
trop attention. Nous ne nous souvenons pas d'
eux et nous ne nous engageons pas vraiment avec eux. Nous les trouvons relaxants
et agréables. Ainsi, même lorsque nous concevons
simplement un
formulaire de saisie simple sur une page Web, nous voulons
que cela contraste avec. Nous voulons que l'arbre
soit équilibré, mais pas complètement équilibré. Il faut qu'il y ait un peu de tension et un peu d' inconfort qui maintiennent nos
utilisateurs éveillés et intéressés. Pour ce faire, nous veillons toujours à ce que nos créations présentent des
éléments de chaos, des contrastes entre ce qui se trouve dans
la composition. Par exemple, si nous
avons un carré sur un
côté de la page, peut-être que nous l'équilibrons avec
la forme si grande qu'elle ne
rentre même pas sur la page. Et une forme qui a attributs visuels
très différents du carré. Maintenant, nous avons quelque chose qui
permet aux gens de le regarder. Cela maintient leur cerveau
plus stimulé que si nous n'
avons que les deux boîtes. Et nous pourrions utiliser n'importe quelle technique que nous avons utilisée lorsque
nous parlions d'équilibre, mais peut-être jouer un peu avec
elles. Ces cercles sont maintenant
disposés de
manière à les rendre très
différents d'un carré, mais la page a toujours un solde
raisonnable. contraste entre un carré et un
cercle est assez agréable car un carré est très rigide et un
cercle est très organique, mais on peut être beaucoup plus
organique qu'un cercle. Et si je contraste
avec cette feuille ? Nous parlerons beaucoup plus de couleurs
contrastées plus tard, mais cette feuille est verte. Peut-être que nous faisons de la boîte une couleur
très différente. Peut-être qu'on le rend rouge. Je pense que ça a l'air plutôt bien. Mais à un moment donné, surtout si nous avions plus d'éléments
sur notre page, nous allons en arriver
au point où nous
avons trop de contraste. Nous ne voulons qu'un
peu de contraste. Nous voulons qu'il se sente plutôt
conforme, mal à l'aise. Alors, que diriez-vous de
limiter le nombre d' attributs qui varient
entre ces deux formes. Maintenant que nous avons également inclus
une image, nous pouvons jouer avec l'
idée que
nous gardons peut-être la même
forme que le carré, mais nous utilisons la texture
de l'image. Nous pouvons donc déjà voir que
des choses comme la forme, la couleur et la texture peuvent tous
être utilisées pour créer un contraste dans notre composition afin de les rendre plus intéressantes
visuellement. Nous
pourrions également organiser certaines formes en
une sorte de motif. Si nous le voulions, nous pourrions jouer avec la qualité de ces lignes. Ils ont l'air très rigides, mais il pourrait y avoir
un peu de rude. Ils peuvent être courbés, dessinés à la main,
semblables à notre feuille. Si nous créions une
composition comme
celle-ci, il serait très facile pour nous de
créer trop de contraste pour les deux parties de la page semblent appartenir
à des mondes différents. Et rappelez-vous que nous voulons que notre utilisateur un niveau inconscient se sente
à l'aise, qu'il ait l'impression que c'est une chose
réelle naturelle qu' regarde, qu' comprend et qu'il y
voit des schémas. Nous ne voulons donc pas simplement
limiter le nombre d'
attributs que nous avons en contraste, mais nous
pourrions créer
d'autres restrictions, si nous essayons simplement de
créer un contraste sur la page, nous sommes très rapides
qui va faire quelque chose qui est presque
repoussant à regarder, que les gens se sentent mal à l'aise
même à le regarder. Dans cet exemple précis, je n'ai utilisé que
des lignes de même épaisseur, de même longueur, et uniquement verticales, horizontales ou d'un angle
spécifique. Nous avons également un contraste dans cette composition
exacte car le côté gauche contient encore beaucoup d'espaces blancs autour de celle-ci. C'est très propre. Et plus nous sommes encombrants, plus nous voulons nous
assurer d'avoir beaucoup
d'espace ou de choses rondes. Lorsque vous essayez de créer un
contraste dans votre composition, essayez de garder ce
sentiment d'équilibre. Et ce que vous remarquerez, c'est que lorsque vous commencez à ajouter des formes, au moment où vous aurez ajouté trois ou quatre formes
à la composition, cela va commencer à paraître
un peu plus chaotique. Et cela va vous aider
si vous commencez à créer une sorte de règles, comme peut-être n'utiliser qu'
un certain nombre de formes ou n'utiliser qu'un
certain nombre de couleurs. Ou bien sûr, il pourrait être
bon de commencer à réfléchir à façon dont ils s'alignent à l'intérieur de
la composition. À ce stade, ne
vous inquiétez pas trop création de ces directives
ou de quoi que ce soit du genre. Il suffit de reconnaître que lorsque vous ajoutez d'autres formes à
la composition, vous commencez à créer des règles
mentales sur
les tailles qu'elles peuvent être et
quelles couleurs sont autorisées. Vous avez tendance à commencer à
créer des règles pour conserver ce sentiment de conformité
dans votre composition. Mais ce que vous allez faire,
c'est de commencer par une composition contenant
un élément, puis d'essayer avec deux, puis d'essayer de créer
une autre composition avec trois éléments et de
vous assurer que ils ont
un certain contraste, mais ils s'assurent que cela ne
commence pas à paraître fou aussi. Il s'agissait d'une vidéo relativement
courte, mais c'est un
sujet très important pour vous de pratiquer. Assurez-vous donc de dépenser
un peu plus de temps sur celui-ci que
les précédents. Je veux que vous créiez
beaucoup de compositions
différentes
où il
y a un élément de contraste. Formes contrastées, couleurs
contrastées, tailles contrastées,
grandes et petites textures
douces et dures, les motifs créent une certaine
forme de contraste. Commencez petit, trois formes. Et ensuite pour les formes et les
construire et les rendre plus complexes. Au fur et à mesure que
vous les compliquez, vous n'avez pas besoin de créer
intentionnellement des règles, mais reconnaissez simplement que
pour les rendre beaux, vous commencez à créer une
sorte de règles pour garder un sentiment de conformité.
dans ces compositions.
6. Formulaire: s'agit d'un exercice créé par Kandinsky où il
a demandé à ses élèves d'
essayer de faire correspondre les
caractéristiques des couleurs aux
caractéristiques des formes. Je vais mettre un lien dans les ressources pour que vous
puissiez y aller vous-même. Je ne clique pas sur Soumettre, donc je ne gâche pas la surprise
si vous avez bien compris ou non. Je ne sais pas si je suis
nécessairement d'accord avec ses idées sur les
formes que sont les personnalités, quelles sont les couleurs des personnalités. Mais nous sommes probablement d'accord pour dire
que différentes formes
peuvent communiquer différentes choses et
pourraient être meilleures pour différentes marques ou
différentes émotions, différentes situations. Prenons le
triangle, par exemple. Maintenant, le triangle a des points très
précis sur les bords. Et je crois que cela communique un très bon
message de marque si
vous créez peut-être une application pour une
entreprise d'ingénierie, mais cela
changerait complètement sa signification si nous arrondi sur les
bords de ce triangle. Maintenant, c'est totalement différent. Il communique en fait un message
totalement différent. Ou si nous dessinons les bords à la main, il pourrait y avoir des bords légèrement
plus rugueux et
cela ne fonctionnerait certainement pas
pour une entreprise d'ingénierie. Ce que nous pensons lorsque nous disons le mot triangle
pourrait potentiellement signifier choses
très différentes qui communiquent des choses très
différentes. Ils ont des
personnalités très différentes. La forme d'une forme simple
peut changer beaucoup. Mais qu'en est-il de quand
nous abordons quelque chose d'
encore plus compliqué, comme ces motifs ou ces textures, nous avons regardé un peu
dans la dernière vidéo. J'ai téléchargé ces textures d'Internet quelque part
et elles ont beaucoup de chaos et beaucoup de sensations
texturales grossières pour elles. Mais si je ramène cela
dans le monde réel de la conception d'
une application à nouveau, j'utiliserais probablement
quelque chose de plus comme celui-ci, un peu plus subtil. Imaginons que je créais une application mobile pour aider
les musiciens à se retrouver. Maintenant, la musique est très viscérale. C'est une sorte de truc de type
naturel qui coule. Je ne voudrais donc pas quelque chose d'aussi angulaire et d'ennuyeux
avec si peu de contraste. Mais je pourrais très facilement faire ce petit changement et
améliorer l'application. J'utilise ces lignes de sensation fluides, naturelles et
organiques
comme texture en
arrière-plan très subtilement. Et j'ai l'impression que cela
fonctionne très bien pour
communiquer de la musique et de la communauté. De toute évidence, nous venons de
parler de contraste, et nous
voulons probablement réfléchir à la forme de nos formes et
nous examinons le contraste. La forme de cette boîte est
vraiment angulaire et rigide. Et la forme de ces lignes fluides
contraste parfaitement avec cette boîte d'une manière où mon précédent exemple de cercle complet ne
s'est peut-être pas aussi bien passé. Disons que si, au lieu
d'avoir une boîte ici, nous avons des textes
qui viennent de dire le formulaire. Maintenant, cela contraste très,
très bien parce que
le texte ici est très géométrique et angulaire, semblable à la boîte que nous venons d'avoir. Si j'essayais de faire le même texte, les mêmes lettres, mais avec
une forme légèrement différente. Il a l'air plus fluide
et naturel et peut-être plutôt que de contraster avec les formes de droite, il est en quelque sorte en conflit avec eux. Cette vidéo était donc
un peu
un récapitulatif de ce dont nous avons
parlé jusqu'à présent, mais nous avons également examiné un peu forme et la façon dont vous pouvez
avoir un triangle, et apparaître très
différent juste par en ajustant un peu
les lignes et les bords. Et tout comme lors de
notre premier exercice, nous avons parlé de la façon dont
nous voulions exprimer émotion et certaines caractéristiques
de notre composition, avec les formes
très exactes de la composition, nous pouvons communiquer
une partie de ça aussi. Je veux donc
que vous reveniez à ce tout premier
exercice où nous avons créé quelques compositions exprimant un mot spécifique ou vous pourriez en créer
de nouvelles à partir de zéro si vous le souhaitez. Et cette fois, je veux que vous
preniez ce que nous avons
appris depuis. Je veux que vous
les recréiez pour qu'ils aient un certain
équilibre là-dedans, mais aussi
un certain contraste. Et vous pouvez désormais utiliser des formes
contrastées
deux formes différentes, mais également des textures
et des motifs différents qui aident communiquer ce que
vous essayez d'exprimer. Si vous vouliez en
créer deux nouveaux, essayez
peut-être d'
exprimer un sentiment de sécurité avec une composition, puis d'
exprimer un sentiment de liberté avec une composition.
7. Hiérarchie: Jusqu'à présent, nous avons examiné l'
équilibre et le contraste, qui vont
faire en sorte que nos compositions soient belles. Nous avons examiné l'
expression et la forme, ce qui permet de s'assurer
qu'ils communiquent ou parlent du bon
ton de voix. Nous allons maintenant construire
là-dessus avec quelques techniques
qui vont rendre nos compositions
un peu plus utiles. Nous n'allons pas créer d'art. Nous finirons par créer des
dessins et ils reviendront aux
États-Unis sur ce tableau de
John Constable
avec la vache dessus. Maintenant, il y avait un autre objet, je pense peut-être un bâtiment
de l'autre côté de la rivière et un autre arbre, peut-être qu'il y avait une hiérarchie évidente
dans cette composition. Cela a permis de savoir facilement ce qu'il faut regarder en premier et ce qu'il
faut regarder en second lieu, plupart des artistes auront une
certaine hiérarchie au sein de leur composition pour former
le spectateur ce qu'il faut
regarder en premier, en second lieu, parfois même
en utilisant des lignes réelles ou même des flèches
dans des motifs pour guider
l'œil autour de la composition et le maintenir dans
les limites de cette image. Si, par exemple, nous reprenons la composition. Il s'agissait juste de deux vaches de taille
égale dans ma composition. Nous savons déjà que
cela ne crée pas contraste
particulièrement agréable
dans notre composition, bien que cela crée un
très bel équilibre, cela laisse aussi le spectateur
se demander lequel de ces
deux éléments est le plus important. qu'ils devraient examiner en premier. Et il y a un certain
nombre de conflits et inconfort au sein de
leur subconscient. L'artiste ou le designer qui
crée la composition dispose beaucoup plus d'informations
pour décider ce que quelqu'un devrait peut-être
regarder en premier, la personne qui y jette un coup d'œil ne peut décider en une
fraction de seconde, ce qui est le plus
important à examiner. J'ai créé un
exemple de page d'accueil News que je pourrais créer
si jamais j'avais un blog. Et il existe des itinéraires relativement
évidents que vous pouvez
consulter cette page. Vous remarquerez tout d'abord
cette histoire sur les droits. Il contient le texte le plus gros. Il est différent de
toutes les autres histoires, hum, et c'est assez
haut de la page. Et puis il y a peut-être
deux zones différentes vous pourriez regarder ensuite parce que l'une est un peu plus grande
et utilise plus d'espace, mais l'autre présente
des dispositions légèrement plus uniques ici. Donc, peut-être deux choses que vous pourriez regarder après cela. Les sites Web d'information sont d'excellentes sources pour voir comment les gens utilisent hiérarchie
visuelle,
car ils
contiennent normalement beaucoup d'informations. Ils essaient d'entrer dans une
très petite quantité d'espace. Mais
regardons d'abord quelque chose dans lequel la plupart des non-maladies pénètrent
commenceront à penser à la hiérarchie. Si vous avez déjà écrit un
essai dans un document Word, vous avez sans doute un grand
titre en haut avec des textes et
des
textes plus petits sous les paragraphes. Dans ce cas, peut-être une puce
pointe pour une page de contenu car c'est
l'arrière-plan que nous avons tous dans la création
d'une hiérarchie. Les nouveaux designers pensent toujours taille
du texte lorsqu'ils tentent de rendre
quelque chose de plus important. Et
pensez potentiellement à déplacer les choses vers
le haut de la page lorsque vous tentez de le
rendre plus important. Si nous regardons ce
document, j'ai ici une rubrique et cinq
liens vers les articles ci-dessous. Le titre. Les dernières nouvelles ne
sont pas très informatives, surtout pour quelqu'un qui
a vu cette page de nombreuses fois. Par conséquent, nous ne
voulons pas vraiment que ce soit vraiment important. Nous voulons probablement qu'il soit
plus haut dans la hiérarchie. On pourrait peut-être en
faire une couleur différente. Il se démarque donc mais
le rend beaucoup plus petit. C'est donc hors du
chemin après ça. Avoir cinq titres, c'est
en fait un peu trop. Il est très difficile pour
les gens de prendre une décision entre cinq choses ou
certainement plus de cinq. Nous voudrions donc peut-être les guider
vers l'un pour au
moins les amener à lire les gros titres
plutôt que d'être découragés par l'indécision et de
ne jamais les lire réellement. Nous voudrions donc éviter d'
avoir cinq choses de la même importance
et peut-être simplement en retirer une. Si nous pouvions simplement en choisir un au
hasard ou si nous pouvions décider ce que nous pensons le plus
important et le
faire glisser vers l'extérieur, agrandissez le texte, ce
qui en fait la hiérarchie la
plus élevée. Et nous pourrions encore rendre cela
plus important en le déplaçant de la liste. Il est actuellement en cours. Jetez un coup d'œil à ce design. Je viens de créer cette
page d'accueil pour voir si vous pouvez identifier ce qui est le plus
important sur la page. Quelle est la chose que
vous remarquez en premier ? les commander à
partir de 1, 2, 3, 4 par ordre de la façon dont
vous les remarquez, voir si vous pouvez identifier ce c'est qui fait
quelque chose sur la page. La première chose que vous remarquez ou la deuxième chose que vous remarquez, ce n'est probablement pas seulement la taille. Et quand vous avez
fini de regarder cela, allez voir votre journal
préféré que vous regardez normalement et voyez quelles techniques
ils ont utilisées. Et peut-être même
regarder certaines compositions d'artistes et voir quelles fosses de hiérarchie ils ont utilisé
pour vous faire regarder abord
une composition de chemin
et regarder une partie de seconde. Revenons maintenant à la
création de nos compositions. Pour commencer, n' hésitez pas à regarder
ceux que vous avez créés lors des exercices
précédents. Et je veux que vous ajoutiez des formes, pensant au
contraste et à l'équilibre. Mais cette fois, j'ai commencé
à penser à la hiérarchie. Assurez-vous qu'il y a
une chose et la composition qui est la chose la
plus importante. Et puis une deuxième chose, qui est la deuxième chose la
plus importante. Alors que nous travaillons plus
loin dans la hiérarchie, il est normal d'avoir quelques
choses au même niveau, mais plus haut, cela ne devrait
être qu' une chose la plus importante. Essayez d'utiliser certaines des techniques que vous avez identifiées
lorsque vous regardez journaux et d'autres
œuvres d'art et voyez si vous pouvez les
utiliser pour créer différentes compositions avec
différentes hiérarchies, Peut-être en obtenir un qui
vous satisfait des cheveux. J'ai beaucoup utilisé
le contraste des couleurs. Les gris plus clairs
sont moins visibles. Mais peut-être que si j'en fais un plus
sombre et
que soudain, cela rend cette pièce beaucoup plus importante dans la composition. Ou si j'ai changé de
couleur et que je change cette forme, ça va le rendre beaucoup plus important dans cette compétition. Essayez ensuite de créer
des compositions sans hiérarchie. La chose évidente serait simplement une liste de
carrés comme celle-ci
, puis voir si vous pouvez jouer avec elle pour faire ressortir une
chose, pour la rendre plus importante. Comme pour tous nos exercices
précédents, il n'y a pas de bonne ou de mauvaise façon. Et vous n'essayez
pas forcément les
rendre
incroyables en ce moment. Ce que vous essayez de faire, c'est former votre intuition
pour que lorsque vous
traitez plus d'éléments , vous devez
réfléchir sur la page. Vous pouvez simplement créer cette hiérarchie dans vos conceptions. Désolé, c'était un
peu long. Mais pour résumer
votre exercice c'est créer une composition. Vous pouvez utiliser différentes
couleurs, formes et tout ce que
nous avons utilisé jusqu'ici. Mais assurez-vous qu'il existe une hiérarchie visuelle
pour le premier, créez
simplement trois éléments dans votre composition, puis
essayez avec quatre et continuez les
ajouter et voyez
si vous pouvez avoir un hiérarchie cohérente
dans vos compositions.
8. Relations: Dans notre vidéo précédente,
nous parlions donc de hiérarchie, qui consiste en grande partie à faire ressortir
quelque chose
de la foule. Ce qui rend quelque chose
le plus important, plus évident sur la page. Mais l'inverse
est de savoir comment regrouper les choses ensemble pour montrer
qu'elles appartiennent ensemble ? Si nous regardons
ce design ici, nous pouvons constater que ces
trois articles
de gauche sont évidemment
liés d'une certaine manière. Ils ont un
niveau d'importance similaire. Ils ont probablement
une relation entre eux. De même, ces
articles en bas gauche ou ces articles
en bas à droite, en ayant plus d'
articles suivant exactement
le même motif
en bas à droite, cela indique qu'ils sont moins importants pour qu'ils n'attirent pas notre
attention aussi rapidement. Mais cela nous indique aussi quand
nous commençons à les regarder, qu'il y a quelque chose de
similaire chez eux, qu'ils appartiennent ensemble
pour une raison quelconque. Donc, si vous regardez en arrière ce
design ou n'importe quel journal, ou même si vous aimez
une composition artistique, vous pouvez essayer d'identifier quel point certains éléments
ont été créés à
quel point certains éléments
ont été créés pour faire partie de la même modèle qu'
ils appartiennent ensemble. Ensuite, essayez de créer nos propres compositions
à l'aide de ces techniques. Par exemple, si j'avais
un cercle et que je
voulais équilibrer cela sur le côté droit
de la composition. Je pourrais, semblable à ces
articles de nouvelles sur la page Web, utiliser quelque chose comme trois carrés
empilés de manière égale. Il a le même
poids que le cercle, mais ils ont l'air moins importants
parce qu'ils suivent le même schéma et ils ont air d'être liés les uns
aux autres. Nous savons qu'ils ont
quelque chose en commun. Nous pourrions avoir deux
formes qui ne s'intègrent pas autant dans un
motif que l'autre, mais elles sont peut-être contenues
dans une autre forme. C'est une autre
façon de
dire que ces deux
formes sont liées. Et même si ces formes
sont devenues des cercles, par exemple, Il semble toujours que les
formes de droite soient plus liées les unes aux autres
que celle de gauche. Parce qu'il y a une taille similaire et qu'ils sont relativement
proches l'un de l'autre. Ils ont peut-être
l'air d'appartenir ensemble plus que
celui de gauche. Quoi qu'il en soit, essayons de
les rendre plus apparentés. Ils pourraient simplement être
connectés en ayant une ligne réelle reliant
les formes qui fonctionnent. Ou peut-être qu'il y a forme abstraite qu'ils
se chevauchent tous les deux qui leur donne l'
impression d'appartenir
à une troisième forme. Ou bien sûr, il
peut y avoir toutes sortes de qualités que
les formes ont différemment qui rendent
évident qu' elles sont
liées d'une manière ou d'une autre. Vous l'avez probablement deviné. Je veux que vous
fassiez
exactement la même chose que lors du dernier exercice. Créez une composition
avec une hiérarchie. Mais essayons maintenant
de relier certains des éléments
les moins importants de la page. Et bien sûr, il est possible de
relier certains
des éléments très importants à certains des éléments les moins
importants. Parce que, bien sûr, lorsque nous
commençons à créer des conceptions, peut que
vous ayez une rubrique très
importante avec il se peut que
vous ayez une rubrique très
importante avec
des
éléments légèrement moins importants.
9. Alignement: Comme nous l'avons mentionné un
peu plus tôt, une fois que vous avez trop d'
éléments sur votre page, les
choses vont
commencer à devenir un peu chaotiques. Nous
commencerons donc naturellement à créer des règles pour ajouter une
certaine conformité. n'y a donc qu'une petite
place pour le chaos créatif. Par exemple, nous pouvons limiter la quantité de
couleurs que nous pouvons utiliser. Peut-être dirons-nous qu'il n'y a que
trois couleurs spécifiques que nous pouvons utiliser pour ces
formes dans notre composition. Nous parlerons davantage des
couleurs plus tard dans le cours. Mais pour l'instant, parlons de
notre disposition de composition. Maintenant, plus tôt, j'ai dit que vous pourriez commencer à créer une sorte de grille dans votre esprit ou à vous
assurer que
les choses sont alignées pour essayer de
réduire ce chaos. Nous parlerons également des grilles plus tard dans
le cours. Mais pour l'instant, vous commencez
à créer des compositions. Et certains d'entre eux ont
beaucoup d'éléments. Ils commencent à paraître
un peu chaotiques. Nous voulons nous assurer que les choses
restent alignées les unes
avec les autres. J'ai donc voulu
suggérer certaines choses qui pourraient aider ces
alignements à bien paraître. Donc, sur l'écran, j'ai trois boîtes de taille
égale
qui sont de la même couleur et elles s'intègrent parfaitement dans cette grille imaginaire. Je l'ai mis dessus. Si j'ai ajouté
une quatrième case, idéalement, je ne veux pas qu'elle ne soit pas
alignée sur cette même grille en
limitant les positions que les éléments peuvent apparaître
dans ma composition. Je lui donne un
sentiment de conformité, ce qui lui donne un joli motif
satisfaisant pour l'utilisateur. Cependant, je veux peut-être créer des intérêts visuels et
peut-être vouloir un certain chaos, auquel
cas
un élément ne
semble pas aligné sur le
reste de la grille. Mais même dans ce cas, je
voudrais dire que seul un élément de ma composition peut être
aligné sur la grille. Mais ces règles
vont changer en fonction de la
composition que nous créons. souvent, selon
le genre de sentiment
que nous voulons que la composition Et souvent, selon
le genre de sentiment
que nous voulons que la composition
inculque à la personne qui la
regarde. Nous pourrions créer quelque chose
comme celui-ci où il est bien équilibré par rapport
à la composition, mais aussi un peu de contraste
entre la gauche et la droite,
et en rendant simplement
la plus grande forme alignée deux différentes. à l'intérieur de la grille pour qu'elle soit plus grande. où cela va commencer à
se
compliquer un peu plus , c'est lorsque nous commençons à introduire
différentes formes, mais que nous voulons les appliquer à
la même grille d'alignement. Si, par exemple, nous voulons
une composition comme celle-ci, où nous équilibrons un carré et un cercle légèrement plus léger. Le cercle n'
apparaîtra pas comme s'il s'inscrivait
dans cette grille, comme
dans le carré, car
les coins ne sont pas car
les coins ne sont pas remplis comme un carré. Le cercle n'a
pas de joli bord plat pour s'asseoir au ras de
la grille d'alignement. Donc, pour que notre cercle s'insère dans
cette même grille d'alignement, nous voulons en fait l'élargir
légèrement. Nous voulons pousser légèrement son
poids vers l'extérieur. Et maintenant, c'est peut-être
un peu plus comme s'il est aligné sur la même
grille que le carré. Dans la dernière vidéo, nous parlions de créer des
relations avec des formes si elles
appartiennent ensemble ou il existe une sorte
de relation entre ce que ces
formes signifient pour la page. Si, par exemple, nous voulions que ce carré
et le cercle
soient alignés et qu' ils soient également
liés d'une manière ou d'une autre. Peut-être que nous les
alignerions en fonction du point central
des deux formes. Disons maintenant que nous
voulions, pour une raison quelconque aligner le cercle la ligne de base du carré plutôt que sur le
centre du carré,
comme nous venons de le dire à propos du dimensionnement, nous allons le pousser
Un peu au-dessus de cette ligne. J'aime imaginer
que ces lignées avaient un peu de genre
spongieux pour elles. Maintenant, faisons
la même chose avec une
forme légèrement différente avec un triangle. Si nous avions le
triangle de cette façon, il serait probablement sur
la même ligne de base. Mais si nous l'avons retourné, c'est sur un point
très, très pointu qui va
probablement baisser
un peu à cause de la pondération
centrale de cela. Et si nous voulions aligner centralement le
carré et le triangle, triangle a
la plupart de ses attentes sur le
côté le plus grand, évidemment. Nous allons
donc pousser cela un
peu vers le bas et traiter cela comme si les points centraux
du triangle sont un peu plus
éloignés du pointeur. Et réfléchissez à l'endroit où se trouve le
centre
du poids de la forme
plutôt que le centre réel. Enfin, si nous
arrêtons de penser lignes de
grille ou aux
lignes d'alignement pendant une seconde et que nous pensons à un
tas de formes dans une séquence espacée de manière égale. Vous pouvez voir que j'ai
rendu le cercle un peu plus grand et le triangle
un peu plus grand
pour repousser ces lignes de base
et cette ligne supérieure. Mais je veux
parler de la façon dont ils sont espacés
horizontalement sur l'écran. En ce moment, ce que j'ai fait comme les lignes de
grille plus tôt, c'est que j'ai placé un espace
égal entre le bord même de chacune
de ces formes. Le problème ici,
encore une fois, c'est que les carrés
ont un bord très plat. Ils sont assis au ras
de cet écart. Alors que le triangle
et le
cercle ont des points très précis qui touchent
le bord de l'écart. Au lieu d'espacer
ces formes, je suis beaucoup plus préoccupé par la zone de l'espace
entre chaque forme. Si je regarde plutôt les trois
espaces entre les formes, je me rendrai vite compte que cet espace à gauche
est beaucoup, beaucoup plus petit. Je veux donc repousser ce cercle
et que l'espace à droite soit un peu plus petit. Je veux juste écraser un peu
ce triangle vers
la gauche. Et maintenant, si je recolore
ces formes, je suis beaucoup plus contente de leur espacement. Bien sûr, vous
travaillez toujours avec un stylo et du papier. Vous allez donc imaginer
les lignes de la grille ou imaginer ces
zones entre elles. Et je vous exhorte à continuer à travailler avec du stylo et
du papier parce que nous entraînons nos yeux
et que nous entraînons notre intuition en créant
chacune de ces compositions. Prenez les compositions
que vous avez créées pour les deux dernières sections
et recréez-les, mais prenez un peu plus de temps sur elles maintenant, peut-être
faites-les un peu plus grandes et passez du temps à
réfléchir à l'alignement, exactement à quel point chaque
forme est proche l'une de l'autre et pourquoi la composition telle que nous créons dans cet
exercice va ressembler presque exactement
à
celle des deux précédents. Mais croyez-moi,
cela va faire une énorme différence. Chaque fois que je vois un débutant, graphiste ou
un concepteur Web commencer à utiliser une grille et à
penser à l'alignement. C'est honnêtement la chose
numéro un qui rend ces
compositions beaucoup plus professionnelles.
10. Séquence et rythme: Avec tout ce dont nous
venons de parler, hiérarchie, les relations,
puis l'alignement. Nous
parlons beaucoup de créer un sens de l'ordre sur la page. Nous créons encore
beaucoup de chaos avec l'expression et le contraste. Et ensuite, nous créons
tout simplement un ordre. L'ordre concerne la
fonction de la page, mais le rythme est un peu
plus lié au violon. Nous allons parler un peu plus de
rythme maintenant. Si vous imaginez de la musique, bien
sûr, la musique a un rythme. Regardez ces boîtes
à l'écran. Ils sont bien espacés
à un rythme très précis. Imaginez une chanson qui n'
a qu'un rythme répétitif. Cette composition ressemble
beaucoup à une chanson qui n'a qu'un rythme
répétitif continu tout au long de la chanson. Désormais, une chanson avec des battements répétitifs
continus peut être assez satisfaisante. Ça pourrait bien nous plaire, mais on va vite
s'ennuyer. Ça va devenir monotone. Et là où nous
allons l'éteindre
car notre cerveau
va s'endormir. En fait, c'
est peut-être très bon pour dormir. Ce que nous allons faire avec
une composition est très similaire à ce que
nous ferons de la musique. Peut-être qu'on vient de supprimer
certains de ces battements. Peut-être que l'un d'entre eux est
décalé ou syncopé. Peut-être allons-nous
certains de ces battements, ou peut-être que nous lui donnons un son différent
ou, dans ce contexte, bien
sûr, il s'
agirait d'une couleur différente. Bien sûr, si nous avons ajouté une
grille à notre composition, nous créons anormalement
une forme de rythme. Nous créons naturellement des rythmes là où certains éléments
se trouvent dans notre conception. quoi nous
pensons un peu plus dans cette vidéo, c'est que la position de ces battements
crée-t-elle un rythme intéressant ? Y a-t-il un bon
rythme à la page ? Et c'est pratiquement impossible
à faire si nous
parlons de ce rythme horizontal
qui va de gauche à droite. Et c'est parce que, bien sûr, nous savons que nous utilisons parfois nos
téléphones mobiles sur notre iPad. Et la largeur du dessin, la composition
va changer radicalement et beaucoup de morceaux
vont se déplacer, et donc
cela va
ruiner ce rythme horizontal. De plus, si vous cherchez
un téléphone portable, il n'y a pas beaucoup de
différence de gauche à droite. Donc, si nous commençons à revenir dans
le monde du web design, nous voulons vraiment penser
à notre rythme de haut en bas, le rythme vertical. Pour le dernier exercice
de ce module, je veux que vous travailliez avec
un Canvas vertical, quelque chose qui ressemble une zone blanche sur l'écran ici, vous le dessiniez
dans des boîtes sur un morceau de papier ou autre,
c'est tout à fait très bien. Tout d'abord, imaginez qu'il ait ce rythme répétitif dû
au fait de descendre la page. Ou vous pouvez le dessiner légèrement au crayon sur votre composition. Ensuite, nous allons construire une composition où
nous ajouterons des éléments qui n'ont qu'une ligne à
ces battements initiaux. Maintenant, évidemment, nous
pourrions les aligner tous de la
même taille, en
descendant la page comme ça. Mais cela va
être vraiment ennuyeux et cela va faire en sorte que
notre utilisateur s'endorme. Alors,
essayons plutôt de construire ces formes de
différentes tailles et de couleurs
légèrement différentes
pour essayer de lui donner une pièce
intéressante sur la page, mais toujours alignée sur
ces rythmes sous-jacents. Essayez quelques versions différentes. Essayez différentes
formes si vous le souhaitez. Mais essayez de remarquer
quand quelque chose fonctionne mieux et quand
ce n'est pas, par exemple, cet orange, il ne
prend pas trop de place, mais si nous avions une
grande forme orange, cela pourrait être un peu trop. Il peut prendre en charge l'
ensemble de la composition, un rythme qui vous
plaît, puis essayer d'ajouter quelques autres éléments à
la composition. Je pense à toutes
les autres choses dont
nous avons parlé dans ce cours. Réfléchir à la façon dont les choses se rapportent
les unes aux autres et à savoir si la composition est bien équilibrée et s'
il y a un certain contraste. Prenez un peu de temps pour tirer parti
de ces compositions finales pour intégrer tout ce que nous avons appris tout au long du module. Alors, passez un peu plus de
temps sur celui-ci et n'
hésitez pas à utiliser un
programme graphique à ce stade. Si vous vous sentez plus à l'
aise de le faire, je veux que vous vous
assurez que votre toile, la forme que vous créez, la composition à
l'intérieur est verticale. Ce sont des portraits. C'est le cas, il est
plus élevé que long. Tracez légèrement quelques
lignes avec un écart constant entre, imaginez que c'est votre rythme
sous-jacent de votre page, le rythme. Ensuite, utilisez ces beats pour créer des
boîtes de différentes tailles qui constitueront l'arrière-plan de votre
composition et en feront différentes couleurs et hauteurs
différentes. Enfin, utilisez tout ce que
nous avons appris dans le
reste de ce module pour ajouter trois ou quatre autres
éléments à la composition. Et c'est peut-être votre dernière occasion de
créer quelque chose
où vous n'avez pas d'
autre objectif en tête, c'est simplement jouer, vous
amuser un peu et essayer de amuser un peu et essayer identifiez ce
que vous pensez être beau. Alors, assurez-vous de vous amuser un
peu avec celui-ci.
11. Résumé: À travers ces premières vidéos, nous avons travaillé sur plusieurs exercices rapides mais très pratiques
qui s'appuient sur les
derniers exercices qui s'appuient sur les , entraînent nos
yeux et entraînent notre intuition pour créer de
meilleures conversations. suis retourné autant
de fois que vous le souhaitez. Donnez
une belle apparence à la composition avant de commencer à
penser au contenu, à l'image de
marque ou à quoi que ce soit d'autre. Lorsque nous travaillerons sur
le positionnement du contenu
réel sur la page plus tard, nous penserons à 100 autres choses et il sera alors très difficile pour nous d'identifier si la composition globale
est bien équilibré, visuellement
intéressant, ou même si la composition
elle-même communique le bon message en travaillant sur ces exercices indépendamment
du contenu de la page. C'est maintenant une seconde nature pour nous. Cela nous vient naturellement
lorsque nous en avons besoin, et nous n'avons pas besoin
d'y penser
consciemment pour que nos compositions
fonctionnent bien.