Design System : à quoi sert-il ?

Outil précieux pour harmoniser plusieurs interfaces numériques, le design system vous permet de gagner du temps dans la gestion des évolutions de vos différents sites et plateformes. AODB vous explique ici tout ce que vous devez savoir sur le design system : sa définition, ses avantages, et les étapes de sa mise en place.

Le design system : définition

Le design system désigne un référentiel global, qui regroupe la charte graphique et la charte ergonomique auxquelles se référer dans la conception et le développement d’un projet digital. Il intègre ainsi des bibliothèques (libraries) de composants fonctionnels, et des guides de style (styleguides) qui référencent les styles graphiques qui constitueront l’identité unique de la marque ou de la collectivité : illustrations, typos, couleurs, etc. Véritable kit évolutif pour les développeurs et designers de services et de produits digitaux, le design system offre un double référentiel UI et UX pour la création d’un écosystème cohérent. Le contenu du design system relève du langage visuel et donne des lignes directrices aux acteurs de développement d’applications métiers, de sites vitrines, d’e-commerces ou de tout autre produit digital. Hébergées sur le cloud et disponibles en ligne, elles sont accessibles par tous les acteurs d’un projet durant les différentes étapes de conception, de design ou de production. Une fois créé, le design system constitue une base de référence commune et régulièrement mise à jour, à disposition des différents services impliqués, internes ou externes à l’organisme.

Le Design System est un référentiel qui englobe la charte graphique et ergonomique d'un projet digital.

Les avantages du design system

Bien que fastidieux à mettre en place, le design system présente de nombreux avantages lorsqu’il est créé et mis à jour. Les développeurs et designers communiquent avec plus de facilité et peuvent travailler en synergie. Le design system permet ainsi :

• Aux développeurs de générer un design cohérent et de se concentrer sur les problématiques techniques grâce à un référentiel unique
   
• Une homogénéisation pointue du langage visuel des interfaces d’une même entité
   
• Le lancement rapide et simplifié d’une nouvelle création graphique
   
• La mise en œuvre simplifiée des évolutions et des mises à jour

Indirectement, les avantages du design system impactent de manière très positive l’UX et l’ergonomie des interfaces. L’expérience utilisateurs est en effet fluidifiée par la cohérence du design et des fonctionnalités d’un site ou d’une application. L’utilisateur se repère plus facilement, identifie les boutons de CTA ou les liens internes, et ce sur tous les supports digitaux de l’entité (application, site, e-commerce, outil métier).

Le Design System permet de faciliter les échanges entre les différentes équipes de développeurs et de webdesigner.

Les étapes de création d’un design system

Un design system vise l’exhaustivité et la cohérence. Sa création passe d’abord par une analyse précise et complète du projet et de sa finalité (informative, commerciale, etc.). Pour aboutir à une expérience utilisateur optimale, il est aussi essentiel de cibler ces utilisateurs, leurs comportements et leurs attentes. En fonction des données récoltées lors de cette phase d’analyse, la structure du design system va ensuite s’articuler autour d’une bibliothèque graphique, d’une bibliothèque de composants UI et de la rédaction du référentiel, destiné à formaliser l’ensemble des règles d’usage, d’UX et d’accessibilité. Le cycle de création d’un design system peut donc se résumer en 6 phases :

1. La définition et l’analyse

Il s’agit de l’étape préparatoire destinée à définir vos besoins. Elle passe généralement par une recherche UX, qui peut passer par plusieurs méthodes : des tests utilisateurs, des enquêtes et sondages, des suivis de souris, de l’A/B testing.

2. La création de la structure

Le travail d’UI design consistera à la création de la maquette faisant apparaître les différents composants du produit digital : menu de navigation, bannières, boutons, emplacements, bas de page, layouts, etc.

3. La définition de la palette de couleurs

Élément clé de votre design system, la palette de couleur doit faire l’objet de plusieurs définitions : celle des différentes fonctions, des nuances disponibles, des règles de contrastes et des variations. Les variables de couleurs sont essentielles pour faciliter les évolutions futures du design system et en faire un outil flexible.

Les différentes étapes du Design System.

4. La définition des typographies

Le choix des typographies est crucial pour une identité de marque. Il est aussi important de mettre en place des règles fixes et cohérentes concernant notamment la taille de texte, la mise en gras pour les titres H1 et H2, le style de texte pour les liens cliquables, etc. En cas de choix de polices récentes, il est judicieux de sélectionner une seconde option que les navigateurs web ne bénéficiant pas des dernières mises à jour peuvent afficher. Une couleur peut être automatiquement liée à une police et à une taille de police. Ces réglages clé en main permettent de faciliter la tâche des développeurs.

5. Le répertoire des éléments graphiques

Les illustrations et icônes doivent être répertoriées dans une library, sous formats de fichiers svg, jpeg et png. Des règles d’échelle, de marges, de dimensions doivent également être définies pour les images. Les icônes peuvent être associées automatiquement à des couleurs.

6. L’organisation et l’évolution du design system

Un effort de paramétrage et de combinaison des composants doit être fait dans les maquettes Sketch, Adobe XD ou encore Figma. Le regroupement de toutes les normes dans un fichier CSS de design system est important lors du codage. Des variables doivent être pensées autant pour les couleurs que pour les textes, les éléments graphiques et les marges, afin d’obtenir un design system évolutif.

Méthode de design qui réunit les éléments visuels de branding, de composants ou de ton, le design system est généralement hébergé dans le cloud pour optimiser la collaboration et la productivité d’une équipe travaillant à la conception ou à la refonte de produits numériques. Si des outils d’UI comme Sketch ou Adobe XD sont pratiques pour réunir vos composants dans des bibliothèques spécifiques, les compétences d’un UX designer restent essentielles pour la réalisation d’un design system qui optimise vraiment l’expérience utilisateur à travers une ergonomie irréprochable de site.