Site Web Professionnel et Design Système
Conception d'une vitrine et d'un design système personnel depuis zéro
Comment construire un design système cohérent et accessible en utilisant les outils d'IA générative comme accélérateurs de conception ?
Résumé
Se lancer en indépendant implique d'avoir une vitrine professionnelle en ligne. N'en ayant pas à ce moment-là, j'ai conçu ce site depuis zéro (design système inclus) en me fixant des contraintes fortes dès le départ : accessibilité numérique, identité visuelle distincte, et expérimentation concrète des outils d'IA dans un cycle de conception réel.
- Design système
- Accessibilité numérique
- IA générative
- Benchmark
- Prototypage
- HTML / CSS / JavaScript
Contexte
- Type
- Projet personnel
- Statut
- En production, évolution continue
- Stack
- HTML, CSS, JavaScript (sans framework)
- Périmètre
- Design système complet + site vitrine
Travailler l'accessibilité numérique sur des sites web implique de comprendre ce qui se passe côté code. Il n'y a pas de meilleur exercice que de construire sans framework pour vraiment maîtriser HTML, CSS et JavaScript. Le choix de tout construire depuis zéro était donc délibéré : une vitrine professionnelle et une compréhension concrète des technologies du web, les deux en même temps.
Ce que j'ai fait
Poser les intentions du design système
Les seules certitudes au départ : une couleur verte comme teinte principale, des polices compatibles accessibilité, un style anguleux évoquant la bande dessinée, et une navigation latérale adaptée aussi bien au mobile qu'au desktop.
Les premières itérations ont été menées avec des IA text-to-text (ChatGPT, Claude) pour générer des dossiers de travail et des fichiers de tokens à importer dans Figma. C'est lors de ces échanges qu'a été choisie la police Luciole, conçue pour répondre aux exigences d'accessibilité numérique. Le résultat restait cependant visuellement peu convaincant, et les allers-retours entre fichiers de tokens et Figma peu efficaces.
Accélérer avec Claude Design et GitHub Copilot
L'annonce de Claude Design par Anthropic a changé la donne. L'outil permet de générer un design système à partir de quelques éléments avec un rendu visuel quasi-immédiat, bien plus efficace que la manipulation manuelle de fichiers de tokens. Les composants générés peuvent ensuite être récupérés dans Claude Code, qui prend en charge le développement et peut créer ou modifier des composants Figma pour assurer la cohérence d'ensemble.
C'est à cette étape qu'ont été introduits les personnages Vincent Cartoon, inspirés des Bitmoji 2D de Snapchat (version 2016), pour ancrer une identité visuelle distincte, loin des rendus génériques trop répandus. L'effet bande dessinée a été pleinement intégré au design système.
L'implémentation a été finalisée dans VS Code avec l'aide de GitHub Copilot, permettant de valider les choix directement dans le navigateur. Google Stitch, outil similaire de Google, a également été testé à cette étape, avec des résultats moins convaincants.
Les limites rencontrées
L'utilisation des outils IA n'a pas été sans accrocs :
- Quotas de Claude Design : un prompt mal défini peut épuiser le quota hebdomadaire en quelques échanges. Résultat : plusieurs jours sans rendu visuel disponible, le design système n'étant pas encore finalisé.
- Claude Code : comme tout générateur de code, il vaut mieux lui confier de petites tâches ciblées que des chantiers trop larges, au risque d'atteindre les limites de la session sans pouvoir corriger le résultat.
Ces contraintes font partie de l'apprentissage, et ont orienté la façon d'intégrer ces outils dans les projets suivants.
Résultat
Le site comprend une page d'accueil, une page projets avec vue détaillée au clic, une page de contact, et les pages mentions légales et accessibilité. Il est ma vitrine principale, partagée à chaque prise de contact professionnelle.
Il évolue en continu : chaque nouvelle étude de cas est l'occasion d'enrichir le design système, d'affiner les composants existants et d'expérimenter de nouvelles approches en matière d'accessibilité et d'expérience utilisateur.
Vous souhaitez en savoir plus ?
Ce projet illustre une démarche de conception complète, de la définition des intentions jusqu'à l'implémentation. Contactez-moi si vous souhaitez en discuter ou si vous envisagez un projet similaire.