Jouer et concevoir avec la typographie pour les marques

1. Introduction: Bonjour, bienvenue dans ce court cours sur la façon de jouer avec la typographie dans le domaine de l'image de marque et du design. Je m'appelle Jeremy. Je suis un designer de marque originaire de Sydney, en Australie, et je crée depuis dix ans maintenant. Et j'ai travaillé avec des clients de différentes marques. Et je crois que la topographie est à la base d'un design de qualité. Dans ce cours, vous apprendrez notamment comment utiliser la typographie dans un système d'identité Je vais donc vous montrer quelques exemples concrets de clients illustrant la façon dont j'ai sélectionné certaines polices et comment je les ai présentées pour créer une identité de marque. Je partagerai également avec vous mes conseils et réflexions sur la façon dont j'associe les polices pour différents projets. Ce qu'il faut sélectionner, comment s'y prendre, vous savez, utiliser les bonnes polices dans les bonnes situations. Je vais également expliquer comment personnaliser et choisir la bonne police et comment la manipuler dans Adobe Illustrator. Je vais également vous parler du pouvoir des glyphes et de la façon de personnaliser certaines polices et lettres lorsque vous travaillez sur la conception d'un logo Et comment faire en sorte que cela se démarque et devienne plus emblématique. Je vous montrerai également mes codes de triche, mes astuces, mes raccourcis et tous ces petits avantages en cours de route pour vous aider en tant que designer à grandir et à améliorer votre maîtrise de la Je vais également vous donner quelques devoirs et activités vous permettant de pratiquer la conception dans la section projet, afin que vous puissiez le faire pour pratiquer la conception et télécharger votre projet. Et je serais heureuse de vous faire mes commentaires afin que vous puissiez améliorer vos compétences. Alors, cliquez et lancez dès aujourd'hui et améliorez votre conception grâce à la typographie 2. Inspiration et trouver des polices: Au cours de l'année, j'ai probablement accumulé plus de 10 000 fonds. Et c'est parce que je télécharge toujours de nouvelles polices. Et chaque projet a besoin de quelque chose de différent. Et il y a toujours de nouvelles limites qui apparaissent, où il y a tout un tas de fonds gratuits très haute qualité Je veux vous montrer quelques sites qui vous inspireront, où vous pourrez télécharger des polices gratuites et acheter des fonds. Mais si vous voulez plus de ressources, je mettrai un lien dans la section du projet pour partager ma méga liste de ressources de conception. La première étape serait le partage de polices. Maintenant, ils ont 100 polices gratuites et gratuites. J'adore utiliser le partage de polices car il est puissant et propose de nombreux styles différents, quelques polices de script. Mais je l'adore parce que vous pouvez vraiment regarder différentes paires. En haut, vous avez des paires sur lesquelles je peux cliquer, cela me montrera en fait des paires différentes. La police est géniale. Un autre est le tissu de police. J'ai également utilisé leurs polices de caractères. Ceux-ci sont de très haute qualité. Ils ont des tas de styles différents. Par exemple, si je clique sur Mont, vous pouvez voir qu'il devient fin très clair jusqu' à devenir épais et noir. sites en italique comme celui-ci sont vraiment bons Pangram, Pangram propose des kits de démarrage 29$ où vous pouvez vous procurer tout un tas de polices à essayer, puis si vous en aimez certaines, vous pouvez les Ces polices sont vraiment cool, certaines sont futuristes, donc il y a plein de trucs sympas ici Vous avez également de futures polices, Xyz, elles sont vraiment géniales Il y en a une grande variété ici. Ce ne sont pas seulement des polices simples, mais aussi des polices d'affichage, rétro funky et intéressantes. Vérifie ça. Vous pouvez également vous rendre sur Creative Market. Create Market fournit également des polices de caractères. Si vous cliquez sur la section des polices, ils ont des lettres noires vintage, des graffitis cursifs fantaisistes Ils ont des tas de polices différentes. Vous pouvez également taper dans la barre. Tu peux voir à quoi ça ressemble. C'est également un excellent moyen de trouver des polices très rapidement. est un autre site sympa Nick.com est un autre site sympa. Brandon possède un studio de design typographique Il crée de nombreuses polices de caractères ici. Et il propose également ces packs, qui sont vraiment sympas, où vous pouvez trouver environ 2030 polices dedans J'adore son style. Il y a vraiment quelque chose de différent là-dedans. Si jamais vous travaillez sur des trucs rétro vintage, ceux-ci seraient parfaits pour ce type de projet. Il existe de nombreuses autres polices, comme les polices et les polices futures, etc., mais j'ai tendance à éviter les sites de polices gratuites très populaires car ils sont de très mauvaise qualité, en particulier en ce qui concerne les polices de caractères. Lorsque vous téléchargez une police, elle est défectueuse, il n'y a qu'une seule police, il n'y a pas plusieurs polices. Il ne s'agit donc pas d'une police de caractères de toute une famille de polices C'est pourquoi j'essaie d'éviter ces sites et je vais essayer de m'en tenir à ceux où j'en achète ou en télécharge un site gratuit sur un site comme Font Share, qui est tellement meilleur parce que la qualité est au rendez-vous. Vous pouvez voir qu'il a été méticuleusement conçu et fabriqué. Et il est également livré avec des glyphes et des symboles, ainsi que des variations sur différentes lettres C'est pourquoi je préfère cela, et j' essaie d'éviter des choses comme une police de caractères. Et si je tombe sur un site Web ? L'un des outils que j'aime utiliser s'appelle en fait font Ninja. Vous pouvez également utiliser quelque chose comme quelle police. Il s'agit d'une extension Chrome gratuite. Ce que je peux faire, c'est aller sur un site Web et peut-être que j'aime cette police ici. Tout ce que j'ai à faire c'est de cliquer sur la police Inga. Nous allons essentiellement scanner le site Web et me dire quelle police ils utilisent. À l'heure actuelle, je peux le voir avec Satoshi. Maintenant, Satoshi est une police gratuite sur le partage de polices. C'est la police de caractères qui s'y trouve. Ensuite, je peux placer ma souris sur la police et elle m' indiquera le poids, le fil et la couleur. Nous pouvons voir que tous ces petits détails dans cette petite boîte, vous pouvez voir ceux-ci comme 20 pixels, 15 pixels en utilisant une couleur grise. C'est vraiment cool. J'adore ça. Vous pouvez également jouer avec ces petits réglages ici. Vous pouvez déplacer la police, l' agrandir pour pouvoir la prévisualiser et jouer dessus. J'aime bien ça. Vous pouvez également ajouter les polices à vos favoris. Si vous cliquez sur le signet dans la police Inger, c'est ce qu'il fera. Voici un autre exemple. Peut-être que j'aime bien cette police ici. Essayez-le à nouveau et voyez ce qu'il en résultera. Cliquez dessus et vous pouvez voir le titre de SQL Sands ainsi que le corps du texte du titre de SQL Sands Il est à la fois de taille moyenne mais juste de plus grande taille. Vous pouvez voir le corps du texte et le titre, c'est vraiment cool. Vous pouvez littéralement l'utiliser sur n'importe quel site Web. Il vous dira simplement ce que c' est et cela vous fera gagner beaucoup de temps. C'est normal de voler des polices. C'est normal d'utiliser les fonds. Certains d'entre eux, vous devrez probablement en acheter. Mais c'est pourquoi c'est toujours bon. Si vous avez un budget supplémentaire, demandez à votre client si vous pouvez acheter une police en particulier, car vous savez qu'elle sera plus unique et distincte de toutes les autres marques sur le marché. Pour moi, je n'aime pas, vous utilisez toujours Monster, At , Poppins et Helvetica, toutes les Nous utilisons les mêmes polices et je ne veux pas le faire, je veux trouver des polices différentes. C'est pourquoi je suis toujours à la recherche d'une police particulière qui correspond à l'ambiance de la marque que je recherche. 3. Choisir les polices: Maintenant, je reçois toujours des questions de la part des designers. Comment choisir les polices pour un projet de marque ou pour un logo ? Maintenant, je me fie toujours à mon intuition, mon instinct ou à mon instinct lorsque je regarde une police de caractères. C'est pourquoi je suis toujours en train de parcourir ces différentes fonderies de polices examiner la forme de la lettre, demander ce que je ressens lorsque je la regarde, vous savez lorsque j' interagis avec elle Parce qu'en fin de compte, je dois transmettre une ambiance, une sensation et une atmosphère qui bouleversent la perception de la marque auprès des clients En fin de compte, tout dépend de la personnalité de la marque et du public. Lorsque j'ai une session de découverte de marque avec mon client ou un atelier de stratégie, j'essaie d'extraire les mots clés de la marque. Alors je sais si notre marque va être amusante ? Est-ce que ça va être très technique et minimal ? Est-ce que ça va être audacieux ? Toutes ces questions entrent en jeu lorsque j'essaie de comprendre la personnalité de la marque, puis le public. Le public ressemble-t-il à des passionnés de technologie, s'agit-il peut-être de femmes ou de mères, ou peut-être de leurs pères ou de jeunes adultes qui vont à la plage ? Il y a toutes ces questions que vous voulez poser qui vous aideront vraiment à affiner votre recherche de la bonne police. Il s'agit d'avoir ces limites et ces limites. Vous pouvez ainsi canaliser votre vision et vous concentrer sur le choix de quelques polices , puis sur leur intégration dans Illustrator Et travailler et jouer avec ça, ou même avec Figma. Et si vous concevez comme un site Web, et je le dis toujours aux concepteurs, tester plusieurs polices, placer sur le canevas ou sur votre plan de travail. Tu travailles avec. Mets-le sur une image. Qu'est-ce que tu ressens ? Mélangez-le avec quelques couleurs. Voyez ce que vous ressentez dans le mouvement que vous ressentez. Lorsque vous jouez avec la police. Je souhaite partager avec vous certains types de styles de police. Il y en a, vous le savez probablement, mais il y en a une longue liste. Mais je vais vous montrer certaines de mes préférées. Nous avons des choses comme San Serap, qui sont très modernes, uniques, simples et minimalistes Vous avez un serap vraiment classique et élégant. Vous avez un séraphin en forme de dalle, avez l'impression du Far West Très audacieux, très grand. Vous avez des polices d'affichage. Les polices d'affichage ressemblent davantage à des polices décoratives. Ils peuvent avoir de la texture, ils peuvent être rugueux, ils peuvent avoir de petits motifs. Vous avez une écriture manuscrite, comme pour les signatures, comme pour un timbre-poste ou quelque chose comme ça Le scénario est très féminin. Pétillant, ludique, à espacement fixe, cela ressemble plus à de la numérisation. Pensez à des ordinateurs binaires ou à un robot intelligent. Géométrique, très propre. La calligraphie moderne ressemble essentiellement à quelqu'un qui écrit le stylo de calligraphie Très old school, style ancien. Je suis devenu grotesque et humaniste. Ils sont assez similaires. Des lettres modernes et épurées. Ce n'est pas géométrique, mais plutôt des polices simplifiées. Si vous avez également des lettres noires comme à l'époque du vieux style médiéval, pixel pixel est idéal pour l'art en huit bits. Ou peut-être que c'est un jeu comme Stared Value ou quelque chose comme ça fait de pixels Vous pouvez utiliser une telle police. Voici quelques types juste pour vous faire réfléchir au style que vous voulez adopter. Réfléchissez. Il est bon de savoir, juste au cas où, lorsque vous présentez un moodboard et que vous voudriez le montrer à votre client, c'est le type que nous allons choisir Ensuite, il va simplement affiner votre recherche lorsque vous recherchez une police. Comme je l'ai déjà dit, lorsque je choisis une police de haute qualité, je recherche toujours les familles de polices. Combien de poids possèdent-ils ? Parce que c'est important lorsque je travaille sur un projet. Parfois, je veux juste utiliser la même police, mais juste des poids différents. je n'ai pas besoin de 234 polices parce qu'il y en a trop. J'essaie toujours de me limiter à trois polices Mac, mais d'habitude j'essaie de me procurer une ou deux très bonnes polices avec de bonnes familles. Vous pouvez donc voir que le tissu Mont Blanc from Font possède une grande famille de tissus, allant du tissu fin au noir. Et c'est très gras, gras, semi-gras, et c'est en italique pour chacun d'eux Maintenant, ces polices sur le côté droit n' ont qu'une seule police. Désormais, la police est composée d'un seul style ou d'un seul poids. Ce n'est pas une famille , c'est un type de visage. Vous pouvez voir que vo n'a qu'une seule police, c'est juste normal. Et Hand Gothic n'a qu' une version normale et vous pouvez voir deux polices différentes. L'un est un séraphin en forme de plaque, alors celui-ci est plutôt une police d'affichage Et ils ont l'air cool, mais c'est très restrictif. J'utiliserais probablement ces polices, probablement uniquement pour les titres et non pour le corps du texte. s'agit de trouver des sites Web qui ont réellement des filtres différents. Vous pouvez le voir sur le partage de polices, ils ont des filtres dans la section des catégories où je peux effectuer une recherche par style, poids, largeur, contraste et bords, et hauteur x, et je peux effectuer une recherche par personnalité. Cela va donc rendre ma recherche beaucoup plus rapide lorsque je recherche des attributs spécifiques, n'est-ce pas ? Si vous en avez l'occasion, jouez avec certains de ces paramètres et cela accélérera considérablement votre recherche lorsque vous recherchez une police en particulier. Vous avez donc appris à connaître la personnalité de la marque, ce qui vous aidera à rechercher la bonne catégorie de police. Voici un exemple rapide. J'ai quelques mots clés sur la gauche que j'ai l'habitude d'utiliser pour un projet de marque très différent. Et c'est la police que j'ai choisie sur la droite. Donc, tout d'abord, nous avons le moderne, le minimal et le propre. Et je pense au code, je pense au code. Ensuite, c'est très géométrique, c'est une police propre. C'est sympa, c'est très lisible et lisible, facile à lire. Le suivant est vintage rough et masculin. Quand je pense à ces mots clés, je pense à SS. Nixon. Très audacieux, très découpé. C'est un peu rugueux sur les bords. Il y a cette touche masculine à cause de son audace Les lettres sont uniques. ressemble un peu au plein air, à l' aventure, au camping, Cela ressemble un peu au plein air, à l' aventure, au camping, à une touche de style, mais aussi à un peu de vintage, comme sur une bouteille de whisky ou quelque chose comme ça Enfin, nous sommes élégants, classiques et raffinés. Je pense à quelque chose comme Baskerville. Ce n'est qu'un bref exemple de ce que je choisirais. Cela ne signifie pas que je ne choisirai que ces polices pour le projet, cela vous donne juste une idée de quelque chose. Je vais sélectionner quelque chose de très similaire à ces styles de polices. C'est pourquoi je dis toujours aux gens, que vous soyez Figma ou Illustrator, quelle que soit l'application que vous utilisez, toujours définir un texte, de mettre en place un ensemble de polices, le restreindre et de sélectionner vos préférées, comme les trois ou les cinq meilleures Ensuite, commencez à jouer avec eux et à voir lequel correspond à la personnalité de la marque et aux mots clés de la marque. Je veux montrer un exemple rapide de. J'utilise juste le casque VR de Meta. C'est le Metaquest Three, la police que nous utilisons ici est le code suivant Vous pouvez donc voir que c'est très moderne , propre , futuriste et solide. Mais maintenant, si nous passons à la diapositive suivante, nous allons utiliser la police Nixon. Cela ne semble pas à sa place. L'utilisation de la bonne police est vraiment importante. J'utilise, je crois, c'est Nixon, six ou sept pour le bas et les autres polices. C'est un peu trop rigide, j'ai l' impression d'aimer l'ambiance spatiale, même un peu gamy et les autres polices. C'est un peu trop rigide, j'ai l' impression d'aimer l'ambiance spatiale, même un peu gamy Là où nous ne cherchons pas ce look de jeu, nous optons pour un produit haut de gamme. Et puis vous pouvez voir sur la gauche que la police est Baskerville C'est une police élégante comme celle-ci qui pourrait fonctionner. Mais vous pouvez voir qu'une fois qu' on regarde le corps, il semble un peu démodé, un peu déplacé. Vous pouvez consulter les prix ici. Et en bas , je ne sais pas, il semble un peu faible, alors que le premier fonctionne. 4. Jumelage de polices: Maintenant, comment associer des polices ? J'ai l'impression que beaucoup de designers y réfléchissent trop et pensent qu'ils doivent être parfaits lors du choix de la police Mais le principe de base auquel je pense lorsque j'associe des polices est le contraste Il s'agit d'établir des contrastes entre les titres, le corps du texte et d'avoir cette hiérarchie avec les différents types d'informations que vous utilisez. Par exemple, voici un design rapide que j'ai créé. J'ai trois exemples ici. Deux sur la gauche ne sont pas les meilleurs. Je vais vous expliquer pourquoi, car il y a un manque de contraste. Maintenant, vous pouvez voir que le titre de ce premier titre est très fin. Le titre doit être en gras. Il doit être facile à regarder très rapidement lorsqu' personne arrive sur un site Web ou sur une page qu'elle est en train de lire. La police ci-dessous est la même que celle-ci. Comme vous pouvez le voir, j'utilise tous les deux Mont Blanc pour cette lumière et cette lumière, elles sont toutes les deux de couleur blanche. C'est gênant pour les yeux lorsque couleurs se contredisent et que c'est trop clair, cela les empêche de lire le corps les couleurs se contredisent et que c'est trop clair, cela les empêche de lire le corps du texte. Celui-ci ne fonctionne pas. La seconde, vous pouvez voir que celle-ci est très audacieuse. Mais cela a alors une très large avance. Il y a beaucoup d'espace entre les lignes et j' ai juste l'impression que cela traîne dans les yeux, faut rebondir beaucoup plus loin et beaucoup plus Cela cause de la fatigue lorsque vous le lisez. L'audace du titre fonctionne. Mais alors c'est mauvais. Vous pouvez également voir ce chiffon. Maintenant, le chiffon est essentiellement la forme créée par le texte du paragraphe, c'est pourquoi j'ai mis une ligne ici Ces deux-là ont un très mauvais chiffon. C'est l'exemple qui s'y trouve. Mais voici le dernier exemple que j'ai fait. Vous pouvez voir que j'utilise Montblanc semi-gras, puis Montblanc normal Pour cela, j' ai réduit la couleur à une couleur grise. Comme vous pouvez le voir ici, j' utilise ce code hexadécimal ici. Alors celui du haut est tout simplement blanc. J'ai créé un contraste avec la couleur du corps et de l'en-tête. J'ai également rendu la tête plus audacieuse que le corps, et j'ai également ajusté le relâchement, pour qu'elle soit un peu plus serrée, donc vous pouvez voir qu'elle est un peu plus serrée que l'autre C'est agréable à regarder et à lire. Même s'il est plus faible en Ipsm, il est plus agréable au toucher, plus propre et lisible Voici quelques exemples de types de polices que vous pouvez potentiellement associer. Ce n'est pas limité à cela, mais j'essaie juste de vous donner quelques idées. Une solution simple serait comme un séraphin de sable. Avec le serafont, mais avec le séraphin, mettez-le probablement en minuscules et le titre peut être en majuscules. D' habitude, j'aime bien faire ces majuscules habitude, j'aime bien Et puis peut-être un corps de serf, un titre que vous pouvez faire comme du grotesque et Ce serait une forme d'entreprise plus futuriste et plus moderne Et puis un script avec un simple séraphin. Ce ne serait pas audacieux. Ce serait probablement léger ou normal et ce serait une minuscule ou quelque chose comme ça. Voici quelques appariements potentiels que vous pouvez avoir. Les limites sont infinies. En gros, tout dépend la marque et de l' idée créative que vous recherchez. Maintenant, je veux que vous vous en souveniez lorsqu'il s'agit d' atterrir sur un site Web ou de concevoir quelque chose. Les titres numériques sont destinés à être scannés. Les gens ne lisent pas le scan lorsqu'ils sont sur une page Lorsqu'ils lisent un carrousel, lorsqu'ils arrivent sur un site Web, leurs yeux se déplacent de gauche à droite en forme de pliage en Z. Ils scannent simplement en regardant les gros titres. De plus, lorsque certaines personnes lisent des rapports de journal, elles ne lisent pas tous les petits textes. Ils regardent d'abord les gros titres. Si c'est intéressant, ils commenceront à lire le corps du texte. Et le corps du texte doit toujours être lisible ou lisible Maintenant, quand je pense à la lisibilité, je me demande à quel point c'est facile à comprendre, à lire et à quel point mon cerveau peut comprendre les lettres et les mots Passons maintenant rapidement à quelques exemples qui me plaisent. Celui-ci, c'est Bowery.com. C'est comme une entreprise de restauration. Ils expédient essentiellement des aliments et ils ont des recettes et des trucs comme ça. Et j'adore l' audace de cette police. Tout est en majuscules, c'est sympa. Mais ils ont une police simple ici, et je vais utiliser fontina pour vous la montrer rapidement Ils utilisent GT America puis National pour compresser. Vous pouvez voir ce joli petit corps, il est facile de lire. Alors vous avez GT Mono ici. Mais vous avez aussi ce grand national audacieux, qui se démarque tout simplement. C'est bon. Il essaie de plaire à un public plus jeune. Revenons à l'idée de contraste. Vous pouvez voir que nous avons un titre en gras, puis un titre lisible à la lumière, entouré de nombreux espaces blancs Vous pouvez voir que la location n'est pas si serrée, ce qui est une bonne chose. Il y a de la place ici, celui-ci. Vous pouvez voir la location ici. Ils font beaucoup de location parce que cela va interagir avec cela. Ils ne voulaient pas que le G touche ça. Je le comprends parfaitement. J'adore façon dont ils ont utilisé les majuscules ici, mais ici, ils n' utilisent pas toutes les majuscules. Parce que lorsqu'il s'agit de mots en majuscules, vous ne voulez que des mots courts. C'est vraiment difficile à lire quand les phrases sont longues. C'est pourquoi il est facile de lire les minuscules, car notre cerveau peut comprendre et comprendre la forme des mots et des lettres C'est ainsi que notre cerveau traite les choses. Mais oui, voici un bref exemple de son utilisation, qui met contraste les super-héros lourds et légers C'est comme le site d'une agence. Ils ont opté pour une grande police sans gras pour les gros titres. Et puis ils ont aussi ce ninja de Serafont. Ils utilisent l'affichage gular, le noir et le circulaire, gras standard, le P Editorial ultra léger La raison pour laquelle je pense qu'ils ont choisi ce Serafontce. Il s'agit d'un séraphont condensé. Alors ce gros titre est très large. C'est pourquoi ils ont opté pour un format condensé et un format large. Si je fais défiler l'écran vers le bas, vous pouvez voir qu'ils voulaient que leur texte soit vraiment gros. fait d'avoir un séraphin condensé lui permet de s'intégrer parfaitement dans cette forme rectangulaire Dans cette mise en page. Ce verrou est là, comme on peut le voir. C'est léger, le gras se démarque, facile à lire, vous êtes condensé, vous êtes large. Vous pouvez donc voir cette police. Comme je l'ai dit, il est large et audacieux. Et puis, si ce n'était pas condensé, cela irait jusqu'au bout, comme si c'était probablement le cas ici. Mais comme il est condensé, il se trouve ici et dans ce joli petit enclos. Maintenant, si vous avez du mal à associer certaines polices, voici trois sites que je vous recommande de consulter. Sur typeof.com, ils ont des listes de contrôle et des ressources incroyables, mais ils ont un lookbook de jumelage de caractères que vous pouvez acheter, ce n'est pas gratuit, mais il est parti de l'avant et vous a créé quelques polices de caractères . C'est déjà fait pour toi, c'est environ 40 dollars. Mais vous pouvez voir qu'il existe des versions différentes. Le luxe rétro réchauffe la technologie. Si tu aimes faire ça, c'est une idée. Vous avez également tapé inspiration.com, ils ont déjà combiné différentes polices Et je trouve ça vraiment cool, il y en a quelques-unes ici. Il n'en a pas des milliers, mais il contient juste quelques exemples de ce que vous pourriez utiliser. Je pense que c'est vraiment sympa. Je peux cliquer dessus et ensuite je peux voir quelle est la police. Vous pouvez l'obtenir sur Google Fonts, qui est gratuit. J'aime bien la façon dont ils l'ont disposé ici, juste avec quelques grumeaux dedans Enfin, nous avons Font share. Ils ont un menu à deux. Si vous allez en haut, vous pouvez cliquer sur Pairs, puis vous pouvez descendre et il y a tout un tas de paires utilisant leurs propres polices intégrées qu' ils ont déjà conçues Vous pouvez ajouter les styles, vous pouvez les ajouter. Vous pouvez modifier le texte à la volée et peu importe. Peut-être avez-vous un exemple de copie que vous souhaitez utiliser pour votre client. Vous pouvez simplement le mettre dedans et avoir une idée plus rapide de ce à quoi il ressemblera. J'adore, je vous indique les polices s' y trouvent, je peux cliquer dessus pour y accéder. Voici quelques ressources que je vous recommande d'utiliser. 5. Personnaliser des polices et des logotypes: Lorsque j'ai trouvé une bonne police que je vais utiliser pour un projet, elle correspond à la personnalité, alors j'adore la personnaliser un peu. Il n'est pas toujours nécessaire d'ajouter beaucoup de détails à un type de logo ou à un design de logo. D'habitude, c'est mieux quand c'est simple et qu'on réduit les détails, mais j'aime bien ajouter des symboles, des petits motifs ou des idées sur certaines lettres. Ou pour ajouter quelques idées et ajouter de la saveur, rendez-le plus distinct. Voici quatre logos conçus pour les clients, à l'exception de Sylfon qui était destiné à un projet parallèle Ce sont les polices que je choisis. Sur le côté gauche, vous pouvez voir celui-ci est non, c'est la tenue de celui-ci. Celui-ci, c'est Nesta. Et puis Calisto Voici à quoi ressemble la police, une police par défaut. Noah, tenue moyenne, taille moyenne, nist géométrique noir. Et voici Calisto Bold. Voilà à quoi ça ressemble sans rien ajouté. Alors voici à quoi cela ressemble lorsque j'ai ajouté quelques petits détails. service aux personnes handicapées d'Angel Hearts Healthcare et d'autres services de santé existent à Sydney. Vous pouvez voir que j'ai ajouté une petite forme de cœur d'amour à l'intérieur de cette barre transversale dans le A, ce qui est sympa. Il peut également ressembler à un livre ou à un oiseau. Le crénage a été ajusté, par exemple, vous pouvez voir ici le R et le T. Il y a eu quelques problèmes Il suffit de le serrer et de resserrer le H, réunir les mots pour qu'ils soient espacés. Et puis ajoutez-y une petite sous-ligne. Comme vous pouvez le constater. Ça s'est avéré vraiment sympa. Tout ce que j'ai fait, c'est tout mettre en majuscules , puis je l'ai bien aligné pour que vous puissiez voir que tout est aligné. Ensuite, ce que j'ai fait, c'est y ajouter un château fort parce que cette marque installe des portes de sécurité dans les maisons Tout est une question de sécurité. J'ai pensé à Castle car je voulais ajouter quelque chose d'un peu subtil. C'est parce que j'avais une version où j'avais comme un cadenas ici, comme un cadenas, puis je faisais en sorte que tout cela soit colorié ou quoi que ce soit d'autre. C'est une idée que j'ai eue, mais j'ai décidé qu'elle ajoutait trop de détails. J'ai reculé, j'ai fait en sorte que les choses soient simples. Et vous pouvez voir cette petite touche de légendes de Mobile Tire. Voici à quoi cela ressemblait avec la police. La police est très audacieuse et condensée. Lorsqu'il s'agit d'aimer de longs mots ou de longs noms de marque, il est préférable d'empiler les polices. C'est ce que j'ai appris, parce que c'est simplement plus facile à lire. C'est facile. De plus, ce qui concerne l'évolutivité et la lisibilité sur les petites tailles et les sites Web, etc., il vaut mieux empiler C'est pourquoi je les ai empilés comme ça et j'ai ajouté leur petit logan ou leur petit éclairage sur le côté Ce que j'ai fait, c'est tout resserrer pour qu'il soit compact. Ensuite, j'ai ajouté cette flèche en haut de la barre T. Je l'ai fait parce que je voulais y ajouter du mouvement dynamique. Je voulais également montrer qu'une flèche peut représenter le fait d'avancer, aider quelqu'un à conduire sa voiture pour qu'il puisse avancer et se rendre au travail ou rentrer chez lui en voiture. Parce que si vous avez un pneu crevé, vous êtes coincé. Hein ? Vous pouvez voir certaines des idées auxquelles je pensais lorsque je l'ai fait. Et puis j'ai ajouté cette petite découpe ici pour que la flèche ressorte un peu plus. Vous pouvez voir sans cette petite coupure, comme si tout allait bien, mais vous avez juste l'impression qu'il n'y a pas assez d'espace blanc. Je l'ai juste retiré pour le faire respirer un peu. Pour le rendre un peu plus avant-gardiste, j'ai aligné la flèche sur le bord Comme vous pouvez le voir, il est aligné, ce qui ajoute quelque chose de bien. J'aurais pu l'amener jusqu'au bout comme ça, mais ça commence à me distraire un peu trop Je vais donc le ramener au R. J'aurais aussi pu faire ceci ou comme ça, cela pourrait aussi fonctionner. Vous pouvez toujours voir que c'était une légende de l'époque pour le petit G, j'en ai fait un éclair, ce qui était amusant, le client l'a aimé. C'était quelque chose de différent, j'en avais marre du mobile. Je pense aux légendes juridiques, le gars était aussi un joueur Je suis du genre, oh, mettons juste un éclair. C'est différent, unique. Enfin, Sylpi ici, nous pouvons voir à quoi cela ressemble, la valeur par défaut Ensuite, l'ajout de ces petites découpes lui donne un aspect beaucoup plus différent, futuriste. Vous pouvez voir que j'ai ajouté ces petites coupures ici, puis que je les ai arrondies. Sur celui-ci, j'ai ajouté cette petite forme ici. Si je retirais ce qui n'était pas là à l'origine, c'était comme si un espace blanc normal alignait bien le tout. Et vous pouvez voir qu' un petit slogan ajouté s'intègre parfaitement à cette forme. Vous pouvez voir qu'il tient bien dans cette petite boîte ici. Dessiner n'est pas ce que l' on voit de mieux . Il y a comme un rectangle. Il est aligné en bas. Tu comprends, mais ça fait du bien. Fturisticjtdding de petites coupures puis ajout de cette étiquette. Comment j'ai fait en sorte que ces logos soient distincts et qu'ils aient l'air différents, par rapport au simple fait d'ajouter la police et d'arrêter. Et dire : « Hé, c'est du design ». Je veux essayer d'ajouter un peu plus de détails, plus de qualité. Ajoutez cette touche de design de logo, cette touche de designer. C'est pourquoi je l'ai fait. Voici maintenant quelques exemples supplémentaires de personnalisation des polices Pas dans le sens du logo, mais simplement dans le sens générique. Ce que j'aime faire, c'est voici quelques façons dont j'aime le faire. La première est que rien n'est ajouté au texte. Il s'agit simplement d'un bloc de texte normal. Une chose que vous pouvez faire est d'ajouter de la couleur. Vous pouvez voir ajouter un bleu et un rouge ici. La couleur fonctionne. Vous pouvez également ajouter une échelle. Dans celui-ci, j'ai réduit la première partie de la phrase , et celui-ci en gras. La raison pour laquelle je fais cela est que je veux mettre l' accent sur le mot créativité, n'est-ce pas ? Il peut être utilisé comme support marketing, peut-être pour une université ou quoi que ce soit d'autre. Je tiens simplement à le souligner. Vous pouvez également créer un effet de haute lumière en ajoutant un marqueur en surlignant des objets ou les utilisant comme un marqueur et dessinant un peu comme des flèches emojis ou autre, ou des icônes Vous pouvez utiliser des couches épaisses et fines. Revenons à l'idée globale du contraste. Un texte peut simplement être très clair et l' autre en gras. Cela fait ressortir ces mots parce que je veux attirer l'attention sur ces mots. Nous pouvons utiliser l'italique, pour que cela fonctionne également. Cela peut être très subtil. Vous pouvez taper des majuscules, peut-être en majuscules, puis l' autre en minuscules. C'est une autre façon de le rendre différent. Tu peux faire de l'opacité. Celui-ci, je baisse l'opacité à 30 %, il paraît gris Évidemment, j'aurais pu changer la couleur gris si j'avais joué quelque chose derrière cela Vous pouvez voir qu'à cause de l'opacité, cela va s' infiltrer et Mais si vous ne voulez pas que cela se produise, remplacez-le simplement par une pointe rapide grise. Enfin, vous pouvez réellement masquer des choses. J'ai masqué une image dans le jardin que je peux déplacer C'est aussi une façon amusante personnaliser une police, rendre différente, de la rendre intéressante. Lorsque j'utilise certaines de ces techniques, j'essaie d'éviter de toutes les additionner. Je pourrais juste en faire une ou deux. Je ne vais pas ajouter de masquage , puis aussi beaucoup de couleur et d'italique C'est tout simplement trop. Ça va vous distraire, à moins que ce ne soit une marque vraiment amusante Vous pouvez peut-être en mélanger quelques-uns, mais essayez d'en choisir un ou deux. Il suffit d'un style ou d'une seule chose pour souligner un mot. Enfin, je joue et je fais en sorte que cette petite maquette rapide en Y en ligne utilise l'IA et j'ai créé cette image. Ensuite, j'utilise la police en pixels que je n'utilise pas normalement. Vous pouvez voir que j'ai juste ajouté une petite ombre et que j'ai ajouté du texte rouge pour le personnaliser. Je l'ai mis dans un coin ici parce que ça donne l'impression qu'il y a quelque chose de plus en bas. Je peux faire défiler la page vers le bas et peut-être même ajouter une petite flèche ou quelque chose comme ça. Ensuite, vous pouvez ajouter la police ici et à quoi pourrait ressembler le site Web. J'ai juste joué avec la police, et c'est un bon moyen de tester les choses. Si j'ai juste besoin de changer des choses, je peux littéralement tout sélectionner. Et puis, ce que je peux faire, c'est changer la police d'écriture. Peut-être que je veux en choisir un autre. Peut-être que je veux intervenir et opter pour une plus grande légèreté ou pour faire preuve d'audace. Je peux essayer ça et voir qu'il y a une ambiance différente, non ? Mais avec la police en pixels, c'est tout simplement différent. Mais il est facile de changer de police, que ce soit dans Figma. 6. Systèmes typographiques: Si vous voulez concevoir un système typographique pour une identité de marque, c'est essentiellement comme avoir un système, ou un guide de style, ou un système de conception pour un site Web d'interface utilisateur ou autre C'est la même chose. Il s' agit simplement d'avoir des styles définis. Définissez des tailles pour les titres, le corps du texte, les boutons, les étiquettes, les liens d' une marque et d'un site Web. C'est vraiment tout ce que c'est. Quand je pense à la création d'une sorte de système, je pense toujours à n'importe quel type de balises H one H 2h3h4 parce que c'est ainsi que Hmil est lu lorsque je conçois flux Web ou n'importe quel framer, quelle que soit Vous devez réfléchir à la manière dont les sites Web sont créés en HTML et en CSS Je pense à chaque balise de titre, à chaque paragraphe, je pense aussi aux liens, aux boutons, à la hauteur des lignes, au crénage, à la pondération des caractères, toutes les fonctionnalités clés de l' apparence d'une police ou d'un texte dans un certain espace Par exemple, mon propre site Web personnel, c'est mon système que j'ai utilisé. Pour mon H one, mon titre principal, il fait 64 pixels. Et vous pouvez voir que j'utilise la police sine et le semi-gras. Le H deux fait 25 pixels, j'utilise le sinus et le gras. Et puis vous avez le H trois, le H quatre, et ils ont tous un aspect très différent. Et c'est parce que je veux que mes titres et mes textes soient variés. Ensuite, vous avez le corps du texte, grand, moyen et petit. Vous pouvez y voir la taille, 22 pixels, 18,16, puis un bouton Ce bouton ressemble à celui de mon site Web, 16 pixels. Ensuite, il y a évidemment d' autres boutons et d'autres petites portions de texte. Le potier a également un microtexte. C'est un peu plus que cela, mais c'est le texte principal général dont je dispose lorsqu'il s'agit de créer un système typographique Cela peut être très large, mais lorsqu'il s'agit d'un simple site Web ou d'une marque, cela ne doit pas être si compliqué. Tant que vous comprenez les principaux titres, le corps du texte, puis les liens, les boutons et tout le reste, tout devrait bien se passer. excellent site Web que j'utilise pour déterminer le type de balance que je vais utiliser est le type Scale.com. Il me donne un système ou un modèle de différentes tailles Vous pouvez passer en deuxième position, vous pouvez cliquer sur la touche majeure en troisième position. Je vais juste vous donner quelques ratios différents, essentiellement que vous pouvez utiliser lorsque vous créez un site Web et même si vous voulez créer une marque. Mais c'est particulièrement utile lorsque vous devez avoir un site Web. Et vous pouvez le voir ici, cela va changer son apparence, ce qui est cool. En gros, ça me donne le HM, puis ça me donne le Rem. Vous pouvez également cliquer sur les pixels si vous le souhaitez. Si vous voulez regarder en pixels, j'utilise généralement M lorsque je crée un flux Web C'est simplement mieux parce que l'échelle du texte est meilleure. Il est plus réactif et est connecté au HTML inhérent. Au lieu de simplement lui donner un pixel défini, j'utilise ce calculateur. C'est Necococ.com où je peux changer les pixels , puis je vais me donner le M. J'ai mis le M dans la section topographie de Webflow, mais ça va être Ouais. Vous pouvez choisir des échelles. D'habitude, j'utilise juste le major 30, c'est ce que j'utilise habituellement. Mais tu peux faire ce que tu veux, tu peux enfreindre les règles. Certains sites ont un texte incroyablement gros et c'est le design qu'ils ont choisi. Cela dépend vraiment de vous, mais tiers majeur ou -30 est généralement le plus courant. Et vous pouvez voir le style de votre paragraphe, texte, de votre petit texte, etc. Un seul conseil. Lorsque vous concevez pour un site Web, je m'assure que la topographie ne descend pas dessous de 16 pixels, sauf si elle est très micro Et ce n'est pas un appel à l'action. C'est juste là parce que si vous descendez en dessous de 16 pixels, cela devient illisible Nous parlons toujours d' accessibilité. Facilitez la tâche des personnes susceptibles d'avoir un handicap en évitant de trop réduire le texte. Mais tu peux probablement aller aussi loin que tu le souhaites. Tu peux l'agrandir. Vous pouvez augmenter la taille du titre. Je peux cliquer sur le signe plus ici. Oui, cet outil cool. Je peux changer la police. Je veux utiliser une épaisseur de police différente. Tu as aussi la hauteur de la ligne. Vous pouvez modifier l'espacement des lettres. Je peux changer de couleur si je le souhaite. Vous avez vraiment le contrôle de ce à quoi cela peut ressembler. Ensuite, vous pouvez simplement copier ceci et vous pouvez le coller, par exemple, je peux le coller, je peux coller la taille, et vous pouvez voir qu'il va atteindre la taille que je viens de sélectionner ici, 61 pixels. Voici maintenant quelques exemples que vous pouvez utiliser pour voir d'autres marques dotées d' un système typographique Et je les aime bien parce que c'est très simple. Nous avons du courrier, vous pouvez voir us.mailchimp.com Il s'agit de leur bibliothèque ou leur guide de style pour la typographie Vous avez leur police principale, elle s'appelle Means, ce qui est cool, puis Graphic est leur police de support Nous pouvons voir l'échelle ici : vous pouvez voir titre 123, le corps du texte en gras, puis les boutons et les étiquettes ou tout autre paragraphe puis un exemple de la façon dont il est utilisé Il est bon de montrer un exemple, surtout si vous créez un graphe de style pour votre client. Ensuite, voici les classes, c'est le CSS, façon dont il est stylisé, qui est destiné au Web Lorsqu'il s'agit de créer du texte. J'utilisais beaucoup Laura ipsum par le passé, mais l'une des solutions est que vous pouvez utiliser Gloom ipsum si vous ne connaissez pas Realoum s'agit en fait d'une application basée sur l'IA que vous pouvez Cela génère quatre années vraiment géniales. Mais ils ont un plugin Figma génère du texte pour vos pages de destination C'est mieux que de vous en faire une copie vous-même. Personnellement, j'aime utiliser Chat GPT pour générer du texte au lieu d'avoir Lauren ipsum Chaque fois que j'ai un projet client ou un projet parallèle, je peux générer des titres de texte, etc., car c'est plus réaliste et vous pouvez mieux visualiser la marque avec le texte que vous avez créé au lieu de simplement mettre Lauren Ifs. Ça montre juste que tu es un peu paresseux. De plus, à moins que ce ne soit comme votre MVP, vous essayez juste de trouver quelque chose, c'est bon Mais une fois que vous avez commencé à vous lancer dans les révisions et les itérations de la conception, vous devez commencer à utiliser le texte approprié Je vais simplement vous montrer un système de typographie simple que j'ai créé pour cette marque sur laquelle je travaille. Et c'est assez simple. Rien de trop complexe. C'est juste pour une petite entreprise. En général, je donne un exemple de ce à quoi ressemblerait le texte. J'ai montré le nom, puis quoi ressemblerait le titre, les sous-titres, les paragraphes, l' exemple de la façon dont il pourrait être Pour cet exemple, j' utilise la police puis ou le semi-gras pour les titres. Ensuite, passez régulièrement aux textes des paragraphes, aux liens et à d'autres choses de ce genre. En voici également un exemple en majuscules. Parce qu'à ce stade, c'était comme au deuxième round et je ne savais pas si je voulais opter pour les majuscules ou les minuscules. Cela peut fonctionner dans les deux cas, mais je voulais juste montrer quelques exemples pour voir à quoi cela ressemble pour le client Et puis ce que je fais, évidemment, je le mets sur des maquettes, comme vous pouvez le voir ici, comme vous pouvez le voir, comme une maquette de voiture, qui est un t-shirt cool. Ensuite, ce à quoi cela ressemblait sur la page de destination, c'était juste au premier tour de la page de destination. Très vite, vous pouvez voir comment j'ai disposé le texte dans les boutons, le titre, le texte du paragraphe Vous pouvez voir ce que j'ai montré tout à l'heure. En gros, il suffit de l'exposer et de voir comment il fonctionne. C'est ainsi que vous pouvez avoir un système de type simple. S'il s'agit d'un client complexe, faut avoir comme H1h2 Dans ce cas, je mets simplement des sous-titres, des titres , des paragraphes pour le rendre plus facile à comprendre, car votre client pourrait ne pas comprendre comme les termes de développement ou le jargon Vous voulez donc que les choses restent simples. 7. La puissance des glyphes: L'avantage d'Adobe Illustrator, c'est que vous avez le pouvoir de personnaliser les glyphes Maintenant, les glyphes sont essentiellement des symboles et d'autres éléments tels que des ligatures ou différents nombres non doublés, des choses comme ça Lorsqu'il s'agit d'une police, les polices de meilleure qualité contiennent généralement beaucoup de glyphes Il suffit de taper, puis de cliquer sur les glyphes J'ai le mien ici, sur le côté gauche. Vous pouvez voir que si je clique sur cette police, tous ces glyphes s'afficheront Je vais le mettre ici. Vous pouvez voir tous ces différents symboles. Je peux l'agrandir en appuyant sur la montagne en bas à droite, pour l'agrandir. Je peux modifier le poids de la police et les glyphes changeront en fonction de ce poids Revenez à la normale pour le moment. Vous pouvez également modifier la police. Peut-être que je veux me tourner vers Montreal Jazz ou Different one into V. Comme vous pouvez le voir, il y en a beaucoup de différents. Vous pouvez également cliquer sur Afficher pour n'afficher que certaines parties. Peut-être voulons-nous montrer, peut-être que les figures de doublure me montreront juste les chiffres ou les ligatures Et nous avons quelques ligatures ici, il y a vraiment un contrôle total Certaines personnes que je vois essaient de créer un T comme un symbole de copyright, mais vous pouvez simplement double-cliquer et l'ajouter. Je voudrais montrer un exemple. Je veux que tu devines combien de glyphes il y a ici. Je ne sais pas si vous avez bien saisi le chiffre, mais il y a en fait six glyphes dans ce dessin, qui est assez inattendu Mais je veux vous montrer ce que j'ai fait ici. Tout d'abord, nous avons le symbole de marque TM. Je vais juste récupérer mes glyphes. Il est si facile d'ajouter des glyphes. Tout ce que vous avez à faire est de sélectionner un élément n'importe où le long de cette ligne de texte, il vous suffit de double-cliquer. Il ajoute littéralement le glyphe pour vous. Nous pouvons voir que nous pouvons double-cliquer sur autant de glyphes que nous le voulons C'est juste puissant parce que nous pouvons réellement créer de meilleurs caractères avec cela. Parce que parfois, les gens se contentent du générique. Si je fais juste les guillemets, parfois ce ne sont pas de véritables guillemets, c'est juste l'apostrophe Mar, et c' Je veux des guillemets appropriés. S'il s'agit d'une citation, la façon dont vous la modifiez en glyphes peut également entraîner pertes de glyphes, même lors de la conception Nous avons également ce glyphe ici, qui est une flèche. J'adore quand il y a des flèches et des objets avec lesquels on peut jouer. Vous pouvez voir ces flèches en bas de page. Je peux appuyer sur le clic gauche sur le double clic. Ensuite, je vais simplement l'étendre. Comme vous pouvez le constater, nous pouvons simplement jouer. Nous avons également ce numéro ici. Celui-ci est un glyphe, il y a un glyphe. Cette flèche est également un glyphe, et le reste n'est que du Maintenant, si vous voulez faire une ligature, vous devez la sélectionner, accéder aux ligatures, puis double-cliquer pour la joindre Jouez avec les glyphes si cool et si puissant et vous obtiendrez de meilleurs résultats lorsque vous concevez pour moi. J'ai l'impression que les glyphes sont résultats lorsque vous concevez pour moi. J'ai l'impression que les glyphes sont sous-estimés. Les gens ne l'utilisent pas assez. C'est idéal pour les présentations avec différentes mises en page, jouer avec les formes, les lettres, etc. Et vous obtiendrez bien d' autres designs uniques. Mais il n'est pas toujours nécessaire d'utiliser des glyphes. Cela dépend vraiment de vous. Mais vous avez le pouvoir créatif de l'utiliser également. Vous pouvez même voir que cet astérisque est également un glyphe. Assurez-vous d'utiliser des glyphes dans votre design. Je pense que c'est un excellent outil et assurez-vous d'obtenir ces polices premium, car elles contiendront plus de glyphes que les polices gratuites 8. Composition et mise en page: Un autre facteur important pour créer une typographie de qualité est la compréhension de la composition et de la mise en page Maintenant, je ne vais pas entrer dans tous les derniers détails sur la façon de créer des grilles et d'autres choses de ce genre Il existe d'autres cours. Je vais juste me concentrer sur certaines choses pour lesquelles je suis vraiment douée et que je sais créer. Par exemple, nous avons un pentagrund, ce musée d'histoire naturelle Ils ont changé de nom et vous pouvez voir comment ils utilisent le texte d'une manière semblable à un motif, comme vous pouvez le voir dans un mouvement circulaire Je pense que c'est vraiment cool. Il ajoute un mouvement dynamique. Cela rend les choses amusantes, différentes. J'adore la façon dont ils l'utilisent sur la signalisation et d' autres choses de ce genre. Si je passe à Illustrator, vous pouvez voir comment je l'ai créé. C'était assez simple. Rien de trop dingue. Faites-le petit. Maintenant, tout ce que vous allez faire pour créer cet effet, c'est d'avoir une police. J'utilise BBW ista pour cela. Tout ce que je veux faire maintenant, c'est changer de couleur. Nous avons maintenant ces trois textes. L'un des outils intéressants que vous pouvez réellement utiliser est d'aller à l'objet, répéter et de passer à la répétition radiale. Si je clique dessus, cela créera cet effet. Maintenant, ce que je peux réellement faire, c'est le réduire. Je peux faire glisser ce grand cercle blanc avec des flèches pour augmenter le montant. Comme vous pouvez le constater, si je peux augmenter, cela semble vraiment bien. Le seul problème est que le M n' est pas aussi condensé que les autres lettres, il commence à se chevaucher. Et comme j'ai sélectionné toutes les lettres ensemble, c'est ainsi que cela va fonctionner. Je peux en augmenter la taille juste pour fixer l'espacement un peu comme ça. Ensuite, je pourrai le redimensionner. Maintenant, c'est un peu plus lisible. Cela aurait besoin d'être peaufiné et tout ce genre de choses. Mais je pense que c'est un moyen simple de créer un effet similaire à celui de Dawn dans un grand studio. Évidemment, vous pouvez faire les choses manuellement dupliquer les lettres et les arrondir sur un chemin. C'est également une option. Mais ce n'est qu'un moyen rapide d' obtenir cet effet. C'est un exemple de mon ensemble de capacités. Maintenant, lorsqu'il s'agit de mises en page, il est toujours bon d'avoir de l'échelle Vous voulez que les informations clés, le texte principal ou les principaux titres, soient vraiment grands et en gras. Et puis tout ce qui n'est pas aussi important peut être vraiment petit. C'est ainsi que vous pouvez utiliser l'échelle à votre avantage. Il suffit de jouer aux petites et grandes choses. Ce que j'aime faire, c'est ajouter des motifs. Vous pouvez donc voir que j' ai ce schéma très simple au dos. Je peux double-cliquer, changer la couleur de ce motif si je le souhaite, le rendre vert, le verrouiller en appuyant également sur la touche Ctrl. Ensuite, j'ai un dégradé à l'arrière. Et j'adore utiliser l' outil de dégradé parce que c'est juste amusant. C'est cool. Vous pouvez voir ici que j'ai opté pour le dégradé de forme libre, afin de pouvoir déplacer des objets, ajouter des couleurs. Vous avez le contrôle total de ce que vous pouvez faire. Je peux, je peux en supprimer, je peux vraiment les agrandir, c'est très amusant à créer. J'utilise le demi-gras sinusoïdal, puis en bas, j'utilise des sables généraux pour les gros titres, j'utilise une police sinusoïdale, des sables généraux en bas Identique à mon site Web. Il faut toujours faire preuve de cohérence, ce qui est essentiellement une question de bon sens et j'ai mon logo dans le coin. En gros. C'est comme ça que je le fais. Vous pouvez voir que j'utilise des choses comme des lignes pour séparer, chiffres pour étiqueter des choses. J'utilise du texte gris pour le rendre lisible, rendre léger, ajouter de petits détails comme celui-ci. Vous pouvez concevoir Illustrate. Vous pouvez également concevoir Figma, les mêmes choses. Je suis sûr que mon logo est là, juste une grille propre. Ce n'est pas complètement granuleux ou quoi que ce soit d'autre, mais c'est juste que j'utilise mon optique parce que je fais généralement de l'alignement optique Je n'essaie donc pas d' utiliser des grilles tout le temps parce que j'ai beaucoup d'expérience J'ai l'habitude d'aimer savoir comment espacer les choses et les déplacer. Puis je fais un zoom arrière et je vois, est-ce que je me sens bien ? C'est ce que je fais d'habitude. Oui, c'est juste un sentiment que vous développez en tant que designer. Vous pouvez voir ici l'utilisation de petites icônes pour les listes afin de les rendre visuellement attrayantes. Parce qu'alors ça devient vraiment ennuyeux. Disposer les images dans une grille de colonnes, c' est très simple. Ajoutez ces petites cartes, puis utilisez l'échelle et la couleur pour les rendre vraiment belles, nettes et bien rangées Vous pouvez faire des critiques, vous pouvez faire comme des boîtes à plusieurs niveaux. Vous pouvez créer des chronologies, comme s'il y avait tout un tas de choses que vous pouvez créer lorsqu'il s'agit de créer une mise en page En général, je crée en 1920 par dix pixels. Ou vous pouvez toujours enregistrer des objets à moitié. Ensuite, lorsque vous l' exportez, vous pouvez le doubler. Vraiment, vous pouvez aussi faire 14 40 P par 25 60 pour deux. Ou tu peux en faire quatre comme tu veux. Mais Illustrated ne possède pas le plus grand plan de travail. C'est assez limité dans Figma, vous pouvez créer autant de cadres vous le souhaitez, ou même de planches. Je vais vous montrer un autre exemple de présentation à un client. Maintenant, lorsqu'il s'agit de quelque chose qui a été fait dans le domaine de la conception, je rédige généralement des documents plus longs dans le domaine de la conception, car il se peut que vous deviez les imprimer sur un rapport visuel, un livret ou une brochure. Mais s'il s'agit d'un illustrateur et que j'envoie simplement des informations sous forme numérique, j'utilise simplement Illustrator ou Figma Voici un exemple de proposition que j'ai faite. Je ne vais pas vous montrer tous les détails, mais vous pouvez voir une simple grille à deux colonnes, une mise en page simple. Ils avaient déjà établi leur marque et leurs polices de caractères. Donc, tout ce que j'avais à faire était de mettre en page, mettre le contenu, de déplacer les choses. Mais tracez clairement la police ici en utilisant gras pour ces sous-titres, tout en gardant le texte vraiment propre Nous avons également un espace pour gouttières ici. Comme il y a beaucoup de texte, nous devons soit étendre la marge sur les côtés, soit augmenter la gouttière Mais ensuite, cela augmente le nombre de pages. Lorsque vous rédigez de longs documents et que vous augmentez le nombre de pages, vous devez ajouter des graphiques, trouver plus d'images, et cela prend plus de temps, etc. Mais en général, comme je le présente, parce que l'UTS est une université, c'est plutôt une marque futuriste moderne, ce genre de choses Pour cela, nous utilisons un dispositif graphique. Nous l'appelons, ils ont comme cette lentille composée de deux cercles, ce qui ressemble à une lentille oculaire. C'est pourquoi nous l'utilisons. Vous pouvez le voir en utilisant de simples icônes linéaires, en utilisant des images, en utilisant de la typographie à l'intérieur de cet espace Cela a parfaitement fonctionné. Vous pouvez voir ce texte ici, vous pouvez voir que c'est un espace parfait pour y mettre une petite citation, ce qui est sympa. L'espace blanc laisse beaucoup de marge de manœuvre au texte . Tout est une question d'échelle, espaces blancs, de rendre les choses visuelles, d'ajouter des chiffres, d'ajouter des sous-lignes en gras, des titres, etc. Il existe quelques exemples de mise en page. 9. Mon système de logiciel de polices: Vous vous demandez probablement comment je gère toutes mes polices, toutes les 11 000 vous vous demandez probablement comment je gère toutes mes polices Le logiciel que j'utilise s'appelle Font base. Il fonctionne pour Mac, Windows et Linux. Je suis un passionné de PC, je suis sur PC. C'est ce que j'utilise. Je l'adore parce que c'est minimaliste, c'est en noir et blanc. C'est simple. Et il est facile de voir toutes les polices d'un seul coup d'œil. Et je peux ajouter des polices très facilement. La façon dont je le fais, c'est que j'ai un dossier de bibliothèque de design, dans lequel j'ai un dossier de polices , puis j'étiquette simplement par année. Chaque année, il se peut que je fasse l'acquisition de nouvelles polices de caractères. Quoi qu'il en soit, si je vais en 2024, vous pouvez voir que j'ai quelques polices là-dedans, 2023, j'en ai d'autres, comme vous pouvez le voir, etc. Et j'ai évidemment plus de polices sur mes disques durs, mais j' utilise généralement uniquement celles que je suis prêt à utiliser. Une fois que tout est bien rangé, je peux simplement accéder à la base de polices et rechercher des polices, ce qui est cool Je peux littéralement appuyer sur le bouton du voyant vert et je vais le désactiver Si je ne veux pas celui-ci, il le désactivera simplement, ce qui est vraiment cool Je peux aller en bas et voir tous mes dossiers. Je peux cliquer sur Ajouter, puis ajouter une police, un dossier, un dossier surveillé ou une collection. Par exemple, si je clique sur Ajouter un dossier, je localise simplement le dossier que je vous ai montré auparavant. Je vais peut-être aller au dernier. Peut-être que vous voulez télécharger celui-ci, vous suffit de cliquer sur Sélectionner et il l'ajoutera. J'ai déjà pris les devants. Je suis entré ici et j'ai un panneau. Je peux cliquer avec le bouton gauche de la souris sur Afficher la famille, voir le texte violet. Ensuite, je peux voir chaque police individuelle. Parfois, je dis TTF ou OTF, c'est très bien. Mais vous pouvez, en fait, je peux désactiver certains poids dont je ne veux pas Peut-être que je veux juste du gras ou du moyen. Je peux juste l' éteindre. C'est vraiment facile. Et puis, quand je retournerai dans Illustrator, il sera enregistré, puis il me suffira d'attendre 10 secondes pour qu'il se charge. Et puis je peux y trouver la police. Je dois signer. Vous pouvez voir que si je désactive la déconnexion, je la désactiverai. Maintenant, revenons à l'illustrateur. Vous pouvez voir maintenant qu'il y a l'Astérix, parce que je l'ai essentiellement éteint et maintenant il ne fonctionne plus comme vous pouvez le voir ici Ensuite, il suffit de le rallumer et il devrait fonctionner. C'est ainsi que je l'utilise. Cela n'a rien d'extraordinaire. J'aime juste que tout soit organisé. Je peux voir toutes mes polices actives en cliquant sur. Mes polices inactives sont environ 9 000 J'ai beaucoup de polices différentes ici, mais je ne les utilise évidemment pas, je ne les utilise que certaines. Pour certains projets, je peux les voir tous les 11 000 et les parcourir ici Je peux changer de couleur. Peut-être que vous voulez que tout soit rose ou vert ou autre, cela dépend vraiment de vous. Je peux changer la couleur de fond si tu veux l' inverser. C'est faisable. Deux totalement gratuits. Je peux modifier l'alignement en cliquant sur l'outil d'alignement. Et je peux aussi tout agrandir en faisant glisser le curseur vers le haut C'est un bon moyen de voir toutes mes polices d'un coup d'œil et j'adore voir ça. C'est vraiment facile. Vous pouvez également ajouter une collection, alors je voudrais peut-être San Seraph Je peux simplement taper la nouvelle collection ici. Je peux donc cliquer sur une collection, puis sur Ajouter. Je peux ajouter un dossier. Je voudrais peut-être tout ajouter dans ce dossier. 2023, je viens de le sélectionner. Maintenant, toutes ces polices sont chargées dans cette collection futuriste C'est une bonne chose parce que je peux alors avoir toutes ces collections de différents styles catégories de pontifes Je peux simplement écrire un clic et les désactiver tous en même temps ou je peux simplement les supprimer comme ça. C'est super facile à utiliser. Je peux aussi le désactiver et le rallumer avec le petit bouton vert rouge, c'est la base de caractères. Je pense que c'est un excellent outil. Si vous ne disposez d' aucun outil de gestion, il est bon de l'utiliser. Windows et Mac ont un système par défaut, mais il est généralement maladroit et mauvais à utiliser Ça ne me plaît pas. Il s'agit simplement d'un logiciel facile à utiliser. 10. Les besoins en typographie: En tant que designer, vous devez appliquer des règles typographiques spécifiques Je crois que vous pouvez parfois enfreindre les règles lorsque vous concevez quelque chose. C'est plus créatif, la marque est plus fun. Vous n'avez pas vraiment de réseaux, vous êtes en train de les casser, c'est très bien. Et parfois, les designers prennent certaines décisions. Mais au fond, vous devez avoir une compréhension des principes fondamentaux. Et puis, une fois que vous les aurez comprises, vous pourrez vous affranchir de ces règles. Mais il est toujours préférable de privilégier la clarté plutôt que l'intelligence, surtout en matière de design Parce que lorsqu'un client arrive sur un site Web ou qu'il lit quelque chose, il souhaite obtenir immédiatement les informations dont il a besoin. Ils ne veulent pas être débordés. L'information doit être en mesure de communiquer l'objectif ou l'action en justice ou tout ce qu'elle essaie de faire. La première chose dont je voudrais parler concerne les orphelins et les veuves Un orphelin est un mot coincé tout seul au bas d'une ligne ou d'un paragraphe, et la veuve, c'est le contraire C'est au début de la ligne où il n'y a qu'un seul mot. J'ai trouvé ce site Web appelé Food Hero's, une application alimentaire où ils peuvent commander des produits d'épicerie et d'autres Maintenant, si je fais défiler l'écran vers le bas, vous pouvez voir ici, que voyez-vous ? Il y a un orphelin ici, le mot « produits ». Quand vous lisez ce texte, vous pouvez voir que vous l'avez lu , les deux lignes, puis il se coupe et ça fait bizarre. impression qu'il y a tous ces espaces blancs vides que vous pouvez voir ici. C'est orphelin quand il ne s'agit que d'un mot en soi. Maintenant, ce n'est pas bon, ça a l'air drôle, ça a l'air bizarre. Cela crée également un espace blanc gênant autour de ce texte. Cela ne semble tout simplement pas à sa place. Pour le rendre plus beau, vous devez le corriger. Soit vous réduisez le texte. Le sel tient sur deux lignes, ou vous pouvez agrandir le texte pour que certains mots tiennent sur trois lignes. Ou vous pouvez réellement utiliser des sauts de ligne. En général, appuyer sur Shift Enter peut provoquer un saut de ligne. Ce que vous pouvez faire, c'est comme apporter un excédent, ce mot, et l'apporter ici, puis il rentrera ici et vous aidera à passer à la deuxième ligne. C'est une façon de le faire avec les sauts de ligne. Ensuite, il vous suffit de vous assurer qu'il fonctionne en petite et grande taille. Je peux zoomer, je peux zoomer sur la page, et à différentes tailles, cela peut sembler un peu différent. Si je zoome, vous pouvez voir sur un écran plus grand quoi cela ressemblera. Cela fonctionne, c'est bon. Mais la majorité des gens auront probablement 1920 écrans, soit 14 ou 40. Maintenant, vous pouvez voir qu'il y a aussi un orphelin ici. faites défiler le mot Maintenant, faites défiler le mot vers le bas et vous verrez qu'il est très long. Et puis il coupe et télécharge l'application. Maintenant, j'aurais mis cette ligne et je l'aurais mise sur la deuxième ligne. C'est ce que j'aurais fait pour éviter les orphelins. Il est un peu plus difficile de trouver des veuves parce qu'on ne les voit pas autant. Maintenant, une autre chose que je déteste voir , c'est qu'il n'y a pas contraste de sous-texte entre le titre et le corps du texte Habituellement, les gens choisissent la même couleur. Vous aurez un titre blanc , puis un corps blanc ou un titre noir Et comme un corps 100 % noir, il est préférable d' avoir un peu plus de contraste et de rendre le texte un peu plus clair ou un peu plus foncé pour qu'il n'ait pas exactement le même aspect. C'est plus facile à lire si je fais défiler la page vers le bas. Je suis en vidéo, j' ai les menus. Je vais faire défiler la page vers le bas et vous montrer ce que je veux dire. Vous pouvez voir ici, si je zoome sur le numéro un, vous pouvez voir qu'il y a un étrange verger ici. Il y a comme une lacune. Comme vous pouvez le constater, il n'est pas complètement aligné. J'ai l'impression que c'est une erreur ou que cela pourrait être un bogue. Je ne sais pas, c'est un peu bizarre. Mais je veux que tu fasses attention au texte. Vous pouvez voir que ce texte est de la même couleur que ce texte. Si je fais juste apparaître ma police ninja, vous pouvez voir si le code couleur que je passe sur le code couleur est FAD. Je ne m'en prends pas aux designers qui l'ont conçu. Ce n'est pas le problème. Il s'agit de comprendre les principes. Ce que j'aurais fait, c'est rendre ce texte un peu plus gris. C'est ce que j'aurais fait du blanc cassé, un peu plus gris, alors j'aurais probablement augmenté un peu plus gris, alors j'aurais probablement augmenté la hauteur de la ligne juste pour qu' elle se reproduise, parce que j'ai l' impression que tout est serré. Cette section ici, ce n' est pas une ligne, alors vous avez cette section est tellement proche de cette vidéo qu'elle semble un peu serrée. Si je fais défiler l'écran vers le bas, ce texte ressemble à une superposition, ce qui est un peu distrayant, parce que lorsque vous essayez de voir l'animation vous distraire, cela semble un peu étrange, il ressemble à un gros bloc de texte blanc difficile texte blanc Ce que je vais faire, c'est améliorer la hauteur de la ligne prédéfinie et le contraste du sous-texte Cela va beaucoup améliorer les choses. Maintenant, je voudrais vous montrer un autre exemple. Tout dépend de la largeur maximale ou de la largeur de colonne d'un corps de texte ou d'un sous-texte Maintenant, lorsque vous avez quelque chose de très long qui couvre toute la page et qui n'est pas un titre, c'est très difficile à lire Cela va fatiguer le cerveau parce que le cerveau, vos yeux, doivent bouger de gauche à droite. Et si c'est trop long, cela commence à devenir fastidieux et fatiguant Je souhaite faire défiler cette section vers le bas. Ça a l'air bien. Je vais maintenant faire défiler la page vers le bas. Une fois que j'arrive ici, vous pouvez voir ce texte est très long, qu'il occupe presque toute la largeur de cette section ou de la page. Si je zoome, vous pouvez voir maintenant que l'un des conseils que j'ai appris est d' avoir une largeur définie, généralement autour de 600 pixels. Lorsque vous l'avez fait, vous voulez simplement raccourcir cette longueur pour qu'elle soit plus facile à lire. C'est dans un bloc et votre œil n'a pas besoin de voyager trop loin pour lire. va falloir que je bouge un peu la tête juste pour lire tout ça. Et c'est épuisant. C'est fatiguant. Et je lis aussi ce défilement vers le bas. Vous pouvez voir que ce texte est également très long. Cela devrait être plus court. Ce que je vais faire, c'est probablement couper la parole par ici comme ça. Ensuite, il s'empilera peut-être quatre lignes, mais ce n'est pas grave. C'est mieux que de tout lire. C'est trop long. Tu veux l'avoir ici. Une autre chose importante est de toujours être cohérent. Maintenant, parfois, les gens peuvent effectuer des tests AB sur différentes pages de destination. Vous pouvez avoir différents boutons ou différents textes, et je comprends parfaitement cela, mais pour la majorité des sites, vous voulez être cohérent avec les appels à l'action, avec les boutons, et également avoir un alignement lorsqu'il s'agit d'aligner vos colonnes ou vos grilles. Aligner votre texte Par exemple, j' utilisais Toggle pour suivre mon temps. Maintenant, j'utilise une autre application. Mais vous pouvez voir ici l'appel à l'action en haut à droite dit : « Essayez gratuitement ». Ensuite, le bas indique : Commencez le suivi gratuitement. Je pense qu'ils devraient simplement consolider cela et avoir le même bouton. Non seulement cela, mais ce bouton est d'une couleur différente. Vous pouvez voir que c'est comme si la lumière le rose rendaient la lecture un peu difficile. En fait, si vous avez un écran lumineux et que celui-ci est un bouton rose, c'est incohérent. Ce serait bien mieux s' ils avaient juste la même couleur. Évidemment, je peux dire pourquoi ils l'ont fait, c'est parce que la partie supérieure est rose, cette partie, le haut, est rose. C'est un peu distrayant. J'ai envie de l'avoir là, comme si ces choses devraient probablement être dans le pied de page quelque part, non ? Il devrait être là. Comme s'ils avaient deux menus. J'ai l'impression que c'est trop confus, qu'il se passe trop de choses ici. Je vais probablement me débarrasser de cette barre, mettre une partie dans le menu , puis changer le bouton pour qu'il soit cohérent. Vous vous souviendrez toujours d'avoir de la cohérence. C'est mieux quand un client tombe dessus, qu'il ne s'embrouille pas, qu'il ne s'énerve pas, qu' comprend sur quoi il clique, ce qu'il fait Voici un autre exemple, ces gars-là s'en sortent vraiment bien. J'utilisais le site Bond il y a longtemps pour établir des contrats, mais ils sont très cohérents avec le bouton. Vous pouvez voir que c'est un démarrage gratuit et aussi un démarrage gratuit. Il est très clair que c'est constant. Le bouton vert, le texte ou les minuscules. Vous n'avez pas un seul bouton, une majuscule et une minuscule parce que ce serait bizarre. Ça aurait l'air drôle. Cela fonctionne vraiment bien. C'est très constant. Vous pouvez voir comment ils ont opté pour le look arrondi et même cette barre est arrondie, elle y est cohérente. Je les aurais probablement gardés au lieu de les garder comme s'ils étaient arrondis, mais ils ne sont pas complètement arrondis. Comme une pilule, c'est plutôt un rectangle. J'aurais appliqué la même chose ici avec ces petites étiquettes qui auraient été plus cohérentes. Je pouvais le dire. Évidemment, j'essaie de faire en sorte que cela soit différent et se démarque. Maintenant, vous pouvez également remarquer que cela n' est pas aligné sur la barre de navigation. Si je trace juste une ligne, vous pouvez la voir ici, puis nous avons cette barre de navigation Maintenant, vous voulez vous assurer qu'il est possible de rompre l'alignement parfois, mais cela semble un peu déplacé, comme s'ils auraient dû l' agrandir et le ramener vers la gauche. Si je zoome, vous pouvez voir qu'il reste le même. C'est un peu bizarre, c'est un peu bizarre. Habituellement, comme si vous vouliez essayer d'aligner quelque chose. Si nous mettons la ligne ici, suivez-la simplement avec votre œil. Vous pouvez voir que cela ne correspond pas vraiment à cette barre de navigation, ce logo ne correspond à rien, même à cette section ici. C'est terminé. Vous avez cet alignement ici, dans la section centrale, il ne s'aligne qu'avec le pied de page Il serait préférable qu' il soit aligné sur certains de ces éléments. Comme certains de ces éléments graphiques, même des cartes, voici quelques conseils typographiques matière de design et, espérons-le, des améliorations. 11. Merci: vous voulez mettre en pratique certaines des compétences dont nous avons parlé, je vous recommande de suivre les projets de cours. L'une consiste à créer une image de héros pour notre site Web axée sur la typographie, et également à créer un logo axé sur l'utilisation deux polices et leur combinaison . Assurez-vous de travailler dessus. Téléchargez-les et je vous ferai part de mes commentaires du mieux que je peux. Je vais également inclure des ressources que vous pouvez cliquer et télécharger pour trouver des sites de polices et des éléments comme ceux que j'ai mentionnés dans le cours. Tu peux vérifier ça. Je mettrai les liens dans la section du projet. Merci beaucoup et je vous verrai bientôt.