DaFont - Repenser l’expérience et concevoir un design system

DaFont est une plateforme de référence pour découvrir et télécharger des polices de caractères. Son catalogue très riche permet de trouver des typographies pour des usages variés mais son interface historique présente plusieurs limites : une forte densité d’informations, une navigation parfois difficile à comprendre et une expérience peu adaptée aux écrans mobiles.

Dans le cadre du Mastère 2 UX de l’ESD, nous avons travaillé en binôme sur une proposition de refonte de la plateforme. L’objectif était de repenser son expérience, de moderniser son interface et de définir un système de conception cohérent pour accompagner l’ensemble des pages.

Avant de concevoir les nouvelles interfaces, nous avons analysé le fonctionnement du site pour identifier les points à améliorer.

L’audit s’est appuyé sur les heuristiques de Nielsen et les critères de Bastien et Scapin. Nous avons également étudié plusieurs plateformes concurrentes comme Google Fonts, Adobe Fonts et Type Network afin de comparer leurs approches et d’identifier les bonnes pratiques à reprendre.

Cette analyse a fait ressortir plusieurs enjeux : faciliter l’exploration d’un catalogue dense, mieux organiser les informations sur chaque police, clarifier les conditions d’utilisation et proposer une expérience plus cohérente sur mobile.

Le benchmark nous a aussi permis d’identifier des fonctionnalités intéressantes, comme la personnalisation des aperçus, les filtres avancés et les outils pour comparer ou associer plusieurs typographies.

Faciliter la découverte des polices

La recherche est au cœur de DaFont. Nous avons donc imaginé une navigation plus structurée avec des filtres permettant d’affiner les résultats selon différents critères : style, classification typographique, largeur, graisse ou encore système d’écriture.

L’objectif était de mieux accompagner les utilisateurs dans leur recherche, qu’ils sachent exactement ce qu’ils veulent ou qu’ils explorent simplement le catalogue à la recherche d’inspiration.

Donner plus de place à l’expérimentation

Une typographie se choisit aussi en fonction de son rendu. La proposition intègre donc un aperçu personnalisable, permettant de tester un texte et d’en ajuster différents paramètres comme la taille, la graisse ou l’espacement.

Nous avons également imaginé un espace dédié aux associations de polices afin de faciliter la découverte de combinaisons typographiques adaptées à différents usages.

Mieux organiser les informations

La page de détail d’une police a été pensée autour de plusieurs sections : aperçu typographique, informations sur la famille, présentation de l’auteur et conditions de licence.

Cette organisation vise à rendre les informations plus faciles à parcourir et à mieux distinguer les aspects visuels, techniques et juridiques qui entrent en jeu dans le choix d’une police.

Notre travail s’est particulièrement concentré sur la conception UI et la structuration des interfaces.

Nous avons travaillé sur une nouvelle direction graphique avec une palette dominée par l’orange et complétée par des teintes pastel. L’idée était de donner à DaFont une identité plus actuelle tout en conservant un univers créatif qui laisse les typographies occuper une place centrale.

La typographie PP Telegraf a été retenue comme référence principale de l’interface. Nous avons également défini une hiérarchie typographique et des règles d’espacement pour assurer une meilleure cohérence entre les pages.

Le travail ne s’est pas limité à la version desktop. Les interfaces ont été déclinées pour trois formats (desktop, tablette et mobile) avec des adaptations de la grille et des mises en page. Des variantes en mode clair et en mode sombre ont également été prévues.

Pour maintenir la cohérence de l’ensemble, nous avons conçu et documenté un design system destiné à servir de référence pour la conception des interfaces et leur éventuelle intégration.

Le travail a commencé par les fondations : couleurs, tokens sémantiques, typographie et espacements. Ces éléments permettent de définir des règles communes plutôt que de multiplier les valeurs et les styles au fil des pages.

Nous avons ensuite documenté les composants UI, leurs propriétés, leurs différents états et leur utilisation. Des éléments récurrents comme les boutons, les cartes de polices, les filtres et les menus ont ainsi été structurés pour être réutilisés dans plusieurs contextes.

Enfin, nous avons décliné les principaux gabarits de pages en fonction des formats d’écran et des thèmes visuels. La documentation devait permettre de comprendre non seulement à quoi ressemble chaque composant mais aussi comment il s’intègre dans l’interface.

Le projet a abouti à une proposition de refonte fonctionnelle et visuelle accompagnée d’une documentation détaillée.

Les principaux livrables comprennent :

• Une analyse de l’existant et un benchmark concurrentiel
• Une nouvelle direction graphique et des règles de conception UI
• Un ensemble de tokens et de composants documentés
• Des gabarits responsive pour les pages principales
• Des déclinaisons en mode clair et en mode sombre
• Deux documents de référence : une bible fonctionnelle et une bible technique

La bible technique compte 141 pages et détaille les fondations du système, les composants et les gabarits. Associée à la bible fonctionnelle de 29 pages, elle représente un travail conséquent de structuration et de documentation.

Il s’agit d’un projet académique de conception : les fonctionnalités et interfaces présentées constituent une proposition de refonte et non une évolution déployée sur le site officiel de DaFont.

Ce projet m’a permis de travailler sur le lien entre l’expérience utilisateur et la conception d’interfaces. L’analyse de l’existant nous a aidés à identifier les problèmes à résoudre, tandis que le travail UI m’a permis de traduire ces enjeux en choix graphiques, en composants et en gabarits concrets.

J’ai particulièrement apprécié le travail sur le design system : définir des règles, anticiper les différents états d’un composant et réfléchir à la cohérence de l’ensemble demande de prendre du recul sur chaque interface.

C’est aussi ce que je trouve intéressant dans l’UI design : les détails visuels comptent mais ils prennent tout leur sens lorsqu’ils s’inscrivent dans un système clair et pensé pour les usages.