Chaque refonte est une souffrance. L'équipe passe des mois à mettre à jour l'apparence du produit, et les utilisateurs se plaignent toujours : les boutons « sont mal placés », les couleurs sont agressives, l'accessibilité « a été oubliée ». Mais il existe une recette pour créer une interface qui ne s'effondrera pas après la prochaine mise à jour de style et qui passera facilement l'audit d'accessibilité (WCAG). C'est — un système de conception conçu pour durer.
Pourquoi le système de conception est plus important que la mise en page
La mise en page dure des mois, un an maximum. Le système de conception vit pendant des années, idéalement une décennie.
conserve tous les motifs : du bouton aux formes complexes ;
permet d'apporter des modifications à l'échelle mondiale, et non de manière ponctuelle ;
rend les refontes prévisibles : le thème change, mais la logique ne se brise pas.
Sans elle, le produit devient un chaos où chaque page est unique et l'audit d'accessibilité devient un « champ de mines ».
Système de conception durable : 3 principes clés
1. Des jetons au lieu du chaos
Les couleurs, les retraits, les tailles de police doivent être stockés sous forme de variables (jetons de conception). Vous changez un jeton et tout le système est mis à jour. Ainsi, l'interface utilisateur s'adapte facilement au rebranding ou au dark mode.
2. Composants au lieu de copier-coller
Il devrait y avoir un seul bouton avec une douzaine d'états, et non 20 « boutons similaires » différents. Cela réduit les bogues et permet de gagner du temps lors des refontes.
3. Accessibilité par défaut
Dès le début, pensez au contraste, aux trucs, aux attributs aria. C'est moins cher que de réparer les « angles morts » après les plaintes des utilisateurs ou un audit.
Comment le système de conception et l'accessibilité sont-ils liés
Si le système est construit correctement, l'accessibilité devient « intégrée » dans chaque composant :
✅ Les boutons ont déjà des styles de focus.
✅ Les formulaires sont pré-étiquetés pour les lecteurs d'écran.
✅ Les couleurs sont testées pour le contraste.
Cela signifie que lorsque vous recevrez un audit, vous n'aurez pas à éditer 1000 pages, mais quelques composants.
Exemple vivant
La banque conventionnelle fait une refonte :
Dans l'ancien système, il faut passer manuellement 200 écrans.
Dans le système de conception, il suffit de mettre à jour le thème et les boutons « se recolorent » automatiquement.
En résumé : 3 refontes en 5 ans, et l'interface utilisateur reste cohérente, accessible et « vivante ».
Mini checklist pour votre équipe
Toutes les couleurs et tailles sont présentées dans les jetons
Les composants sont réutilisables et documentés
Le contrôle du contraste est intégré dans le CI/CD
Il existe une documentation sur l'accessibilité pour les concepteurs et les développeurs
Toutes les refontes commencent par une mise à jour des jetons, pas par une « recherche-remplacement manuelle »
Dans l'application Code il y a des cours de programmation vraiment cool. Tout est présenté dans un langage simple, avec de la pratique et des projets réels.
Et dans notre Chaîne Telegram Nous discutons des dernières nouvelles du monde du développement, partageons des idées et des mèmes, discutons des tendances et grandissons ensemble dans la profession. Rejoignez-nous, ce sera intéressant ! 🚀