Design system : un langage commun pour concevoir plus vite
Vos écrans divergent, vos équipes recréent les mêmes composants ?
Akiani est une agence spécialiste de l'ergonomie et du design. Notre métier, c'est de comprendre les utilisateurs puis de transformer cette connaissance en maquettes et prototypes, à l'échelle du composant comme de l'écran. Quand vos produits grandissent, on réunit ces composants, leurs règles et leur documentation dans une référence commune à vos designers et à vos développeurs.
Quand les écrans divergent
Plus vos produits grandissent, plus les incohérences s'accumulent.
Le constat
La charte décrit l'ensemble des contraintes à satisfaire en matière de conception, en particulier de composants graphiques, d'interaction et d'architecture de l'information. C'est une traduction experte de la connaissance utilisateur collectée en une liste de spécifications. Sans ce socle partagé, le passage de relais avec les développeurs perd en qualité et chacun redessine dans son coin.
Comment on s'y prend
Partir de vos composants et de votre charte
On part de vos interfaces et de vos composants existants. La charte ergonomique décrit l'ensemble des contraintes de conception, des composants graphiques à l'architecture de l'information. C'est la traduction experte de la connaissance utilisateur en une liste de spécifications.
Maquetter du composant à l'écran
On maquette tant à l'échelle du composant que de l'écran, de manière incrémentale. Les outils comme Figma offrent de grandes facilités pour ça, et chaque maquette est livrée accompagnée de toutes les caractéristiques ergonomiques et fonctionnelles la concernant.
Soigner le passage aux développeurs
Le passage de relais avec les développeurs est un point de vigilance important pour s'assurer que le niveau de qualité produit lors du maquettage est maintenu jusqu'à l'intégration. On leur donne accès à l'ensemble des éléments qui leur sont nécessaires, des cotes aux exports.
On l'a fait sur de vrais produits
On construit et on documente ce socle dans nos projets de refonte, là où plusieurs interfaces doivent partager la même base. Sur la refonte de bordeaux.fr, on a mené une conception modulaire : un système de composants réutilisables (mise en avant de citations, navigation par ancres, maillage interne entre contenus, blocs de services aux usagers) que les équipes éditoriales réemploient pour créer de nouvelles pages. Le site refondu atteint 95% de conformité RGAA et un score RGESN de 86%.
Voir nos réalisations en design systemQuestions fréquentes
Pour concevoir des produits plus utiles, plus utilisables et plus désirables, sans recréer les mêmes composants à chaque projet. Le socle garde vos écrans cohérents quand le produit grandit et soigne le passage de relais entre le design et le développement.
On part de vos interfaces et de vos composants existants. On décrit les contraintes de conception, des composants graphiques à l'architecture de l'information, puis on maquette à l'échelle du composant comme de l'écran. On soigne le passage de relais aux développeurs, pour que le niveau de qualité soit maintenu jusqu'à l'intégration.
Le détail des définitions est dans notre glossaire. En pratique, ce qui compte, c'est que vos designers et vos développeurs partagent une même référence de composants, de règles et de documentation.
Quand plusieurs équipes dessinent des interfaces qui divergent et recréent les mêmes composants sans référence commune. Pour un petit périmètre, une bibliothèque et quelques règles partagées suffisent souvent.
Par une structuration claire : un cadre qui protège la collaboration, des points d'échange réguliers et un compte rendu incrémental qui assure la traçabilité et l'historique des décisions. Sans ce cadre, le socle se périme et chacun recommence à dessiner dans son coin.