Introduction

Le design est un élément important de l’interface utilisateur. Outre l’objectif parallèle de fournir une UX efficace et fonctionnelle, le design a pour but de rendre belles les interactions entre l’humain et la machine, l’UI. Le design est un domaine artistique et innovant, parfois l’essence même de certains objets, d’abord pensés pour être beaux plutôt que fonctionnels.

Néanmoins, il est ici question de web design, voire plus primairement d’UX.

Qu’est-ce que l’UX ?

L’UX, c’est l’expérience utilisateur. Elle doit être au cœur de l’élaboration d’un produit, qu’il soit matériel ou immatériel. L’UX correspond au soucis de permettre à l’utilisateur, une utilisation simple, intuitive, agréable et naturelle. L’UX est intimement liée à l’UI, l’interface utilisateur. L’UX est ce que vous ressentez, l’UI est ce que vous voyez.

Mais où veux-tu en venir ?

Le site OrigineCode est pour moi, le moyen de m’exprimer, de partager mes idées, d’apprendre et si possible d’aider. Dans ce sens, j’accorde une certaine importance au design et au “beau” dans l’interface de mon site. C’est la raison pour laquelle en presque cinq ans, le style de OrigineCode a beaucoup changé. D’abord blanc à colonage, puis blanc “full-width”…

J’ai par la suite posé les bases de ce vous voyez aujourd’hui : une mise en page sombre et contrastée, avec des titres clairs et lisibles. Mes préoccupations furent de prime abord d’ordre esthétique, c’était assez superficiel. Mon site a depuis gagné en maturité. Sa charte graphique, l’UI, est bien plus stable, et je me concentre maintenant sur l’UX.

EDIT : La mise en page a aujourd’hui été mise à jour.

Et donc ?

J’en viens maintenant à cette histoire de typographie – typography comme dans l’image de présentation. Sommairement, la typographie est le domaine du design et des arts qui consiste en la création et la conception de caractères à but esthétique et/ou pratique. Or, lorsqu’il s’agit de lire les pages d’un livre, vous admettrez certainement que plus le texte est lisible, moins il est fatigant d’engloutir les 350 pages de votre ouvrage favori.

Je n’avais pas conscience de ce principe il y a encore quelques mois, lorsque mon site présentait majoritairement des galeries de photos. Le texte y était peu courant et très ponctuel. Mais l’évolution entreprise l’année précédente, a induit ce changement de position vis-à-vis de la typographie.

Ainsi, dans la volonté que j’ai que vous lisiez mes articles, il y a plusieurs conditions à satisfaire :

  • mon site doit vous donner envie de revenir
  • mes articles doivent être bien écris
  • vous devez prendre du plaisir à les lire

En tentant de répondre à ces principes, j’ai été amené à partir en quête de la police d’écriture parfaite pour rédiger mes articles. Un léger historique s’impose alors.

L’évolution

Vous devez tout d’abord savoir que je ne suis pas une formation en design, et qu’il me manque – pour l’instant – un ensemble de compétences important pour accomplir tout ce que je pourrais imaginer entreprendre. Car oui, j’ai un jour caressé l’idée que je pourrais élaborer ma propre police, c’est absolument irréaliste… pour le moment.

Au début, il y avait Google Font, le célèbre service de Google qui fournit aujourd’hui une immense part des sites internet modernes en polices d’écriture ou font en anglais. Guizilla, à ses débuts, se parait de Roboto, ou de Lato ou encore d’Arvo, puis pendant un certain temps d’Open Sans… Des polices très populaires, mais qui par leur popularité en deviennent banales.

L’internet fait aujourd’hui face à une généralisation de sa charte graphique, des combinaisons de polices vues et revues dont je suis maintenant lassé.

Les modes passent, le style est éternel.

Yves Saint Laurent

Loin de m’identifier dans cette citation, c’est pourtant une ligne de conduite qu’il est important d’envisager. Les polices classiques utilisées dans le domaine de l’imprimerie telles que Georgia ou Garamond ou autres polices avec empattement (serif, en anglais), sont par nature peu adaptées aux écrans – de nos jours cette affirmation tend à se contredire – mais ces polices restent des amies fidèles de la lisibilité.

Cependant, mon choix, à la vue de l’évolution actuelle des polices, se porte sur les polices sans empattements (sans-serif). Plus adaptées aux écrans, souvent plus géométriques, plus épurées. Elles sont polyvalentes et modernes, mais pérennes.

Mon premier amour

Me tenant toujours au fait des dernières actualités technologiques, j’ai rapidement appris qu’Apple comptait dévoiler sa propre police. Une de type monospace, ou à chasse fixe, c’est à dire que quelque soit le caractère utilisé, la largeur utilisée par celui-ci sera identique à celle utilisée par les autres caractères. Puis Apple a dévoilé sa police sans empattement, à chasse classique pourrait-on dire. Ces polices, respectivement nommées San Francisco Mono et San Francisco furent, sont et seront toujours à mon sens des modèles typographiques, tel Helvetica.

NB : Apple utilise aujourd’hui SF Mono dans ses outils de programmation et SF dans toutes les interfaces de ses produits.

Toutefois, malgré ma réelle sympathie pour cette police, je ne peux l’utiliser dans tous mes projets, du fait de la licence sous laquelle elle est distribuée. Ce problème je l’avais encore récemment avec Pangram une police très belle pour des titres ou des éléments ponctuels mais moins lisible sur le long terme. J’entretiens donc une relation platonique avec ces polices, et cela s’arrête malheureusement là.

Le saint Graal

Aujourd’hui, la donne a changé. Il me fallait trouver, une police sans-serif, moderne, belle, lisible et que je puisse utiliser dans tous mes projets, afin d’établir une certaine cohérence et de construire une identité visuelle solide autour de Guizilla. Et cette police, je l’ai trouvée, Open Source, moderne, belle, lisible… Je l’utilise en ce moment même, sous vos yeux. Il s’agit d’Inter UI. A mon sens, c’est une police que je place sur un pied d’égalité avec Helvetica et San Francisco. Elle me semble promise à un grand avenir. Je remercie infiniment ses créateurs pour nous avoir offert cette police.

Github Repository >

Conclusion

Certains d’entre vous n’y verrons aucune différence, d’autres apprécieront le classicisme d’Helvetica et la perfection apportée dans les moindres détails de San Francisco et verront quelques défauts dans Inter UI… Là est la beauté de la chose. Je tiens à rappeler qu’Inter UI est une police jeune et s’améliore donc avec le temps.

+

Typography Projects on Behance >