Trouver la bonne typographie ou combinaison de typographies et la bonne palette de couleurs est
essentiellement la première étape lors du démarrage d'une nouvelle conception.
Les typographies et les couleurs sont immensément
important pour établir l’apparence souhaitée pour votre projet.
Alors vous devez vous demander
quel type de police ou de couleur donnera l'émotion que vous recherchez vraiment et avec laquelle vous fonctionnerez le mieux
le brief et l'objectif du client.
Commençons par les typographies.
Je crois fermement que choisir
la bonne combinaison de polices est essentielle à toute conception Web de qualité.
Si elle est bien réalisée, elle peut ajouter beaucoup de personnalité à votre projet tout en garantissant une grande lisibilité.
Quel type de police devriez-vous choisir ?
Faut-il opter pour une police serif ?
Qu'en est-il d'une police monospace ?
Ou peut-être même qu'une police sans empattement serait un choix plus sûr.
Bien,
Il n'y a vraiment pas qu'une seule bonne réponse.
Essayez simplement d'utiliser la police qui reflète le mieux votre stratégie de marque
et la messagerie.
La typographie a le potentiel d’évoquer réellement des émotions.
Par exemple, disons que vous travaillez sur un site Web technologique futuriste pour un produit.
Vous souhaiterez peut-être utiliser une police sans empattement angulaire comme celle-ci,
NB Architect STD, mélangé à une jolie petite monotypographie pour obtenir ce look et cette sensation futuristes que nous obtenons ici.
Et d’autre part,
si vous travaillez davantage sur un site Web de confiserie comme cet exemple ici,
peut-être que vous voulez opter pour une boisson pétillante et ludique
typographie comme celle-ci,
SK Pupuk, pour obtenir ce genre de sensation très amusante mélangée à
Police de caractères variable Chi ici.
Les deux polices ensemble donnent vraiment un aspect super ludique et coloré.
Donc si nous regardons les deux projets,
ils sont vraiment complètement différents.
À part l'image,
la typographie est le seul élément graphique dont nous disposons,
et cela fait vraiment partie du design.
Voici un autre exemple de
site web que j'ai réalisé pour Home Société.
Dans ce cas,
nous avons opté pour une belle typographie serif.
Celui-ci s'appelle GT Super Display.
La raison pour laquelle nous avons décidé d'utiliser cette police est que nous voulions vraiment apporter une touche de sophistication au site Web,
surtout pour les gros titres et les plus gros paragraphes de texte comme ici.
Et pour le texte plus petit,
comme ce que nous voyons ici,
ou les petits détails que l'on a sur les côtés,
nous avons opté pour une typographie sans serif
juste pour être sûr que c'était très lisible.
Et nous avons opté pour une police très légère,
pas trop audacieux, pour vraiment compléter la typographie serif que nous avions ici.
C'est donc vraiment une question d'équilibre,
et nous essayons toujours de trouver la bonne police pour accentuer le contenu que nous voulons mettre en avant,
droite?
La typographie est un excellent moyen de donner plus d’importance à certaines sections et moins à d’autres.
Les informations que vous souhaitez que l’utilisateur lise doivent avoir l’impact visuel le plus fort.
Prenons par exemple ici le site Good is the New Cool.
Ceci est la page À propos de nous.
Je peux peut-être appuyer sur play,
et nous pouvons regarder le prototype.
Donc dans ce cas,
le texte que nous voulons réellement que l'utilisateur lise est volontairement surdimensionné pour lui donner plus d'importance.
Dans ce cas,
nous avons ce gros bloc de texte que nous voulons vraiment que l'utilisateur lise.
Et puis nous avons cette deuxième couche d’informations qui est plus petite et un peu moins importante.
C'est pourquoi la police est plus petite.
Et puis, lorsque nous commençons à faire défiler,
nous avons ce grand titre, encore une fois,
un peu plus grand,
un peu plus audacieux.
Nous voulons que l’utilisateur lise cette partie.
Et puis on revient avec un titre plus petit,
texte plus petit.
Alors gardez vraiment à l’esprit de mettre le contenu qui est le plus important,
le contenu que vous souhaitez que l'utilisateur lise un peu plus gros.
Choisissez la bonne typographie pour ce type de contenu.
Et n’oublions pas la lisibilité.
Si nous revenons ici à notre exemple du site Candy Shop,
vous voudrez peut-être utiliser un plaisir,
typographie funky pour le texte plus gros,
comme ce que nous avons ici.
Mais pour le texte plus petit,
peut-être que ce genre de police n'est pas la plus lisible.
C'est donc une bonne idée de changer et d'avoir une typographie plus lisible,
comme dans ce cas ici,
au moins pour le texte le plus petit et le paragraphe moyen,
et gardez ces typographies funky uniquement pour les gros titres.
De cette façon,
vous veillerez à ce que tout soit lisible,
tu auras toujours cet impact cool,
mais tout sera facile à lire.
Et quand il s'agit du texte plus petit,
comme ce que nous avons ici,
J'essaie généralement de ne pas descendre en dessous de 16 points pour la taille de la typographie.
Parfois, quand nous sommes en majuscules,
peut-être que je descendrai à 12,
13, peut-être 14.
Cela dépend de la typographie.
Aussi,
certaines typographies sont un peu plus grandes et plus faciles à lire.
Mais si vous voulez vous assurer que chaque utilisateur du site Web peut lire tout ce qui s'y trouve,
Habituellement, j'essaie de libérer
un peu plus que ça.
Je vais donc rester entre 16 et 20 pour le corps du texte.
Lorsqu'il s'agit de rechercher et de télécharger des typographies,
il existe de nombreuses ressources disponibles en ligne.
Certains proposent des polices gratuites,
tandis que d’autres exigent un paiement.
Si vous recherchez une excellente bibliothèque de polices gratuite,
Je vous recommande Google Fonts que vous connaissez probablement déjà.
Je pense que pour moi,
c'est la meilleure plateforme gratuite pour utiliser des typographies.
Les typographies sont vraiment bien faites,
bien construits et vraiment faciles à utiliser.
Ils sont optimisés pour le Web.
Vous pouvez facilement les intégrer à n'importe quel site Web.
C'est généralement ici que je vais pour obtenir des typographies gratuites.
Vous pouvez également vous rendre sur DaFont pour des typographies gratuites,
mais je ne suis pas un grand fan de DaFont parce que je pense qu'il y a trop de typographies différentes,
n'importe qui peut télécharger une police sur DaFont.
Vous avez donc de belles polices,
mais vous avez aussi beaucoup de polices pas terribles,
police de caractères pas vraiment bien faite.
Pour moi,
c'est une sorte de fast food
de la typographie.
Vous pourriez y trouver quelque chose de sympa,
mais c'est rare que je vais sur DaFont.
Il existe également de nombreuses autres plateformes sur lesquelles vous pouvez acheter des polices comme FontSquareL.
C'est un endroit où je vais parfois.
Il y a aussi MyFont avec beaucoup de typographies ici.
Et évidemment les polices Adobe Fonts.
Si vous avez un compte Adobe,
vous avez déjà accès gratuitement à de nombreuses typographies différentes.
Et vous pouvez également acheter des polices sur
cette plateforme.
Vous pouvez facilement rechercher des typographies comme vous le faites sur Google.
C'est une excellente plateforme pour moi.
Je pense que Google Font et Adobe Fonts sont parfaits pour les typographies gratuites ou pas trop chères.
J'aime aussi beaucoup ces trois autres plateformes ici.
Nous avons la fonderie de caractères Klim.
J'adore les typographies que crée Klim Foundry.
Ils sont vraiment bien faits,
belles polices.
Mais il faut les acheter,
mais ils ont vraiment beaucoup de personnalité.
Donc si vous cherchez une belle police,
vous voudrez peut-être aller sur cette plateforme.
Vous pouvez également trouver des typographies intéressantes sur ABC Dynamo.
Ils ont des typographies plutôt cool là-bas,
très différent, mais toujours très bien fait aussi.
Pas trop cher non plus.
Et enfin,
une autre plateforme est Paragram Paragram.
J'adore les typographies de Paragram Paragram.
Vous pouvez également trouver ici de nombreuses polices magnifiques.
Vous pouvez également les essayer gratuitement.
C'est ce qui est cool avec cette plateforme.
Vous pouvez trouver une typographie que vous aimez et télécharger la version d'essai.
Et si vous finissez par utiliser la police sur le site Web,
il suffit alors de l'acheter pour avoir les droits sur la police.
Mais au moins, vous pouvez l'essayer sur votre conception avant de l'acheter.
Donc c'est super.
Et vous avez également ici le pack de démarrage de polices qui contient,
Je ne sais pas combien,
Je pense à plus de 50 typographies différentes pour un prix très bas.
Cela peut donc être une bonne option pour les personnes qui souhaitent l’essayer.
Acheter quelques polices sans les payer trop cher.
Pour vous aider à déterminer quelle police choisir,
un bon point de départ est de revenir sur votre mood board.
Voici le mood board d'un projet que j'ai réalisé pour le projet Afterglow.
Et si nous regardons le mood board,
nous pouvons simplement faire défiler et déjà voir quel type de typographies nous pourrions vouloir utiliser.
Si je fais défiler tout,
Je vois que nous avons en quelque sorte un mélange entre la typographie Serif
et typographie Sans Serif.
Je souhaiterais donc peut-être trouver ces deux types de polices.
Pas trop lourd visuellement,
un joli mélange de parfois un peu plus audacieux,
parfois un peu plus léger.
C'est un excellent endroit pour avoir une bonne idée de ce que vous souhaitez réaliser en termes de typographie.
Si nous regardons le mood board que nous avons créé plus tôt pour C2 Montréal,
par exemple, si je fais défiler le mood board,
Je vois tout de suite que je vais probablement vouloir trouver une belle police.
Alors je vais continuer et taper celui-ci.
Et si je fais défiler mon mood board, je peux voir que je vais trouver une belle typographie Sans Serif.
Pas trop léger,
c'est un peu audacieux à utiliser dans ma conception comme ça.
Et partout, c'est cette police de caractère au design très suisse,
un peu comme Helvetica New.
Dans le cas de C2 Montréal,
Je n’ai pas eu à choisir une police car la marque avait déjà sa propre police.
C'est en fait le Nouveau Montréal,
ce qui est logique puisque c'est pour C2 Montréal.
Et New Montreal est une typographie qui ressemble déjà à ça.
C'était donc une bonne chose.
Mais en général,
pour la plupart des projets, vous n'avez pas nécessairement de police avec laquelle travailler, à moins que vous ne commenciez avec un livre de marque avec quelque chose de déjà établi.
Alors tu peux,
ouais, retourne simplement à ton mood board,
Regardez les inspirations là-bas.
Et parfois, il peut y avoir une police sympa dans votre inspiration,
mais vous ne savez pas forcément quelle est la typographie.
Prenons un exemple ici.
Disons que nous regardons cette typographie.
J'aime cette police.
J'aimerais l'utiliser sur ma conception,
mais je ne sais pas quel est le nom.
Il y a donc une plateforme que j'utilise parfois pour trouver de la typographie,
le myfont.com.
Il y a cette option de police ici,
où vous pouvez réellement télécharger une image et cela vous aidera à déterminer quelle est la typographie et recommandera quelques polices similaires à cette typographie particulière.
Disons que j'opte pour celui-ci ici.
Je vais juste capturer cette image ici.
Alors maintenant je l'ai sur mon bureau.
Je vais juste télécharger ceci sur la plateforme,
droite?
Alors maintenant, il me recommande un tas de typographies différentes qui sont très similaires à celle-ci.
Si nous le comparons à ce qu'ils recommandent,
c'est très similaire.
Vous pouvez donc simplement faire défiler,
trouve celui qui te semble le plus ressemblant,
et vous pouvez le télécharger.
Évidemment,
il n'y a pas toutes les typographies et vous ne pourrez pas tout trouver car c'est juste
je recommande les polices qui sont sur leur plateforme.
Mais c'est vraiment génial de vous aider à trouver des typographies.
Et si vous avez trouvé votre police sur un site Web et que vous savez de quel site Web il s'agit,
ce n'est peut-être pas le meilleur exemple.
Allons plutôt sur ce site Web ici.
Et j'adore cette typographie ici.
Donc, parce que je suis sur le site Web,
Je peux utiliser le plugin Chrome qui existe et qui s'appelle quelle police.
Et lorsque vous activez le plugin,
vous pouvez cliquer sur n'importe quelle typographie
tu vois.
Dans ce cas,
Je peux cliquer ici et vous pouvez voir le nom de la police.
Je vois qu'il s'agit du nouveau Hass Display Pro.
Je peux voir la taille.
C'est 120 pixels.
Je peux voir la hauteur de la ligne,
le poids, la couleur, un tas de détails qui peuvent être super utiles lorsque vous recherchez une police.
Vous recherchez peut-être aussi la bonne taille.
Vous aimez la sensation que cela procure.
Vous aimez sa taille.
Vous souhaiterez peut-être avoir un titre de la même taille sur votre site Web.
Alors tu peux simplement entrer ici, voir
exactement tous les détails,
le poids et appliquez-le à votre conception si vous le souhaitez.
Les couleurs sont un autre excellent moyen d’évoquer différentes humeurs et émotions dans votre conception.
Les couleurs chaudes comme le rouge et l’orange peuvent créer un sentiment d’énergie et d’excitation,
tandis que les couleurs froides comme le bleu et le vert peuvent créer une sensation de calme et de détente.
Choisir une palette de couleurs qui correspond à l’ambiance et à la personnalité souhaitées du site Web peut vraiment aider à créer un lien émotionnel plus fort avec l’utilisateur.
Prenons par exemple le site Mana Yerba Mate que j'ai réalisé.
Si nous allons sur ce site,
c'est pour une boisson énergisante.
Nous avons donc beaucoup de couleurs très vives.
C'est très coloré avec les illustrations,
avec la canette, l'appel à l'action,
même les animations sur le texte,
les titres.
Lorsque nous commençons à faire défiler,
Je pense que nous avons cela ici,
Par exemple.
Nous jouons donc vraiment avec les couleurs pour apporter cette grande touche de couleur sur tout le site Web.
Une partie de la conception,
cela fait partie de l'identité de Mana et de l'image de marque.
Si par comparaison,
nous regardons un autre site Web ici que j'ai fait pour Idzfis,
qui est une entreprise de construction industrielle,
nous avons une palette de couleurs complètement différente.
C'est vraiment moins coloré.
C'est ce bleu profond.
Nous avons du blanc,
nous avons du gris, et c'est vraiment plus grave,
plus industriel.
Encore une fois, la couleur joue un rôle important dans la conception dans ce cas.
Cela donne beaucoup de personnalité à l'image de marque et au site Web dans son ensemble.
Et si nous voulons regarder le site Web de C2 Montréal,
ce que nous avons fini par utiliser pour les couleurs,
nous avons fini par utiliser beaucoup de blocs très colorés,
dégradés.
Nous avons ce dégradé bleu de rose et d'orange.
Notre couleur d'accent est en fait ce vert très vibrant.
Nous avons le reste de la palette de couleurs, qui est en réalité juste le noir, le blanc et les niveaux de gris.
Donc quelque chose de très,
très coloré.
Mais c’est vraiment juste une question d’équilibre.
Nous commençons la page avec ces grandes couleurs,
ces gros blocs.
Mais à mesure que nous défilons vers le bas,
en fonction des informations que nous montrons maintenant,
nous montrons plus d'informations sur les intervenants.
Maintenant, nous avons quelque chose de moins coloré,
plus de niveaux de gris,
un peu plus atténué.
Il nous reste encore une touche de couleurs,
mais nous sommes vraiment un peu plus discrets.
Essayez donc de trouver les bons endroits pour mettre la couleur en fonction du brief,
en fonction de ce que vous essayez de dire.
Basé également sur l'image de marque.
Dans ce cas,
c'était basé sur l'identité de l'équipe de cette année,
qui était une perspective combinée.
C'était en 2023.
Si nous regardons la version de cette année du site Web pour 2024,
nous avons une palette de couleurs complètement différente.
Nous avons ce bleu,
blanc,
marron, rose,
vert.
Maintenant la couleur pop,
la couleur d'accent n'est plus le vert.
Maintenant c'est bleu.
Et dans ce cas, nous avons une palette de couleurs complètement différente.
Mais le reste du site reste le même.
C'est ainsi que le projet a été construit,
en s'assurant que nous pouvons vraiment adapter cette section de héros ici,
cette première partie, à l'équipe de chaque année.
Et juste en changeant la couleur,
en changeant un peu la mise en page,
nous avons quelque chose de complètement différent.
C'est pourquoi la palette de couleurs est un élément si important de la conception.
Et
Les typographies sont des éléments clés pour définir la direction artistique et la personnalité d'un site Web.
En sélectionnant des couleurs et des polices qui évoquent l’ambiance souhaitée et fonctionnent avec l’identité de la marque,
Votre site Web peut laisser une impression durable et mémorable sur ses visiteurs.
Dans la prochaine leçon,
nous comprendrons l’importance du système de grille,
dimensions,
et la mise en page dans la création d'une conception bien structurée.