Design challenge2024, Design system

Ce projet est un challenge/exercice de design avec pour objectif de créer un fichier de design système contenant deux composants : des boutons et des cartes, accompagnés d’une documentation détaillée.

J’ai pu aborder les normes d’accessibilité, l’importance des design tokens ainsi que les enjeux d’une documentation claire et efficace pour une communication optimale avec les équipes techniques. Ce fut une étude de cas très intéressante qui m’a permis de développer mes compétences en analyse UX/UI et ma logique de conception modulaire.

Vous pouvez consulter les fichiers originaux sur figma en cliquant ici

Ou alors télécharger le PDF de ces fichiers (5Mo) en cliquant ici

La définition des styles

Avant de me lancer, je voulais définir tous les éléments basiques et nécessaires à la construction de composants pour ne pas me retrouver à les redéfinir en plein travail et perturber ma réflexion. Ces éléments sont ce qu’on appelle les styles, ils permettent de maintenir une cohérence dans le design system. J’ai donc défini des couleurs, un système typographique, des ombres et des icons.

11 nuances de turquoise arrangées en ordre avec un nom et un code couleur pour chacune.

Tableaux de styles typographiques avec le nom, la taille, l'interligne, l'épaisseur et la police de caractère de chaque style.

Leur intégration sur Figma

Ces styles ont ensuite été enregistrés sur le fichier figma en tant que “styles” (variable du même nom). Seul les icons font exception, puisqu’ils ont été intégrés en tant que composants ré-exploitables par la suite.

Première capture d'écran des styles enregistrés sur Figma

Deuxième capture d'écran des styles enregistrés sur Figma

Création des composants

Les boutons

Simples en apparence, les boutons sont complexes dans leur construction. J’ai pris en compte beaucoup de variables lors de leur création :

La hiérarchie : primaire, secondaire, tertiaire, texte
L’état : activé, désactivé, survolé, focus, pressé
La taille : petit, moyen, grand
Le contenu : du texte, du texte et un icon à droite, du texte et un icon à gauche, juste un icon
Le label (s’il y en a)

Modification dynamique d'un bouton via ses variables.

Tableau listant chaque type de bouton pour chaque variable différente. Il y en a des dizaines.

Les cartes

J’ai créé deux versions des cartes : une verticale, optimale pour les écrans larges, et une horizontale, optimale pour les écrans restreints. M’étant principalement concentré sur l’étude des boutons, leurs variables de structure sont en revanche plus limitées :

Le style : plein, élevé, entouré
L’état : activé, désactivé, survolé, focus, pressé

Tableau listant chaque type de carte horizontale pour chaque variable.

Tableau listant chaque type de carte verticale pour chaque variable.

Lier avec des Design Tokens

Afin de dynamiser les associations de styles avec les composants, j’ai ensuite créé des design tokens via la fonctionnalité de variables proposé par Figma. Chaque valeur, initialement stockée dans un style, a donc été attribuée à l’aspect d’un composant. Ce mode de fonctionnement permet notamment d’uniformiser les styles et de faciliter les mises à jour qui se répercuteront donc automatiquement partout où l’élément modifié est présent.

Première capture d'écran des variables enregistrés sur Figma

Deuxième capture d'écran des variables enregistrés sur Figma

Schéma du fonctionnement d'un design token : la valeur initiale change le style, qui change la variable, qui change le composant.

Les modes et contrastes

Enfin, il y a deux versions de chaque composant : une version pour le mode clair (light mode) et une autre pour le mode sombre (dark mode). Dans le choix des couleurs, je me suis assuré que les boutons les plus importants (primary, tertiary, et text) aient un contraste optimal en veillant à respecter au minimum le standard AA.

Example des 4 types de boutons sur fond clair et sur fond sombre.

Les guidelines

Les guidelines sont un ensemble de règles et de recommandations visant à garantir la cohérence, la conformité et la qualité des éléments d’un système. Dans notre cas, j’ai rédigé les guidelines du bouton.

Elles se composent donc de 4 parties majeures : le format, le contenant, le contenu, et l’utilisation. Chacune de ces parties traite de cas particuliers illustrés par des exemples concrets.

Extrait d'un document listant les bonnes pratiques pour chaque cas d'usage.

Les spécifications

Ce document liste exhaustivement tous les paramètres techniques sur le bouton. Dans le cas d’un travail en coopération avec une équipe de développement, c’est le genre de fichier qui se doit d’être le plus clair possible. C’est pourquoi je l’ai réalisé très simplement et qu’il arbore cet aspect brut et technique.

Extrait d'un document listant chaque variable et sa valeur exhaustivement.

Rétrospective

C'est un travail très complet et qualitatif. M'étant appuyé sur le design system de Google dans sa réalisation, Material Design 3, cette influence se ressent dans la qualité du rendu. Je peux néanmoins formuler deux suggestions d’amélioration.

Premièrement, les cartes auraient pu posséder plus de variables. Il aurait été possible de faire figurer dynamiquement d’autres éléments, comme par exemple des prix, d’autres lignes de texte, ou encore une entête.

Deuxièmement, le document des spécifications est très lourd à lire. La valeur associée à un élément est trop éloignée de celui-ci. Pour faciliter la lecture, j’aurais pu construire des lignes de tableau afin de guider le regard.