La typographie et l'appariement de polices dans la conception de l'interface utilisateur

1. Introduction du cours: Les polices sont un élément crucial de chaque conception, car ce sont elles qui racontent l'histoire, guident l'utilisateur là où il doit cliquer et où il doit aller dans votre conception. Donc, choisir une bonne famille de polices et choisir une bonne famille de polices pour les déchets est vraiment important et vraiment une clé pour avoir un bon concepteur lisible Alex ici, bienvenue dans ce cours Skillshare tout sur polices et familles de polices, poids de police et comment les utiliser. Je suis un créateur de produits de design numérique et j'ai créé jusqu'à présent plus de 500 produits de design différents. Je suis également un créateur de cours et, jusqu'à présent, j'ai créé plus de trois cours différents avec plus de 60 000 étudiants inscrits en vue. Dans ce cours, nous allons parler des différentes polices et familles de polices. Quelle est la différence entre eux ? Que sont les empattements et les sans empattement, différents poids de police et comment les utiliser , les différentes polices, échelles, et comment les utiliser et créer votre propre bot pour choisir les polices pour vos projets. Et enfin, comment associer des polices. Votre projet dépend de la complexité du projet dans le sujet du projet, votre projet de classe Skillshare consiste à créer une échelle de police à l'aide du modèle que j'ai fourni. Assurez-vous de vérifier. Et j'ai une vidéo dédiée dans ce cours sur le projet de classe. N'oubliez donc pas de vérifier cela pour plus d'informations. Savoir comment utiliser les polices dans votre conception sera vraiment bénéfique pour vous en tant que designer. Et cela profitera vraiment à vos utilisateurs, car cela leur donnera plus de valeur. Ils vont y rester plus longtemps parce que c'est une expérience plus agréable pour eux. J'ai donc hâte de vous voir dans ce cours et créons de superbes combinaisons de polices. 2. Polices de polices VS: L'une des principales erreurs que je vois de jeunes designers faire est d'appeler des polices, des polices caractères, ce qui n'est pas vraiment vrai. Typeface est vraiment une famille de polices. Et la police n'est qu'une variation au sein de cette famille. Laissez-moi vous donner un bref exemple. Imaginez que vous utilisiez la police Roboto par exemple. Et puis à l'intérieur de l'autre fonte d'eau, vous avez Bolt, Regular, Fine, Ultra Bold. Ce sont toutes des polices, mais le rapport lui-même est une police. La famille endettée est la principale idée fausse des designers. Ils essaient de pousser l'idée que la police est primordiale alors qu'elle ne l'est pas vraiment. Ce que vous pouvez avoir, c'est différents types de variations de polices à l'intérieur de la même famille ou une bouteille est vraiment un bon exemple car vous avez Roboto regular, Roboto normal et puis vous avez quelque chose appelé roboto slab, qui est complètement une police de caractères, lignes vraiment grasses, et il est vraiment utilisé principalement pour l'impression, mais vous pouvez également l'utiliser dans une sorte de conception Web audacieuse. Mais c'est là le point essentiel. N'essayez pas de confondre polices avec des familles de polices, car les familles de polices peuvent contenir plusieurs polices différentes. Et les polices ne sont que des variations au sein de cette famille de polices. Comme je l'ai dit, il peut y avoir plusieurs polices au sein d'une même famille. Alors gardez cela à l'esprit et ne vous y trompez pas. Vous pouvez utiliser toute la famille ou police à l'intérieur de votre design, ou vous pouvez simplement utiliser une variante telle que, disons dans cet exemple, Roboto regular ou Roboto bold. Nous allons y revenir dans quelques vidéos de ce cours. Mais je voulais juste le souligner. 3. Types de polices: Souvent, lorsque j' interviewe de jeunes designers lorsque je leur parle, ils ne savent pas vraiment quelle est la différence entre Serif et Sans Serif en matière de police, c'est vraiment super simple. Et je suis allé de l'avant et j'ai trouvé un très bon article. Je vais le lier dans le fichier de ressources de la classe. Alors assurez-vous de le regarder et lire vous-même car nous n'allons pas l'approfondir trop dans cette vidéo, mais je veux juste vous montrer rapidement quelles sont les différences entre les empattements, sans empattement, et lorsque chacun d'entre eux est utilisé. Voici donc cet article que j'ai mentionné et qui provient d'Adobe.com, Creative Cloud Design Discover. Et je vais laisser le lien vers cet article, comme je l'ai dit dans les fichiers de ressources de la classe. Vous pouvez donc voir quelques exemples ici. Peut-être que cela ne vous permet pas de vous distinguer. Vous avez peut-être vu des polices comme celles-ci. Vous avez peut-être vu des polices comme celles-ci. Mais quelle est réellement la différence entre Serif et Sans Serif ? Nous avons donc ici l'indice dans le nom et la principale différence entre ces polices. Donc ces choses à la fin de la lettre elle-même sont du surf. Et vous pouvez voir ici, nous n'avons pas ce surf de sable, si je ne me trompe pas, c'est français. Donc sans ces empattements à la fin. C'est donc la principale différence entre les serfs et les serveurs d'envoi. Maintenant, quand vous pouvez les utiliser, vous pouvez voir quand utiliser des polices avec empattement. Il va donc être très détaillé savoir quand les utiliser et comment les utiliser. Vous pouvez les voir en version imprimée ici. Alors n'oubliez pas de consulter cet article pour en savoir plus à ce sujet. Et bien sûr, vous pouvez en savoir plus sur le moment où les trouver. Mais en un mot, quand utiliser des empattements et des capteurs, c'est vraiment très simple. Tout dépend du sujet de votre conception et de la direction de conception de votre conception et de ce pour quoi vous concevez. Ainsi, par exemple, si vous concevez design de site Web audacieux, peut-être quelque chose de nouveau, quelque chose de nouveau, quelque chose pour la jeune génération, vous n'allez pas utiliser de serveurs, qui sont les polices avec ces éléments. À la fin de chaque lettre, vous allez utiliser des polices sans empattement car les polices Cera sont vraiment attribuées à quelque chose d'ancien. Et si vous concevez pour quelque chose d' ancien, par exemple, vous créez une sorte de site Web vintage ou vous organisez une sorte de salon de voitures anciennes peut-être ou quelque chose qu'ils ont résolu. Ensuite, vous allez utiliser les polices Serif, qui ont ces éléments à la fin des lettres. Mais en règle générale, si vous ne concevez pas pour quelque chose de traditionnel, d'élégant, de vieux, vous allez utiliser ces polices sans empattement, car elles sont polices plus modernes et plus disponibles à l'utilisation, en particulier dans la conception de sites Web, car elles fonctionnent en ligne et sont optimisées pour le travail en ligne, pour la lisibilité, l'accessibilité, des polices plus modernes et plus disponibles à l'utilisation, en particulier dans la conception de sites Web, car elles fonctionnent en ligne et sont optimisées pour le travail en ligne, pour la lisibilité, l'accessibilité, évolutivité, pour toutes ces raisons, polices sans empattement sont bien meilleures à utiliser, en particulier dans la conception de sites Web. Mais comme je l'ai dit, vous pouvez toujours trouver des milliers de polices avec empattement différentes si vous souhaitez les utiliser dans votre conception Web ou la conception de votre application. Tout dépend de votre sujet, de ce pour quoi vous concevez, de votre public cible, ce que vous essayez de transmettre, du type d'émotion, type d'épanouissement avec la police c'est à vous de choisir. Il suffit donc de garder ces éléments à l'esprit lorsque vous concevez pour le Web. 4. Poids de police et comment les utiliser: Lorsque vous commencez à utiliser une famille de polices, en fonction de la famille elle-même, vous verrez qu'elle contient de nombreuses polices différentes, qui sont étiquetées avec des noms différents tels que regular teen bold, extra bold, italic, gras, italique et beaucoup, beaucoup d'autres, selon la famille de polices elle-même. Ce sont des poids. Et comment utiliser ces poids dans différents scénarios. C'est ce dont nous allons parler dans cette vidéo. Et je vais vous montrer un exemple et vous donner juste une idée de l' endroit où les utiliser. Voici donc l'exemple, et je suis dans Adobe XD, s'agit du fichier de conception d' un de mes cours précédents, et je l'utilise simplement comme exemple juste pour vous montrer toutes ces différentes épaisseurs de police et comment utiliser pour mettre en valeur ce que vous voulez montrer dans vos créations. Donc ce que nous avons ici à l'intérieur de la section des héros, si je le sélectionne et que je viens juste ici sur le côté droit. Alors laisse-moi juste choisir celui-ci. On y va. Vous pouvez voir que le nom de la police est Open. Sans, la taille est 24 et le poids est régulier. Alors pourquoi est-ce régulier ? Eh bien, parce que je voudrais juste que les gens voient ça en premier, qui est évidemment plus grand, plus prononcé et de couleur différente. C'est ce qu'on appelle le point d' attention parce que je veux d'abord attirer leur attention sur ce texte blanc, parce que je voulais qu'ils lisent ce texte en premier. Par conséquent, je veux qu'il soit différent de ce texte en haut et en bas pendant qu'ils sont ici au centre en train de lire que cette héroïne est un hôtel-boutique. Je veux qu'il voie qu'il y a un autre texte en haut et en bas. Ensuite, j'ai envie de les lire. Je veux qu'ils le lisent parce qu'ils sont là. Donc, si je lance rapidement le prototype ici, vous pouvez voir à quoi il ressemble. Alors me voilà dans la section des héros et tout ce qu'ils peuvent voir c'est ça. Votre regard est donc naturellement attiré vers le milieu de cette page, vers le milieu de cette image. Et vous pouvez lire que cette héroïne est boutique-hôtel après avoir été endetté. Vous pouvez voir tout ce qu'il y a d'autres textes là-bas. Bienvenue au boutique hôtel Helen's. OK, chez toi, loin de chez toi. C'est donc le poids de la police. Voilà comment les utiliser. Et vous remarquerez que cette police est différente. Vous pouvez voir que c'est du surf, comme nous l'avons mentionné dans une précédente vidéo. Alors pourquoi est-ce ? Parce que l'image de marque de cet hôtel et de ce design l'exige vraiment. Et c'est pourquoi j'ai opté pour ce genre de look. Donc si je choisis cela, vous pouvez voir qu'il s'appelle Playfair display 70, qui est la taille de la police, beaucoup plus grande dans ce cas. Parce que non pas pour mentionner, encore une fois, toutes ces choses que j'ai mentionnées, mais pour attirer l'attention là-dessus. Et puis vous pouvez voir le gras froid, italique est le poids. C'est Italica. C'est donc un peu penché vers la droite et c'est audacieux. Elle est plus prononcée qu'en police normale. C'est ainsi que vous pouvez équilibrer poids de vos polices dans de nombreux exemples différents. Et si nous faisons défiler un peu vers le bas, vous pouvez voir encore une fois, voici cette même police maintenant dans une couleur différente pour obtenir le contraste entre fond blanc et la police elle-même. Et vous pouvez voir votre maison loin de chez vous. Donc, encore une fois, nous revenons peut-être à ce slogan. Ensuite, vous pouvez voir quelque chose de vraiment intéressant ici. Donc si je sélectionne celui-ci, vous pouvez voir qu'il s'agit d'un boulon Open Sans 24. Et si je sélectionne celui-ci, Open Sans 24 regular. Et vous pouvez voir simplement en sélectionnant boulon et régulier et en choisissant une couleur différente, je pointe leur direction je pointe leur direction et leur attention dans une direction différente. Dans cet exemple, vous pouvez le voir, j'ai eu envie de lire ce sous-titre parce que c'est vraiment important. Je veux que leur esprit attentif à ces trois choses. Donc, les lits king size, la nourriture, y compris l'accès à la plage, car ce sont arguments de vente clés vraiment importants pour ce site Web en particulier afin d' attirer de nouveaux visiteurs. Et puis s'ils le souhaitent, bien sûr, ils peuvent lire le texte en dessous. C'est pourquoi celui-ci est audacieux et celui-ci est régulier. Celui-ci a une couleur légèrement plus foncée que celle-ci parce que je veux que ses yeux soient d' abord attirés par ce texte. Même histoire avec ça et avec ça ici. Si vous faites défiler un peu maintenant, nous pouvons voir les mêmes textes ici. boutique hôtel Headwinds est très bien. Et voici une citation d'un de nos anciens clients sur ce site ou un témoignage, vous pouvez voir Jenny de Londres, mais celui-ci est beaucoup plus prononcé. C'est beaucoup plus grand. Donc, si je le sélectionne et que je viens juste ici, vous pouvez voir que c'est Open Sans 36 italique. Et il a cette couleur plus foncée que celle-ci, qui est irrégulière Open Sans 24. Encore une fois, je veux qu'ils lisent d' abord la citation , puis qu'ils voient de qui est la citation. Le nom dans ce cas n'a pas vraiment d'importance. Vous pouvez vous en débarrasser pour les séquences de mise en page. Peu importe ce qui compte c'est leur expérience avec cet hôtel, car le prochain client que vous essayez d'acquérir pour votre hôtel voudra d'abord vivre cette expérience. fichais vraiment, est-ce que c'est Jenny, utilise-le, Mark, est-ce qui que ce soit ? Ils ne s'en soucient pas vraiment, ils se soucient vraiment de l'expérience. Ensuite, vous pouvez voir le contraste dessous avec le bouton Livre maintenant, qui est bleu et contient du texte blanc. Encore une fois, pour des raisons de contraste, si nous faisons défiler un peu vers le bas, vous pouvez le voir tout au long de ce design. Et pas seulement ce design, mais chaque design que je crée. Parce que je pense toujours à ces choses-là. Qu'est-ce qui est le plus important ? Qu'est-ce qui est le moins important ? Qu'est-ce que les gens vont voir en premier ? Et comment puis-je accentuer cela avec mes polices et mes épaisseurs de police ? Vous pouvez le voir ici. Donc, pour les noms de la pièce, police est beaucoup plus grande que toutes celles ci-dessous. Et vous pouvez le voir avec les fonctionnalités, oui et non. Bien entendu, nous choisissons ensuite différentes couleurs pour montrer quelles fonctionnalités sont disponibles celles qui ne le sont pas. Et puis nous avons encore une fois le style différent avec le lien ci-dessous. Pour en savoir plus, ils peuvent cliquer sur ce lien, c'est différent. Alors quand le, comment va, ils verront le changement. Vous devez donc réfléchir à toutes ces choses. Ici. Vous pouvez voir les fonctionnalités. Nous avons donc une piscine privée, nous avons un beau jardin, nous avons un parking privé. Tout cela est super facile à lire dans un but précis. C'est pourquoi j'ai choisi cette police, qui est beaucoup plus grande, qui est un peu différente, qui est boulder, a une couleur plus foncée que la police en dessous. Une fois de plus, j'utilisais Open Sans comme police principale. Celui-ci juste ici, et Playfair affiche cette grosse police en gras. Encore une fois, si nous faisons défiler un peu vers le bas, vous pouvez voir cela se reproduire. Alors visitez Délos, qui est le titre, et voici le texte. Donc si je ne veux pas lire ce texte, tout ce que je peux voir et tout ce que j'ai besoin de savoir, c' est de visiter Délos. Il y a donc quelque chose à faire lors des expositions. Et si nous faisons défiler la page un peu vers le bas, encore une fois, réservez votre séjour chez nous. Cela les invite donc vraiment à réserver leur séjour dans cet endroit. Et encore une fois, vous pouvez voir ce contraste ici même avec le fond blanc et ce texte gris foncé. Et le dernier exemple est l' inscription à des bulletins d'information. C'est donc vraiment vous appeler à l'action, à passer à l'action. Et puis voici ce que vous voyez. Tout d'abord, inscrivez-vous à une newsletter. C'est ce que vous voyez ensuite, et c'est encore une fois dans un but parce que je veux prononcer ça, inscrivez-vous à une newsletter parce que c'est l'action que je veux qu'il entreprenne. Et puis une fois que j'ai leur attention en m' inscrivant à la newsletter, inscrivez-vous et recevez des nouvelles et des mises à jour et blah, blah. C'est vraiment secondaire parce que je veux qu'ils restent sur cette partie de la page le plus longtemps possible. C'est ainsi que vous pouvez utiliser des polices, des modes de police et différentes couleurs, et peut-être même différentes familles de polices pour accentuer ce que vous souhaitez que vos utilisateurs voient sur votre page. Vous pouvez l'explorer beaucoup plus en détail. Et en fonction de votre palette de couleurs pour votre projet, cela peut être vraiment encore plus complexe ou même plus simple que l'exemple que je viens de vous montrer, qui ne contient que quelques couleurs. 5. Choisir les polices: Lorsqu'il s'agit de choisir des polices pour votre projet, il y a deux considérations principales à prendre en compte. Vous devez avoir des polices existantes et le thème principal du projet, les polices existantes sont évidemment les polices que votre client utilisait auparavant. Ensuite, vous pouvez jeter un œil à ces polices. Voyez toute la famille de polices, voyez ce qu'elle contient et réfléchissez peut-être à la manière dont vous pouvez l'accentuer un peu plus. Ce dont nous avons parlé dans une précédente vidéo de ce cours. Comment pouvez-vous les utiliser un peu différemment pour montrer certaines caractéristiques principales du produit ou d'un service proposé par votre client. Ensuite, vous pouvez regarder les couleurs, voir comment la famille de polices précédemment utilisée avec ces différentes couleurs. Peut-être que si vous en avez la capacité, vous pouvez peut-être changer ces couleurs. Peut-être que vous pouvez inclure des couleurs plus foncées, des couleurs plus claires. Peut-être que vous pouvez ajouter des nuances de ces différentes couleurs qu'ils utilisent déjà ou introduire nouvelles couleurs entièrement dans le projet pour donner plus de vie et plus de talent au projet. sur lequel tu travailles. L'autre méthode consiste à utiliser de nouvelles polices. Et lorsque vous choisissez de nouveaux fonds, faites attention à ce que j'ai déjà mentionné dans l'une des vidéos précédentes. Apprécié du projet lui-même. Évidemment, vous n' allez pas utiliser ces polices audacieuses, lumineuses et loufoques. Si vous créez un site Web pour une banque, peut-être parce que la banque essaie transmettre un sentiment de confiance, de sécurité, de stabilité. Je ne connais pas la noblesse dans certains cas. Vous devez donc y prêter attention. Quel est l'objet de votre projet ? Qu'est-ce qu'il a essayé de transmettre aux utilisateurs eux-mêmes ? faut donc utiliser ces polices qui vont bien correspondre à l'équipe du projet. Bien sûr, si le projet est bon, disons que vous créez un site Web pour une société de bandes dessinées ou un magasin de jouets ou tout type de contenu lié aux enfants tel que jeux, des peluches ou des meubles, peu importe ce que ça a à voir avec les enfants. Mais même avec les enfants, il y a encore des limites quant au moment où vous pouvez utiliser certaines polices façon dont vous pouvez les utiliser. Parce que l'héritabilité est vraiment la clé, en particulier en ligne, vous voulez vous assurer que vos polices sont lisibles en fin de compte, quel que soit votre public cible, peu importe si c'est sérieux ou ludique, s'il est coloré, tout en monochrome, vous voulez quand même savoir s'il est lisible ou non. Et pour ce faire, vous pouvez le tester sur différents appareils. Lorsque vous créez un site Web, par exemple, vous devez le tester sur de grands écrans tels que les écrans de bureau et les écrans d'ordinateurs portables, mais vous devez également vous assurer qu'il fonctionne bien et qu'il est lisible sur des écrans plus petits tels que Forms. Si vous utilisez quelque chose comme Webflow, c'est très facile à faire. Créez simplement une page réactive à partir de votre conception et envoyez-vous simplement le lien, peut-être envoyer ce lien à quelqu'un qui est plus âgé, au nouveau peut-être, et voyez s'il peut lire facilement si la couleur le contraste est bon, si les épaisseurs de police sont bonnes, si votre rythme de couleur est bon. Ils peuvent donc vraiment le lire. Ils peuvent vraiment le comprendre et voir ce que vous essayez de transmettre dans cette page en particulier. Assurez-vous donc de toujours tester, toujours penser à l'avance. qui parlez-vous ? À qui parles-tu ? Quel est votre public principal ? Et la police est-elle lisible en utilisant ces couleurs sur ce fond ? 6. Associer des polices: Parfois, dans certains exemples, vous souhaitez utiliser différentes familles de polices, comme dans l'exemple que je vous ai montré précédemment avec ce site de voyage. Peut-être souhaitez-vous afficher une section différente de cette page ou une application mobile utilisant une certaine famille de polices. Et puis une autre section, peut-être voulez-vous qu'ils aient l' impression de lire un article. Par conséquent, vous n'allez pas utiliser une police folle et loufoque. Vous voulez simplement résumer une vieille police ordinaire, vraiment lisible, compréhensible et super facile à voir et à lire pour eux. Par conséquent, vous devez connaître couplage de polices et comment associer des fonds ? Eh bien, il existe différents outils en ligne qui peuvent vous aider. Et je vais en montrer quelques-unes dans cette vidéo en particulier. Nous voici donc avec la première de ces variantes de type froid. Et j'ai déjà créé une vidéo YouTube. Je vais le relier dans les ressources de la classe. Vous pouvez simplement cliquer et regarder cette vidéo complète dans laquelle j' explique tous ces différents outils. Mais je vais juste vous donner un bref aperçu. Dans cette vidéo en particulier, vous avez de l'inspiration et des guides qui vous guident sur la façon de coupler ces différentes polices. Encore une fois, tout dépend de ce qui a déjà été mentionné à quelques reprises dans cette vidéo, du sujet de votre projet et du public auquel vous essayez de vous adresser. Par conséquent, vous n'allez pas utiliser des polices loufoques comme cela ne cesse de le mentionner aux banquiers, par exemple, ou à un public sérieux. Mais vous pouvez aller dans l'autre sens avec les enfants et utiliser des couleurs plus ludiques et des polices plus ludiques. inspiration de type est donc le premier site Web et vous pouvez choisir de nombreux styles différents. Vous pouvez voir Open Sans et de la crème. Certains textes sont les polices utilisées ici. Voici les couleurs. Vous pouvez choisir différentes couleurs parmi. Ici vous pouvez choisir les polices de titre, vous pouvez choisir les polices de corps. La police de titre est celle qui se trouve juste en haut, qui est utilisée pour les en-têtes ou pour les titres. Et la police du corps est celle-ci juste ici, qui est utilisée essentiellement pour les paragraphes et pour tout le contenu qui contient plus de texte. Et il est davantage destiné à des tarifs plus longs. Fondamentalement, les titres sont plus de glandes, mais vous pouvez également les lire très rapidement. Mais les paragraphes, vous pouvez vraiment avoir à passer votre temps à les lire. Et c'est le point principal ici. Avec les paragraphes, vous pouvez explorer différentes polices et épaisseurs de police. Mais avec les paragraphes, vous voulez vous assurer que votre police est lisible, que la couleur a un beau contraste avec l' arrière-plan. Et ce n'est vraiment pas trop fatiguant pour vos yeux de passer plus de temps à lire cet article, surtout s'il y a un article plus long, si vous créez un site Web pour , par exemple, extrêmement important. C'est le problème clé que vous devez abord et immédiatement aborder dans ce projet en particulier, car l'intérêt d'un site d'actualités est les gens passent beaucoup de temps à lire ces articles. Par conséquent, vous voulez avoir une bonne police qui soit vraiment lisible. Et ces titres qui sont vraiment consultables parce que vous ne voulez pas ils ressortent trop, en particulier dans ce type de sites Web, parce que vous voulez qu' ils continuent à passer à la lecture ces articles ci-dessous. Alors explorez ce site Web. Comme je l'ai dit, je vais pointer du doigt la vidéo que j'ai déjà créée sur ma chaîne YouTube à ce sujet. Et j'explique cela plus en détail. Et je vais laisser les liens dans cette vidéo, alors jetez-y un œil. La paire de polices en est une autre. Vous pouvez donc voir ici que nous avons une plaque à empattement sensoriel. Vous pouvez donc voir que c'est une sorte d' écriture manuscrite d'affichage monospace. Il existe donc un tas de styles de police différents parmi lesquels vous pouvez choisir. Et vous pouvez voir toutes ces polices importantes et la police principale. Vous pouvez voir les combinaisons ici, vous pouvez voir plus de paires de polices. Choisissons donc les polices d'affichage et il va vous montrer toutes ces polices d'affichage. Vous pouvez les découvrir. Ensuite, nous avons ceci, qui est des appariements de polices, point py people.com. Vous pouvez sélectionner une famille de polices ici. Et après cela, vous pouvez choisir différents styles de textes et le style. Donc c'est régulier, c'est en gras, cette dalle de textes secondaires, qui est ce texte de paragraphe que nous venons de mentionner. Ensuite, il vous donnera des appariements disponibles. Et enfin, Font Joy, qui est super, super simple à utiliser. Nous avons donc Generate et cela va générer une paire de polices différente. Vous pouvez choisir plus de contraste ou vous pouvez choisir plus de similitude ou de contraste équilibré. Vous pouvez passer du noir au blanc pour voir à quoi cela va ressembler. Surtout si vous concevez un mode sombre sur votre site Web ou votre application, vous pouvez voir les appariements de polices et différentes tailles de texte, différents poids, etc. Nous voici donc Montserrat, qui est celui-ci juste ici. Ici, nous avons cette police Varney simulée, qui est celle-ci juste ici. Ainsi, vous pouvez voir H1, H2 et le paragraphe ou le titre d'un titre, deux paragraphes ou un titre principal , un sous-titre et un paragraphe. Sanchez est le texte du paragraphe lui-même. Vous pouvez donc cliquer sur. Cela vous amènera à Google Fonts, ce que cette police Sanchez est composée de quatre. Ensuite, je peux cliquer ici et je peux choisir, je ne sais pas, peut-être celui-ci juste pour voir à quoi il ressemble. Si je n'aime pas ça, ça va aller de l'avant et changer ça. Disons que je n' aime pas vraiment ceux-ci ou celui-ci. Peut-être que je peux opter pour quelque chose d'un peu plus brillant comme celui-ci. Je peux le verrouiller ici. Et ça va verrouiller ce Montserrat. Je n'aime pas vraiment celui-ci, donc je peux aller de l'avant et générer plus. Vous pouvez voir que Montserrat est verrouillée, peut-être que j'aime bien celui-ci, mais je n'aime pas celui-ci. Nous pouvons aller droit au but. Vous pouvez toujours faire défiler la page vers le bas. Et à la fin, lorsque vous trouverez la combinaison de polices parfaite que vous souhaitez utiliser, comme je l'ai mentionné, vous pouvez cliquer ici. Cela va vous mener à Google Fonts. Assurez-vous de télécharger la famille de police Montserrat in Montserrat, puis de les découper. Et le pylône Quinn, dans cet exemple particulier, s' assure de tous les télécharger, les installer sur une machine. Vous avez donc toutes ces différentes épaisseurs de police, comme je l'ai mentionné, du gras normal, et bien plus encore. Tu y vas. Voilà à quel point il est facile de faire une paire de polices. Faites attention à qui suit, au contraste, à la lisibilité et au sujet de ce que vous concevez en premier lieu. Vous avez tout réglé. Ensuite, ce sera vraiment facile à concevoir et à peine facile à tester. Et en ce qui concerne les tests, assurez-vous de toujours les tester auprès de votre public, surtout si vous y avez accès. Ainsi, par exemple, si vous concevez pour des enfants, vous pouvez peut-être avoir accès aux enfants et voir comment ils interagissent avec le prototype, comment ils interagissent avec le site Web, avec application mobile. Est-il facile pour eux de comprendre où ils doivent cliquer plutôt que de tomber sur ces différents éléments de votre conception ? Peut-être que quelque chose leur attire trop l'attention. Ou si vous travaillez avec un public plus âgé, peut-être comme je n'arrête pas de mentionner les banques, peut-être avez-vous accès aux personnes qui travaillent dans la banque. Si vous travaillez pour une banque dans ce cas précis, vous pouvez peut-être le tester avec elle, lui confier une tâche concrète, lui confier une tâche concrète, voir à quel point il est facile pour elle de trouver cette tâche, à quel point c'est facile pour pour naviguer dans votre application et voir à quel point il est facile pour eux de lire le texte vous essayez d'afficher sur cette page en particulier. 7. Échelle de police: Lorsque vous concevez pour le Web ou pour des applications mobiles, vous souhaitez avoir une mise à l' échelle composée de vos tailles et épaisseurs de police. Et cela peut être réalisé avec une échelle de police. Vous pouvez créer une échelle de police, il sera donc beaucoup plus facile pour les développeurs de comprendre plus tard quel type de taille de police est destiné à quoi, et c'est ce que vous pouvez inclure dans votre guide de style, juste pour les afficher à côté de votre les couleurs , ainsi que vos images, vos styles et bien plus encore. Dans cette vidéo, je vais donc vous montrer comment créer une échelle de police simple. Vous n'êtes pas obligé d'utiliser cette approche. Vous pouvez trouver d'autres approches en ligne. Il existe littéralement des dizaines d'approches différentes en ligne. Découvrez celui qui fonctionne pour vous, votre projet et vos objectifs de mise à l'échelle. Alors commençons. Nous voici donc dans Adobe XD et je vais simplement vous montrer comment créer une échelle de police rapide à l'aide d'Adobe XD. Si vous utilisez Figma Photoshop, tout ce que vous pouvez y créer. Mais pour cela, je vais utiliser x D parce que je l' aime vraiment et je l'utilise tous les jours. Je vais donc cliquer sur T pour créer H1, par exemple. Alors ce que je vais utiliser, c'est, disons une bouteille comme ça. Au lieu de la normale, je vais opter pour , disons, du noir. Et je vais opter pour une taille de 80. Vraiment énorme. Et ça va être mon H1. Peut-être, peut-être même plus, peut-être 88, quelque chose comme ça. On y va. Ensuite, je vais appuyer sur Control D ou Command D, et baisser ce chiffre à quelque chose comme 64. Tu y vas. Au lieu du noir, je vais choisir Bolt. Et au lieu de H1, je vais l'appeler H2. Ce qui est créé ici est donc une distinction claire entre Heather. Bruyère. Heather One est quelque chose que je vais utiliser dans mes images de héros, par exemple, au centre du design lui-même, au centre de ces images de héros. Contrairement à l'exemple que je vous ai montré précédemment. Mais celui-ci est juste plus accentué, plus grand, plus audacieux, noir dans ce cas, mais celui-ci est audacieux parce que je veux peut-être l' utiliser comme titre de mes sections peut-être ou quelque chose comme ça. Par conséquent, il est audacieux et non noir et c'est 6488. Donc, si nous descendons un peu plus loin, vous pouvez créer un H3 dans ce cas. Et au lieu de 64, nous pouvons peut-être en utiliser 48 pour ce cas. Et au lieu de Bolt, en fait non, restons audacieux pour ça. Ensuite, si nous descendons un peu, nous pouvons créer quelque chose comme H4. Et au lieu de 48, nous pouvons peut-être opter pour 40, dans ce cas n. Utilisons une régulière cette fois. Vous pouvez donc clairement faire la distinction entre ces deux éléments. Donc si nous descendons un peu H5, et dans ce cas, peut-être que nous pouvons utiliser quelque chose, je ne sais pas, 24. Peut-être qu'on y va. Peut-être pouvons-nous utiliser cela comme texte de paragraphe ou quelques exemples ou quelque chose comme ça, quelque chose qui est un peu plus petit et H6, allons-y, je ne sais pas, 16 peut-être que dans mes cas, je ne veux vraiment pas y aller au-delà de 16. Nous avons donc H1, H2, H3, H4, H5 et H6. Peut-être pouvez-vous renommer ce H6 et l'appeler textes de paragraphe. Peut-être pouvez-vous montrer quelque chose comme ça à vos développeurs, voir ce qu'ils en pensent. Et ce que vous pouvez également faire, c'est appuyer une fois de plus sur Ctrl D sur chacun d'eux et taper l'alphabet. Donc a, a, B, B, B , C, C, D , D, E, etc. Vous pouvez donc taper l'alphabet entier et afficher le poids de la police et la taille de la police dans cet exemple particulier sur l'alphabet, ou quelque chose d'autre que vous pouvez faire est utiliser quelque chose comme Je ne sais pas, le texte de Lorem Ipsum ou quelque chose comme ça. Je n'ai pas le raccourci clavier ici, et le plug-in n'est pas installé ici. Alors allons-y avec ça. Alors Lorem Ipsum ROC s'est rencontré, peut-être pourrais-je copier ce texte et ensuite je pourrai faire de même avec celui-ci. Il suffit de le coller. Et ce que cela va vous permettre de faire , c'est de montrer à votre client et à vos développeurs à quoi ressemblera un texte particulier dans des cas d'utilisation particuliers. Disons donc que j'ai volontairement commencé avec cette couleur particulière. Et la raison pour laquelle j'ai choisi de le faire c'est simplement pour vous montrer les principales différences entre ces textes. Mais dans ce cas précis, ce que je ferais exprès, c'est que j' irais rapidement de l'avant et que je changerais cette couleur pour quelque chose de beaucoup, beaucoup plus sombre. Et peut-être l'enregistrer ici en tant qu'échantillon de couleur. Ou je peux continuer et modifier mes couleurs ici. Alors ce que je peux faire, c'est. Débarrassez-vous de celui-ci. Peut-être que je peux aller de l'avant et choisir la même couleur, mais aller quelques pas vers quelque chose comme ça, puis choisir une couleur différente. Et ce que vous pouvez faire, c'est donner nom de vos échantillons immédiatement. Donc celui-ci est H2, couleur. Tu y vas. Celui-ci est H1. Et peut-être que nous pouvons aller encore plus loin. Désolée, voyons si c'est un H2. Je peux donc revenir en arrière et utiliser le H12 puis passer à la vitesse supérieure, quelque chose comme ça. Gardez-le ici, enregistrez-le ici, appelez cet âge de trois ans. On y va. Et enfin, peut-être que je voudrais opter pour quelque chose d'encore plus brillant. Pour celui-ci, peut-être, peut-être pas, mais c'est vraiment à vous de décider. Peut-être quelque chose comme ça. Tu y vas. Et je peux lui donner le nom de H4. Dans ce cas particulier, vous pouvez voir qu'ils sont vraiment similaires. Mais il y a l' intérêt de cette vidéo, mais vos clients ont peut-être la couleur principale, disons que le bleu est leur couleur principale. Donc, dans ce cas, nous pouvons opter pour quelque chose comme trois C6 FF peut-être. bleu très vif et fort, c'est peut-être leur couleur principale. Alors, comment intégrer cette couleur dans votre design ? De toute évidence, vous n' allez pas l'utiliser pour cela. C'est vraiment pour les sections de héros et tout ça, ce que j'ai déjà mentionné. Peut-être allez-vous l' utiliser pour chacun des trois. Donc trois est C6, F, F. Et comme vous pouvez le voir tout de suite, cela semble beaucoup mieux dans cet exemple que dans cet exemple. Pourquoi est-ce que c'est ? Parce que si vous l'utilisez pour la plus grande taille de texte que vous avez dans votre conception, cela volera simplement l' attention de l'utilisateur sur tout le reste. Ce n'est pas quelque chose que tu veux. Le texte est vraiment là pour expliquer les choses afin de guider vos utilisateurs vers ce qu'ils doivent faire ensuite, et pour vraiment les aider atteindre l'objectif leur visite sur votre site Web ou votre application mobile en particulier. Dans ce cas, j'utiliserais couleur pour le texte, quelque chose comme ceci. Et je ne l'utiliserais pas pour les textes de paragraphes car, comme je l'ai mentionné précédemment, vous voulez que vos paragraphes soient lisibles. Vous voulez qu'ils soient facilement compréhensibles et que vos utilisateurs puissent naviguer facilement tout au long de votre conception. Une dernière chose que j'ai oublié de faire est de sauvegarder cette couleur. Nous l'avons déjà. Tu y vas. Donc H5, je veux le sauver. On y va. H5. Et nous allons utiliser la même couleur pour le paragraphe lui-même. Et une dernière chose que je veux faire est de sélectionner toutes mes tailles de police, d'accéder directement aux styles de caractères et de cliquer là. Vous pouvez donc voir qu'il va les assortir, quelque chose comme ça. Mais ce que je peux faire, c'est aller sur Control ou Command Z. Cliquez ici pour enregistrer celui-ci pour qu'il soit le premier. Et puis comme ça, puis comme ça, et il suffit de monter et de monter. On y va. Et bien sûr, vous pouvez les renommer. Vous pouvez venir ici et taper H1. Et vous pouvez le faire avec tous ces autres. Donc H2, H3, et ainsi de suite et ainsi de suite. Je ne vais pas trop t'embêter avec ça. Mais le but ici est de les renommer. Comme je l'ai dit, il est beaucoup plus facile pour les développeurs de comprendre plus tard ce que vous essayez de transmettre si vous n'allez pas développer ce design vous-même. Alors allons-y. C'est comme ça que c'est super facile à utiliser. Et vous pouvez voir si vous vous trompez comme je l'ai fait tout à l' heure, vous pouvez simplement voir les arcades en H1 sélectionnées ici. Ou si vous avez accidentellement changé la couleur, vous pouvez continuer et voir, d'accord, c'est un clic H1 juste là, et il va utiliser la couleur correspondante. Vous pouvez donc voir à quel point c'est super simple. Et je vais vous fournir ce fichier, que je viens de vous montrer en tant que fichier d'entraînement pour vous afin que vous puissiez le tester. Fouillez, exploitez pour vous-même, peut-être en jouant avec ces différentes couleurs qui viennent de vous être montrées, ou peut-être des familles de polices entièrement différentes. Nous utilisons donc Roboto dans ce cas particulier, peut-être voulez-vous utiliser quelque chose avec une surface à l'intérieur, comme la police d'affichage Playfair, que j'ai mentionnée précédemment, ou voulez-vous être encore plus audacieux que Roboto ? Tu peux le faire correctement. Là-bas. On y va. Ce sont les échelles de police, et c'est ainsi que vous pouvez les utiliser. Comme je l'ai dit, vous allez avoir ce fichier d'entraînement, assurez-vous de l'exploiter, assurez-vous de jouer pour obtenir un résultat parfait. Ou si vous n'aimez pas cette approche de huit pixels, comme je l'ai dit au début de cette vidéo, vous avez un tas de ces exemples différents en ligne. Assurez-vous de les explorer par vous-même et de voir ce qui fonctionne le mieux pour vous. 8. Votre projet de cours: Votre projet de classe consiste à créer votre propre échelle de police, à l' enregistrer sous forme d'image et à la télécharger dans vos projets de classe. Ainsi, moi et tous les autres participants au cours pouvons voir ce que vous avez créé. Vous pouvez donc utiliser ce modèle que je vais fournir dans les documents de la classe. Vous pouvez le télécharger et vous amuser par vous-même. Assurez-vous d'utiliser différentes polices, familles de polices de différentes couleurs juste pour obtenir vos différents résultats. Et vous pouvez explorer avec deux polices de caractères. Je ne recommande pas d' aller plus loin parce que je n'aime pas vraiment quand les gens utilisent plus de deux polices, je ne pense pas vraiment que ce soit nécessaire, mais vous pouvez en faire ce que vous voulez, ou vous pouvez même ajouter d'autres tailles. Vous pouvez jouer avec différentes tailles et vous pouvez regarder ce que j'ai créé ici avec toutes ces couleurs et styles de personnages différents, assurez-vous de jouer avec eux pour obtenir un résultat parfait. Et puis, comme je l'ai dit, téléchargez-le dans vos projets de classe. J'ai hâte de voir ce que vous allez créer et je suis impatiente de voir comment vous allez adapter ce modèle que j'ai créé dans Adobe XD. 9. Conclusion: Alors voilà, c'est tout pour ce cours. J'espère vraiment que vous avez mieux compris les familles de polices, les polices, les différents poids de police, comment et quand les utiliser, ainsi que ce que Sarah est pour une personne sensible et quand utiliser ceux-ci, ainsi que, enfin, qu'est-ce qu'une échelle de police et comment l'utiliser. J'espère vraiment que ce cours vous a plu. Assurez-vous de consulter le PDF avec toutes les ressources que j'ai mentionnées. N'oubliez pas de consulter le fichier d'exercices pratiques et de voir à quoi il ressemble. Fouillez et jouez pour vous-même. Merci beaucoup d'avoir regardé ce cours. Si vous voulez vous assurer de consulter mes autres cours, en particulier dans mes masterclasses, qui durent plus de 20 heures, entrez dans de nombreux détails différents sur toutes ces choses. Merci beaucoup d'avoir regardé. Et enfin, assurez-vous de consulter ma chaîne YouTube, qui traite de tout l'impact du contenu gratuit, de votre conception UX, de vos techniques de revenu passif et bien plus encore, tout réalisé dans le cadre du diplôme Adobe XD, Voilà pour avoir regardé celui-ci. Et jusqu'à la prochaine fois, prends soin de toi.