Qu'il s'agisse de son rôle de directeur de création à l'agence créative multidisciplinaire montréalaise Tux Creative , de la supervision de la production numérique de l'agence ou du partage de sa passion pour le design et l'industrie dans le cadre de ses postes d'enseignant et de sa participation à la communauté locale du design, Louis Paquet est un champion de la créativité numérique.
Après avoir débuté comme graphiste, travaillant principalement dans le design éditorial, le packaging et l'identité visuelle, Louis a commencé à manquer d'inspiration, trouvant son travail un peu trop statique. « Fasciné par le cinéma et tout ce qui bouge », nous confie-t-il, « je voulais apporter du mouvement à mes créations », un sentiment qui a amorcé sa transition vers l'interactivité et l'a conduit à concevoir des sites web. Dont celui que vous consultez actuellement, après avoir collaboré avec Mathieu Desjardins, fondateur de Pangram, sur la conception et le développement de notre site 😏.
« À l'époque, je concevais et développais mes sites web en Flash », se souvient Louis. « Pouvoir faire bouger mes créations et interagir avec l'utilisateur était vraiment génial pour moi 🤯 », remarque-t-il, expliquant l'évolution de la technologie et les possibilités infinies de son utilisation. « Malgré toutes ces nouvelles fonctionnalités », précise Louis, « il y a toujours eu une constante importante pour moi : la typographie », le fil conducteur de sa pratique et, de fait, le sujet dont nous avons discuté avec Louis aujourd'hui.
Du choix de la police de caractères à la mise en mouvement de la typographie, Louis nous a expliqué les bonnes pratiques et les bons réflexes à adopter pour utiliser la typographie dans les espaces numériques. À toi, Louis !
Comment faire : Choisir et associer des polices de caractères
LP : Choisir la bonne association de polices est essentiel à toute conception web réussie. Bien réalisée, elle peut apporter une touche de personnalité significative à vos projets tout en garantissant une excellente lisibilité. « Faut-il opter pour une police avec empattements ? Et pourquoi pas une police monochrome ? Une police sans empattements serait-elle plus sûre… ? » Il n’existe pas de réponse unique. Privilégiez les polices qui reflètent au mieux votre stratégie de marque et votre message. La typographie a le pouvoir d’exprimer des émotions. Par exemple, une police sans empattements robuste et anguleuse donnera un look futuriste et technologique à votre nouveau site web de produits technologiques, tandis qu’une police pétillante et amusante conviendra parfaitement à votre site web coloré de confiserie. Dans l’exemple ci-dessous, nous avons choisi une belle police avec empattements (GT Super Display) aux courbes délicates pour sublimer avec élégance le site web de Home Société .
Lorsque vous choisissez votre association de polices, veillez à choisir des polices qui se complètent. Si elles sont trop similaires, vous risquez de ne pas obtenir le contraste visuel recherché. Essayez de combiner une police avec empattement et une police sans empattement, en utilisant l'une pour les en-têtes et l'autre pour le corps du texte.
Vous ne savez toujours pas par où commencer ? Je comprends… Il existe des milliers de polices ! Fini le temps où l'on ne pouvait utiliser que des polices « web-safe ». Mon conseil : essayez, testez, expérimentez ! Vous pouvez télécharger et tester des polices dans vos créations avant de les acheter. Des plateformes gratuites comme Google Fonts et d'autres fonderies offrent la possibilité de tester les polices avant de les acheter. Pangram Pangram en fait partie. Et ai-je mentionné que c'est aussi ma préférée ? Une fois que vous avez trouvé la combinaison de polices idéale, assurez-vous d'avoir la licence web et amusez-vous !
Comment créer une hiérarchie typographique dans la conception Web
LP : La typographie peut être un outil puissant pour donner de la personnalité à votre projet. Mais c’est aussi un outil essentiel pour assurer une visibilité et un contraste adéquats entre les différents éléments de votre site web. Un titre, un paragraphe de texte, un bouton, une information secondaire… Il est important de trouver un de différencier tous ces éléments pour faciliter la navigation et guider l’utilisateur dans son expérience. La typographie est un excellent de donner plus d’importance à certaines sections et moins à d’autres. Les titres doivent avoir l’impact visuel le plus fort, suivis des sous-titres et du corps du texte. Prenons l’exemple du site web de la Plaza St-Hubert . Les titres sont surdimensionnés pour leur donner beaucoup plus d’importance. Ensuite, nous avons des sous-titres plus petits et du texte normal encore plus petit (chacun d’entre eux en PP Montréal Neue).
Pour un titre, vous pouvez utiliser une police plus expressive et pleine de caractère, tout en sacrifiant un peu de visibilité, car elle sera probablement utilisée en grand. Le titre devient alors un élément graphique et une expression de la marque (et non de simples mots). Pour le corps du texte, en revanche, il est impératif de veiller à ce qu'il soit facilement lisible par tous. Cela implique de choisir une police lisible, même en petit format. Ma police préférée pour les textes longs est PP Neue Montreal. Comme dans l'exemple ci-dessous pour le site web de la Fondation Karma, où elle est associée à une police avec empattements (PP Editorial New) pour les sous-titres et à une police spéciale pour les grands titres (Parabole).
Outre le choix de la police, vous pouvez également donner plus d'importance visuelle à certains textes en modifiant leur épaisseur (normale ou grasse), leur couleur (un mot en bleu dans une phrase, par exemple) ou en mettant le texte à mettre en valeur en majuscules. (Attention à ne pas écrire de longs paragraphes entièrement en majuscules, car cela nuit à la lisibilité générale.) Sur le site web Rainbow Registered, nous avons donné plus d'importance à certains mots d'un paragraphe en modifiant leur couleur.
Comment faire : Donner vie à la typographie grâce au mouvement
LP : Le mouvement joue un rôle important dans chacune de mes créations. J'utilise le mouvement pour insuffler vie et personnalité à des sites web statiques, notamment grâce à la typographie animée ! Vous pouvez animer les textes dès leur affichage à l'écran, ou les animer lorsque l'utilisateur interagit avec un élément (un bouton, par exemple). Votre texte peut également être en mouvement continu si vous souhaitez capter l'attention de l'utilisateur. Pour le site web de Brouillon , nous avons joué avec le mot « Brouillon » et avons donné à l'utilisateur la possibilité de créer son propre logo en passant le curseur sur les lettres.
Je suis convaincu(e) par l'importance des textes animés sur les sites web pour améliorer l'expérience utilisateur. Cependant, en abuser (suranimer vos textes) peut avoir l'effet inverse. Il ne faut pas submerger l'utilisateur en animant chaque bloc de texte. Essayez d'animer uniquement les en-têtes lorsqu'ils apparaissent à l'écran. Cela leur donnera de l'importance et les fera ressortir. Quant à vos paragraphes, vous pouvez les afficher d'un seul coup ou opter pour une animation plus détaillée, comme animer chaque lettre individuellement. C'est exactement ce que nous avons fait pour les titres du site web de Khoa Lê :
À la recherche de superbes typographies en mouvement ? Découvrez DIA Studio .
À ne pas faire : les erreurs courantes et ce qu’il faut éviter !
LP : N'utilisez pas trop de polices différentes sur un même site web ! Je sais… beaucoup sont gratuites et tellement belles ! Mais il ne faut pas que votre site ressemble à une pizza toute garnie. Essayez de limiter le nombre de polices à deux ou trois maximum. Cela renforcera votre charte graphique et votre site web sera plus complet.
Un conseil supplémentaire !
Une nouveauté très intéressante avec les typographies web est l'utilisation de polices variables. Vous ne savez pas ce que sont les polices variables ? Consultez cet article . En codant et en jouant avec les polices variables, vous pouvez créer des animations et des interactions vraiment intéressantes sur un site web.Comme ces deux interactions sur le site Editorial New . La première influence le poids du texte, qui s'épaissit à mesure que vous faites défiler la page. La seconde se produit lorsque l'utilisateur déplace son curseur et que le poids de la police change en fonction de sa position.
