Pourquoi utiliser un design system?

Uber, Airbnb, Salesforce et bien d’autres grandes entreprises partagent un point commun en matière de design: leurs produits sont créés et maintenus par des équipes qui exploitent leurs propres design systems. Ils utilisent ce qu’on appelle des composants modulaires et des principes de conception atomiques provenant de leurs design systems, leur permettant de concevoir des produits et d'innover rapidement.

Le design system n’a pas seulement un impact au niveau des équipes de conception et de développement mais a aussi un impact commercial. Le design system fait économiser énormément d’argent dans le développement d’un produit.

Voyons ensemble ce qu’est un design system, les avantages de son utilisation, ses principes ainsi que son utilisation.

• Qu’est ce que le design system ?
• Les cinq étapes de l'atomic design
• Les atomes
• Les molécules
• Les organismes
• Les modèles
• Les pages
• Pourquoi avez-vous besoin d'un design system?
• Un design system crée de la cohérence entre toutes les plateformes.
• Une mise à jour facile
• Un transfert facile des connaissances

Un design system est bien plus qu’un guide de style ou qu’une bibliothèque d’assets. L’auteur du livre Atomic Design, Brad Frost, utilise des termes scientifiques pour définir le design system à l’aide d’un principe qu’il nomme Atomic Design. Il définit ce principe comme une méthodologie composée de cinq étapes distinctes fonctionnant comme un tout pour créer un design system. Pour faire “simple” il s’agit d’un ensemble de composants conçus de manière modulaire pouvant être utilisé séparément pour créer une bibliothèque d’éléments réutilisables pour vos produits et votre entreprise.

Les cinq étapes de l'atomic design

Les atomes sont la forme la plus petite d’un design system. Généralement représentés par des éléments de bases comme des boutons ou encore des champs de saisie par exemple.

Les molécules sont des atomes liés entre eux. C'est-à-dire deux ou plusieurs éléments d’une interface utilisateur fonctionnant comme une seule unité. Par exemple un champs de recherche et son bouton permettant de générer une recherche.

Les organismes sont des composants complexes de l’UI constitués de molécules, d’atomes et pouvant être constitués d’autres organismes. Ils constituent l’ensemble des sections de l’interface, par exemple un header comprenant la navigation, le champ de recherche ou encore le logo...

Les modèles sont composés d’organismes, de molécules et d’atomes. Les modèles se concentrent sur la structure du contenu telle que la longueur du texte, la taille des images, etc...

Les pages sont la seule étape concrète d’un design system dans laquelle toutes les étapes sont réunies pour créer le résultat final.

Pourquoi avez-vous besoin d'un design system?

Les design systems présentent de nombreux avantages à long terme parmi lesquels un gain de temps et d’argent. Le temps que vous allez dépenser à la création d’un design system dès le début de votre projet vous rapportera des dividendes dès le moment où vous aurez besoin de créer une nouvelle page à partir de zéro. Parallèlement à la croissance de votre entreprise, votre offre de service, votre produit ou encore votre site web évolue. Avec des composants prédéfinis vos concepteurs et développeurs ne perdent plus de temps à tout recréer. Ces composants doivent être clairement identifiés dans leurs utilisations et leurs fonctionnement afin de faire gagner du temps en évitant des réunions pour échanger de la manière dont les choses doivent fonctionner.

Un design system permet de s’assurer que lorsqu’un nouveau produit ou site web est créé par une équipe, il se comportera et sera implémenté de la même manière que le type de contenu précédemment créé. Vos équipes pourront donc se concentrer sur l’optimisation et l’amélioration de l’expérience utilisateur au lieu de perdre du temps à implémenter les mêmes types de composants. Enfin avoir une apparence cohérente favorise et optimise la confiance que vos utilisateurs auront entre vos produits et services.

Un design system permet de modifier la conception de votre site ou produit et d’apporter des modifications dans l’ensemble de votre écosystème. Les design systems étant modulaires vous pouvez modifier la couleur de vos call to action et le mettre à jour partout où cet élément est utilisé sans avoir à modifier l’entièreté du contenu. Comme un organisme vivant le design system évolue au fil des besoins de l’entreprise. Il s’adapte aux évolutions et aux cycles de développement rapide et peut également réduire la dette technique accumulée par les équipes de développement en raison de changements successifs entraînant l’absence d’un design system.

Avec une bibliothèque de composants réutilisables n'importe quelle équipe (design, développement, prestataires externes) peut créer de nouvelles sections sans passer de longues heures à essayer de déterminer ce qui existe ou n'existe pas et comment l'appliquer en fonction de l'existant.

Créer ou passer à un design system n'est pas toujours le choix le plus facile lorsque vous ne savez pas par où commencer. Les barrières peuvent être liées à la taille de l'entreprise, de l'équipe et du produit lui-même. Le moyen le plus simple de créer un un design system est de le faire au tout début d'un projet. Les entreprises d’aujourd’hui travaillent avec des développements hérités ou un design system au départ n’a pas toujours été un choix. Commencez donc par en créer un avec votre prochain produit ou à partir d'un site existant. Même si votre produit est opérationnel depuis longtemps sans système, c’est un sage investissement en temps et en ressources de commencer à en construire un. Le temps et les investissements dépensés aujourd'hui seront vos économies de demain.

Besoin d'aide pour créer votre premier design system? Laissez les experts de USER AGENCY vous aider à le créer.