Design
5 minutes de lecture
Le 18/01/2024
Le Design System, qu’est-ce que c’est ? - Partie 2
La conception d'un Design System est un voyage minutieux où chaque détail contribue à offrir une expérience utilisateur exceptionnelle. Du processus de recherche à la collaboration entre designers et développeurs, voici les étapes clés de ce processus innovant.
Processus de création d’un Design System
1. Recherche et conception
Le périple débute par une exploration approfondie des besoins des utilisateurs. La découverte des préférences, des comportements et des attentes influence le développement des design tokens. Cette étape cruciale garantit que les composants élaborés répondent efficacement et utilement aux demandes des utilisateurs.
2. Documentation
La documentation joue un rôle central dans la réussite d'un Design System. Allant au-delà des simples annotations, elle fournit des explications détaillées sur chaque design token. Présentant les règles d'utilisation, les valeurs par défaut et des exemples concrets, cette documentation clarifie l'utilisation de chaque design token, prévenant ainsi de potentielles mauvaises interprétations.
Qui joue un rôle clé dans ce processus ?
Designers
En tant qu'architectes visuels, les designers créent les éléments graphiques du Design System, assurant une cohérence visuelle à travers différentes interfaces. Ils sont également chargés d'adapter le système pour répondre à l'évolution des besoins des utilisateurs.
Développeurs
Les développeurs traduisent les design tokens en code, assurant une intégration conforme aux spécifications de la documentation. Leur compréhension précise de cette documentation est cruciale pour maintenir la cohérence visuelle définie par les designers. Une collaboration étroite entre les deux équipes est essentielle pour aligner la vision de la conception avec sa mise en œuvre technique.
La création d'un Design System est un processus collaboratif exigeant une compréhension approfondie des besoins des utilisateurs, une documentation claire et une étroite collaboration entre les équipes. Cette approche méthodique établit une base solide pour une expérience utilisateur homogène. Dans la partie suivante, nous explorerons des exemples concrets de Design Systems qui ont révolutionné notre interaction avec des produits et des interfaces familières.
Quelques exemples de Design System
Google a introduit Material Design pour offrir une expérience utilisateur cohérente à travers tous ses produits. Les ombres, les animations subtiles et la hiérarchie visuelle sont des éléments clés de ce design system.
Fluent Design System (Microsoft)
Microsoft a développé le Fluent Design System pour créer une expérience utilisateur qui allie esthétique et fonctionnalité. Ses principes incluent la profondeur, le mouvement et la transparence pour une interface moderne et dynamique.
IBM a créé le Carbon Design System en mettant l'accent sur la flexibilité et la modularité. Il offre une palette de composants qui peuvent être adaptés à divers besoins, tout en maintenant une cohérence visuelle.
Decathlon Design System est le cadre qui aide leur écosystème à concevoir et développer des expériences cohérentes et de qualité. Afin de vous permettre d’utiliser les éléments du Design System en fonction des contraintes produits, Decathlon offre la possibilité d'utiliser les bibliothèques web Vitamin avec différentes technologies & niveaux de granularité avec des packages core développés et maintenus par l'équipe core Vitamin.
Oxygen a été conçu comme une vision holistique où toutes les équipes de conception se réunissent : marque, contenu et produit. Il regroupe tous les éléments, principes et directives qui permettent à leur équipe produit d'imaginer, de concevoir et de développer une fonctionnalité. Ils travaillent ensemble pour produire une expérience uniforme de bout en bout qui répond aux préoccupations de la médecine moderne.
Ces exemples ne représentent pas une liste exhaustive de tous les design systems existants. Si vous souhaitez en découvrir plus, n’hésitez pas à consulter le site Adele qui répertorie les Design Systems disponibles publiquement. Vous retrouverez le même schéma sur le site de Design Systems France qui lui, répertorie les Design Systems français.
Conseils pratiques pour un Design System efficace
Flexibilité et adaptabilité
Un design system doit être conçu avec une flexibilité inhérente. Les design tokens doivent permettre des adaptations tout en maintenant la cohérence. Assurez-vous que votre système peut évoluer pour répondre à des besoins changeants sans compromettre la cohérence visuelle.
Collaboration étroite en équipes
Favorisez une collaboration étroite entre les équipes design et de développement. Les designers établissent les principes visuels, tandis que les développeurs veillent à une mise en œuvre précise. Le maintien d'un dialogue permanent garantit la cohérence entre la vision de la conception et son intégration technique.
Documentation complète
Une documentation complète est essentielle. Elle doit fournir des explications claires pour chaque design token, ses valeurs par défaut, et inclure des exemples concrets etc. Une documentation complète facilite l'adoption du design system au sein de l'équipe et contribue à une utilisation cohérente.
Tests rigoureux
Testez minutieusement votre design system dans des scénarios réels. Basez les ajustements et les améliorations sur les commentaires des utilisateurs réels. Des tests complets permettent de s'assurer qu’il fonctionne de manière optimale dans divers contextes.
Évolutivité
Anticipez la croissance. Votre design system doit s'adapter à l'évolution des besoins de votre produit ou service. Incorporez des mécanismes permettant d'intégrer de nouveaux composants, des design tokens, et d'apporter des ajustements à ceux qui existent déjà, sans perturber la cohésion.
Formation et adoption
Assurez-vous que toute l'équipe comprend les principes et les avantages du design system. Planifiez des sessions de formation pour encourager une adoption cohérente. Une compréhension collective assure une utilisation cohésive et maximise les avantages du système.
En suivant ces conseils, vous pouvez créer et maintenir un design system robuste, alimenté par des design tokens, qui améliore significativement l'efficacité du développement et offre une expérience utilisateur optimale. Les design systems bien pensés sont des atouts stratégiques, contribuant à la réussite à long terme des projets de développement.
Conclusion
La mise en œuvre d'un design system, va au-delà d'une simple tendance dans le monde du digital. Il s'agit d'une approche qui révolutionne la façon dont les interfaces utilisateur sont conçues, développées et maintenues.
Des exemples internationaux tels que Material Design et Fluent Design System, ainsi que des exemples français tels que ceux de Decathlon et Doctolib, ont illustré la façon dont les design system créent une cohérence visuelle et une expérience utilisateur exceptionnelle dans divers secteurs d'activité.
La création d'un design system n'est pas simplement un exercice esthétique, c'est un investissement stratégique. Elle nécessite une collaboration étroite entre les équipes de design et de développement, une documentation complète, des tests rigoureux et une flexibilité qui anticipe l'évolution des besoins.
Tom BERRUYER, UI Designer
