Refonte du site
Dafont
Rôle
UI/UX Designer
Outils
Figma
Type
Design system · Refonte web
Année
2025
Dafont est l'une des plus grandes plateformes de téléchargement de polices gratuites au monde. Malgré son immense popularité, son interface n'a pas évolué depuis des années.
L'objectif de ce projet était de concevoir un design system complet puis de l'appliquer à une refonte totale du site, du zoning jusqu'aux écrans finaux.
Problème
Dafont est une plateforme historique de téléchargement de polices, mais son interface actuelle présente des limites fortes en termes d'ergonomie, de navigation et de cohérence graphique.
Design System
Création d'un design system complet avec des tokens de couleur, une typographie définie et des composants réutilisables pour garantir la cohérence sur l'ensemble du site.
Nouvelle fonctionnalité
Création d'une nouvelle fonctionnalité : Génération d'un code d'intégration des polices. Lorsqu'un utilisateur clique sur le bouton « Création d'un code d'intégration », une fenêtre s'ouvre et affiche le code HTML à insérer dans la balise <head> de son projet.
Design system
Un design system complet — tokens de couleur, typographie et composants réutilisables — pour une cohérence totale du site.
Refonte de l'interface
Une interface modernisée du zoning aux écrans finaux, pour dépoussiérer une plateforme historique.
Nouvelle fonctionnalité
Génération d'un code d'intégration des polices : un clic ouvre une fenêtre affichant le code HTML à insérer dans le projet.
Une fois la structure validée, je suis passé à la conception de la Main UI pour donner vie à l'interface sur les pages Home, Recherche et Fiche police.
Cette étape m'a permis d'appliquer l'identité visuelle, d'harmoniser les composants du design system et de peaufiner les détails d'interaction pour offrir une expérience esthétique, accessible et engageante.
Page d'accueil
La nouvelle home applique le design system : hiérarchie claire, recherche mise en avant, prévisualisation des polices et cohérence graphique.
Page typo
La fiche détaillée d'une police : aperçu des styles, réglages de taille et de poids, forme des caractères, glyphes et génération du code d'intégration.
Création du code d'intégration
La nouvelle fonctionnalité : un clic génère le code d'intégration de la police, affiché dans une fenêtre avec le HTML prêt à copier et à coller dans le projet.
Typography
Lato
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !@#$%&*