arrow

Blog

UI Design

Design Systems

Design System : L'arme secrète pour la croissance exponentielle des SaaS

Actualisé le 7 juin 2024   |   Célestin Lebéhot   |   11min de lecture

étoiles tournant autour d’un système (Design System)

Cauchemar en production : designers et développeurs perdent un temps précieux à débattre de visuels, à recréer les mêmes éléments, franchissant le budget et dépassant les délais. L'absence de langage commun entre les équipes Design et Développement (noms de composants, guidelines d'utilisation...) engendre des erreurs, des allers-retours interminables et une collaboration laborieuse. Mais il existe une solution à tous ces maux : le Design System. À quoi ça correspond ? Quelle différence avec un Style Guide ? Comment ça peut aider le développement d’un SaaS ? Lisez notre article jusqu’au bout pour comprendre.

Sommaire

Un Design System, c’est quoi ? Définitions.

Un Design System est bien plus qu'un simple guide de style ou une bibliothèque de composants visuels. C'est un écosystème évolutif et collaboratif regroupant un ensemble de règles, de principes, de guidelines et de ressources centralisées qui définissent et documentent l'ensemble des éléments constitutifs de l'expérience utilisateur d'un produit logiciel, SaaS, ou d’une app.

En d'autres termes, c'est la source unique de vérité pour tout ce qui concerne le design de votre produit SaaS. Il assure la cohérence visuelle, l'efficacité du développement et une meilleure expérience utilisateur.

Afin de mieux comprendre ce qu’est un Design System, il faut aussi comprendre ce qu’on appelle les Tokens, le Color System, le Type System et la bibliothèque de composants.

Les Tokens, c’est quoi ?

Les tokens sont les éléments constitutifs les plus élémentaires d'un Design System. Ce sont des valeurs uniques et nommées qui représentent des décisions de conception telles que les couleurs, la typographie, l'espacement, etc. Ils servent de base pour construire tous les autres éléments du Design System. Ils sont reliés à des variables, par exemple une variable de couleur dans une palette, et peuvent être primitifs, sémantiques, ou liés à des composants en particulier. L’utilisation de tokens permet une meilleure harmonie au sein de la plateforme, et permettent au Design System d’évoluer de façon efficace. Pour en savoir davantage sur les tokens, lisez notre article sur le sujet. L'image suivante illustre comment fonctionnent les tokens.

Comprendre les tokens des Design Systems

Le Color System, c’est quoi ?

Le Color System définit la palette de couleurs utilisée dans votre SaaS ainsi que les tokens qui y sont liés. Il comprend les couleurs de la marque, les couleurs primaires et secondaires, ainsi que les couleurs utilisées pour les états et les messages (succès, erreur, avertissement). Il peut être judicieux de correctement documenter le Color System au sein d’un style guide pour une meilleure collaboration. N'hésitez pas à lire notre article dédié au sujet du Color System pour comprendre les enjeux pour votre SaaS.

Le Type System, c’est quoi ?

De la même manière que le Color System, le Type System définit les styles typographiques utilisés dans votre SaaS, notamment les familles de polices, les tailles de police, les poids de police, l'interlignage et l'espacement des lettres. Il est aussi renseigné au sein du style guide.

La bibliothèque de composants

La bibliothèque de composants est un ensemble de composants d'interface utilisateur réutilisables, tels que des boutons, des formulaires, des menus déroulants, des modales, etc. Ces composants sont conçus et développés une seule fois, puis réutilisés dans l'ensemble du SaaS, garantissant ainsi la cohérence et l'efficacité.

Différences entre Design System et Style Guide

Il est important de distinguer un Design System d'un simple Style Guide. Bien que souvent utilisés de manière interchangeable, les Design Systems et les Style Guides sont distincts. Imaginez une maison : le Design System représente les fondations, la structure et les matériaux, tandis que le Style Guide s'apparente aux choix de décoration intérieure (chez merveilleUX, on adore comparer l’UX au domaine de la construction).

Un style guide est une composante d'un Design System

Un Design System est bien plus qu'un simple document. Il se compose de :

Le Style Guide est un élément du Design System. Il se concentre sur l'aspect visuel et rédactionnel du produit :

Pourquoi mettre en place un Design System pour un SaaS ?

Mettre en place un Design System pour votre SaaS va représenter un investissement précieux à plusieurs niveaux.

Cohérence et uniformité

Efficacité et productivité

Adaptabilité et évolutivité

Amélioration de l'expérience utilisateur

Comment faire un Design System ?

Créer un Design System est un projet d’envergure qui nécessite une approche méthodique et collaborative.

1. Commencez par un audit et une analyse de l’existant

2. Définissez les principes et les guidelines.

Architecture, catalogue de composants, règles de style : choisissez une structure pour le Design System avec différents fichiers, pages et composants en fonction de l’envergure du logiciel.

Attention, il ne s’agit pas là du Style Guide, qui sert lui de documentation.

Choisissez et définissez des normes de nomenclature pour vos variables, tokens et composants.

Faites une recherche sur les différents plugins que vous pouvez utiliser (par exemple, Tailwind CSS pour les couleurs).

Si vous êtes suffisamment familier avec un logiciel de conception d’interfaces comme Figma ou Adobe XD, vous pouvez passer à l’étape suivante. Sinon, n’hésitez pas à externaliser la partie conception de Design System.

3. Construisez le Design System

Une fois la documentation bien structurée, vous pouvez commencer à faire des choix esthétiques en créant des tokens primitifs et sémantiques (*).

Choisissez les couleurs et créez les palettes : le Color System

Choisissez correctement des couleurs en vous basant sur la charte graphique de votre marque, tout en les adaptant en fonction de l’accessibilité. Au minimum, vous aurez besoin de noir, de blanc, de nuances de gris, de couleurs de marque (primaires et secondaires), et de couleurs de niveau d’alerte (danger, warning et success). Pour un SaaS, les couleurs seront définies pour les surfaces (div{background-color}), les bordures (div{border}), les textes (p{color}) et les formes (icônes ou svg).

Attention à l’accessibilité : Nous n’avons pas tous les mêmes yeux. Il est important de vérifier sur des sites tels que Coolors ou ContrastChecker que deux couleurs sont compatibles visuellement, notamment lorsqu’on écrit sur des surfaces.

Choisissez la typographie

En plus des couleurs, créez aussi des styles de texte, notamment des polices d’écriture. Commencez par définir des variables et tokens primitifs pour chaque élément dont peut dépendre une balise texte (font-family, line-height, size, weight, letter-spacing).

Ensuite, définissez les styles de texte. Pour un SaaS, vous aurez besoin la plupart du temps de styles “Display” (boutons, labels), de styles “Titres” et de styles “Body” (pour les paragraphes). Chaque style peut être de différentes tailles.

Choisissez les icônes

Un aspect souvent négligé, mais crucial pour la cohérence de votre Design System est le choix des icônes. Il ne s'agit pas simplement de trouver des icônes "jolies", mais de sélectionner un style qui s'intègre harmonieusement à l'identité visuelle de votre SaaS. Vous avez le choix entre des icônes en ligne fine pour des actions subtiles, des icônes pleines pour des boutons importants, ou encore des illustrations plus détaillées pour des cas spécifiques. Des bibliothèques d'icônes populaires comme Font Awesome ou Material Icons vous offrent un large choix, mais vous pouvez aussi opter pour des icônes personnalisées.

N'oubliez jamais l'accessibilité : vos icônes doivent être lisibles et compréhensibles par tous, y compris les personnes ayant des problèmes de vision.

Choisissez et définissez les dimensions

La cohérence visuelle passe aussi par une gestion rigoureuse des dimensions et de l'espacement. Un système de grille (Grid System) est votre meilleur allié : il divise l'espace en colonnes et gouttières, offrant une structure solide pour positionner vos éléments. Définissez un système d'espacement rythmé (par exemple 4px, 8px, 16px) pour garantir une harmonie visuelle.

N'oubliez pas le Responsive Design : les dimensions doivent s'adapter aux différents appareils (ordinateurs, tablettes, mobiles).

Créez et configurez la Grid

Avant de vous lancer tête baissée, réfléchissez au type de grille qui correspond le mieux aux besoins de votre SaaS. Le nombre de colonnes et la largeur des gouttières auront un impact sur l'organisation du contenu. L'objectif est de créer une grille flexible, capable de s'adapter aux différentes tailles d'écran grâce à des techniques comme flexbox ou grid layout CSS.

Créez les composants UI (Boutons, tabs, alertes etc.).

Les composants UI sont les briques de votre interface utilisateur. Commencez par identifier les composants essentiels pour votre SaaS : boutons, formulaires, menus déroulants, modales, cards, etc. Pour chaque composant, décrivez ses différents états (actif, inactif, survolé) et leur impact visuel. L'accessibilité est primordiale : utilisez des attributs ARIA, vérifiez le contraste des couleurs, etc. Illustrez chaque composant avec des exemples visuels et des extraits de code pour faciliter leur utilisation par les développeurs.

4. Créez des resources relatives

Que ce soit à l’aide d’un projet Figma, d’un fichier .pdf ou d’une page Web, il est important de répertorier correctement le fonctionnement et l’architecture de votre Design System, notamment à l’aide de conseils d’utilisations et de guides de style. Vous assurerez une parfaite harmonisation et collaboration entre les différents membres de l’équipe et les prochains qui arriverons.

5. Gérez la maintenance et l’évolution.

Un Design System n’est jamais fixe. Au fur et à mesure du développement de votre interface, des composants vont changer, être dupliqués puis adaptés, et ils vont parfois être “cassés” (non fonctionnels à cause d’une erreur humaine de conception). Il faudra donc gérer cette maintenance et évolution en collaborant avec les dev et en documentant correctement les changements.

Palette visuelle et représentation d'un Style Guide de Design System

Conseils pour un bon Design System

Construire un Design System efficace demande de la rigueur et de la prévoyance. Voici quelques conseils pour vous guider :

1. Posez des fondations solides :

2. Soyez itératifs et adaptables :

3. Faites de la documentation une priorité :

4. N'hésitez pas à externaliser :

Conclusion

Créer un Design System pour un SaaS est indispensable pour en permettre une croissance exponentielle. C'est un investissement stratégique payant à long terme : en misant sur la cohérence, l'efficacité et l'évolutivité, vous offrez à vos équipes les clés d'une meilleure collaboration et à vos utilisateurs une expérience intuitive et plaisante. N'oubliez pas : un Design System est un organisme vivant qui se construit et se peaufine au fil du temps. En restant à l'écoute des besoins de vos utilisateurs et en intégrant les retours de votre équipe, votre Design System deviendra un atout majeur pour la croissance et le succès de votre SaaS.

Malheureusement c’est un processus itératif qui demande de la rigueur et de l’expertise que certaines équipes n’ont pas toujours en interne. Alors parfois, externaliser une partie de la conception produit de votre SaaS (dont les bases d’un bon Design System) peut être une solution économique et efficace pour (re)partir sur de bons rails.

Chez merveilleUX, nous sommes flexibles et et pouvons collaborer avec vos équipes dans le but de réussir vos ambitions, alors contactez-nous dès maintenant pour en discuter.

Donnez vie à vos idées Produit avec des prototypes Maquettes sur mesure, réduction des fractures

Découvrez comment nos services de maquettes et prototypes peuvent donner vie à vos idées ! Explorez notre gamme complète de solutions de conception et laissez nos experts créer des maquettes sur mesure pour votre entreprise. Prêt à transformer vos concepts en réalité ?

Ces articles pourraient vous intéresser :