Les design systems ne sont pas universels. Ils peuvent être utiles à des équipes de toutes tailles, que vous travaillez dans une petite équipe avec quelques produits ou dans une équipe plus importante à gérer plusieurs produits et marques. Dans le premier cas, un design system plus simple avec des styles de base et quelques modèles de composants réutilisables peuvent suffire.
Il n’existe pas de modèle de design system qui convienne à tous. L’essentiel est de créer un design system qui corresponde à votre besoin.
1 – Analysez l’existant
La première étape va consister à rassembler le maximum d’éléments : couleurs, polices, icônes, composants, etc. Examinez attentivement vos interfaces et tentez de repérer des modèles, constantes qui peuvent servir de point de départ à votre design system.
2 – Poser les fondations
Commencez par poser les bases de votre design system. Ces dernières sont les éléments indispensables tels que la couleur, la typographie, les espaces et dimensions.
Les couleurs
Choisissez avec soins vos couleurs, vous devez avec une palette équilibrée.
Couleurs de base
Commencez par trouver vos couleurs de base. Ce sont elles qui dictent l’apparence générale de votre produit et qui vont servir de base lors de la création des nuances de palettes. Si vous avez déjà une charte graphique, vous allez réutiliser ces mêmes couleurs.
Couleur primaire
Le choix de la couleur primaire est important, car c’est elle qui va mettre en valeur les principaux éléments de votre interface. Pour les sites web, applications, il s’agit en général de composants d’actions tels que les boutons, liens.
Couleurs secondaires, tertiaires
Les couleurs secondaires peuvent être utilisées pour des éléments graphiques, arrière-plans
Couleurs neutres
Il est essentiel que vous ayez une palette de nuances allant du blanc au noir en passant par le gris. Il n’est pas nécessaire d’avoir un noir et gris pur, si vous avez une couleur bleue en couleur primaire, vous pouvez par exemple mélanger la couleur primaire avec du noir et gris. Vous aurez ainsi un rendu plus doux et original.
Couleurs d’états
Ces couleurs souvent oubliées sont pourtant essentielles, car ce sont elles qui vont être utilisées pour représenter différents états comme les erreurs, réussites, etc.
Vous avez en général cinq états :
- Active : souvent similaire à votre couleur primaire
- Focus : utilisé pour indiquer le focus d’un élément, vous pouvez ici utiliser une nuance de votre couleur primaire.
- Positive : généralement représenté par une couleur verte ; met en valeur les éléments de succès, tendances positives.
- Negative : habituellement représenté par une couleur rouge pour mettre en valeur les erreurs, tendances négatives.
- Notice, warning : souvent représenté par une couleur jaune pour mettre l’accent sur une information qui nécessite une attention particulière.
Pour chaque état, pensez à décliner au moins une nuance pouvant fonctionner sur un background foncé.
Les teintes et nuances
À partir de votre palette de couleur de base, vous avez la possibilité de créer des nuances. Les teintes claires et foncées de vos couleurs de base vont permettre de créer des interfaces harmonieuses et avec de la profondeur.
Pour créer une palette de nuances à partir d’une couleur, je vous recommande d’utiliser des générateurs de couleurs. Il en existe plein, pour ma part, j’utilise Colors UI et Color Shades.
En règle générale, les générateurs de couleurs vont créer une palette avec environ une dizaine de nuances. C’est riche et parfois un peu trop, c’est donc à vous, en fonction de vos besoins, de sélectionner les nuances que vous souhaitez garder. Par exemple, vous pouvez décider de garder l’ensemble des nuances pour votre couleur primaire, car elle a une place importante dans votre interface, mais garder seulement quelques nuances pour des couleurs secondaires.
En effet, trop de couleurs peut augmenter la complexité de votre design system et créer de la confusion.
Les typographies
La typographie est l’un des éléments le plus important de votre design system. Les interfaces que nous créons sont composées de mots et tous ces mots forment des informations que vous communiquez à vos utilisateurs.
Choisir les typographies
Il y a deux aspects à prendre en compte lors du choix d’une typographie :
- Lisibilité : la typographie est là avant tout pour transmettre de l’information, elle doit donc être lisible (que ce soit par sa taille, son épaisseur).
- Personnalité : en fonction des familles de typographies choisies, vous pouvez faire ressentir et véhiculer des émotions différentes. Ces dernières peuvent permettre d’assoir vos valeurs et aussi renforcer la personnalité de votre marque.
Dans un projet web, nous utilisons en général deux typographies :
- Titres : vous pouvez choisir ici une typographie unique avec beaucoup de personnalité qui servira à faire ressentir les valeurs propres à votre marque.
- Corps de texte : préférez une typographie lisible, adaptée à des textes plus longs.
Créer une hiérarchie
Les titres contribuent de manière essentielle à la hiérarchie des informations dans votre page. On crée alors ce que l’on appelle un “typescale”, un ensemble de tailles de textes définis calculé sur la base d’un même ratio. Cette méthode permet d’obtenir une échelle harmonieuse entre vos différentes tailles de titre.
Concrètement, vous devez définir une taille de police de base et une échelle, cela peut être le nombre d’or, une intervalle musicale, etc.
Pour ces calculs, vous pouvez utiliser des outils en ligne ou bien le faire directement via un plugin dans Figma !
Un outil gratuit pour générer rapidement une échelle modulaire et harmonieuse pour votre typographie.
Pensez à faire des titres dynamiques ! Votre titre 1 de 60 px rend peut-être très bien sur un écran large, mais quand est-il sur mobile ? Pour les titres, prévoyez donc toujours au moins une taille desktop et une taille mobile (ce que l’on appelle des “dynamic headings”). Vous pouvez renseigner ces paramètres dans vos variables Figma.
Concernant le corps de texte, dans la plupart des cas, nous aurons besoin de trois tailles différentes : small, medium, large. La taille medium correspond à la taille dans laquelle vous allez écrire vos paragraphes. En général, nous sommes aux alentours de 18 px. Les tailles small et large vont quant à elles nous servir pour dispenser de l’information secondaire ou au contraire mettre l’accent sur certains éléments de votre conception.
Espaces & dimensions
Les espaces sont essentiels dans nos conceptions. C’est pourquoi nous allons utiliser un système d’espacement. Ce dernier va nous permettre plusieurs choses :
- Apporter de la cohérence au produit
- Permettre aux équipes de mieux communiquer et de réduire le nombre de décisions
- Créer une expérience plus harmonieuse pour l’utilisateur final.
Que de bonnes choses !
Créer un système d’espacement
Les systèmes d’espacement sont construits autour d’une unité de base, généralement de 4 ou 8 pixels. Cette unité détermine l’échelle d’espacement, qui est un ensemble de valeurs définies que nous allons utiliser dans notre interface.
Pour construire cette échelle d’espacement, nous partons d’une valeur et nous l’additionnons par l’unité de base et ainsi de suite jusqu’à notre valeur d’espacement finale.
Par exemple, ma méthode préférée est d’utiliser une unité de base de 4 px. Mon échelle comprend donc les valeurs : 4, 8, 16… et se termine à 120 px.
Vous pouvez également faire ce que l’on peut appeler des “demi-pas” si vous avez besoin de valeur intermédiaire. Par exemple, si votre unité de base est 8 px et que vous avez besoin d’un espace compris entre 8 px et 16 px, vous pouvez l’additionner de moitié (4 au lieu de 8).
3 – Bibliothèque de composants
À l’intérieur de votre design system, vous allez pouvoir également rajouter vos composants. Ces derniers vont alors pouvoir être réutilisé entre les différents produits et mis à jour à partir d’une seule source (voir épisode librairies).
4 – Un design accessible à tous
L’accessibilité permet à votre produit d’être utilisé par tous. En incorporant l’accessibilité dès le début, vous posez aller pouvoir créer des interfaces plus inclusives dont tout le monde peut profiter.
Voici quelques points à vérifier afin que votre design soit accessible :
- Vérifiez les contrastes et couleurs
- N’utilisez pas la couleur seule pour transmettre l’information : par exemple, lorsque vous utilisez la couleur pour indiquer à l’utilisateur une erreur dans un formulaire, accompagnez l’information avec une icône.
- Faciliter la compréhension des éléments (structurer les titres, phrases courtes, lien explicites).
- Assurez-vous que les éléments interactifs sont faciles à identifier en utilisant des styles distincts et reconnaissables facilement.
- Permettez le redimensionnement du texte : utiliser des REM au lieu des pixels.
- Proposer des zones tactiles assez larges (au moins 44 × 44 pixels).
- Rendez les formulaires accessibles (nommez chaque champ, aidez à la correction des erreurs).
Ayez à l’esprit que concevoir des interfaces accessibles permet généralement de mieux concevoir. Les règles d’accessibilités vont vous forcer à une certaine rigueur, mais permettre à votre produit d’être plus facilement utilisable et compréhensible. Ce n’est pas seulement une démarche altruiste, elle apporte aussi des avantages à tous les utilisateurs.
Espace discussion