Les Fondements d’un Design System : Construire des Bases Solides pour un Produit Numérique Cohérent [Part.1]
Cet article fait parti d’un corpus d’articles qui a pour thème la construction d’un Design System de 0 à 1. Le corpus ce destine à toute personne souhaitant démarrer, poser les bases nécessaires en vue de développer un Design System dans son entreprise.
Introduction
Dans le domaine du design de produits numériques la mise en place d’un Design System est devenue une pratique essentielle pour garantir cohérence et efficacité tout au long de la vie du produit. Il permet d’être un élément fédérateur dans une entreprise et il est censé être la source unique de vérité quand il s’agit de conception et de développement. Cet article explore les grands principes d’un Design System, détaillant les composantes macro qui le constitue :
- Qu’est-ce qu’un Design System
- Les piliers d’un Design System
- L’implication des parties-prenantes
- Les types généraux de Design System
Bonne lecture ! 📖
1. Définition du Design System
Un Design System est un ensemble d’éléments visuels et techniques réutilisables, de règles et de composants interconnectés qui, ensemble, façonnent l’expérience utilisateur d’un produit numérique de manière cohérente. Tous ces éléments évoluent avec le temps, sont mis à jour, supprimés ou ajoutés pour constituer cette chose vivante qu’est un Design System. Il y a trois grands socles principaux qui le constitue :
- le design
- le développement
- la documentation
Il (le Design System) permet à une entreprise de faire croitre son produit rapidement en permettant de s’assurer que les designs et les développements soient cohérents, conformes aux guidelines éditées dans la documentation design et dev, et que toutes interfaces procurent une expérience homogène et agréable dans son entièreté.
Il doit également transmettre, et c’est plus compliqué, les valeurs de la marque, de l’entreprise, la manière de travailler à travers son utilisation.
Quelques exemples de Design System :
Celui de Google : Material Design.
Il englobe des principes de conception, des composants d’interface utilisateur et des lignes directrices de développement, assurant ainsi une expérience utilisateur homogène à travers tous les produits Google.
Celui d’IBM : Carbon (Open Source)
Celui de Shopify : Polaris
Celui de Spotify : Backstage
2. Les trois piliers du Design System
Un Design System repose globalement sur 3 piliers fondamentaux : le design, le développement et la documentation.
On peut ensuite aller plus loin avec le content system pour tout ce qui concernera le language, les messages à travers le produit, le naming, le ton… bref tout ce qui concerne les éléments textuels. :)
a. Design
Le volet design d’un Design System englobe les éléments visuels tels que la typographie, les couleurs, les icônes et les composants d’interface utilisateur. Ces éléments garantissent une esthétique cohérente et une expérience utilisateur fluide.
On peut regroupé les éléments les plus petits comme la typographie, les couleurs, les marges, les border-radius dans une catégorie d’éléments appelés “Fondations”. Ils serviront à la création de tokens design que nous verrons plus tard au fil de ce corpus.
Ce n’est pas tout ! Dans le volet design nous retrouvons également les icônes, les éléments de patterns (pour répondre rapidement à des problématiques connues par des solutions éprouvées et validées par l’usage et l’habitute), les éléments d’animations qui vont venir compléter et ajouter une âme à tout cela.
b. Développement
Du côté du développement, le Design System propose des composants réutilisables, des bibliothèques de code et des directives de mise en œuvre. Cela accélère le processus de développement tout en garantissant la cohérence des fonctionnalités.
Il faut s’assurer que les technologies utilisées soient bien évidemment scallables, mises à jour, facilement maléables et à prendre en main. Est-ce qu’ells sont également compatibles avec les environnements dans lesquels le produit doit évoluer? Il faut prendre en considération toutes ses choses au préalable.
c. Documentation
Une documentation complète est cruciale. Elle détaille les normes de conception, les principes directeurs, les bonnes pratiques d’accessibilité, et fournit des exemples d’utilisation (nos fameux Dos & Donts).
Une documentation claire facilite l’adoption du Design System par toutes les équipes. Elle doit comporter deux (+1) aspects principaux :
- Une documentation design (ZeroHeight)
- Une documentation technique (Storybook)
- + Une partie content pour tout ce qui sera lié au contenu et principes de rédaction. Cette partie est en quelque sortie diffuse dans le design et le dev.
Les designers s’assurent de rédiger la documentation liée aux composants visuel qui aura été fait et intégré au Design System.
Les developpeurs s’assurent eux de la documentation technique des composants. Cela permet par la suite que les composants designés aient leur pendant technique.
Designers et Développeurs doivent s’accorder pour que les documentations correspondent entre elles de façons à ce que les rendus soient identiques.
Exemple de documentation : Bouton principal
Le bouton principal est utilisé comme élément d’action principal dans les interfaces utilisateur. Il attire l’attention de l’utilisateur et l’invite à effectuer une action.
Exemple d’utilisation
<button class="btn-primary">Cliquez ici</button>Propriétés
Le bouton principal a les propriétés suivantes :
- Couleur de fond : #007bff
- Couleur du texte : #fff
- Taille de police : 16px
- Remplissage horizontal : 16px
- Remplissage vertical : 8px
- Bordure : aucune
Accessibilité
Le bouton principal doit être facilement accessible aux utilisateurs qui utilisent des lecteurs d’écran ou d’autres technologies d’assistance. Voici quelques considérations d’accessibilité à prendre en compte :
- Inclure une étiquette descriptive pour le bouton en utilisant l’attribut aria-label.
- Assurez-vous que le bouton est utilisable à l’aide du clavier seul.
- Utilisez une couleur de contraste suffisante entre le texte et le fond pour les utilisateurs malvoyants.
Variations
Le bouton principal peut être personnalisé avec des variations pour s’adapter à différents contextes d’utilisation. Voici quelques variations courantes :
- Taille : Le bouton principal peut être de différentes tailles pour s’adapter à différents designs.
- Icône : Le bouton principal peut inclure une icône pour ajouter du contexte à l’action.
Exemples de variations
<button class="btn-primary btn-small">Cliquez ici</button>
<button class="btn-primary btn-icon"><i class="fas fa-plus"></i> Ajouter</button>N’oubliez pas de mettre à jour cette documentation en cas de modifications ultérieures apportées au bouton principal ou au design system dans son ensemble pour continuellement avoir la dernière version et prévenir les personnes utilisant le design system qu’un élément à été updaté.
3. Implication des Parties-Prenantes
Vous ne serez pas seul… enfin je devrais plutôt dire : vous ne devez pas être seul pour construire un Design System. Entourez-vous car c’est en équipe que se contruit une chose pareille. Il vous faudra :
a. Des designers
Les designers jouent un rôle central dans la création des éléments visuels du Design System. Leur implication assure une esthétique cohérente, renforçant l’identité visuelle du produit ou service.
Ils conçoivent lors de sprint design les composants, veillent à ce que la documentation design soit à jour et s’assurent que les interfaces migrent progressivement vers une conception 100% made by le Design System.
b. Des développeurs
Les développeurs contribuent à la mise en œuvre technique du Design System. Leur collaboration étroite avec les designers doit garantir la fidélité de l’application à travers l’utilisation des composants codés.
Ils sont impliqués également dans le suivi et l’évolution de la documentation technique si besoin.
c. Un/des gestionnaire(s) de Produit (Lead)
Le(s) gestionnaire(s) de produit coordonne(nt) l’adoption du Design System au sein de l’équipe. Il(s) veille(nt) à ce que le système réponde aux besoins du produit tout en respectant les délais d’implémentation et d’incrémentation.
Ils veillent également à ce que les sprints Design System se dérolent sans accros et l’ajout de composants se passe bien.
d. Des contributeurs externes (bonus)
Il peut arriver que, selon le type de Design System souhaité, il soit permis de contribuer de façon exterieur à l’équipe ou à l’entreprise pour alimenter le Design System.
On appelle cela des contributions externes. Elles sont sujettes à validations de la part de l’équipe core selon des règles de contributions qui doivent être mises en place le plus tôt possible dans la structuration et les règles d’usages de façon à ne pas se retrouver avec des contributions de styles ou diffentes qui viendrait casser l’homogénéité souhaité.
4. Les types de Design System
Il existe autant de Design System que d’équipes projets, cependant on peut observer des similarités entre certains qui tendent à les regrouper :
- Les systèmes stricts ou fléxibles
Pour les premiers la différences concerne la documentation et donc l’utilisation des composants dans les conceptions d’interfaces et des experiences. Un système strict sera exhaustif quant à l’usage des composants et ne laissera rien a interprétation. Design et dev seront identiques. Exemple : Atlassian
Les systèmes flexibles seront plus ouverts à l’adaptation et à l’expérimentation sur l’utilisation des composants. Les guidelines seront là pour donner des directions et relativement peu de contraintes.
- Les systèmes centralisés ou repartis.
Les systèmes centralisés sont ceux dont la gouvernance est concentrée dans une équipe core. C’est elle qui conçoit les composants et les partages ensuite vers les équipes qui les utilisent.
Les systèmes repartis sont quant à eux éclatés à travers plusieurs membres dans des équipes différentes. l’adoption est plus facile mais il faut des garants pour conserver une cohérence générale.
Ce qu’il faut retenir :
La mise en place d’un Design System est nécessaire pour les entreprises cherchant à offrir des produits numériques avec une experience cohérente et de haute qualité, s’assurant que le design et le développement fonctionnent conjointement.
Une équipe multi-disciplinaire doit être réunie pour baliser tous les aspects et structurer les règles de gouvernance et de contribution d’un Design System.
Les Design System reposent généralement sur 4 piliers : Design, Developpement, Documentation, Equipe.
Ils peuvent être de plusieurs types selon si vous chercher une certaine créativité ou une confiance dans son régularité : ils peuvent être stricts ou fléxibles, centralisés ou répartis selon l’objectif poursuivi.
Dans le prochain article, nous explorerons en détail les motivations stratégiques qui poussent les entreprises à considérer sérieusement la mise en place d’un Design System.
