Bootcamp de conception d'IU, semaine 1 : Composition | Rob Sutcliffe | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Bootcamp de conception d'IU, semaine 1 : Composition

teacher avatar Rob Sutcliffe, UI Designer / Developer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction au bootcamp d'UI

      2:31

    • 2.

      La composition

      6:34

    • 3.

      Expression

      4:39

    • 4.

      Équilibre

      3:44

    • 5.

      Contraste

      6:26

    • 6.

      Formulaire

      4:30

    • 7.

      Hiérarchie

      7:34

    • 8.

      Relations

      3:18

    • 9.

      Alignement

      6:56

    • 10.

      Séquence et allure

      5:06

    • 11.

      Résumé

      1:05

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

971

apprenants

20

projets

À propos de ce cours

L'aspect le plus crucial pour former une grande expérience utilisateur est d'avoir une interface utilisateur magnifiquement élaborée. Quelques petits changements à votre esthétique peuvent avoir un impact énorme ou l'expérience pour vos utilisateurs. Si
vous concevez sur une application web, vous prenez des décisions en matière de typographie, de couleurs et de composition. Ces dernières auront un effet sur l'image de marque, le style, la facilité d'utilisation et l'expérience utilisateur de votre application. Vous prenez déjà ces décisions mais êtes-vous au courant de leur impact. L'utilisation très subtile de la typographie et de la couleur peut avoir une personnalité suffisante pour que nous n'ayons besoin d'aucun autre visuel. Nous pouvons donner la vie à un bloc de texte ennuyeux et cela peut rendre notre utilisateur plus facile ou plus difficile à lire. Obtenir quelques choix simples peut faire ou casser l'application.

Semaine 1 : CompositionA bonne composition rend nos designs uniformes mais elle crée également
un intérêt visuel. Si nous savons utiliser un, c'est la seule chose qui peut rendre un design instantanément plus professionnel tout en gardant l'engagement des utilisateurs.

Cette semaine, nous suivrons une série d'exercices pratiques pour améliorer votre intuition lorsque vous placez des éléments sur une page. Une fois que vous avez cette intuition, nous pouvons commencer à ajouter du texte, des images et d'autres éléments d'interface utilisateur. Mais assurons que nous commençons par maîtriser nos compositions avant d'impliquer tout ce truc.

Ce cours est pour moi ? Idéalement,
vous aurez déjà passé un certain temps à concevoir des sites Web et/ou des applications. Chaque aspect du cours est créé avec des débutants à l'esprit, mais vous pouvez trouver que vous allez plus loin si vous avez déjà créé des designs. Vous aurez également besoin de savoir comment utiliser un logiciel de conception. Je vous recommande Figma, mais Adobe XD, Invission Studio, Sketch ou certains logiciels similaires seront également compatibles.

Le cours est créé avec des designers en tête, mais il peut également être d'intérêt pour les développeurs ou les propriétaires de produits frontaux.

Rencontrez votre enseignant·e

Teacher Profile Image

Rob Sutcliffe

UI Designer / Developer

Enseignant·e

Compétences associées

Design Design UI/UX Web design
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

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.