Design system

Design System, l'outil collaboratif qui facilite la conception de vos interfaces web

Airbnb, Blablacar, Leboncoin, SNCF… Le point commun de ces marques ? Elles ont développé un univers digital qui les rend uniques, et facilement identifiables par l’utilisateur. Leur allié : le design system, un outil collaboratif qui facilite la conception de leurs interfaces. En quoi consiste concrètement un design system ? Quelles informations y sont mutualisées ? Quels sont les avantages de cet outil ? Nous répondons à ces questions pour vous. 

Qu’est-ce qu’un design system, concrètement ?

Pour nos lecteurs fâchés avec l’anglais : design system = système de conception. You’re welcome. C’est un outil collaboratif, qui permet aux entreprises de développer un écosystème digital cohérent et uniforme (sites internet, applications mobiles…). Il prend la forme d’une page web, sorte de bibliothèque de références et de modèles propres à chaque marque. 

Les membres d’une équipe projet (designers, développeurs, chefs de projet, etc.) s’y réfèrent, et piochent dans cette banque de données. En travaillant son design system, une entreprise peut développer tout un univers autour de sa marque. Elle se forge une identité unique, qui se démarque des concurrents. Et c’est là, tout l’intérêt !

Que trouve-t-on dans un design system ?

Souvent, le design system d’une marque est accessible à tous, en ligne. Le site internet Design Systems France (www.designsystems.fr) en a d’ailleurs dressé une liste non exhaustive. Pour les curieux, suivez ce lien. Vous pourrez y consulter le système de conception de nombreuses entreprises : Dailymotion, Décathlon, Le Monde, Orange, etc.

Voici quelques-uns des éléments que vous y trouverez :   

- le code RVB de chaque couleur utilisée;

- les typographies choisies ;

- des précisions sur le ton à employer ;

- des ressources à piocher : symboles, logo, illustrations, etc. ;

- les règles d’utilisation de chaque composant ;

- un rappel des valeurs de l’entreprise ;

- des recommandations sur les comportements à adopter ;

- des directives pour la mise en page ;

etc.

Les cinq avantages du design system

« Le design est l’ambassadeur silencieux de votre marque ». C’est ce qu’a déclaré Paul Rand, un célèbre graphiste américain. On comprend alors qu’il est crucial pour une marque de travailler le design de ses interfaces avec des outils performants. Véritable instrument au service de l’entreprise, le système de conception présente cinq grands avantages. Voyez plutôt. 
1.    Gain de temps pour les collaborateurs d’un projet.

2.    Facilitation de la communication entre les membres d’une équipe.

3.    Création d’un univers et d’une identité forte pour la marque.

4.    Cohérence et homogénéité graphiques des interfaces.

5.    Optimisation de l’expérience utilisateur.

Principe d’atomic design : les composants d’une interface web doivent être vivants, modulables et évolutifs

Le web designer et conférencier américain Brad Frost fait ce constat : considérer une interface web comme un livre dont le contenu est figé est obsolète. Une entreprise ne peut plus se contenter de créer des pages web indépendantes les unes des autres. Elle doit désormais réfléchir à une manière de les agencer, de sorte à créer des interfaces esthétiques et fonctionnelles sur tous les environnements : ordinateur, smartphone, tablette…

Pour illustrer son propos, Brad Frost développe le concept d’atomic design. Il fait cette analogie : à l’image d’atomes et de molécules, les composants d’une interface doivent être vivants, modulables et évolutifs. 

Vous pensez à créer un design system ?

Alors notez bien ces quelques conseils. Ils peuvent sembler basiques, pourtant ils sont essentiels.  

Commencez par définir la nature de votre entreprise, en vous posant une série de questions.

·         Quelles sont les valeurs de votre marque ? 

·         Quels sont vos objectifs ? 

·         Quelle est votre identité ? 

·         Quels services offrez-vous ? 

·         Quels problèmes résolvez-vous ? 

·         Quel message souhaitez-vous faire passer ?

·         Etc.

Puis, intéressez-vous à vos utilisateurs, et définissez votre cible ! C’est en ayant une idée précise du public que vous souhaitez atteindre que vous pourrez lui proposer un univers adapté.

Ce n’est qu’une fois ces étapes franchies que vous pourrez commencer à créer le squelette de votre design system. Vous identifierez vos palettes de couleurs, vos icônes, vos illustrations, vos typographies, etc.

Le design system est un concept désormais plus compréhensible pour vous que celui des chaussettes en sandalettes. On l’espère, en tout cas. Si vous souhaitez vous y essayer, de nombreux outils sont accessibles en ligne : Figma, Adobe XD, Sketch, InVision… Ils sont payants, mais proposent souvent une période d’essai offerte. À votre créativité !