Le Design System

La recherche constante de cohérence et d’efficacité est primordiale pour offrir une expérience utilisateur la plus pertinente possible. 

Vous rencontrez souvent des écarts de design, des incohérences ou des problèmes d'harmonisation de vos interfaces ? Le design system peut être une solution à développer au sein de vos équipes pour répondre à  l’enjeu de digitalisation.

‍

Qu’est ce qu’un design System ?

‍

Le design system est une bibliothèque complète de visuels, de composants, de styles et de principes de code, spécialement conçus pour être réutilisés facilement. Il se présente comme un kit pour les UX/UI designers et les développeurs et constitue une bibliothèque de référence et un guide pour la conception d’applications ou de solutions métiers. 

‍

Le design system comprend des guides de styles  qui définissent les règles de conception (guidelines), des composants UI qui permettent de construire rapidement et de manière cohérente les interfaces utilisateur, des palettes de couleurs et leurs règles d’utilisations, des grilles  pour le positionnement des éléments (grid layout), ou encore des typographies spécifiques, etc.

‍

En utilisant des éléments de design system déjà codés, l’équipe d’UX/UI designers peut créer des interfaces utilisateur plus rapidement tout en permettant aux développeurs de gagner du temps en utilisant des composants déjà existants. 

‍

Décathlon, Adobe, Red Bull, Doctolib ou EDF ont déjà adopté et mis en place leur propre design system avec succès. 

‍

Dans le milieu industriel et plus particulièrement dans l’industrie du ciment et du béton, il est nécessaire de mettre en place un design system pour améliorer l’efficacité et la cohérence de la conception d’interfaces utilisateur pour les applications et solutions métiers. En tant que précurseur dans ce domaine, votre entreprise pourrait bien bénéficier d’un avantage concurrentiel intéressant.

‍

Quels sont les avantages du Design System ?

‍

Si vous êtes encore dubitatifs quant à investir dans un design system, laissez nous vous faire une liste non exhaustive de ses avantages : 

‍

• Une cohérence visuelle et fonctionnelle :  grâce au design system, les applications et produits sont plus harmonieux en éliminant des éléments non essentiels

‍

• Un gain de temps et une meilleure efficacité : chez le1817, notre équipe conçoit des applications métiers pour des clients industriels pour répondre au besoin d’harmoniser et homogénéiser la partie graphique et économique. Utiliser un design system est un véritable gain de temps pour les équipes design et développement. En réutilisant des composants issus de la bibliothèque, n’importe quelle équipe peut créer de nouvelles sections sans perdre des heures à essayer de déterminer quels éléments sont existants ou non. C’est comme suivre une charte graphique mais avec des spécificités de code. En ayant une bibliothèque de composants déjà définis, nos équipes peuvent rapidement mettre en place des interfaces cohérentes et réutiliser des éléments prédéfinis, ce qui accélère le processus de conception et de développement.

‍

• Une facilité de collaboration entre les équipes. Mettre en place un design system au sein de vos équipes peut favoriser la communication entre les développeurs et les designers. Cette approche encourage la coopération et la compréhension mutuelle entre les différents membres de l’équipe.

‍

• Une meilleure expérience utilisateur : les clients et les utilisateurs se sentent plus à l'aise avec les produits, car ils deviennent familiers avec les applications et les sites développés. Ils retrouvent les schémas et les conventions auxquels ils sont habitués, ce qui facilite leur interaction et leur navigation. Cette familiarité accrue améliore leur expérience utilisateur et réduit les frictions, car ils n'ont pas à apprendre de nouveaux paradigmes ou à s'adapter à des fonctionnalités inattendues. En offrant une expérience cohérente, le design system crée un environnement convivial pour les utilisateurs, renforçant ainsi leur engagement et leur satisfaction.

‍

Oui mais comment faire ?

‍

Etape 1 : Création graphique des composants et comportements de composants

‍

Avant de se lancer dans un projet, il est essentiel de mener une veille sur les design system existants, d'effectuer une rétrospective des applications développées précédemment, et d'organiser des ateliers avec les développeurs afin de déterminer les composants à intégrer dans le design system et de les prioriser.

En examinant les applications développées auparavant, vous pourrez identifier les composants récurrents et les fonctionnalités les plus utilisées, ce qui aidera à définir les éléments essentiels à inclure dans le design system.

Les ateliers avec les développeurs sont un moyen efficace de recueillir leurs connaissances et leurs idées pour enrichir le design system. Ils peuvent fournir des informations sur les défis techniques, les contraintes spécifiques du projet, ainsi que des suggestions pour améliorer l'efficacité et la réutilisabilité des composants. En collaborant étroitement avec les développeurs dès le début, il est possible de prendre en compte leurs perspectives et de créer un design system le plus adapté.

Comment nous procédons ? Chez le1817, nos équipes design et développement identifient et priorisent cinq groupes de composants essentiels à faire apparaître dans le design system en s’aidant d’une matrice complexité/récurrence : colors (couleurs), heading (titres), link (liens), icon (icônes), select (sélections), etc. Les boutons et typographies ont également été pris en compte.

‍

‍

Pour faciliter le travail des équipes, notre équipe design utilise Figma, un outil collaboratif puissant qui permet de travailler sur un même projet.

‍

Une fois l’étape d’identification terminée, l’équipe UX/UI crée les composants UI dans Figma, où chaque élément visible sur la maquette représente un composant distinct, qu’il s’agisse d’une couleur, une icône, d’un bouton etc. 

‍

Etape 2 : Développement des composants, validation et déploiement

‍

En suivant une approche Agile, avec des sprints de 3 semaines, les équipes de développement travaillent sur les différents groupes de composants préalablement définis. Chaque composant est associé à un ticket spécifique. Les équipes travaillent sur tous les tickets  en vue de préparer la démonstration finale où les composants pourront être utilisés.

‍

Pendant chaque sprint, le Product Owner effectue des séries de tests afin de garantir la cohérence entre la conception et le développement, et vérifier le comportement de chaque composant. Les développeurs peuvent retrouver tous les composants dans l’outil Storybook qui permet de créer, visualiser et tester les composants de manière interactive.

‍

Une fois les composants développés, le Product Owner les valide pour assurer leur conformité. Zeroheight est utilisé comme une plateforme de documentation où l'équipe de conception explique en détail chaque composant, son utilisation et son comportement attendu. Cette documentation facilite l'intégration d'un nouveau membre dans l'équipe, car il lui suffit de consulter les informations fournies pour comprendre comment utiliser les composants dans les futures applications. Zeroheight est également synchronisé en temps réel avec Figma, permettant une collaboration fluide entre les équipes de conception et de développement. Il est même possible d'intégrer Storybook pour visualiser l'apparence et les comportements des composants, offrant ainsi une vue concrète de leur utilisation dans les applications.

‍

Le Design System : votre atout pour des projets réussis et des expériences utilisateur harmonieuses

Vous aurez compris, le design system est bien plus qu’une simple collection de composants réutilisables mais un véritable outil qui favorise la cohérence, l’efficacité et la collaboration au sein des équipes de design et de développement. En choisissant d’implémenter un design system, vous créerez des expériences utilisateur plus harmonieuses et réduirez les délais de développement. Si vous décidez de le mettre en place, n’oubliez pas d’impliquer l’ensemble des équipes dès le début, de le maintenir à jour et de réaliser des retours d’expérience réguliers pour favoriser l’amélioration continue.

‍

Vous avez maintenant toutes les clés en main pour réussir la mise en place de votre design system pour vos projets.

‍