Design

Design System : kesako ? Définition et exemples

Retour au blog

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.

ContenuDesign System Brand GuidelinesPattern 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.

exemple-ecrans-design-system (2).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.

Auteur

Publié le 01 février 2022

Designer UX/I