Devenez un meilleur blogueur : Planification du contenu

2. Qu'est-ce que la conception ?: cependant, et bienvenue à la conception pour les gens qui ne s'appellent pas eux-mêmes designers. Commençons donc par définir ce qu'est le design. Je crois que le design est une méthode de communication d'un message pour résoudre des problèmes, donc s'il ne communique pas un message de celui-ci ne résout pas un problème pour moi. Je ne vais pas vraiment décrire ça comme prévu. Cela pourrait être autre chose, et beaucoup de fois le design est confondu avec l'esthétique. Donc, si vous pensez que c'est quelque chose qui est beau mais pas très fonctionnel, si esthétique, ça pourrait être agréable. Mais fonctionnellement, ça ne marche pas vraiment. Tu peux regarder ça et dire, c' est beau, mais ça l'a fait. Ça ne marche pas, ne fonctionne pas. Regardez ces couteaux, fourchettes et cuillères. Ils sont aimés. J' adore les couleurs de tout, vous savez, vous savez, ils ont juste l'air super, mais essayez de manger avec l'un d'eux. Cela ne fonctionnerait pas correctement ? Donc, si vous regardez le contraire de cela et vous regardez quelque chose comme Craigslist, où il est esthétiquement pas très agréable, mais fonctionnellement fonctionne et vous pouvez voir avec le succès de Craigslist qu'il fonctionne. Et donc avec Google, Google a toujours été. Maintenant, la conception de Google est de mieux en mieux. Mais dans les premiers jours de Google, c'était vraiment. Le gourou n'était pas vraiment esthétique, mais il a résolu un énorme problème. Et il y avait beaucoup de fonctionnalités dans les choses que Google a fait. C' est un exemple de quelque chose qui n'est certainement pas esthétique mais qui est très fonctionnel. Regarde, il y a les chaînes monstrueuses sur les roues. Il y a un chasse-neige. Il y a tout ce dont vous avez besoin, non ? Probablement à 100 km du gallon. Ce truc est génial. Donc tout au long de ce cours, nous allons couvrir quatre éléments du design. Il y en a plein d'autres, mais ce sont les quatre dont je veux vous parler dans cette classe. Nous avons donc des grilles, hiérarchie visuelle, typographie et la couleur. 3. Introduction aux grilles: - Commençons par les grilles. - Je suis un designer très systématique. - J'ai aimé la conception d'approche très mathématiquement parfois et donc les grilles je pouvais devenir vraiment nerdy - quand il s'agit de grilles. - Et donc, - oui, - restez calme et utilisez une grille pour voir les grilles. - Grilles, - Fondamentalement les grilles font est de créer de l'ordre hors du chaos. - Droit. - Donc tu as toutes ces choses différentes. - Comment créer une sorte d'ordre à tous ces éléments ? - Et si vous regardez cela, - c'est un excellent exemple des différentes villes aux États-Unis. Vous avez Atlanta, Boston, Chicago, Detroit et comment ces différentes grilles apparaissent dans l'urbanisme. - Hum, - pour que vous puissiez aussi voir. - Voici un exemple de vue aérienne d'une grille. - Ça aide. - Certainement quand je suis à New York, c'est beaucoup plus facile pour moi de me déplacer quand je suis en ville parce que la grille est très claire. - Quand vous entrez, - comme le SoHo et le genre de, - um, - le quartier de réponse avant et des choses comme ça, - il devient vraiment difficile de naviguer parce que la grille n'est pas aussi claire. - Il pourrait y avoir aussi parce que je suis vraiment mauvais avec les directions. - Euh, - Legos. - J'étais certainement une grande famille Lego était un peu Legos sont grands parce qu'ils sont là - un ordre particulier pour le Lego, - et il ne crée ces grilles organiques que vous construisez ces choses. - Et qu'est-ce qu'une grille ? - Donc, ma définition d'une grille est simplement une division de l'espace sur une page pour créer une structure et - ordre pour le contenu. - Il y a des façons infinies que vous pouvez diviser une page, - mais nous allons coller à l'une des grilles les plus flexibles la grille de 12 colonnes afin que vous puissiez faire 24 - niveau de colonne. - Tu pourrais en faire 36. - Quelles que soient les grilles, c'est vraiment une division de l'espace. - J'aime utiliser la grille de 12 colonnes parce que c'est le moins de colonnes qui ont le plus de colonnes également divisibles. - Donc je vais vous montrer cela même que cela peut ne pas avoir de sens, - mais donc vous pouvez prendre cette grille de 12 colonnes et vous pouvez la diviser en deux, - juste pour que vous puissiez voir ici. Il y a six , groupes ici, donc vous avez 123456 de deux colonnes chacune dans cette grille, et vous pouvez aussi le diviser en trois. - Alors avant les colonnes de trois. - Et tu pourras le porter à quatre. Vous avez trois colonnes de quatre, et j'ai deux colonnes de six. - Voici d'autres types de grilles et d'autres vraiment cool. - Ah, - la plupart des grilles théoriques du complot qui pourraient être trouvées dans la nature dans l'art et toutes sortes - de ce genre de choses. - Alors, on va sauter ici. - Donc, si vous regardez une chose appelée ou un principe appelé la section d'or, - donc si vous regardez le numéro de la section d'or, - c'est un nombre magique appelé 1.618 Et donc si vous regardez cela, - vous pouvez voir que le si vous prenez le plus petit. - Donc, si vous regardez le carré supérieur droit et si vous multipliez cela par 1.618, vous obtiendrez le - carré sur la gauche, - ces carrés assemblés ou quelle voiture ? - Ce qu'on appelle un rectangle d'or. - Donc, si vous regardez, - il y a le nombre, - et donc vous pouvez commencer à trouver cela dans l'art romain ou une architecture romaine de grec - architecture, - et vous pouvez voir ici que c'est un or. - La largeur de celui-ci est un rectangle doré. - Si c'était un but, je ne sais pas. - C'est là que commence la théorie du complot. - C'est le numéro de Dieu ? - Qui sait ? - C'est juste un nombre incroyable qui apparaît dans la nature. Donc vous pouvez voir ici qu'un coquillage si vous continuez à descendre la ligne et dites OK, , si vous regardez le carré inférieur droit, si vous regardez le carré inférieur droit, si vous preniez ce temps 1.618 vous auriez le carré supérieur droit, si vous preniez ce temps 1.618 vous auriez le carré supérieur droit, - C'est vrai ? - Donc tous ces air l'un par rapport à l'autre. - Et si vous continuez à les diviser ou à les multiplier vers le bas, - vers le bas, - vers le bas, - vers le bas pour devenir de plus en plus petit, - vous pouvez voir que cela prend la forme d'un coquillage. - Donc c'est une proportion très courante que si vous utilisez dans le design, - euh, - est en fait très familier aux humains. - Donc, si vous regardez Mona Lisa, - c'est un autre exemple que le nez est le point focal, - tout basé sur ce rectangle d'or. - Donc, si vous allez à l'un des premiers redesigns Twitter utilisait la section d'or dans ce - genre de proportion d'or, - et vous pouvez voir ici les colonnes gauche et droite sont parfaitement en ligne avec ce genre de - section d'or approche. - Et si vous regardez le logo iCloud et la pomme, - vous pouvez voir que ces cercles sont juste fondamentalement des multiples de 1.618 et ils sont tous - les uns par rapport aux autres. - GRILLE NATIONALE GÉOGRAPHIQUE National Ce logo est un rectangle doré. 4. Screencast: : Utiliser une grille en pratique: - Alors commençons à construire des grilles. - J'utilise des feux d'artifice. - Feux d'artifice Adobe, - parce que c'est celui avec qui je suis le plus à l'aise. - Mais tu peux vraiment utiliser n'importe qui que tu veux. - Voici donc une carte maquette ups dot com m o que u p s dot com Celui-ci est génial parce que vous pouvez - juste une sorte de sauter juste en utilisant votre navigateur. - Vous n'avez pas besoin de télécharger ou d'installer quoi que ce soit. - Hum, - et il est livré pré-construit ici avec une grille pour que vous puissiez définir Ah, - la grille s'accrochant à 960 pixels de large grille. - Et vous pouvez utiliser 16 colonnes ou 12 comètes. - On va utiliser 12 colonnes et ensuite tu pourras t'accrocher à la grille ici. - Un autre, - hum, - qui gagne beaucoup de popularité s'appelle Sketch Sketch est vraiment cool. - Ma femme l'a ramassé assez vite. - Elle n'avait aucune connaissance préalable de ces programmes graphiques, - et elle était capable d'y entrer et de faire beaucoup de trucs cool, - donc je vérifierais les croquis si tu ne l'as pas déjà fait. - Alors, sautons dans les feux d'artifice. - Donc la première chose que j'ai faite dans les feux d'artifice est beaucoup plus facile à dio, - mais j'ai juste mis en place 12 colonnes qui étaient 60 pixels de large, - avec 20 pixels entre les deux. - Donc, vous pouvez voir ici, ils additionnent jusqu'à 940 pixels enregistrés, - ce qui est une assez bonne taille yeux pour l'une des plus grandes tailles. - On pourrait se lancer dans un design réactif et tout ça, mais restons-en avec ça. - Approche de grille à trois colonnes que vous pourriez également utiliser. Je veux dire, - je parle de ça en termes de trucs Web que vous pourriez aussi, - ça pourrait aussi s'appliquer en impression, - donc ça s'applique vraiment à n'importe quel type de design sur lequel vous travaillez. - Alors commençons. - Alors mettons une page personnelle Alors construisons comme une page de portefeuille personnelle. - Je pense que ça pourrait être une bonne sorte d'approche générique que nous pouvons utiliser un menteur - ces principes que nous parlons de la classe. - Alors imaginez si épargnez les colonnes, - imaginez si , - disons, - votre nom irait dans ces deux colonnes. - Donc c'est centré. - Ça prend deux colonnes et disons qu'il y a un titre qui couvre toutes les 12 colonnes. - Alors quel genre d'étaler ça et ensuite en bas ici, - peut-être qu'on aura des illustrations en vedette. - Disons que celui-là est là. - Vous pouvez voir à quel point c'est facile de cartographier dans votre tête et esquisser pour un développeur -. - Celui qui fait peut-être le produit final S O. - C'est une grille en trois lambeaux, - donc nous aurons du texte en dessous de ces boîtes. - On va juste garder ça beau et graphique ici à partir de maintenant. - Et après ça, - faisons-le, - hum, - sorte de nous Ah, - 626 grilles de colonnes. - Donc, si nous allons ici, - ces air à com, - euh et donc essayons aussi de faire une sorte d'approche 2/3 ici pour que vous puissiez en quelque sorte cartographier ça -. - Peut-être que nous allons faire une autre pièce ici pour le remplir avec du contenu pour obtenir un peu - belle variété dans les différentes grilles afin que vous puissiez voir ici et puis au bas va mettre un - pied de page. - Il couvre le tout avec, - pour que vous puissiez voir ici. - Vous commencez déjà à voir beaucoup de structure arriver. - Vous pouvez voir ici que nous avons juste les deux colonnes centrées ici. - Parfois, on appelle ça un décalage. - Donc, - vraiment, - c'est cinq colonnes décalées de la gauche et vers la droite, - donc vous pouvez voir ici. - Hum, - et c'est fondamentalement loin, - comme Faras la grille. - Ce qui est vraiment cool à ce sujet est disons que c'est la page d'accueil, - mais alors vous voulez créer Ah, - page secondaire ou un design secondaire. - Disons que c'était un livre. - Vous concevez un livre et vous vouliez avoir, - um, - un design qui permet beaucoup plus de contenu. - Nous supprimons juste cette colonne, - supprimez les autres et faites simplement glisser celle-ci. - Hum, - prenons commande ça avec ça. - On le traîne jusqu'à ce qu'il rencontre ça. - Donc maintenant vous avez un peu ce rapport de colonne 2/3 à troisième ici, - ce qui est vraiment sympa, - parce que maintenant vous pouvez mettre quelques en-têtes ou sous-en-têtes et ensuite beaucoup de gros morceaux de - contenu ici. Il y a toutes sortes de façons de diviser cette grille en deux, donc vous pouvez vraimentfaire preuve de créativité. Il y a toutes sortes de façons de diviser cette grille en deux, donc vous pouvez vraimentfaire preuve de créativité. Il y a toutes sortes de façons de diviser cette grille en deux, donc vous pouvez vraiment - Et c'est vraiment le pouvoir des grilles. - Vous permettre d'être vraiment flexible avec beaucoup de ce que vous faites. Mais ce qui est cool, c'est tout s' aligne, et c'est le retour à ça. - Le principe de créer de l'ordre hors du chaos. - Donc même avec cette page, - quand on la rétrécit et que tu regardes le truc de trois colonnes qu'on a fait au début - le grand carré qui était sur la page précédente, - ça va s'aligner, - ça va s'aligner assez parfait avec. - Imaginez que c'était sur l'autre page. - On a fait peur ici. - Vous pouvez voir que ce morceau, - vous savez, - ça va s'aligner parfaitement, - et c'est la vraie puissance d'un réseau. 5. Grilles et la section d'or: il y a donc une autre chose vraiment cool que vous pouvez faire, c'est une approche différente d'une grille et d'utiliser ce ratio d'or, non ? Voyons donc que nous commençons par Ah, compte tenu de Dimension. Disons que c'est 300 pixels par 300. Il s'agit généralement d'un bloc publicitaire standard. Et donc disons que ce design doit être conçu autour d'une annonce encore super excitant. Mais disons que c'est ce qu'on doit faire. Donc si nous commençons avec ce 300 sur nous avons à faire est de prendre le 300 il ya donc votre calculé ici 300 fois 1.618 et nous allons obtenir l'autre l'autre largeur. Donc c'est 485 pixels 4850,4. Mais on ne va pas faire de décimales ici, alors on va faire un carré ici. C' est 485 par 485. Donc, si vous voyez ici, c'est une toute la largeur de ceci et pas comme si vous voulez dessiner une ligne autour cette boîte entière, c'est maintenant appelé le Rectangle d'Or. Donc, c'est ah un enchevêtrement rectangle proportionnel dans la nature. Maintenant, ça a une proportion très agréable, non ? C' est ce dont je parlais tout à l'heure de ce ratio d'or. Donc, le truc cool à ce sujet est OK, donc si vous étiez en train de concevoir un blawg, vous pourriez ajouter un peu d'espace ici à 20 pixels ici et maintenant vous pourriez avoir l'unité d'annonce ici, et c'est la largeur de votre contenu zone serait. Droit ? C' est donc un moyen très rapide d'obtenir une bonne proportion. Euh, tu sais, tout de suite. Donc ce que nous pouvons faire aussi, qui est vraiment intéressant, c'est que si vous prenez ça, mettez-le ici quand vous allez faire un carré ici, non ? Donc si je fais ça complètement carré jusqu'à la ligne, ça va créer un autre rectangle d'or. Donc, si je prends ça et que je crée un autre carré et que je fais ce carré juste à ce bord, ici est un autre rectangle doré, et c'est comme ça que c'est fou. Si vous regardez certains de ces diagrammes du rapport d'or, vous pouvez voir qu'il continue de descendre et descendre et descendre. Vous pouvez tracer cette ligne de courbe. Et c'est comme ça que j'ai montré dans cette maquette de Twitter. C' est comme ça qu'ils ont eu cette seconde moitié. Donc, en gros, ils l'ont fait une fois. Et donc c'était la main gauche, Navid, et puis c'était la zone de contenu. Donc, chaque fois que vous êtes juste à la recherche d'un moyen rapide d'obtenir une bonne proportion, il suffit de prendre cela avec la plus petite largeur et de le multiplier par 1,618 et vous obtenez quelque chose de assez cool. 6. Intro à la Hierarchy visuelle: donc la section suivante est la hiérarchie visuelle. Donc, la définition, selon Wikipédia, est que la hiérarchie visuelle est l'ordre dans lequel l'œil humain perçoit ce qu'il voit. Les humains ont tendance à regrouper des éléments similaires en modèles significatifs, alors regardez ceci. Nous avons donc ce graphique. On a des points roses, des points jaunes. Il y a Aton de différents principes et hiérarchie visuelle qui entrent en jeu. Il y a de la couleur. Il y a un contraste. Il y a la proximité. Il y a un motif. Il y a eu une répétition. Toutes ces choses entrent en jeu pour créer ce modèle. Alors pourquoi est-ce important ? Pourquoi la hiérarchie visuelle est-elle importante ? Et je viens de vous donner la définition du pantalon fantaisie, selon Wikipédia. Mais peut-être que vous pourriez y penser de cette façon, c'est que nous avons tous une attention limitée. Les travées se précipitaient d'une réunion à l'autre. On ramasse des enfants, prépare le dîner, regarde le prochain épisode de The Bachelor. C' est juste ma femme, pas faire droit quand nous voyons quelque chose où quand nous lisons quelque chose, nous essayons de le comprendre aussi rapidement que possible sur la numérisation de la page orteil chercher des motifs. Nous recherchons les relations entre ces éléments individuels et la façon dont tous ces éléments se connectent ensemble. Si le concepteur fait du bon travail, nous devrions être en mesure de saisir la signification de la page et ensuite choisir si nous voulons plonger plus profondément dans le contenu. Donc, chaque fois que vous allez sur George Reporter Huffington, Post buzzfeed ou l'un de ces sites que vous numérisez et que vous cherchez des modèles, vous cherchez une hiérarchie et des choses qui se démarqueront pour vous. Donc, si vous regardez le contenu de 37 signaux Page, um, J'aime toujours 37 espace spécial parce qu'ils font un excellent travail de communication hiérarchie et tous les différents principes. Donc, si vous avez pris tout le texte de cette page et que vous l'avez mis en remorque un paragraphe, c'est évidemment pas très facile à comprendre. C' est le même contenu exact. Mais si vous lisez tout ça, vous ne le comprenez peut-être pas. Vous pouvez simplement sauter dessus, droite, donc nous devons utiliser cette hiérarchie visuelle et l'utiliser pour créer ces modèles et être en mesure de numériser les choses rapidement. Donc, si nous prenons cela simplement en utilisant la taille et certains, um, quelques um, retours durs, nous pouvons créer un peu plus d'organisation, et maintenant vous pouvez voir qu'il y a une taxe corporelle d'en-tête. Il y a différent. Vous savez, il y a différents sous-en-têtes et tout ce genre de choses, donc vous pouvez voir que le plus gros en-tête en haut est la plus grande police, et ensuite vous descendez au camp de base High Rise camp fire. C' est un peu. Ceux-ci sont un peu plus petits, mais ces types d'en-têtes secondaires d'air sur, et vous pouvez voir comment il est beaucoup plus facile à lire. Donc, l'une des premières choses que j'aime faire lors du démarrage d'un projet de conception est d'obtenir tout le contenu dans un formulaire de plan. Donc si j'écris le contenu et que je mets un aperçu de quelqu'un d'autre qui écrit la copie, je vais le faire mettre dans un plan. Et je vais créer ce contour pour voir lequel des éléments les plus importants dans lesquels dois-je voir le spectateur en premier ou lire en premier. Donc, dans ce cas, l'en-tête supérieur rendant la collaboration productive. C' est l'en-tête supérieur. Visuellement, je dois m'assurer d'utiliser certains des principes dont nous allons parler, que le spectateur lit cet article d'abord, puis le reste d'entre eux. Certains spécialistes du marketing l'appelleront une pente glissante pour s'assurer que vous lisez l'article dans lequel ils veulent que vous lisiez cet article. Voici quelques façons de faire ça et je vais vous guider et nous le ferons . Je vais le faire, vivre juste devant vous et créer un design. Et nous utiliserons ces principes. Nous avons donc l'alignement des espaces colorimétriques, une hiérarchie implicite ou explicite. Alors on y va. 7. Screencast: Utiliser la hiérarchie visuelle en pratique: - Alors maintenant, prenons certains de ces principes de hiérarchie visuelle et commençons à construire une page vraiment . - Alors d'abord, on va juste mettre le contenu là-dedans. - Et je suis une marque juste, - hum, - taille des décisions de taille maintenant aussi loin que le type, - mais c'est juste pour avoir des choses à nouveau. - Un peu esquissé. - Donc, c'est un site de portefeuille aura le nom du temps. Donc sa Jane Smith, je vais utiliser une Helvetica juste pour le garder vraiment fade pour l'instant jusqu'à ce que nous soyons dans la typographie. Donc, je vais mettre ça, ça autour, mettreça autour, unpeu près de ces bords, donc ils sont centrés juste ici. peu près de ces bords, - Centrer ça. - Maintenant, nous avons le nom. Je voulais mettre une ligne décorative en dessous de ça pour un peu s'épanouir , ici, mais je me sens comme Bob Ross, le peintre. - Mais on va mettre ça en dessous. - C'est cool. - Et alors nous prendrons ça. - Copiez ça, - et nous ferons le titre suivant. - Donc si nous faisons le contour, - le titre apparaîtrait en haut du contour. - Donc c'est probablement la chose que tu vas faire. - Voulez-vous que le spectateur voit d'abord parce qu'il est en quelque sorte de préparer le terrain pour ce que ce - site est. - Donc c'est le site aussi manqué. - Génial. - Vous êtes génial ist que tout ce que vous apprenez à épeler ce génial, - c'est le site Web jamais. - D'accord, alors on a dit qu'ils vont faire de l'essence. - Disons juste 50 pixels. - Ça va être plein avec ici, - et ensuite je vais centrer que c'est en quelque sorte garder ça dans ce voisinage général, - donc la prochaine règle va casser la page. - Donc si c'est le site du portefeuille quand on le divise en 33 catégories de travail, - Donc il y a des images qui ont déjà importé ici, - mais celle-ci ici et met celle-ci au milieu. - Alors, prends ça. - Il est aligné ici, - cette année en ligne. - Fireworks a une belle façon de le faire où je pourrais juste aller ici et dire 20 pixels et ça - frapper, - um, - dans l'espace qui me donne automatiquement cet esprit. - Donc juste la hauteur et je peux zoomer ici, - assurez-vous que je suis juste sur cette ligne. - Nous allons dans le groupe, - et donc la prochaine chose que nous ferons est les deuxièmes en-têtes de Dairy. - Donc ces air vont décrire pour que celui-ci puisse être aquarelle et celui-là pourrait être portrait. - Et ça pourrait être la nature. - Donc ce sera notre en-tête secondaire. - Donc si ce serait notre premier en-tête, - ce serait l'en-tête secondaire et ensuite mettons-nous un peu de corps de texte. Ce feu d'artifice vous donne une belle commande ici, Laura. - Des mythes. - Um, - ça va juste vous donner du texte d'ipsum chaud à utiliser. - Tu l'amènes ici ? - Je n'ai pas vraiment besoin de ça. - Je vais en découper un peu. - Et ça décrirait ce qu'il y a à l'aquarelle. - Prends un peu plus dehors. - Donc juste ceci à ça avec et puis je copierai et collez ce qui est par ici. - Fais aligner ça. - Et pourtant ça aligné. - Donc tout devrait être aligné là-haut. - La prochaine chose serait, - euh, - peut-être quelque chose d'autre que vous voudriez un peu plus en vedette. - Donc j'ai une image ici que j'ai déjà apportée , ou juste la taille de ça. - Mets ça ici. - Et puis nous allons mettre un Ce serait probablement un autre niveau d'en-tête secondaire, - donc je veux probablement garder cela la même taille. - Je suis désolé. - Apporte ce type Lauren Ipsum ici et amène ça. - Je veux avoir un peu de rembourrage ici. - Pas forcément besoin d'aller juste contre la boîte, - mais pour le design, - je vais juste le faire tout de suite. - Alors amenez ça ici. - Ajoutons un peu plus de texte là-dedans. - Je vais remplir l'espace. - Et ce serait comme, - c'est une autre section, - et donc c'est notre colonne sont divisés. - Donc, c'est deux colonnes de six, - euh, - six blocs que vous pourriez venir. - Et donc le suivant est notre 2/3 2 3ème 1 Donc c'est là que vous pouvez briser la grille si vous voulez, - parce que vous utilisez toujours ce bord droit. - Donc si tu regardes ici, je suis toujours en ligne avec ce bord droit. C' est là que vous pouvez créer deschoses intéressantes qui attireront l'attention des téléspectateurs, que tout était dans ces petits blocs, et tout d'un coup vous brisez la grille. choses intéressantes qui attireront l'attention des téléspectateurs, que tout était dans ces petits blocs, - Ça attire vraiment l'attention sur ce point particulier. - Donc si nous le faisons, - cela apportera un autre de cet en-tête secondaire ici. - Copiez et collez tout ça et amenez-le ici comme ça et ensuite la justice - taille là-bas. - Donc maintenant nous avons cette section 2/3 qui va lui donner une pause, - le rythme un peu et lui donner un peu plus de variété. - Et puis ici fera le que vous pourriez faire dans ce cas, - J'ai vu des pieds de page qui se sont brisés dans la section. - Donc, si on veut descendre à ce serait un en-tête de niveau 1/3. - Donc nous l'avons fait. - C'est l'en-tête de deuxième niveau. - Maintenant, nous entrons dans les en-têtes de troisième niveau parce que le pied de page n'est pas aussi important que certains des - les autres choses que vous avez ici. - Disons que vous aviez un tas de liens ici, donc ce serait le lien un comme trois. - Ça pourrait être comme vos coordonnées. - Autres liens utiles. - Euh et donc je les casse, alors on en fera trois. - Alors fais un tas de ceux-là ici. - Et ça pourrait être des liens vers les coordonnées d'un autre blog, - toutes sortes de choses. - Donc ça devrait être quatre colonnes, - Monsieur, - dans ces blocs de grille, - faisons ça, - hum, - quatre colonnes. - Oui, je casse ça ici. - Là. - Où ? - Et ils sont comme ça. - Gardez une trace de ce qu'on fait là-bas pour que je puisse avancer un peu. - Et maintenant, nous avons notre pied de page. - Donc c'est la fondation. - Alors maintenant, nous allons sauter dans la couleur comme la première chose que nous allons faire pour établir une hiérarchie visuelle . 8. Types d'Hiérarchie : Couleur: Maintenant, on va parler de couleur. Alors, comment utiliser la couleur pour établir une hiérarchie ? Alors je suis allé de l'avant et j'ai juste choisi trois colliers jolis , des couleurs complémentaires, et nous allons entrer dans la théorie des couleurs dans les sections ultérieures, donc nous allons juste aller avec les couleurs de choisi ici. Donc, d'abord, enlevons la grille dans les blocs de grille. Alors maintenant, vous pouvez avoir une idée de ce que ça ressemble. Il est des os assez nus en ce moment, puisque nous allons commencer à ajouter un peu de couleur dans cela pour créer que cette haute rt en utilisant couleur. Donc, disons d'abord , d' accord, on va commencer un grand groupe travers toute la largeur. Et sur un navigateur Web, ce serait 100% avec. Alors faisons ce joli genre de couleur saumon rosâtre. Et pour l'instant, c'est le noir dans ce rose, euh, ne fonctionne pas vraiment bien ensemble. Ils saignent un peu. On y reviendra plus tard en théorie des couleurs. Mais je vais prendre ça, vais rendre tous ces objets blancs. Et maintenant, vous pouvez voir que la première chose que vous voyez ou que le spectateur voit est ce titre parce qu'il utilise ce genre vraiment brillant de couleur rosâtre pour saisir l'œil et le dessiner vers lui. Alors c'est ça. Alors, c'est ces choses ici ? Alors regarde ça. Nous voulons créer ces liens parce qu'ils allaient vers des sections de nature de portrait aquarelle et différentes pages. J' ai donc choisi cette couleur de colle aussi, pour désigner la couleur du lien. Alors que vous faites défiler vers le bas ce genre de bleu apparaît sur attire votre attention avec la droite. Maintenant, ce noir sur cette copie du corps est un peu fort. Donc eso vraiment cette copie du corps se distingue par la couleur sage au-delà de ce bleu. Et donc ce que je veux faire avec ça, c'est prendre les pieds comme un gris plus tard. Donc 777 fonctionne. Eh bien, vous pouvez travailler votre chemin vers le haut. Euh, comme un 55 C'est un peu, hum, un peu plus modérée. Donc, le bleu se démarquera plus loin que la 10 cette copie du corps. Alors maintenant ça, je vais probablement rester. Je n'utilise jamais de noir droit. Il y a des tonnes d'articles sur pourquoi tu ne devrais pas utiliser le noir droit, mais je vais utiliser si j'utilise du noir ou si j'utilise comme une, euh, cette couleur ici. Il y a des tonnes d'articles sur pourquoi tu ne devrais pas utiliser le noir droit, mais je vais utiliser si j'utilise du noir ou si j'utilise comme une, euh, Qui est la couleur hexadécimale. 2 à 6 deux. Fondamentalement, euh, et donc j'utilise cette couleur ici parce que ce n'est pas un lien cliquable. C' est juste quelque chose qui décrit ça. Donc avec cette copie du corps ici, je vais utiliser la couleur 555 que j'ai utilisée ici. Donc maintenant, vous pouvez voir avec l'utilisation de la couleur, vous pouvez commencer à voir des motifs ici. Et donc c'est là que vous commencez à établir des systèmes visuels en utilisant juste la couleur que c'est la même couleur et maintenant en bas. Donc, c'est un en-tête ici. C' est ce qui n'est pas un lien comme ici. Donc maintenant ces deux couleurs devraient être les mêmes. Donc je vais aller ici et faire ça les mêmes couleurs, celui-là, euh, euh, que je commence à établir un rythme avec la couleur et la même chose ici. Je vais faire ce 55 ce qui est ce qu'on a utilisé ici et qui est ce qu'on a utilisé ici. Donc, c'est là que vous gardez les choses cohérentes Donc tous ces en-têtes, ceux-ci ne seront pas des liens. Ils seront donc de la même couleur que l'en-tête secondaire. Ceux-ci le troisième, Le troisième niveau de l'en-tête de troisième niveau pour faire ces 55, puis des liens. Nous allons faire cette couleur bleue. Vous pouvez voir ça maintenant. Il y a quelques façons que Teoh les distingue en utilisant la couleur de ces sections ici parce qu'elles sont en quelque sorte, hum des choses bizarres ici. Je vais prendre une boîte ici et la traîner sur ton roi. Aiken, sépare ça de l'autre, donc je l'envoie derrière. Vous pouvez voir ici. Donc, si j'utilise comme un gris plus clair, vous pouvez voir maintenant juste subtilement. Il sorte de boîtes cela dans un peu plus créatif crée une belle ligne ici afin que nous puissions établir la différence entre ce contenu, ce contenu, c'était une délimitation claire. Et donc un sui descend au pied de page. Ces choses plus ajustées s'écoulent en quelque sorte ici. Donc on va utiliser la couleur, euh, la couleur ici. On a utilisé comme, laissons tomber la boîte ici, mettez-la derrière. On peut juste utiliser une Carla qu'on a trouvée juste sur cette maquette ici. Donc c'est une belle sorte de violet profond. Et maintenant, ce n'est pas tranchant. Très bien. Quelqu' un va les prendre et les rendre blancs. Alors maintenant, c'est notre pied de page. Et cela techniquement s'étendrait au bas du navigateur. Donc je l'appelle comme ça, tu peux voir à quoi ça ressemblerait. 9. Types d'Hiérarchie : Space: Donc, le prochain principe de hiérarchie ISS espacement. Ainsi, vous pouvez voir ici, vous pouvez utiliser l'espacement pour définir les éléments les uns des autres et créer un ordre dans lequel vous voulez que le spectateur le lise. Donc la raison pour laquelle cela se distingue tellement cette partie supérieure est que je lui ai donné une tonne d' espace autour d'elle. Donc, si vous savez, quand je monte ici et que je parle de ça, vous pouvez voir qu'il commence à perdre son importance. Tu veux presque y aller immédiatement. Donc, ce que vous voulez faire ici, c'est lui donner assez d'espace pour qu'il se démarque vraiment. Donc je peux même aller un peu plus que ce genre de faire ça juste à l'intérieur d'ici. Donc, il y a beaucoup d'espace entre le haut du bas de cette ligne ici et le titre, puis une quantité égale d'espace au-dessous. Donc je veux aller bouger tout ça. Donc si je fais un zoom arrière, je pourrais ramener tout ça un peu. Et donc je suis vraiment borderline o c d. avec la façon dont j'ai des choses dans l'espace, alors ne va pas ici. Et donc j'utilise 20 pixels entre les colonnes de la grille. Donc, quand je vais dans cela en fonction du programme que vous utilisez, vous pouvez utiliser si vous l'avez fait déplacer et puis les touches fléchées que vous pouvez faire par incréments de 10. Donc, si je dio j'ai fait 20 ici, je pourrais faire 1234 Parfois, il est agréable de faire un espace vertical du double de la quantité d' espacement horizontal entre les grilles. Donc encore une fois, je viens d'avoir 12341234 Donc maintenant ça va être 40 pixels du haut d'ici au bas de ça . Alors et puis de cette façon, et assurez-vous qu'il est aligné au centre de la boîte, puis ici. Tu sais, tu peux aussi faire la même chose pour voir ici si je mets ça en haut de la page comme ça, vas-y. 1234 Je crée que 40 pixels à partir du haut ici. Je commence donc à créer cette consistance avec un rythme vertical ainsi qu'un rythme horizontal sur lequel vous vous êtes concentré avec les grilles. Alors quand j'irai ici. Je passe beaucoup de temps là-dessus. Alors, je vais ici. Je zoome de très près, et je vais aller 12, alors peut-être que je vais juste utiliser 20 là-bas. Et à partir d'ici, vous savez, je pourrais même descendre les pieds jusqu'à l'espace entre le texte ici et aller 12, non ? Alors je regarde ici et essaye de faire correspondre la même chose. Donc, si je regarde juste la position Y 996, je peux régler le 2996 aussi. Et on dirait que celui-ci n'a pas 51 ans. D' accord ? Dit que ceux-ci sont ceux-ci sont alignés et ainsi de suite ici. Donc, je regarde le haut de cette image juste ici et pars. 11234 Et puis je vais saisir le bas de cette image ici et juste augmenter la boîte de 40 pixels. Une houle. Donc 1234 Assurez-vous que c'est en ligne de l'autre côté, et puis avec ce Oh, et puis, au fait, vous voulez vous assurer que cette technologie l'espace entre ici est que 20. Peut-être que vous voulez utiliser 40 pixels ici, Obtenir que 12 On dirait que 20 pixels est bon là-bas. Alors va entendre. Zoom avant et dis 12 C'est maintenant que vous avez ce rythme cohérent, ce rythme cohérent ici. Je vais m'assurer que le haut de ces images ici 1234 et ensuite ici, assurez-vous qu'il est juste de les regrouper ensemble. Et je les ai alignés en haut et dis 123 et 4. Bien sûr, ceux-ci ces liens sont aussi nous allons faire 20 ici. Alors, emmenez-le à l'endroit où vous frappez le fond, puis allez 12 et voilà. Donc, l'espace entre cette chose dans le fond de sorte que l'espace entre fondamentalement chaque section. Maintenant, je veux peut-être le garder un peu serré ici, mais comme je vais plus loin dans le contenu, je regarde au fond de ça. Donc, si je le prends au fond, je voulais que vous vouliez peut-être en faire huit ici. Donc, 80 si j'appuie sur Shift et le bas. 12345678 Et puis amène ça ici. Alors j'ai frappé le temps. 12345678 et si je ramène cette beignets, je peux faire les mêmes choses. Tu l'emmènes là. 123678 De cette façon maintenant vraiment commencer le serré, resserrer l'espacement vertical et c'est parfois quand vous le faites en un seul endroit, il n'a vraiment pas de sens. Mais quand vous commencez à le faire systématiquement partout sur la page, que le rythme va commencer à avoir du sens et les choses vont commencer à suivre dans l'endroit et se sentir beaucoup plus à l'aise sur le I. 10. Types de hiérarchie : alignement: Maintenant, nous parlons de l'alignement et de la hiérarchie visuelle. Et donc la plupart de l'alignement que j'ai déjà fait. Mais vous pouvez voir que si nous commençons avec ce genre de centré juste en bas de l' approche intermédiaire. Vous pouvez voir cela dans l'architecture avec les églises, en particulier les églises catholiques, que ce sera un couché complètement au milieu de l'église qui mène complètement après le prophète à la croix. Et donc cela crée beaucoup de symétrie très équilibrée. Pour que tu puisses voir ici. Je concentre Jane Smith ici. Et imaginez si j'avais fait ça. Ça commence à devenir un peu déséquilibré et tu n'es pas sûr d'où tu es je veux aller. C' est même tiré dans des directions différentes. Mais comme nous utilisons l'alignement, cela crée cela. Il crée cette pente que, lorsque vous descendez la page en utilisant l'alignement ici à nouveau avec l'alignement central. Maintenant, si j'avais laissé une ligne ces choses, je pense que ça aurait été OK parce que vous tenez cette ligne. Vous l'alignez fondamentalement avec cela avec son avec l'élément au-dessus de ce texte ici. Donc, je pense que cela aurait été correct selon le montant de l'impôt. Comme j'ai ajouté beaucoup de texte ici. Je ne le centrerais probablement pas parce que lorsque vous obtenez de grands corps de texte centré eso si je prenais cela et centré, c'était vraiment étrange et c'est vraiment difficile à lire. Donc, avec ici est juste assez d'impôt, ils n'ont pas vraiment besoin de s'inquiéter de l'aligner à gauche. Donc, cela crée un motif visuel ici de ce centré à ceux-ci étant centrés . Et puis il est ici, nous n'avons pas forcément besoin de centrer ça parce que ça va étreindre ce bord de cette image. Et il est mis à part visuellement en utilisant cette boîte grise en utilisant la couleur. Donc je ne voudrais pas vraiment faire quelque chose comme ça. Vous pouvez voir ici. Oui, c'est centré. Mais cela jette en quelque sorte l'équilibre de cette disposition particulière ici dans cette boîte. Alors je vais y retourner. Teoh est parti en l'alignant comme ça. C' est la même chose. Hum, maintenant, si j'étais vous savez, certaines personnes disent OK, eh bien, si c'est fini de ce côté-ci, alors je veux , d' accord . Vous pouvez voir ici que même à droite, aligner les choses avec les grands corps Attaques crée un enveloppement vraiment étrange parce que nous sommes en train de lire de gauche à droite, donc c'est un peu étrange là-bas donc ne serait pas le faire là. Euh, ici. Nous pourrions certainement centrer ces liens. Il n'a pas nécessairement l'air mauvais, mais j'ai tendance à ne pas centrer aligner comme des listes parce qu'ils finissent par ressembler à des arbres de Noël . Euh, 37 signaux. La page d'accueil en est un bon exemple. Parfois, ils utilisent cette approche centrale afin que vous puissiez voir qu'il commence à créer, comme, même jusqu'à cela. Je pense qu'ils l'ont fait exprès parce qu'en fait il semble plutôt cool ici, mais vous pouvez voir qu'il ressemble presque à un arbre de Noël à l'envers. Donc, quand vous allez à des noix avec le centrage et commence à paraître un peu étrange donc nous allons garder ces gauche alignés 11. Types de hiérarchie : Impliciter et Expliciter: - Parlons maintenant de la hiérarchie implicite et explicite. Donc, disons que Jane Smith est illustratrice, et l'action principale de Kota qu'ils veulent avoir ici pourrait être une mawr savante, et nous allons parler plus de l'étiquette sur le bouton dans un peu ici. Alors commençons par un bouton ici, , disons comme un sombre sombre ici, alors assure-toi que c'est centré, et on prendra ce texte ici. - Mets-le juste ici et dis que tu en apprends plus envoyé à ça. - C'est une hiérarchie implicite. - Donc vous supposez qu'ils vont passer soit de cette Jane Smith ici - soit du titre et ensuite de l'action Carter et faire ce que vous voulez qu'ils fassent, ce qui est d'apprendre plus et finalement plus haut vous. - Donc il y a deux façons d'être beaucoup plus explicite sur ce que vous voulez qu'ils fassent ou - où vous voulez que leurs yeux aillent. - Et donc la première chose est, - est basé sur le texte. - Alors, on doit être graphique. - Donc, si vous regardez l'étiquette ici, - en savoir plus. - Ce n'est vraiment pas une action forte, - explicite, - explicite, - attrapé. - Et vous n'êtes pas vraiment en train de saisir leur attention et de dire, - je veux que vous fassiez ça correctement pourque vous puissiez dire, que vous puissiez dire, - je veux que vous fassiez ça correctement pourque vous puissiez dire, - Donc c'est plus un ah, - plus d'action explicite de Connor et plus explicite, - fondamentalement plus explicite hiérarchie. - Et donc c'est une façon de le faire à travers une simple copie. - Une autre façon de le faire est, - et j'ai vu cela sur quelques sites différents où il est juste en utilisant un graphique de flèche - comme ça que vous, - vous avez littéralement l'air en essayant de guider leur I de là vers le bas où se trouve le bouton et 37 - les signaux le font beaucoup sur leur page. - Vous pouvez voir ici qu'il s'agit d'une hiérarchie implicite. - Ils s'attendent à ce que tu parles de ce titre à ici pour en savoir plus à ce sujet. - Mais quand vous roulez, vous pouvez voir qu'ils veulent que vous repreniez vos yeux. - L'Inde si visuellement, - ils vous pointent dans la direction qu'ils veulent que vous alliez dans vos yeux pour bouger. - Vous pouvez voir ici à partir du titre que vous faites votre chemin vers le bas de la page qu'ils veulent que vous fassiez - voir ça par ici. - Ils auraient pu enlever cette flèche. - Ça aurait été un peu plus un peu plus implicite. - Oui, - c'est à proximité de ce titre. Mais en utilisant cette flèche, c'est très explicite où ils veulent que tu ailles. - Utilise ça avec parcimonie. - Ne mettez pas de flèches sur toute la page, - donc habituellement j'essaie de ne l'utiliser qu'une seule fois, - Um, - si vous l'utilisez plus de deux fois, - ça commence à être odieux parce que fondamentalement, - la vue est aller là où ils veulent aller. - Mais si tu jettes constamment des flèches et des trucs comme ça, ça va devenir un peu odieux. - C'est donc la différence entre hiérarchie explicite et implicite. 12. Introduction à la typographie: - la section suivante, - et l'une de mes choses préférées à parler est la typographie. - Alors je reçois la question tout le temps. - Jack, - quel plaisir dois-je m'amuser ? - Il y a tellement de polices à choisir. - Je pense que ce que j'aimerais faire ici est de vous dire le genre de fondement de la typographie - et les différentes catégories de polices et les différentes catégories de typographie. - Donc le 1er est le front serif. - Certains d'entre vous le savent peut-être déjà, - mais les Serifis sont les petits points de fin sur le bord de ces lettres. - Donc, vous pouvez voir beaucoup de fois et en calligraphie que c'est là que le stylo arriverait - à la fin. - Donc, dans la famille Sara, il y a les anciennes polices de style. - Ces polices remontent donc à 14 65 et ont un aspect historique distinctement, - elles ont donc imité la typographie classique. - Donc bimbo, - beau devant. - C'est en ce sens que si tu veux utiliser quelque chose à Teoh que tu veux communiquer le genre de cette vieille histoire de bimbos, un grand plaisir à utiliser. - L'os est un autre beau. - Donc, le contexte de ces s pour qu'ils puissent être là très attaque vers. - Et nous utilisons dans les grands blocs attaques ainsi que les gros titres. - Donc vous pouvez voir ici, - hum, - dans un des documents les plus importants de notre pays. - Il est défini dans cette police de style ancien, - et donc leur meilleur, - vous savez, - le caractère de ces polices est mieux utilisé pour transmettre un sentiment d'histoire et de nostalgie - ils ont dans notre hors classe mondiale et de sophistication. - Donc, ce sont les vieilles pensées de style. - Donc, la prochaine est la transition sur les's. - Les fonds représentent la transition entre l'ancien et le moderne et est apparu pour la première fois au XVIIIe siècle. - Les différences entre les lignes épaisses et fines. - Nous sommes très prononcés, donc c'était comme une grosse affaire quand ils ont commencé. - Il y a une grande différence entre les parties minces et les épaisses Brant, - et ils quand ils sont apparus sur la scène, - croyez-le ou non, - ils étaient considérés comme très choquants. - Et si fois nouveau Roman certainement pas un plaisir que je me suis transformé en que je me suis tourné à très souvent -. - Mais c'est ce cheval de travail qu'il est là depuis longtemps. C' est le front de faute sur beaucoup d'ordinateurs,et ce sont des chevaux de travail. C' est le front de faute sur beaucoup d'ordinateurs, - Ils sont trouvés sur la plupart des ordinateurs, - et ils fonctionnent bien pour les gros corps. - Un texto, mais ils ne sont pas si impressionnants. Quand tu les exploses et deux titres, Baskerville est sympa à utiliser si tu veux utiliser ce genre de front, , donc j'aime utiliser un autre de Georgia. - J'aime utiliser ce front quand j'ai besoin d'avoir l'avant être lisible, - pas odieux ou attirer l'attention. - On cherche juste une norme générale. - Ecoutez, - ces polices auront fière allure. - Personnellement, j'aime la Géorgie. - Je pense que c'est un grand plaisir quand il devient plus grand, - et quand il est plus petit, - c'est c'est c'est l'un des si je vais me tourner vers un serif sur un ordinateur que Georgia - est habituellement ma 1ère sélection. - Donc Slab Serif est originaire d'Egypte, - et ils ont un aspect rectangulaire audacieux avec de lourdes lignes comme des dalles. - Pour que vous puissiez voir ici. - Clarendon um, - police Jonathan Heffler. - J'adore ça. - Il est utilisé. Vous pouvez voir partout à partir de Starbucks Toe fourche Tonka, Wells Fargo. - Il est utilisé partout, donc Rockwell est un autre beau. - Celle-ci est vraiment polyvalente et a juste une très grande personnalité. - Et ils ont l'air très bien. - Grand, pas vrai ? - Donc, vous pouvez vraiment prendre ces polices slab serif et vous pouvez les faire sauter et ils vont - vraiment tenir. Je ne pense pas qu'ils fonctionnent aussi bien dans les paragraphes, vous pouvez voir ici qu'ils sont utilisés dans les paragraphes. Je ne pense pas qu'ils fonctionnent aussi bien dans les paragraphes, - J'ai tendance à penser qu'ils sont un peu trop décoratifs pour être utilisés dans un paragraphe. - Mais ils ont beaucoup de personnalité. - Un autre est des érudits, - un beau. - J'ai beaucoup utilisé érudit, - et il tient en fait assez bien dans les paragraphes ainsi que quand c'est quand il est - plus grand quand il définit comme une plus grande taille. - Archer est un autre beau, - celui-là qui a vraiment beaucoup de personnalité. - Donc celui-là, - il se sent très jeune. Donc, si vous allez l'utiliser pour To pour des dessins pour enfants, , ou pour les tout-petits, je pense que c'est un excellent choix. - Alors le prochain est moderne. - Donc, ces Frantz a pris les différences entre l'épaisseur et les choses alignées lignes minces à - l'extrême, - ces fonds sont moins lisibles dans les paragraphes, - cause de ce contraste, - donc beaucoup de temps modernes. - C'est ce que les pensées modernes sont utilisées dans les titres. - Donc, si vous regardez Adoni Ah, - belle moderne trouve vraiment de grandes différences entre les lignes épaisses et fines ici, - hum, - en les utilisant Ses petites tailles ont tendance à déformer la police. - Les polices sont les plus grandes tailles. Comme je l'ai dit, vous pouvez vraiment voir le contraste entre les lignes. - Daido est une police très populaire. - C'était à l'origine conçu pour Harper's Bazaar magazine. - Donc tout ce qui concerne la mode, - c'est un front parfait que vous pouvez voir ici Bizarre. Vogue et Elle utilisent toutes cette police très moderne. - Et ça marche vraiment si bien, - une mode. - C'est pour ça que tu le vois encore et encore à la mode. - Alors, c'est San Serif. - Donc les pensées de San Sarah n'ont pas ces petites lignes à la fin de chaque lettre. - Donc, l'une des premières catégories de polices d'air sensé sont grotesques, - Frantz et c'est intéressant. - Ça vient du mot italien grotesque. - Oh, - ce qui signifie appartenir à une grotte, - ce qui signifie appartenir à une grotte, - C'est comme ça que le typographe est nerveux étaient encore si loin en arrière. - Apparemment, - c'est à ça que pense le typographe allemand. - Ces appareils de police vont détester. - Donc, si vous regardez l'un des premiers Brandon Grotesque, - c'est un très grand front. Cespolices grotesques sont des chevaux de travail, non ? polices grotesques sont des chevaux de travail, - Ils peuvent donc être utilisés dans n'importe quel contexte, - et ils fonctionnent bien avec de gros blocs d'impôts. - Eh bien, - est gros titres, - accidents ? - Grotesque en est un autre. - C'est génial qui dit un peu plus d'une sensation sérieuse à elle dans Franklin Gothic amour ceci - un en particulier. - Il fonctionne bien avec toutes les lettres majuscules, - de sorte que vous pouvez voir qu'il fonctionne. - Donc, quand vous définissez un titre avec toutes les majuscules, - des lettres comme l'affiche Rocky Rocky sont fantastiques. - Les prochains dans la catégorie San Serif sont l'humaniste Frantz. - Donc, ces fonds de la plus calligraphie, - comme les polices de caractères de San Serif, - ont une personnalité un peu plus florissante que la plupart des polices de sable serif. - Donc, si vous regardez Gill Sands, adore cette police, elle a beaucoup de personnalité. - Il y a des innocents que j'aime vraiment les fruits. - Igor est aussi une police sans serif très populaire. - Scala Sands. - Celle-ci a vraiment beaucoup de personnalité. - Vous pouvez voir le W est vraiment intéressant de la façon dont il ressemble à deux V plus - posé sur l'autre, - et ces fronts. - Ils fonctionnent bien à n'importe quelle taille. - Donc prochaine est la transition sur ceux-ci avec quelques-unes des polices les plus largement utilisées. - Je pense que vous reconnaîtrez beaucoup de ces choses. - Ils sont tout droit dans le but. Ils sont aussi connus sous le nom de San Serif anonyme, donc ils n'ont pas une tonne de personnalité. - Mais selon le contexte, - ils peuvent effectivement être utilisés pour transmettre ce genre de regard sérieux. - Donc, si vous regardez le plus populaire Helvetica, - à droite, -donc la plupart des gens qui vont avoir un - à droite, - peu de l'enfer. - Aérienne du Vatican mélangée ? - Um Helvetica, - je pense, - est une police mieux dessinée. Il y a de gros arguments autour de ça, mais l'Helvetica est utilisé partout, non ? - Donc, si vous habitez à New York, vous l'avez vu sur les panneaux du métro. - Vous pouvez le voir dans American Airlines Staples Sears posté comme une tonne de Il y a probablement 100 - plus de logos qui ont utilisé Helvetica. - C'est un Ah très suisse, - beaucoup de design suisse utilise Helvetica et ceci, - vous savez qu'ils pourraient être utilisés à n'importe quelle taille Univers est un autre exemple de tendance ish - police de caractère transitoire. - J'ai une tonne de poids différents, - de sorte que vous pouvez être utilisé dans tous les différents contextes. - Plus grand, - petit. - Alors quoi ? Je cherche une sorte de bêtises de fontes sérieuses et mes armes de choix, donc vous le trouverez sur les étiquettes d'avertissement et les documents du gouvernement, toutes sortes de choses. - Donc, le suivant est géo métrique, - et ces polices, - polices, - air, - fortement forme, - piloté. - Ce sont des cercles parfaits. - Les lettres comme un des triangles parfaits, - exemple eso de ces Futura. - Donc, si vous regardez l'affiche de film Facebook qui était en train de préparer l'avenir, - si vous regardez le magazine W et ce que je magasine, - donc je le suis. - C'est un designer très populaire qui a utilisé cette approche avec ce futur Helvetica White - avec le fond rouge. Donc, si vous voulez utiliser cette approche, sachez juste que c'est Il a déjà été utilisé, et vous serez probablement accusé de l'avoir arrachée. - Donc ces travaux les fonds étaient grands à de grandes tailles, - mais aussi il plus intelligent, - plus petites tailles. - Ils ont tendance à être moins rebord un ble et maladroit car ils deviennent plus petits, donc vous ne voulez pas aller à - petit, - et ils projettent comme une ambiance futuriste moderne, - élégante et future. - J'aime utiliser tous les bouchons dont les fronts géométriques sont sur, - même en utilisant tous les niveaux minuscules pour créer un rythme merveilleux. - Vous pouvez voir qu'ils ont l'air super. - Um, - la minuscule une fois Ah, - et tu pourrais mettre le tout en minuscules, - et ça va toujours bien paraître. - Un autre exemple de front géométrique est Gotham. - C'est vraiment populaire. - Il a été utilisé dans la campagne d'Obama. - C'est vraiment sur le style moderne. - Elle peut être surexploitée. - Beaucoup de designers l'utilisent. - Je l'utilise la nuit. - Parfois, je sais que je suis comme un homme. Tout le monde utilise ce front, mais ça a l'air si bon. Peu importe où vous l'utilisez, c'esttoujours ça a toujours l'air bien. Peu importe où vous l'utilisez, c'est 13. Combiner des polices de caractères: - Donc, c'est un graphique. - J'ai mis le lien dans les notes ici, - mais l'ensemble, - comme l'arbre de décision de vous savez que vous utilisez vous l'utilisez pour un livre ou une invitation ou - logo ou journal. - Vous pouvez suivre ce truc. - C'est un look très intéressant. - C'est comme tous les différents contextes de polices et donc combinant les polices. - Alors, quelles sont les cotisations et l'un de ceux qui ne combinent pas les fonds ? - Donc, le contraste visuel est clé, - donc vous ne voulez pas combiner des polices, - polices trop semblables les unes aux autres. - Donc, si vous confiné comme une zone sur un Attica avoir, - c'est juste ça. - Il n'y a pas de contraste. - Seul un vrai type de type ah va le remarquer. Donc, si vous regardez l'érudit Sands et Gill sans, voici un exemple de deux polices très similaires , utilisées ensemble. Ça ne marche pas très bien, mais si vous associez un serif avec un san serif en fonction de l'avant et si vous avez l'air très bien, alors voici un cent. - Non, - qui est un slab serif mélangé avec le front géométrique comme Gotham medium mis dans tous les casquettes. - Et ça a l'air fantastique parce qu'il y a beaucoup de contraste là-bas, - donc il est très facile visuellement de distinguer les deux. - Euh, attendez. - Le contraste en est un autre. - Donc, en utilisant le gras et la lumière, - tous les différents poids qui viennent avec la police ou le type de sorte que vous pouvez voir ici commerce - gothique gras, - amour condensé, - commerce gothique, - en utilisant ce gras et condensé, puis créer beaucoup de contraste avec Gotham Lights étaient - police vraiment léger. - Um, - avec sage et mélange avec une police condensée audacieuse semble vraiment génial. Voici d'autres exemples de combinaisons différentes, donc vous avez Acropolis noir mélangé à KO. Voici d'autres exemples de combinaisons différentes, - Dans une sentinelle, - vous pouvez voir ci-dessus ce menu du petit déjeuner. - Vous pouvez voir qu'ils utilisent tous les différents types de fonds, - mais vous pouvez vraiment établir comme un modèle pour lequel le plaisir est lequel. - Donc, vous savez, - si tous les en-têtes sont définis dans Acropole et tous les types d'éléments de menu air et - assommer, - c'est juste un moyen d'utiliser visuellement un motif. - Uhm, - pour distinguer les deux et vous pouvez voir ici avec Daido sur le côté droit, - juste mélangé avec ces choses que vous pouvez entendre. - Vous pouvez voir ici. - En voici d'autres. - Mercury Heffler à Gotham. Je ne vais pas aller trop loin les entités, mais vous pouvez voir comment elles fonctionnent ensemble. - Et je vais inclure toutes les diapositives ici pour que vous puissiez les étudier un peu plus sur votre propre temps. - Voici d'autres combinaisons. - Gants pour les mains, - Gants pour les mains, - Tiers de confiance en Helvetica sur le côté droit. - Euh, - un grand contraste entre ce genre de moderne, - cette approche moderne mêlée - un grand contraste entre ce genre de moderne, - cette approche moderne mêléeàun front très standard, - comme un Helvetica pour le texte du corps. un front très standard, 14. Choisir une police: - Et alors, comment choisis-tu Ah, - taille de police ? - Donc les tailles de police sont difficiles ? - C'est généralement très subjectif. - Il n'y a pas de règle dure et rapide de Riel. Tu peux utiliser le ratio d'or avec les tailles de téléphone et il y en a et je vais aller dans ces deux-là. - Il y a une calculatrice qui fonctionne très bien, - mais vous pouvez voir ici juste en fonction de la largeur du paragraphe, - vous savez quelle taille combattue voulez-vous utiliser et quelle hauteur de ligne voulez-vous utiliser ? - Donc, la ligne est l'espace entre les lignes de texte, - et donc en voici un créé par personnifié, - ce qui est vraiment génial. - C'est un rapport d'or, alors rappelez-vous à la grille. - Quand nous parlons de 1.618, vous pouvez taper une taille de police et la largeur et définir votre type -. - Considérez, - ça va vous donner l'échelle d'or pour un fonds de 16 pixels que vous pouvez dire mis sur mes titres - et 42 mes titres en 26 sous-titres et 20 et donc ça vous donnera un moyen vraiment équilibré - d'aborder votre design. - Je pense que c'est un outil très puissant. - Voici les trois principes typographiques. - Appelez-les. - Um, - quand vous avez affaire à définir le type, - donc vous avez le kern ing, - donc la ruse et le suivi sont souvent confondus. Donc Kern ing, c' est quand tu prends l'espace entre deux lettres, non ? - Donc vous réglez l'espace entre le L et le oh, - dans le suivi est plus d'un espace universel entre toutes les lettres. - Donc, celui qui a dessiné la police, c'est en quelque sorte un espace universel entre les deux et Kernen - c'est quand vous voulez vraiment y aller, - euh, - et ajuster l'espace entre les lettres individuelles et ensuite laisser est l'espace entre les - lignes d'impôt. - Donc, c'est l'espace entre l'amour et le type qui laisse donc ceci est un jeu génial . - C'est le courant dans le jeu, - et c'est drôle. - Mon partenaire, mon partenaire dans le bon Z Jonathan. - Il bat toujours mai dans ce jeu, - et donc fondamentalement, il vous donne des paires hors de texte sur, - et vous devez deviner ce que le Donc, vous prenez une lettre et sorte de deviner où il devrait aller - en ce qui concerne l'obtention ah, - propre Kern pour ça pour ce morceau de texte. - Et ils ne vous disent pas à quel point vous êtes loin et c'est vraiment super entraînement. - Il vous met vraiment dans l'ensemble de l'esprit d'être Able orteil, - globe oculaire sur vraiment une sorte d'obtenir une idée de comment il devrait ressembler. 15. Crimes !: Voici dans les crimes devant. N' utilisez pas de sables chroniques, et vous êtes un comique sans criminel si vous le faites. Mais si vous le faites, mais nous sommes là pour vous aider. Tu n'aimes jamais. Je m'évanouis littéralement. Quand je vois une partie de cette perspicacité, je suis un tel nerd de conception que, comme le soit, il ne s'adaptera pas horizontalement ou verticalement. Donc quelqu'un aurait simplement simplement simplement étirer le type comme prendre la poignée et le déplacer vers le haut ou vers le bas ou de gauche à droite et l'étirer. Et c'est la personne qui a dessiné cette amende prend des centaines d'heures pour correctement comme chaque pixel a été pensé, et pour quelqu'un de juste étirer c'est juste que c'est terrible. Alors ne fais pas ça. Étirez-le verticalement et ne faites pas ça. Étirez-le vers le début Ne pas si vous voulez communiquer un message. Si nous sommes d'accord que dans le début de ce discours de conception, nous avons juste que nous définissons le design est communiqué message ou résoudre un problème si votre conception donc ce si ce front particulier que j'ai choisi si cela devient dans la manière de communiquer le message qui a échoué en tant que design, donc si je vais utiliser ça comme vraiment joli, vous savez, script, il police Pour un grand corps de texte, il est vraiment difficile de transmettre le message. Donc, ce qui est, à mon avis, n' est pas un bon design. Je suis Vous pouvez soutenir cela, mais si c'est vraiment difficile de lire ça, alors ça ne fait pas un très bon travail. Certainement, évidemment, certainement pas de bandes dessinées sans et certainement pas de piras. C' est un front de Microsoft Word que j'ai vu plusieurs fois et ce n'est pas cool. Ce n'est pas égyptien, ce n'est pas amusant du tout. Ne l'utilise jamais. 16. Screencast: Utiliser des polices de caractères en pratique: - Alors vient maintenant la partie amusante typographie, - et c'est là que la page va vraiment commencer à obtenir sa propre personnalité. - Donc, si vous prenez la personnalité de Jane, disons que Jane est une designer très classique. - Elle, - euh elle beaucoup de ses dessins sont très élégants. - Donc, je commencerais par les prendre juste en sélectionnant presque toutes les polices ici. - Je vais commencer avec un plaisir et voir comment ça se passe. - Donc je vais juste sélectionner tout ça, - tout le texte sur la page. - Et commençons par Sentinel. - C'est Ah, - Hofler Fred Jones devant. - C'est beau. - Et il a vraiment ce genre de sentiment classique avec un peu de personnalité dedans. - Donc ce n'est pas tout à fait vieux monde, mais il y a cette personnalité ici. Donc sentinelle est un peu plus petite que ce qu'on a eu avec Helvetica, donc j'en prendrais probablement un peu. - Donc je veux dire, - on prend ça à 58 probablement prendre à 64 pour que vous puissiez voir maintenant, - comme je monte comme j'ai la taille de la police est de dire que 70 68 va jouer avec jusqu'à ce que vous l'ayez bien - ici. - Il va juste que ici et le bouton de l'embauche une ligne qui et donc ça a l'air joli - bon. - Ça tient assez bien. , Ce que je ferais ici, ce sont les ceux-là. - L'écart entre ces lignes est un peu serré, donc je mets ici à 120%. - Tu peux faire ça. - Il soit pixels ou pourcentages collent généralement à un pixel. - Et j'ai parlé de la calculatrice de typographie du ratio d'or dans la leçon précédente. - Alors, allez-y et jouez avec et vous commencerez à avoir un oeil pour ça. - Et donc je m'en tiens. - 14. - D'habitude, j'aime passer comme une ligne de pixels de 2020. - Comme ça fait du bien là-bas. - Et je vais descendre ici et fixer la même hauteur de ligne. - Il y a un peu plus de place pour respirer. - Sortez ça d'un peu, alors ouais, alors sortez un peu de là. - Donc, voici le même va mettre ce 1 à 20 aussi. - Ces liens, - ils peuvent probablement ouvrir un peu plus l'espace entre, - donc je vais prendre ça à 20 aussi. Et donc, si vous décidez de rester avec Sentinel, vous pouvez aussi aller avec Gotham. si vous décidez de rester avec Sentinel, - Alors disons bien, essayez Gotham ici. - Je vais vous montrer ce qui arrive à la personnalité quand vous changez de fonds. - Et donc nous irons ici, - sélectionnez ceci, - sélectionnez tout le texte sur la page, - et ira à Gotham pour que vous puissiez voir maintenant qu'il commence à se sentir un peu plus moderne, - non ? Donc si j'ai pris ça dans un livre de Gotham , ça commence à se sentir , ça commence à se sentirun peu plus mince. - Il n'a pas vraiment la même personnalité qu'avec la Sentinelle. - Donc, selon la préférence de Jane, - je veux dire, - c'est encore une fois, c'est très subjectif. Mais si on retourne au San, je pense qu'il y a de la place qu'on pourrait utiliser Gotham à certains endroits. - Donc disons, - et c' est là que nous entrons dans la combinaison des polices. - Donc, l'un des principes dont j'ai parlé dans les leçons de typographie était que - vous allez combiner les polices, - assurez-vous qu'elles contrastent. - Il y a donc un contraste stylistique entre Sentinel à Gotham. - Donc, si on veut mettre, - comme, - un en-tête subtil ici, - alors on a juste dit de mieux régler. - Ça pourrait être une sorte de séries éliminatoires ce titre ici. - Donc on va prendre ça pour dire 18, 16, peut-être 14. - Joue un peu avec ça. - Alors prends ça ici, - et je fais peut-être un audacieux ici, - et donc je vais reprendre ça en utilisant la couleur, - donc c'est un peu ne se distingue pas trop, - mais ça se trouve juste là, - et ça le sent joue vraiment bien avec les Serifis dans ce dans la sentinelle. - Et pour que je puisse augmenter le suivi entre les deux. - Donc je prends ça à 100 ouvre un peu plus. - J'aimerais beaucoup utiliser ce genre d'en-têtes plus petits. - Donc ça a l'air vraiment sympa, pour que tu puisses jouer avec ça ici. - Vous pouvez apporter ces en-têtes n'importe où. - Hum, - et ça pourrait être considéré. - Ah, - dire les en-têtes de quatrième niveau. - Ils sont en quelque sorte un sous-ensemble de cet en-tête secondaire, - mais ils peuvent vraiment définir le contenu souvent et créer une belle hiérarchie là-bas. - Nous pourrions aussi c'est un en-tête de niveau 1/3 pour que nous puissions utiliser Gotham ici, - et nous pourrions réellement prendre cela et faire tout cela en majuscules. - Donc, si on est entré ici et puis, - euh et puis on a fait ça, on réduit ça à, - genre, - un 14 eso ce serait bon pour, - genre, - 1/3 1/3 en-tête de niveau. - Ça a l'air bien là-haut. - Tu veux probablement le mettre un peu ici. - Ou peut-être que c'est la même chose ici, alors peut-être qu'on ne voudrait pas prendre ici et aller avec ça sous des pixels de suivi. - Ici, - vous pouvez voir que ça prend un peu de temps ici, - pour que vous puissiez juste les rendre un peu plus courts. - C'est ainsi que vous pouvez combiner à nouveau les polices. - Vous voulez créer vous voulez Quand vous combinez avant, - vous voulez vous assurer qu'ils sont. - Ils ont assez de contraste visuel entre les deux, - donc généralement un sans serif dans une police serif ont tendance à jouer très bien ensemble. 17. Intro à la couleur: Donc la dernière chose dont nous allons parler est la couleur, et il y a un super article sur la psychologie des couleurs sur le Help Scout Blawg a mis un lien vers elle dans les notes. Voici quelques points principaux. Donc, ils disent qu'il y a eu de nombreuses tentatives pour classer les couleurs. Mais la vérité est que la réaction des gens aux couleurs est significativement affectée par leurs propres expériences. Donc, si vous regardez cette lecture, peut-être classé est dangereux. Mais pour un fan de football de l'Alabama, c'est vraiment génial. Donc, il est toujours rouge, mais des significations complètement différentes, selon le contexte et en fonction de votre expérience particulière, Peut-être que vous avez eu un terrible Peut-être que vous êtes allé en Alabama et j'ai eu une horrible lance est là vous es votre parti pris personnel peut être complètement différent de quelqu'un maisons. Donc si vous essayez Teoh de faire ça à propos de la psychologie des couleurs, si vous allez trop loin, c'est trop dur à servir. Teoh. Utilisez cette couleur et appliquez aux différentes expériences émotionnelles de chacun pour cette couleur dans le contexte. Il est donc beaucoup plus important pour les couleurs de votre marque de soutenir la personnalité que vous voulez représenter. Au lieu d'essayer de s'aligner avec une association de couleur stéréotypée comme le vert représente de l'argent. Tu sais des choses comme ça. Donc vous pouvez regarder ici, hum, à différents logos et vous pouvez voir que vous connaissez bien et la dette et L et Facebook et Ford. Il y a certaines de ces entreprises. Ce sont des publics complètement différents, des personnalités complètement différentes. Eso si vous regardez Coca Cola et CNN comme des personnalités complètement différentes, des missions complètement différentes, tout ça, même avec ESPN et le métro de Levi dans DHL un complètement différent, euh, vraiment contexte différent. Mais en utilisant les mêmes couleurs, vous ne pouvez pas simplement dire que l'orange signifie ceci ou le rouge signifie que parce que vous pouvez voir qu'il y a des couleurs sont utilisées partout. Donc, pour moi, j'aime regarder sa personnalité, la personnalité que vous voulez que votre marque dépeint. Plus le contexte si vert pourrait être utilisé comme utilisé sur la marque environnementale comme Greenpeace, mais pourrait être en utilisant une façon complètement opposée comme la banque Faras TD. Euh, vous savez, évidemment ces deux-là ne sont pas connectés de quelque façon , donc vous pouvez voir ça, mais ils sont tous les deux individuellement. Ils sont tous les deux efficaces, alors n'excluez pas une couleur parce que le vert signifie de l'argent. Le vert pourrait également se rapporter à l'environnement. Disons que vous vendez des motos. Elle a eu Harley Davidson. Évidemment, le noir , l' or, brun jaune seront des couleurs robustes de choix. Mais vous pouvez également utiliser une couleur pour se démarquer des concurrents. Et si vous étiez la première société de motos à utiliser le rose dans votre marque pour que vous puissiez enlever la personnalité là-bas et disons et disons que la personnalité de votre marque était rebelle, scandaleuse. Et si vous ne vendiez pas ces vélos à de gros, durs et robustes mecs ? Plutôt rester à la maison mamans, non ? Donc c'est un très intéressant Nets. Vous pouvez voir ici que la personnalité, c'est encore des motos, mais le contexte dans la personnalité sont complètement différents. Donc, une fois que vous prenez ce logo en rose maintenant, la personnalité est très différente. Alors avant d'aller à la prochaine diapositive, jouons à un petit jeu. Imaginez si votre marque est des clowns pour les fêtes d'anniversaire, non ? Alors c'est tout. C' est tout ce que je vais te dire, c'est que ton business est la classe pour les fêtes d'anniversaire , alors immédiatement, quelles couleurs tu n'utiliserais pas comme ta pensée dans ta tête ? Vous ne pouvez pas utiliser noir droit, donc généralement noir est sombre et littéralement et effrayant et sérieux, Mais regardons le contexte. Disons que vous fournissez des clowns effrayants pour les fêtes d'anniversaire d'adultes, non ? Maintenant, le contexte est complètement différent. Donc, l'utilisation du noir ici pourrait réellement fonctionner, sorte que vous pouvez voir que le contexte et la personnalité ont un grand rôle à jouer dans les différentes couleurs que vous choisissez. 18. Les bases de la théorie des couleurs: Parlons maintenant d'une théorie des couleurs. J' utilise donc un outil appelé Adobe Cooler, et j'ai mis un lien vers cela dans les notes. C' est un excellent outil pour obtenir des palettes de couleurs et voir visuellement comment fonctionne la théorie des couleurs . Donc si on descend la ligne par ici, donc on a des couleurs analogues et ils sont à côté de l'autre. Donc, vous regardez la roue de couleur. Ils sont à côté de l'autre sur la roue de couleur de sorte que vous pouvez voir jaune, vert, bleu, violet, orange. Ils ont un contraste plus faible, sorte que vous pouvez voir le contraste entre ces couleurs. n'est pas grand chose, mais nous sommes ensemble parce qu'ils ont des nuances communes. Ils font tous partie de la même famille. Donc, vous pouvez voir ici que vous déplacez ça. Lorsque vous déplacez cette couleur principale autour, vous pouvez voir qu'ils sont restés à côté de l'autre sur um sur la roue de couleur. Donc, la suivante, nos couleurs monochromatiques et les couleurs monochromatiques sont des couleurs avec des variations, l'intention et les nuances, donc la différence entre 10 et teinte signifie alléger en ajoutant du blanc. Une fois que vous ajoutez Nick blanc, c'est plus léger. Shade signifie sombre ing en mélangeant le noir dedans semblent mis noir là-dedans. Il devient plus sombre. Il y a peu de variété dans ces couleurs, mais ils peuvent utiliser pour créer des couleurs simples, propres et élégantes avec pas beaucoup de contraste. Donc, si vous optez pour ce genre de look vraiment doux, vous ne voudrez pas utiliser un schéma de couleurs monochromatiques. Donc vous pouvez voir ici, , si vous êtes la personnalité de la marque, s'il y a beaucoup de rouge ou d'orange pour voir si vous pouvez regarder et voir ici, comme où ? Les différentes nuances que je peux utiliser, hum, dans cette palette de couleurs. Ah, le suivant, c'est la triade. Donc essayer grenier ou trois couleurs également espacées autour de la roue de couleur afin que vous puissiez voir le jaune ici, que le bleu ici dans le rouge. Ici, euh, ce sont eux. Elles ne sont donc pas aussi contrastées que les couleurs complémentaires, mais semblent un peu plus équilibrées. Les couleurs primaires et les couleurs secondaires des deux exemples de jeu de couleurs grenier essayer. Donc, si vous regardez la roue de couleur primaire que vous avez peut-être vu quand vous êtes à l'école secondaire, ces airs, les exemples de ce qu'ils sont, ils sont certainement loin les uns des autres. À peu près autant de contraste que vous pouvez obtenir lorsque vous travaillez avec la roue de couleur. Suivant est complémentaire, sorte que les couleurs complémentaires air deux couleurs qui sont opposées l'une à l'autre sur la roue de couleur, comme le bleu, violet et l'orange. Ils offrent un contraste de couleur maximal et fonctionnent particulièrement bien lorsqu'une couleur chaude est associée une couleur fraîche afin que vous puissiez voir ici si le rouge. Le rouge ici, qui doit être considéré comme une couleur chaude, est ensuite associé à ce vert ici, qui est une couleur plus fraîche. Suivant est composé, donc les couleurs compétentes sont des couleurs contenant un mélange des trois couleurs primaires. Tous les bruns, kakis et les couleurs de terre sont de couleur composée, sorte que vous pouvez voir comme vous jouez avec cela, vous pouvez obtenir ce genre de kaki ici. Vous devez vraiment jouer avec elle pour obtenir de bonnes couleurs ici. Mais il y en a. Il y a de bons modèles que vous pouvez développer juste en faisant tourner ça autour, euh, euh, et en trouvant certaines des palettes qui fonctionnent vraiment comme ça c'est vraiment sympa. C' est vraiment ce genre de ton terreux. puis Etpuisle dernier a des nuances pour que cet air se mêle au noir. Donc, vous prenez 11 couleurs de base juste ici, et ensuite vous mélangez du noir dedans. Et c'est vraiment génial. Lorsque vous faites bien, vous faites des trucs de conception Web où vous devez dire, Avez-vous un arrière-plan et vous devez faire la bande si vous êtes Si vous créez une table là-bas et que vous voulez avoir comme un peu plus de contraste dans le que vous pourriez créer, vous pouvez voir ici que, comme ce qui serait juste un peu plus sombre pour se démarquer un peu plus. 19. L'effet Von Restorff: - Donc, cette dernière section en couleurs est quelque chose dont j'ai parlé dans une classe d'actions d'échelle précédente - que j'avais sur les pages de destination. - C'est parce qu'il s'applique vraiment bien à la conception Web et aux pages de destination. - Et c'est une chose que j'ai eu de Blawg de Derek Halpern, - et il parle d'une action passive ou d'agir des couleurs actives. - Et il a parlé d'un truc appelé le Von Rest ou pour Effect. - Donc il a dit, - psychologues Hedwig von Rest ou si étudié, - ce qui est connu comme l'effet Ven le Von Restaurant, - qui est aussi appelé l'effet d'isolement. - Il prédit qu'un article se démarque comme un pouce douloureux et est plus probable que nous nous souvenions que - les autres éléments. - Donc fondamentalement, - ce qui se distingue se souvient, - ce qui se mélange est ignoré. - Donc, fondamentalement ose parler de choisir une couleur d'action sur votre page que tous les liens - sur votre page ont. - Donc, si vous regardez, - ici s donc si vous regardez ici, - vous pouvez voir que ce bouton obtenir l'application est verte, - et il n'est pas là en utilisant le vert nulle part ailleurs dans la page. - Ils savent que c'est une couleur d'action. Où qu'ils aient, ils voulaient que Teoh utilise cette couleur. - Cela signifie que dans les utilisateurs ont eu une action. - Le vert signifie action. - Vous pouvez voir ici qu'il y a un peu de divergence dans la façon dont ils utilisent les couleurs passives - inaction. - Si vous regardez la barre orange supérieure, - ce n'est pas un lien. - C'est juste l'arrière-plan. - Mais alors vous pouvez voir ci-dessous, - commencer à utiliser la récolte. - Maintenant, certains des liens vers le bas là ou dans. - Il y a donc un peu de divergence. - Ce n'est peut-être pas une grosse affaire. - Le plus important, c'est que le bouton est vert. Donc ça se distingue beaucoup plus parce que le vert n'est pas vraiment utilisé ailleurs sur le site. - Et donc si vous regardez ici, - baiser les métriques de la même chose qu'ils ont commencé votre essai gratuit et me faire commencer avec les enfants. - Mesures vertes pour cette couleur d'action. - Et donc ça se démarque immédiatement. - Voici un autre exemple. - Donc, vous pouvez voir ici inscrire pour voir ce que les autres utilisent est cette couleur d'action, - puis dans le coin supérieur droit, - inscrire est une autre couleur d'action, - de sorte que cela se distingue beaucoup. - Il y a un peu de divergence avec vous pouvez voir ici qu'ils utilisent ça au milieu - de leur utilisation que le bleu vif est un fond, - mais ensuite ils utilisent aussi ce bleu pour les liens. - Tu sais que tu peux aller et venir avec ça. - Je suppose que le résultat est surtout dans la conception Web. - Si vous voulez quelque chose pour vraiment se faire remarquer et vraiment se rappeler pour vous assurer que - c'est c'est, - c'est une couleur unique pour le reste de la page. Donc, si vous savez que vous utilisez les Browns et Blues et les Noirs, si vous utilisez un bouton rouge, ça va se démarquer et se rappeler. - Et je pense que c'est l'un des principes les plus importants quand on conçoit une page. 20. Screencast: Utiliser la couleur en pratique: - Donc, la dernière section dans la dernière section, - nous avons parlé des couleurs et des palettes de couleurs et expliqué quelques choses de théorie des couleurs. - Je vais te guider à travers la façon dont je choisis les couleurs. Je commencerai par dire que je ne m'assieds pas ici. Je n'ai jamais été incroyable avec la couleur. Et donc je ne suis pas assis ici et, vous savez, - vous savez, - tirer une couleur étaient comme ça, - euh, - donc juste ici et juste commencer à jouer avec elle pour essayer de trouver la bonne couleur. - Habituellement, je dois être inspiré par une certaine couleur ou personnalité ou photo eso il ya - il ya quelqu'un différents endroits pour trouver l'inspiration pour la couleur, - et l'un des plus cool est les amateurs de couleur. J' ai mis ce lien dans les notes, si tu n'en avais pas entendu parler. Donc, la grande chose à propos des amateurs de couleurs est que vous pouvez parcourir des palettes pour regarder la mer - ici comme l'une des palettes les plus populaires de tous les temps. - Vous pouvez dire quel est le palais le plus populaire du mois, - et vous n'avez pas besoin de les utiliser exactement, - mais ils vous donnent beaucoup de ça, - vous donne beaucoup d'inspiration pour que vous puissiez aller ici et voir ça et dire, - et vous n'avez pas besoin de les utiliser exactement, - mais ils vous donnent beaucoup de ça, - vous donne beaucoup d'inspiration pour que vous puissiez aller ici et voir ça et dire, OK, - peut-être que je veux juste utiliser cette couleur et cette couleur. , Ce qui est vraiment cool, c'est que tu peux y aller et créer des motifs. - Donc, tous les différents types de motifs avec cela de sorte que vous pouvez utiliser des images d'arrière-plan pour créer - juste des quantités incroyables de différentes combinaisons. - Donc ici, - ils ont juste des couleurs, - aussi, - de sorte que vous pouvez regarder et voir ici les couleurs populaires, - et puis ils vous donnent un peu plus sombre là-bas pour les faits saillants, - ce qui est vraiment agréable. - C' donc les amoureux de la couleur. - Et pour que tu puisses. - Vous pouvez aller dans des palettes et des motifs, - modèles de motifs, - formes et couleurs. - Donc l'autre l'est, - et les concepteurs rouleront les yeux sur moi. - Mais j'y suis souvent allé. - C'est juste de belles couleurs à plat, je colore dot com, - et parfois quand je suis juste vraiment coincé, - je dis juste , - OK, - je vais juste utiliser ce bleu ou utiliser ce vert. - Um, - ils fonctionnent vraiment bien ensemble, - comme vous pouvez le voir, - comme à travers cette rangée fonctionne très bien et ont une couleur légèrement plus foncée et ensuite aller - vers plus de couleurs plus chaudes là-bas. Donc certaines de ces couleurs sont utilisées dans cette maquette, et donc je ne me sens pas coupable d'utiliser ces couleurs parce qu'il n'y a pas de couleurs riel ou decouleurs, et il n'y a que tellement de couleurs que vous pouvez choisir. et donc je ne me sens pas coupable d'utiliser ces couleurs parce qu'il n'y a pas de couleurs riel ou couleurs, - Donc vous ne vous inquiétez pas d'être exactement original. - Et quand vous choisissez des couleurs, - vous venez d'être inspiré par d'autres designs. - Un site que je vais à être inspiré par la photographie ou tout simplement le design en général est le site - inspirer. - Ils ont des vues incroyables ici. - Juste beaucoup de façons de s'inspirer de type, - couleur et photographie. - Donc certainement vérifier site inspirer. - Un autre site est décerné un W W, - W un R D s dot com et ceux-ci ont certains d'entre eux ou um, - sites dynamiques. - Donc beaucoup d'entre eux utilisent flash ou html cinq. - Donc il y a beaucoup de choses assez cool qui se passent sur ce site. - Il y en a un autre que je n'ai pas encore tiré. - C'est vers le bas. - C'est une bonne fille ici. - Donc trouvé F F F F F trouvé est un spectacle impressionnant pour l'inspiration. - Il est principalement juste le design et la photographie et juste toutes sortes d'images intéressantes et - la typographie donc je suis sûr que parfois il n'y a pas si bonnes choses là-bas. - Mais vous pouvez voir ici des cartes de visite et juste des illustrations vraiment étonnantes. - Ryan se souvient de jouer à ce jeu vidéo ? - Donc Found ISM a juste toutes sortes d'inspiration différente. - Vous pouvez vous perdre juste cuisiner à travers et ensuite passer par toutes les différentes images liées -. - Alors voici à d'autres sites que je vais beaucoup pour m'inspirer. - Inspiration du design. - Mademoiselle suisse. - Swiss Dash ms dot com um, - Tina Rock Eisenberg est juste un design incroyable, - blawg toutes sortes de choses différentes pour s'inspirer. - Et je pense que tu sais, - c'est comme ça que j'ai grandi en tant que designer, c'était toujours en regardant les meilleures choses que je pouvais et en m'inspirant de ça, en modifiant, en peaufinant et en prenant une seule pièce - c'est comme ça que j'ai grandi en tant que designer, c'était toujours en regardant les meilleures choses que je pouvais et en m'inspirant de ça, en modifiant, en peaufinant et en prenant une seule pièce . d'un autre endroit. - Vous savez, - un endroit d'un dessin, - un autre endroit d'un autre signe et juste comme la combinaison des deux. - Il est donc très difficile de créer comme un design vraiment original, - mais c'est vraiment juste de prendre toutes ces différentes pièces dont vous êtes inspiré - architecture, - photographie, - couleur. - Un autre qui est génial est, - hum, - des choix. - Obéissez donc les choix d'obéir a des images libres de royauté. - Euh, - et donc fondamentalement, - vous pourriez juste trouver des images du domaine public qui comptent. - Vous n'avez pas à payer pour eux, vous pouvez aller ici pour ajouter le choix de l'éditeur. - Toutes sortes de photos étonnantes ici. - Aussi, - si vous allez à 500 PX point com. - Voyez si j'avais le journal ici, - en fait, - allez juste sur les photos. - Donc, quand vous allez chercher, - disons, - une voiture, - vous pouvez descendre ici quand vous cherchez une voiture et aller orteil n'importe quelle licence et dire attribution - non commerciale. - Donc, dans ce cas, - vous êtes autorisé à l'utiliser à des fins non commerciales. - Euh, - et certains d'entre eux. - Il y a juste l'attribution 3.0, donc tant que vous donnez l'attribution au photographe, vous pouvez utiliser ces images. - La même chose avec le scintillement. - Vous pouvez également effectuer une recherche par Creative Commons. Alors quand vous cherchez des images sur scintillement, cliquez surun dossier appelé Show Me Creative Commons, - Um photographie, -et vous serez en mesure d'obtenir une tonne de photos étonnantes de cette façon. Alors quand vous cherchez des images sur scintillement, cliquez sur un dossier appelé Show Me Creative Commons, - Um photographie, -