Transcription
1. Ce que nous aborderons dans ce cours: Voyons ce que nous allons couvrir dans ce cours, et concevoir dans ce cours, et développer dans ce cours. Ce ne sont pas des plans Dribbble, sont des exercices réels de ce cours, alors voyons les. C' est l'un d'eux. Un autre. Cachons les grilles. Il y en a un autre, et un
autre, un autre, un
autre, un autre, et aussi celui-ci. Quelques annonces de plus, nous allons concevoir comme ceux-ci, et il y a un thème de plus pour cette annonce, vous pouvez voir ici. Mais comment nous allons y parvenir, nous allons apprendre l'utilisation efficace des grilles typographiques en utilisant l'espace blanc. Nous maîtriserons les compétences du temps et de l'espace pour les designers, et en fait c'est appelé espace blanc. Tout cela est pour les concepteurs. Nous allons également apprendre à faire correspondre différentes polices, comment les jumeler, comment sélectionner des polices efficaces, comment transmettre votre message à l'aide de la typographie. Comment utiliser efficacement des grilles pour concevoir différentes mises en page et beaucoup de choses géniales. Même pour les développeurs, j'ai beaucoup de choses intéressantes comme cette unité VW, vous pouvez voir ici comment il se développe et se contracte avec la conception web responsive, et nous allons discuter beaucoup de typographie de design web
responsive ou il est appelé topographie essentiellement réactive. Vous pouvez le voir ici en action, grand, moyen. Vous pouvez voir comment la taille de la police se déplace. Pour les petits, vous pouvez voir la taille du titre juste décalée. Ensuite, nous allons discuter de la façon d'utiliser les compétences typographiques personnalisées dans Bootstrap. Aussi dans Bootstrap, comment nous allons utiliser des compétences typographiques
personnalisées avec un billet de blog comme celui-ci. C' est aussi appelé rythme vertical. Nous avons également mis en place un rythme vertical dans cet exercice. Donc, pour tout savoir sur ces techniques et normes de typographie en CSS et HTML, vous allez vraiment profiter de ce cours. Il y a des choses plus excitantes dans ce cours comme écrans
mobiles et leurs tailles de police et PT, SP, DPI, DIP, toutes les différentes résolutions d'écran désordre et comment nous allons concevoir avec ce désordre. Donc, ce sont quelques appareils IOS, tous les appareils différents ayant le même billet de blog conçu pour eux. C' est l'un de l'exercice. En outre, nous allons chercher des compétences de
typographie Google Android et comment l'utiliser efficacement. Aussi, je vais partager avec vous un secret comment connecter votre écran ou comment voir cette conception sur vos écrans mobiles afin que vous puissiez facilement choisir et sélectionner les polices, et le design, et les couleurs, et tout le reste. Donc voir, c'est croire. Si vous pouvez voir votre design directement sur un écran mobile, vous pouvez concevoir beaucoup mieux. Ok, maintenant la question est, qui devrait suivre ce cours ? Je ne recommande pas de concepteurs ou de designers très novices qui viennent de commencer à utiliser Photoshop pour suivre ce cours. C' est un cours de difficulté de niveau moyen, donc tous les designers qui connaissent déjà un peu Photoshop et qui savent comment l'utiliser, ils connaissent les raccourcis, ils devraient suivre ce cours. En outre, tous les développeurs qui connaissent les bases du HTML et du CSS sont les bienvenus. Si vous venez de commencer à apprendre CSS et HTML, je pense que ce cours n'est pas pour vous. Vous ne comprenez peut-être pas peu de choses. Aussi, j'ai besoin de vous pour télécharger et installer la dernière version de Photoshop CC. Tout concepteur qui pense que son design a quelque chose de manquant ou quelque chose d'étrange, alors il devrait vraiment suivre ce cours pour améliorer votre design. Je suis sûr que ce cours va améliorer vos conceptions beaucoup même pour les concepteurs de niveau Dribbble ou Behance. Alors creusons et commençons, et je te verrai dans le cours.
2. Introduction à la typographie: Que nous concevions pour une application mobile ou n'importe quel site web ou web design ou même de la publicité, 95 pour cent de chaque conception est essentiellement Type, qui est du texte. Pour utiliser ce texte à votre avantage, vous devez être un très bon concepteur et vous devriez être très bon en Typographie. Tous les bons designers qu'ils possèdent la compétence. Le texte est une partie majeure de tout type de média, qu'il s'agisse de publicités, de TV, de sites Web, de blogs , de
livres, de titres de films, d'applications, tout, il y a toujours beaucoup de texte que vous devez voir ou consommer. Qu' est-ce que la typographie ? Si vous pouvez utiliser ce texte, ou bien écrire correctement,
il peut agir comme une épée de samouraï en duel tranchant, ou peut-être plus qu'une épée de samouraï, pour chaque concepteur. Quel est le but de la typographie ? Chaque fois que vous concevez quelque chose ou que vous concevez une annonce ou une application, vous faites deux choses avec votre type. Numéro 1, vous devez l'organiser efficacement pour la lisibilité et la lisibilité. Si votre utilisateur ne peut pas la lire, il n'
y a aucun sens à concevoir une telle annonce ou application mobile. La seconde est, vous devez communiquer votre humeur, votre message au lecteur ou au spectateur. Ce sont les deux objectifs de base de l'utilisation de la typographie dans vos conceptions. Maintenant, typographie pour Web et applications mobiles, nous allons couvrir beaucoup de choses dans ce cours. Donc, juste quelques bases que les gens ne scannent que les sites Web et les blogs. Ils ne le lisent pas vraiment à moins que ce soit très important. La deuxième chose est que nous allons répondre à beaucoup de questions concernant la topographie du site Web, comme la police que nous allons utiliser, si j'utilise cette police pour un site Web d'entreprise, un blog ou une application web. Pour les applications mobiles, nous allons couvrir comment utiliser la typographie sur les petits écrans car il est très difficile d'utiliser la typographie sur de petits écrans et il existe différents iOS et Android, différentes spécifications de polices et tailles que Apple et Android ont spécifié. Chaque fois que vous concevez quelque chose, vous devriez vous poser des questions, quelle police se chargera plus rapidement, ou devrais-je utiliser cinq polices ou trois polices ou 10 polices pour mon site Web ? Parfois, nous les designers faisons quelque chose comme ça ; « Proxima Nova est dans la tendance de nos jours. Les gars, je devrais l'utiliser partout. » Donc, quelle que soit l'application ou le site Web de votre design, vous n'avez qu'à y mettre votre police Proxima Nova. C' est très étrange. Chaque site Web a ses propres spécifications, type
d'entreprise et tout, donc ce n'est pas sage. Nous allons couvrir beaucoup de choses dans ce cours, ne vous inquiétez pas. Voyons ce que nous avons ensuite. Maintenant, si vous êtes un concepteur ou un développeur novice, vous pourriez penser à combiner différentes formes, quelle police convient pour les sites Web amusants,
pour les sites Web d'affaires ou un blog de mode. Aussi beaucoup de développeurs que j'ai vu qu'ils n'utilisent Open Sans parce que c'est le seul que je peux facilement combiner. Ne prenez pas de telles décisions ou ces décisions de conception. Ceux-ci peuvent vraiment vous causer des problèmes si vous continuez à concevoir en utilisant la même police pour comme 10 sites Web. Je vais vous guider à travers de nombreux exemples, même avec Bootstrap pour vous montrer comment nous pouvons utiliser différentes techniques typographiques pour même les développeurs et les concepteurs. Alors commençons le cours et passons à la leçon suivante.
3. À propos de polices et de polices de polices: Chaque concepteur doit être familier avec certains des termes typographiques comme la police, les familles de
polices et ce qui est le style de police. Voyons ce qui est fondamentalement une police. La police est essentiellement un ensemble de caractères de style et de taille spécifiques. En fait, dans l'ancien temps, la taille était pertinente pour la police ou le style de type ou le type de visage. De nos jours, une police est disponible en différentes tailles, sorte que vous pouvez utiliser n'importe quelle taille comme 72 points, 12 points, 100 pixels ou ce que vous voulez la taille, parce que c'est numérique, vous n'avez pas besoin de faire un bloc de caractère de police métallique. Autrefois, les polices et les caractères étaient fabriqués avec des blocs métalliques spécifiques. Voyons quelques exemples de polices. Je montre ici deux polices différentes, une est la famille Amsi Pro et la seconde est la police Crique Grotesk. Ce sont des tailles différentes, nous pouvons utiliser n'importe quelle taille, il n'y a pas de limite aux tailles. Nous pouvons utiliser d'un point à illimité, la taille n'est pas pertinente ces jours-ci avec des polices. Maintenant, qu'est-ce qu'un style de police ? Ou nous pouvons l'appeler font-face aussi. Pour une utilisation moderne, il suffit de garder à l'esprit que c'est un style de police. Style spécifique d'une police, vous l'avez deviné correctement. Maintenant, les exemples sont gras, italique ,
régulier, moyen écran, condensé ,
noir, semi-gras, noir gras et extrabold. Il y a beaucoup de différents styles de polices ces ces jours-ci. Voici quelques exemples de styles de police, j'utilise Amsi Pro Ultra Style, qui est ultra gras, en ce moment. Il y a un autre style ici, qui est Amsi Pro Light 48 points, et nous avons Proxima Nova Condensed, les caractères sont condensés ou pressés ensemble, puis nous avons Proxima Nova Extrabold. Ce sont des styles différents, comme celui-ci est un style condensé, celui-ci est Extrabold, celui-ci est pro, ultra pro, et celui-ci est un style léger. Maintenant, que sont les familles de polices ? Donc, la famille de polices signifie qu'il devrait y avoir une grande famille de la même police, donc ce sont essentiellement des styles de police différents qui sont conçus sur une même géométrie, forme ou style. Par exemple, Helvetica est une très grande famille, il s'est condensé aux styles et il
a beaucoup de styles audacieux que beaucoup de styles arrondis. Helvetica a plus de 30 ou 44 polices différentes dans une seule famille, c'est une très grande famille. Vous pouvez également trouver différentes polices Google de grande famille à partir de ce site, je vais vous montrer en ce moment. Ce site est mieux polices Google, et vous pouvez voir ici nous avons cette famille Raleway, et vous pouvez voir que nous avons 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, différents styles d'une seule police. C' est essentiellement une très grande famille, beaucoup de styles que vous pouvez voir ici, cette Source Sans Pro est aussi une très grande famille, Roboto, aussi une très grande famille. Aussi si vous pouvez voir que nous avons Roboto condensé à, si nous avons ici vous pouvez voir celui-ci Roboto Mono, cela appartient aussi à cette famille Roboto. Il a un style différent, mais ils sont en fait la même famille, ce sont des cousins. Ensuite, nous avons Source Code Pro, qui est également lié à la Source Sans Pro, et nous avons ce Roboto Condensed, il est également lié à la famille Roboto. Ce sont différentes polices Google qui ont de très grandes familles. Regardez et voyez ici eXO, eXO 2 et Kanit, ils ont aussi de très grandes familles, beaucoup de styles différents. L' avantage d'une grande famille est que vous pouvez utiliser une seule famille et vous pouvez avoir beaucoup de styles
différents à choisir lorsque vous concevez. Il s'agit de polices, taille de
police et de familles de polices. Passons à la leçon suivante.
4. Termes Anatomiques typographiques typographiques: Maintenant, dans cette leçon, nous allons apprendre certains
des termes typographiques et un peu sur l'anatomie type. Ils sont donc très cruciaux parce que nous pouvons facilement jumeler la force en apprenant ces termes typographiques. Alors commençons. Tout d'abord, nous allons en apprendre davantage sur la ligne de base, la ligne moyenne et la ligne de cap-line. ligne Cap signifie la ligne majuscule, donc c'est la ligne, ligne
imaginaire assis en haut de la lettre majuscule. Ensuite, nous avons la ligne de base, ce qui est très important. ligne de base est la ligne sur laquelle toutes nos lettres sont assis dessus. La ligne moyenne est fondamentalement en haut de nos petites lettres ou nous pouvons dire x-height. C' est essentiellement la hauteur de nos petites lettres. Donc, c'est fondamentalement la ligne moyenne. Le plus important est cette base de référence. Assurez-vous donc de savoir ce qu'est cette ligne de base. Encore une chose que certaines de ces lettres vont au-dessus de cette ligne majuscule et d'autres comme celles-ci y, p et autres, elles vont au-delà de cette ligne de base. Alors gardez juste à l'esprit. Apprenons-nous sur la hauteur x et la hauteur majuscule de n'importe quelle police. Donc, fondamentalement, la hauteur de la petite lettre x est fondamentalement la hauteur x de n'importe quelle police ou de n'importe quel type. La hauteur de la lettre majuscule est fondamentalement la hauteur du capital. Maintenant, la hauteur x est très importante et le rapport entre la hauteur x et lettre
majuscule est également un facteur très important dans la lisibilité de la police. Donc maintenant, si nous avons une bonne hauteur x, il peut être plus facile de lire sur de petits appareils ou de petits livrets ou quelque chose comme ça. Donc, si vous concevez pour des applications mobiles, vous devez considérer une police avec une hauteur xplus grande. Aussi les polices efficaces comme Helvetica et peu d'autres, ils ont x-hauteur de 67 pour cent à 69 pour cent de la hauteur du capital. Donc, ils sont presque 65-70 pour cent de la hauteur d'une lettre majuscule. C' est donc aussi un autre facteur, c'est un facteur entre différentes classifications de polices. Les anciens types de polices, les anciennes familles de polices, ou les anciennes polices comme Garamond, ont une hauteur x faible. Maintenant, apprenons sur les ascenseurs et les descendants. ascendeurs sont fondamentalement la partie lettre qui est étendue au-dessus la ligne moyenne ou vous pouvez voir ici le haut du d. Ensuite, nous avons descender, qui est fondamentalement étendu vers le bas à partir de la ligne de base. Donc, tout ce qui tombe de la ligne de base est fondamentalement descendant. Counter est un autre facteur très important dans la reconnaissance ou la lisibilité de n'importe quelle police ou type. Il existe donc deux types de compteur, ouvert et fermé. Le compteur ouvert est fondamentalement la partie ouverte de la lettre drôle comme celle-ci. Il n'est pas complètement fermé de tous les côtés. L' espace entre cette lettre e est essentiellement le compteur ouvert et ensuite nous avons le compteur fermé. Compteur fermé est essentiellement l'espace enfermé dans une lettre comme celle-ci o et la partie supérieure de cet e. Pourquoi nous apprenons à ce sujet ? Parce qu'ils peuvent aider à la lisibilité si nous avons de très grands compteurs, cette police ou ce type ou ce style est très lisible. Maintenant, c'est aussi un autre facteur à écrire à ce x-hauteurs. Donc, ces deux jouent un très grand rôle dans la lisibilité ou les polices compteur et x-height. Apprenons quelques autres termes typographiques, afin que nous puissions facilement identifier n'importe quel type. Donc, nous y allons, nous avons ce bec, qui est un peu pointu fin de toute lettre majuscule ou lettre minuscule. Ils se trouvent normalement au début et à la fin de la lettre. Ensuite, nous avons cette attaque. Vous pouvez voir la partie supérieure de cette lettre p, il y a deux traits différents. L' un est très mince au début et au milieu il est très épais. Donc, fondamentalement, cela est appelé la différence de course semblent prendre et il est très important dans l'identification des différentes classes de polices. Ensuite, nous avons la boucle inférieure, qui est fondamentalement la partie inférieure de g. Vous pouvez voir ici. Également différentes classes de polices. Ils ont différent ce style de boucle. Alors nous avons l'oreille. Oreille est fondamentalement ce bouton de style oreille pointue sortir de cette lettre g. C' est également un facteur très important. Il est différent dans différentes polices. Ensuite, nous avons cet apex. Apex est fondamentalement la partie supérieure de toute lettre où nous avons ce style stylo reste de quelque chose comme voisin intestinal ici ou quelque chose comme ça. Ensuite, nous avons la queue. C' est essentiellement la partie inférieure de la lettre y. Ensuite, nous avons ce terminal qui est aussi comme la queue, mais il ne s'étend pas en bas. Il est essentiellement étendu sur le côté gauche ou droit d'une lettre comme celle-ci a. Ensuite, nous avons serif. Serif est fondamentalement n'importe quelle ligne ou quoi que ce soit qui est fondamentalement séparé les types de polices, comme nous avons ces polices serif, ils ont ces dalles à la fin de leurs lettres comme ceci. Vous pouvez voir ici y. donc aussi au bas de la lettre y. Donc, c'est essentiellement serif, et tout cela est à propos de différents termes typographiques. J' espère que vous avez apprécié votre conférence. Passons à la leçon suivante.
5. Ancien et transition de Humanist: Dans cette leçon, nous allons voir différentes classifications des types afin que nous puissions les utiliser efficacement. Avant d'aller voir différentes classes de types, nous allons en apprendre davantage sur le stress diagonale. Vous pouvez voir en bas d'ici, le O, j'ai montré une contrainte diagonale. Vous pouvez voir que cet O a des taux variables de coups, donc ici sur les côtés, il est un peu épais, et où j'ai mis la contrainte diagonale, c'est essentiellement le coup le plus mince. Là où le trait est le plus mince, il
suffit de tracer la ligne de la plus mince à la plus mince et il montre le stress des diagonales. C' est l'un des facteurs dans l'identification des différentes polices. Maintenant, le premier est humaniste. Humaniste, comme son nom l'indique, c'est fondamentalement comment les humains écrivent avec la plume dans les temps anciens. Vous pouvez voir les traits et le style d'écriture ressemble à l'écriture humaine avec un stylo. Maintenant, il a deux facteurs de base pour l'identifier, un est cette barre transversale très inclinée de e. Vous pouvez voir qu'il est comme un angle de 30 ou 40 degrés, et vous pouvez voir ici dans la lettre Ours comment il est écrit. Deuxièmement, vous pouvez voir les serifs en bas de ce n que j'ai souligné. Vous pouvez voir que les serifs sont peu courbés comme un pied humain, donc c'est un autre facteur. Il s'agit donc de trois facteurs. Il a une très bonne contrainte diagonale, très inclinée, puis nous avons une barre transversale inclinée et puis nous avons des sérifs de style de pied. Maintenant, je vous ai montré vieux style ou garalde. Ce sont deux classes différentes, ancien style et transition. Le style ancien était un peu vieux et la transition a été construite sur, ou vous pouvez dire, version
improvisée de ce vieux style. Maintenant, l'ancien style a très peu de facteurs pour l'identifier, un est cette contrainte diagonale, il a une bonne contrainte diagonale, moins que les humanistes, mais il a une bonne contrainte diagonale. Ensuite, le sommet de ceux-ci, vous pouvez voir ces ascendeurs et descendants, ils ont cette extrémité serif de pente, et puis nous avons ce W, c'est la propriété très unique de ce style ancien ou garalde style. Vous pouvez voir ici les W ont croisé la version, donc ils se chevauchent, c'est comme deux lettres V, V se chevauchent les unes avec les autres. Vous pouvez voir que j'ai mis en évidence cette e. à l'intérieur de l'e, il est fondamentalement compteur, donc ils ont très moins d'espace de comptoir. Vous pouvez voir ici, nous avons à l'intérieur de la lettre e, puis ils ont au sommet de la T, vous pouvez voir il becs sont quelque peu inclinés, et puis si nous regardons les serifs, vous pouvez voir à la fin de la lettre h ils ne sont pas totalement droites, elles sont un peu sinueuses. Tout est sur le style ancien, principaux facteurs sont ce W et le bec, et ces sommets inclinés de lettre d et un peu de cette contrainte diagonale dans tout ce que vous pouvez voir ici. Aussi, vous pouvez voir que la lettre R a un coup de spéléologie à la fin, et si vous regardez la transition, il y a beaucoup de différences avec cela. Vous pouvez voir en haut du d,
le serif est un peu très pointu, puis le stress diagonal est presque droit. Vous pouvez voir la contrainte diagonale est presque droite, et aussi vous pouvez voir à l'intérieur de cette lettre e, le compteur est un peu plus large ou un peu plus grand que l'ancien style, alors nous avons ce W. W ne se chevauche pas, c'est un peu différent, et puis aussi les becs de cette lettre T, ils pointent également vers le bas un peu structurel. Vous pouvez dire un peu structurel. Aussi, il y a une autre différence que j'ai oubliée. Si vous voyez la différence de trait dans l'ancien style, différence de
trait est que si vous voyez cette lettre h, vous pouvez voir ici à la fin de la h, nous avons un peu moins de contraste de trait. L' épaisseur et le mince sont très proches les uns des autres, mais dans la transition, vous pouvez voir les coups sont très nombreux, mince est très mince et l'épaisseur est un peu plus épaisse. C' est aussi une différence entre le style ancien et le style de transition. Voici quelques exemples de style ancien. C' est la police adobe devanagari, et vous pouvez voir ici comment cette police a été disposée, c'est une version italique de la police. Pourtant, vous pouvez voir que T est un peu incliné, et dans cette police, vous pouvez voir qu'il s'agit peut-être d'une version différente, c'est pourquoi dans différentes polices, certaines fonctionnalités ne peuvent pas être trouvées. Comme ici, nous avons W. W est juste comme la police de transition, donc parfois ces concepteurs de typhus, ils mélangent différentes propriétés de deux polices. Ensuite, nous avons ce Minion, Pro, c'est aussi une police de style ancien. Vous pouvez voir ici encore le W est différent, mais d'autres propriétés comme cette fin de cette r et les salopes top et top serifs, ils sont presque comme l'ancien style.
6. Sans Serif et Script: Parlons maintenant des polices modernes. Ceux-ci sont appelés essentiellement Bodoni, et leur principale caractéristique est la largeur de course. La différence de course est trop grande, très mince à très épaisse. Ensuite, l'autre est que ces sérifs sont comme des dalles, bandes
très minces, quoi que je l'appelle. C' est la propriété principale de ce Bodoni. Aussi, le stress, vous pouvez voir dans le o, il est très droit, 90 degrés. Maintenant, la dalle serif ou il est aussi appelé dalle égyptienne. Vous pouvez deviner qu'ils ont des sérifs comme des dalles épaisses, et c'est pourquoi ils sont appelés slab serifs. Voici la police la plus courante que nous utilisons, qui est sans empattement. sans-serif n'ont pas de sérifs, ou pas de dalles, ou pas de fin à la fin. Ils sont très propres et très modernes. C' est tout au sujet de ce sans-empattement. Ils ont beaucoup d'autres classes de sans-serifs. Différents concepteurs de polices de caractères, ils mélangent les qualités de touche
ancienne ou parfois humaniste dans la police sans empattement. Maintenant, c'est le script ou l'écriture manuscrite. Ce sont différents types de polices de script ou d'écriture manuscrite, mais je vais les combiner tous en un seul. Vous avez peut-être vu ces polices de script ou d'écriture manuscrite. Ils ne sont pas beaucoup utilisés sur le web parce que je ne pense pas que si vous écrivez un paragraphe en script ou en police manuscrite, et il peut facilement être lu. Maintenant, je vous ai dit dans la diapositive précédente que les sans-serif ont quelques autres modifications, comme celle-ci est humaniste sans empattement. Maintenant, vous auriez deviné qu'il partage les caractéristiques de ce type humaniste dont nous avons parlé au début de cette conférence. Humaniste sans empattement, vous pouvez voir, le top est Gill Sans. Ils ont cette fin à l'a, puis ils ont un peu de différence de course. Aussi, si vous regardez cette Open Sans et les inclinaisons dans le compteur dans le a ne sont pas très géométriques. Ils sont un peu obliques. Si vous regardez le g, c'est aussi un peu comme la police humaniste. Vous pouvez voir, je suis Open Sans-Serif et je suis aussi Humaniste Sans-Serif, et j'ai fière allure. Si vous regardez le g, c'est le facteur commun dans tous les humanistes sans empattement. Ils ressemblent un peu à l'humanisme ou à l'ancien style. En outre, cet autre exemple est cette police Calibri, Open Sans, Gill Sans. Ils sont du genre humaniste sans empattement. C' est pourquoi vous voyez Open Sans est très populaire de nos jours. Une autre variante du sans-empattement est Geometric Sans-Serifs, et ils sont construits sur une géométrie très spécifique, comme des triangles, des
rectangles ou peut-être des cercles très spécifiques . Ils sont basés sur la géométrie. Vous pouvez voir ici nous avons la première police, un premier exemple est Futura. Vous pouvez voir les os et les es, ils sont presque un cercle parfait. Ici, vous pouvez voir. Maintenant, si vous regardez cette police Proxima Nova, elle est très populaire. Il est aussi géométrique. Si vous regardez ses o et es, ils sont presque le cercle parfait. Museo Sans est également géométrique. Là où se trouve le mot géométrique, vous pouvez voir comment ils sont construits. La lettre c est également construite sur un cercle parfait. Ensuite, il y a une autre police à la fin, Texta. C' est aussi une géométrique sans empattement. Ils peuvent ressembler à Humanistes ou avoir une nature sinueuse, mais ils doivent être construits sur des formes géométriques spécifiques. Ce n'est peut-être pas seulement des cercles ou des carrés, il peut être une forme déformée de carré ou quelque chose comme ça. Cela complète notre géométrique sans empattement et toutes les différentes classes. Je ne vais pas entrer dans trop de détails sur l'affichage de 16 ou 17 classes de polices différentes. Je pense que c'est assez bon pour que tu démarres. Je partagerai certaines des ressources si vous voulez aller de l'avant, comme un grotesque et d'autres sans-empattement. Dans la leçon suivante, je vais vous faire un exercice pour voir combien vous pouvez reconnaître une police. Je vous donne peut-être des polices géométriques, humanistes, et d'autres. Ce seront des échantillons, et voyons à quel point vous faites dans la reconnaissance des différentes classes de type. Passons à la leçon suivante.
7. À propos de la longueur de ligne: L' un des facteurs les plus importants en matière de lisibilité est la longueur de ligne, cela affecte vraiment votre lisibilité. Maintenant, la question se pose, quelle longueur une ligne devrait avoir dans un paragraphe pour une lecture optimale ? Certains disent que c'est 65, 70 caractères par ligne et 40 caractères par ligne, quelque chose comme ça. J' ai vu beaucoup d'articles et de livres différents, et la gamme est de 45 à près de 85 caractères par ligne. Ils sont optimaux. Maintenant, pourquoi cette longueur de ligne optimale ? Le problème est que si vous avez des lignes trop longues, alors l'utilisateur ou le lecteur doit déplacer sa tête de gauche à droite pour lire cette ligne. Maintenant, si vous avez une ligne très courte, alors ils doivent sauter de haut en bas, ligne à ligne encore et encore. Cela va produire de la fatigue dans votre utilisateur, même leurs yeux ou la tête ou peut-être certains de leurs muscles. D' après mon expérience, si nous traduisons des caractères en mots, alors presque 10-17 mots par ligne est optimale. Ils peuvent être 19 ou 20 selon la longueur du mot, mais c'est presque la moyenne. Maintenant, un autre facteur est la taille de la police. Si vous avez une bonne longueur de ligne et que vous passez la police à la police plus petite, alors vous avez beaucoup de mots dans le même espace et vous devez changer la longueur de ligne à nouveau. Maintenant, si vous essayez de passer à une petite police, alors la longueur de la ligne est très grande et vous devez lire les longues lignes. C' est un autre facteur, alors choisissez judicieusement votre taille de police, sorte que la longueur de ligne est optimale. Maintenant, qu'en est-il des mobiles et des sites web ? Les mobiles ont de petits écrans, donc je pense que généralement le texte devrait être un peu plus grand, le corps du texte devrait être plus grand. Maintenant, normalement sur les mobiles, le corps du texte ou les paragraphes représentent essentiellement 120 pour cent de la taille des paragraphes sur nos sites Web de bureau. Si vous développez un site Web et que vous affichez différentes vues de ce site Web sur mobile, sur ordinateur de bureau et tablette, alors vous devriez prendre soin de ceux-ci. Aussi sur les téléphones mobiles, les lignes seront moins longues parce que nous avons moins d'espace. Certains des principes de longueur de ligne ne s'appliquent pas là. En outre, vous devez également déplacer la taille du titre et la hauteur de la ligne. Tous ces facteurs que vous devez couvrir pour les mobiles. Sur le bureau, si vous êtes un développeur, vous devez utiliser des requêtes multimédias pour ajuster la taille pour une longueur de ligne optimale et une lisibilité optimale. Il s'agit de la longueur de ligne optimale et façon dont nous allons l'utiliser sur les mobiles et la conception de bureau, si vous concevez pour mobile ou ordinateur de bureau. Dans les deux dernières sections de notre cours, nous allons approfondir toutes ces choses sur les tailles
mobiles et de bureau. Passons à la leçon suivante.
8. Alignements de texte: Discutons de l'alignement du texte. Maintenant, beaucoup de designers disent,
« Ok, je sais que l'alignement du texte, qu'est-ce que l'alignement du texte, je sais, » mais il y a des utilisations spécifiques pour chacun d'eux. Si vous pouvez les utiliser correctement, vous pouvez vraiment améliorer votre design et votre lisibilité. Voyons différents exemples et différentes utilisations de l'alignement de texte. Maintenant, le premier est l'alignement le plus courant à gauche et l'alignement à gauche n'
est pas utilisé pour les langues de droite à gauche. Nous parlons de l'anglais et d'autres langues qui sont de gauche, de droite. Maintenant, l'alignement à gauche est essentiellement utilisé pour les articles, paragraphes, les livres, les en-têtes, et beaucoup d'autres choses. Donc, la plupart du temps, c'est l'alignement utilisé le plus courant. Assurez-vous que ce n'est pas pour les langues de droite à gauche. droite à gauche sont fondamentalement opposés à cela. Pour l'alignement à gauche, ce sera l'alignement à droite. Suivant est l'alignement à droite et le texte d'alignement à droite est utilisé pour normalement petite quantité de texte. Si vous l'utilisez sur un paragraphe, alors vous gâchez vraiment votre utilisateur et votre lecteur. Assurez-vous donc d'utiliser l'alignement droit pour de très petites lignes ou très peu de mots. Maintenant, ici, nous avons le facteur est fondamentalement droit aux langues de gauche. Pour les langues de droite à gauche, alignement
à droite est la meilleure option. Maintenant, venir au centre aligner. alignement central ne doit être utilisé que pour les lignes importantes et ne doit pas être appliqué aux paragraphes. J' ai vu certains designers utilisant le centre aligner sur quatre ou cinq lignes. Je pense que ce n'est pas très sage. Alors peut-être que les titres et les slogans de certains produits peuvent être alignés au centre ou peut-être une ligne de plus, mais pas au-dessus de trois, je suppose. Donc, ici, nous avons le facteur de lisibilité. Nos yeux ont sauté d'une à la ligne suivante, et ils prédisent normalement qu'ils devraient être sautés au même endroit. Maintenant, dans l'alignement central, ils sautent d'un endroit à l'autre, donc ce n'est pas une ligne droite. L' alignement justifié est fondamentalement lorsque vos côtés gauche et droit sont presque égaux. n'y a pas d'espace sur le côté droit. Donc aligner justifié est normalement utilisé dans les livres, les magazines, et les journaux. Je ne les recommande pas d'utiliser pour des sites Web ou des blogs. Il est difficile de les contrôler. Vous devrez peut-être modifier votre texte ou votre corps de texte, ou modifier votre texte de copie pour justifier vraiment l'alignement de vos paragraphes. Permettez-moi de vous montrer quelques exemples d'alignement à gauche et à droite. Vous pouvez voir sur le côté droit, je vous ai montré l'alignement droit, l'utilisation
correcte de l'alignement droit. Je ne montre que trois lignes, et vous pourriez voir ça s'aligner sur beaucoup de cartes de visite. Maintenant, vous vous souvenez pourquoi l'e-mail, numéro de
téléphone est presque aligné à droite sur beaucoup de cartes de visite, car il est très moins de texte et vous pouvez voir l'alignement correct ne nuit pas à la lisibilité. Maintenant, sur la gauche est un paragraphe, donc ils devraient être alignés sur la gauche. C' est ainsi que nous utilisons l'alignement gauche et droit. C' est la bonne utilisation des textes alignés à gauche et à droite. Ici, nous avons l'exemple de justifier aligner et aligner le centre. Vous pouvez voir sur le côté gauche, justifier aligner, nous avons différents espaces ou rivières qui coulent à l'intérieur. Certains mots sont plus espacés au suivant. Certains ont moins d'espace entre eux. Donc, on les appelle fondamentalement rivières. C' est alors que vous essayez de justifier l'alignement de votre texte. Assurez-vous donc qu'il n'y a pas de rivières trop larges ou de rivières très proéminentes à l'intérieur de votre texte. Maintenant, venir au centre aligner. Maintenant, aligner au centre vous l'utilisez sur très peu de lignes de texte ou peut-être de poésie, comme j'ai utilisé ici. Je ne sais pas comment j'ai écrit ceci, mais c'est comme ça que nous devrions utiliser l'alignement central, très peu de lignes, et peut-être de la poésie ou quelque chose comme ça. Peut-être une citation de deux lignes. Donc pas plus de deux ou trois lignes, je suppose.
9. Hauteur de ligne (dirigeants): Dans cette leçon, je vais parler de la hauteur de la ligne et aussi il a été appelé leader. Dans le passé, ils avaient l'habitude de placer des blocs de plomb en fusion entre deux lignes différentes pour les séparer. C' était ce qu'on appelait leader. Qu' est-ce qui mène fondamentalement ? Distance entre une ligne de base et la ligne de base suivante. Comme nous avons deux ou trois lignes de texte, la distance entre une ligne
de base et la ligne de base suivante est fondamentalement la hauteur de la ligne. Maintenant, combien de hauteur de ligne devrions-nous avoir ? Elle varie de 120 % à 60 % pour le corps du texte. Le corps du texte est essentiellement les paragraphes et le texte où nous avons beaucoup de textes. Il faut qu'on le lise. Maintenant, pour les en-têtes, vous ne devriez pas le définir plus de 120 pour cent dans les en-têtes. Très gros texte, normalement, la hauteur de la ligne est presque de 100 pour cent à, ou parfois peut-être de 90 pour cent à 120 pour cent. Pour le corps du texte, il varie de 120 % à 160 %, et pour les en-têtes, il est un peu inférieur à notre hauteur de ligne normale. Voici quelques exemples de la hauteur de la ligne du corps du texte. Le corps du texte est essentiellement un paragraphe, alors ne vous inquiétez pas si vous ne savez pas ce qu'est le corps du texte. Il y a beaucoup de textes qui sont destinés à être lus. Sur le côté gauche, nous avons une hauteur de ligne 133 pour cent, ou nous l'appelons aussi 1,33 pour cent. Trente-huit pixels est la taille de nos textes. Fondamentalement, ce que nous faisons ici est, nous multiplions 38 pixels par 1,33, et ce que nous obtenons est, fondamentalement, notre hauteur de ligne. Il peut s'agir de 42 pixels, 46 pixels, ou quoi que ce soit. Sur le côté droit, nous avons une hauteur de ligne un peu plus grande qui est de 1,45 pour cent. Vous pouvez voir comment cela affecte la lisibilité. Aussi, si vous avez une hauteur de ligne très serrée, vous pouvez voir le bas des queues supérieures, et les queues de différents caractères, et le bas de différents caractères va toucher le haut de la ligne suivante. Il s'agit d'un problème de lisibilité très important. Essayez d'ajuster la hauteur de la ligne là où vous pensez qu'elle est plus facile à lire. Maintenant, voici un exemple pour le texte d'en-tête. Vous pouvez voir sur la gauche, je l'ai réglé sur 110 pour cent, et la taille de notre texte est 60 titre de pixel. Sur la gauche, vous pouvez voir qu'il est assez bon. Mais si vous voyez sur le côté droit, j'ai augmenté la taille du texte plus. C' est l'en-tête de 72 pixels, et je l'ai réglé à 1,05 pour cent. Comment on va le calculer ? Soixante-douze multiplient par 1,05, et il est près de 75-76 pixels. En outre, vous pouvez le définir sur 100 pixels. Si vous avez 72 pixels, vous pouvez également définir la hauteur de la ligne, 72 pixels pour les en-têtes plus grands. Permettez-moi de vous montrer comment nous pouvons définir la hauteur de ligne dans Photoshop pour les en-têtes et les textes de paragraphe. Comment on peut le contrôler. J' ai ce texte ici. C' est un titre, et vous pouvez voir, je vais sélectionner ce texte, et je vais obtenir ce panneau de caractères. J' ai déjà ce panneau de caractères A par ici. Vous pouvez voir ici nous avons 72 points qui est notre taille de texte, et c'est le contrôle où nous devons contrôler la hauteur de la ligne. Je peux également le définir à 72 pixels. Vous pouvez voir qu'il a l'air bien. Même je peux aller en dessous de cela, 70 points est également belle. Mais si je vais à 65 ans, cela semble un peu problématique, ou peut-être trop proche de. Vous pouvez voir ici, le i du temps touche le g. Je suppose que 70 pixel comme le dernier que nous pouvons aller et 72 pixel est, je pense, optimal, ou peut-être 75 comme nous l'avions avant. Ceci est toujours défini la hauteur de la ligne. Voyons un autre exemple que je vous ai montré avec le paragraphe. Ici, nous avons eu le paragraphe. Je vais sélectionner ce paragraphe et, vous pouvez voir en ce moment, il est 38 points de taille de texte, taille de police, et la hauteur de ligne est de 55 points. Si j'essaie de l'augmenter à 60, vous pouvez voir, il est toujours bon mais si nous allons au-delà de 60,
comme 72, vous pouvez voir que notre est ne peut pas sauter si loin, dessous il est un peu trop de distance. Si vous continuez à augmenter ces 90 ou 100, vous pouvez voir qu'il ne ressemble pas à un paragraphe mais à des lignes séparées. C' est un très gros problème de lisibilité et de lisibilité, vous devriez les garder à la distance optimale. Je vais le mettre à 50. Voyons voir à quoi ça ressemble. C' est encore un peu proche pour moi, je suppose que 55, c'était mieux. Maintenant, c'est là. Tout est sur la façon dont nous pouvons définir la hauteur de ligne dans Photoshop et quelle hauteur de ligne devrions-nous utiliser pour le corps du texte et quelle hauteur de ligne devrait être utilisée pour le titre suivant. Même en HTML, vous pouvez le définir sur la propriété line-height avec la propriété line-height. Un est 100 pour cent, 1,2 pour cent, et même comme ça. Tout est question de hauteur de ligne, passons à la leçon suivante.
10. Espacement de lettres (noyau: Vous avez peut-être entendu différents concepteurs dire, d'accord, ceci, des défauts ou ce type de crénage est un peu désactivé, ou ces deux mots doivent être crénés. Donc, fondamentalement, le crénage est l'espace entre deux lettres individuelles de n'importe quel type, ou n'importe quelle police, ou n'importe quel mot. Donc, vous pouvez voir ici l'espace entre o et t, c'est essentiellement le crénage. Si nous regardons ce mot, j'ai augmenté le crénage, donc fondamentalement, ils ont un peu plus d'espace entre les deux lettres, voire toutes les lettres. Fondamentalement, ce que cela signifie est que parfois certaines des lettres, si vous pouvez voir ici dans le mot topographie, certaines lettres comme g et r sont un peu plus proches les unes des autres que quelques autres lettres comme p et o et d'autres lettres. Donc, c'est essentiellement appelé Kerning. Voyons comment ce crénage va affecter notre typographie. Donc, ce que cela signifie est si nous essayons d'avoir un bon espace parmi nos différentes lettres, alors il est plus aéré, ouvert, moderne, élégant, lié à la technologie. Si nous avons moins d'espacement des lettres, alors son humeur est vers l'intimité, et vous avez peut-être vu utiliser les lettres très proches les unes aux autres dans différents logos. Fondamentalement, moins d'espacement des lettres est utilisé principalement dans les logos car cela crée vraiment un problème de lisibilité et de lisibilité. Permettez-moi de vous montrer quelques exemples d'espacement des lettres ou de crénage. Je vais vous montrer le mauvais exemple et le fixe. Ici, nous avons écrit le FedEx sous deux formes différentes. Dans la gauche, vous pouvez voir les e et x sont très proches l'un de l'autre. Je n'ai pas modifié l'espacement des lettres. Il s'agit de la police par défaut. En bas, vous pouvez voir que j'ai ajusté l'espace entre e et x, donc le crénage est fondamentalement l'espace entre deux lettres séparées. J' ai fixé le crénage entre E et X. Dans le côté droit, vous pouvez voir les E, D et E, ils semblent avoir plus d'espace. Donc, en bas, j'ai réparé ça. J' ai réduit le crénage entre ces trois lettres et il regarde plus encore à nos yeux. C' est ainsi que nous utilisons le crénage. La plupart du temps, il est utilisé dans les logos. Vous avez vu des logos FedEx, c'est essentiellement un crénage très serré, la plupart des lettres se touchant. C' est ainsi qu'ils ont créé le logo FedEx. Mais c'est ainsi que nous réparons le crénage et quels sont les mauvais et bons exemples de crénage. Laissez-moi vous montrer comment vous allez accéder à ce crénage dans Photoshop. Dans Photoshop, si vous ne voyez pas ce panneau de caractères A ici, vous pouvez aller à la fenêtre et cliquer sur ce personnage ici, et cela apparaîtra ici. Vous pouvez voir ici, nous avons ce V/A et il y a une barre oblique entre deux lettres. C' est essentiellement le crénage. On peut avoir deux options comme l'optique. Vous pouvez voir que le crénage d'espacement des lettres a été décalé. Donc optique est fondamentalement liée à vos yeux, ce que vos yeux voient, et métrique est fondamentalement crénage machine, donc c'est basé sur un logiciel. Ensuite, nous avons zéro et d'autres options ne sont pas disponibles pour cette faute. Ce sont deux options en ce moment. Si vous souhaitez modifier l'espacement entre des lettres spécifiques, sélectionnez cette lettre et utilisez ce contrôle à la place, comme celui-ci. Maintenant, si je l'augmente à 200 pour cent, vous pouvez voir que l'espacement entre a et c a été augmenté. Voici comment j'utilise ce panneau Caractère pour augmenter le crénage. Sélectionnez une lettre, et vous pouvez utiliser ce contrôle de suivi, mais je l'utilise pour des lettres simples comme ça. Tout est sur la façon d'utiliser le crénage dans Photoshop.
11. Exercice de conception pour appliquer ce que nous avons appris jusqu'à présent: Bonjour tout le monde. Dans cette leçon, nous allons concevoir cette page de blog impressionnante. Maintenant, nous avons appris la hauteur de la ligne, espacement des
lettres, le crénage, le suivi, tout. Alors appliquons cela dans cette conception et commençons. Je vais utiliser la police Google pour cet exercice, qui est Source Sans Pro, c'est une seule police Google et sur le côté droit, j'utilise l'image d'un site libre peut être Pixabay ou quelque chose comme ça. Vous pouvez utiliser n'importe quelle image ici. Je vais partager les liens dans la section des ressources alors assurez-vous d'utiliser les liens pour obtenir cette police, Source Sans Pro. Commençons et je vais ouvrir un nouveau fichier et la largeur devrait être 1400 par 1800 pixels, résolution 72 pixels transparente. Ne coloriez pas ce document. Cliquez sur « OK » et ici nous avons notre toile vide. Je vais appuyer sur « Alt+Supprimer » pour le remplir. Nous allons utiliser la couleur blanche comme arrière-plan. Sélectionnez « Blanc » ici, puis à nouveau, appuyez sur « Alt+Supprimer » et ici nous avons notre option Supprimer sur votre Mac. Maintenant, nous avons notre toile vide. Maintenant, nous pouvons commencer à concevoir, mais tout d'abord, nous allons avoir une grille ici pour exposer nos choses. A propos de la grille, je vais l'expliquer dans la section suivante donc ne vous inquiétez pas pour le moment. Fais ce que je fais en ce moment. Accédez à Afficher et Nouvelle mise en page du guide et, dans les colonnes, utilisez le paramètre prédéfini personnalisé. Dans les colonnes, vous pouvez également utiliser cette 8 colonne et gouttière largeur 20 ou si vous voulez plus que cela, vous pouvez utiliser 30 comme ça et cliquer sur « OK ». Maintenant, notre toile est prête. Commençons et j'utilise Real Lorem Ipsum site pour obtenir le texte ici, donc je vais utiliser Chrome pour obtenir cela. Voici les deux ressources que j'utilise pour cet exercice. C' est Real Ipsum site et j'
aime vraiment comment ils ont du texte réel ici avec les en-têtes, tout le reste et nous utilisons la police Google Source Sans Pro. Si vous voulez l'ouvrir dans les polices Google, vous pouvez cliquer ici et aller à cette page et sélectionner n'importe quelle police ici, comme gras, semi-gras, ou peut-être les sélectionner toutes et les télécharger à partir de ce bouton. Cliquez ici, vous pouvez voir ici il est dit, fichier Zip. Téléchargez le fichier zip et installez-le sur votre PC ou Mac. Ce sont les deux ressources que nous utilisons. C' est celui que nous allons utiliser pour l'en-tête, copier ce texte d'en-tête, et nous allons le coller dans notre Photoshop. Sélectionnez cette police standard Source Sans Pro, taille, je vais sélectionner 64 points ou 64 pixels et je vais sélectionner ici, Contrôle V. J'ai le texte ici. Utilisons cette couleur noire grisâtre par ici. Nous allons utiliser Source Sans Pro régulier, mais nous avons besoin d'un hardface par ici. C' est une ligne t
Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years
