Design System : kesako ? Définition et exemples
Là où le numérique devient quotidien, le Design System s'inscrit implicitement depuis plusieurs années dans le paysage numérique des grandes entreprises comme Apple, Google, AirBnB ou Uber. Cet ensemble d'éléments et de règles se remarque par des boutons aux apparences similaires, des couleurs communes ou des recommandations sur l'expérience utilisateur. Mais en quoi est-il si utile d'avoir un Design System ?
Homogénéité, rapidité et communication
Le Design System est une véritable bibliothèque contenant l'intégralité des composants et des styles destinés à la conception de projets numériques. À cela, s'ajoutent les règles d'usages, l'identité et la vision propre à la marque.
Cet outil permet un gain de temps considérable sur tous les niveaux : les project managers peuvent communiquer plus aisément leurs intentions aux designers; les designers innovent sur une base d'éléments homogènes en suivant des recommandations, et les développeurs disposent de composants déjà codés facilitant l'intégration ou le développement de certaines parties d'un projet.
Moins abstraites, les fameuses briques LEGO sont un excellent exemple de Design System. Elles répondent à des règles, mais permettent de les combiner des centaines, des milliers, voire des millions de fois en conservant l'identité de la marque. Saviez-vous que vous pourriez réaliser plus de 915 millions de combinaisons avec six briques de deux par six tenons ?
Design System vs Brand Guidelines
Une Brand Guidelines est essentielle pour tout type d'entreprise. Si votre identité est claire, vos clients en garderont un meilleur souvenir et sauront plus facilement vous décrire. Cependant, aujourd'hui, une expérience utilisateur est bien plus importante qu'une belle image, et cela commence souvent par un support numérique comme un site web ou une application. Une Brand Guidelines ne couvrira pas assez ces aspects.
C'est là qu'un Design System intervient. Celui-ci permet de développer des recommandations propres à votre entreprise pour les nouveaux supports numériques. De plus, ce support est bien souvent accessible en ligne offrant la possibilité de le partager avec diverses équipes situées à plusieurs endroits.
Une alternative plus légère au Design System existe; la Pattern Library où l'on retrouve uniquement des composants réutilisables surtout destinés aux designers. Souvent interne, elle sert à gagner du temps dans un même projet avec quelques règles essentielles.
| Contenu | Design System | Brand Guidelines | Pattern Library |
|---|---|---|---|
| Vision de la marque | ✅ | ✅ | |
| Ton de la marque | ✅ | ✅ | |
| Principes directeurs | ✅ | ✅ | |
| Valeurs | ✅ | ✅ | |
| Recommandations d'écritures | ✅ | ✅ | |
| Terminologies | ✅ | ✅ | |
| Interactions & Recommandations UX | ✅ | ||
| Logos pour l'impression avec les variations | ✅ | ✅ | |
| Logos pour les écrans avec les variations | ✅ | ||
| Accessibilité | ✅ | ||
| Notifications | ✅ | ||
| Couleurs de la marque | ✅ | ✅ | ✅ |
| Couleurs d'interface | ✅ | ✅ | |
| Mise en page et gabarits | ✅ | ✅ | |
| Polices de caractères | ✅ | ✅ | ✅ |
| Tailles de textes | ✅ | ✅ | ✅ |
| Tailles de textes adaptives | ✅ | ✅ | |
| Relations typographiques | ✅ | ✅ | |
| Iconographie | ✅ | ✅ | |
| Composants UI | ✅ | ✅ | |
| Illustrations, photos, vidéos | ✅ | ✅ | |
| Outils | ✅ | ✅ | |
| Technologies | ✅ | ||
| Code source | ✅ |
Cas d'utilisations
Il n'est pas que question de site web ou d'applications, le Design System peut également couvrir tout type d'interface et, très souvent, d'expérience comme un outil scannant vos articles au supermarché, les surimpressions à la télévision, les bannières animées ou les publications pour les réseaux sociaux.
Évolution et adaptation
Un Design System demande de l'entretien. Que ça soit pour convenir aux tendances actuelles, aux recommandations des nouvelles technologies ou pour ajouter de nouveaux composants, il est important que les designers et les développeurs s'y retrouvent et puissent le mettre à jour aisément. Une fois la base créée, il suffit de quelques jours par mois afin d'agir en cas de nouveautés.
.png)
En tant que concepteurs d'applications mobiles, web et de site web, nous utilisons et concevons de plus en plus des Design System ou des Pattern Library, dont la complexité est variable selon la taille du projet. Cela nous permet de gagner en rapidité et en homogénéité lors de la création ou de l'évolution de vos produits.
