Le Design System, la boîte de Lego de votre site

La magie des Legos a toujours été de pouvoir construire tout et n’importe quoi avec seulement quelques briques de base. Avec les mêmes briques dans une boîte, vous pouvez construire soit une voiture, soit un avion, soit un bateau. Les mêmes éléments permettaient d’obtenir des résultats différents.

Un peu comme les atomes et les électrons. Avec juste deux briques de base, les atomes et les électrons, il devient possible de composer tous les éléments de la terre.

Les vieilles boîtes de Lego permettaient de construire plusieurs modèles avec les même briques.

Dans le domaine du digital, c’est le principe même de ce qu’on appelle l’Atomic Design. Plutôt que de créer un design de site page par page, les designers créent les briques de base du design et les assemblent ensuite selon le besoin.

Cette technique, inventée par le designer Brad Frost, permet de construire mieux et plus rapidement des sites. Un même élément peut se retrouver dans plusieurs pages, et à partir d’un nombre limité d’éléments de design, il est possible de créer plusieurs dizaines de modèles de page pour desktop et mobile.

Principe de l’Atomic Design (via bradfrost.com)

Cette construction par briques possède un autre immense avantage : elle permet d’homogénéiser la création de medias digitaux pour une grande entreprise.

En forçant l’utilisation de briques standards à tous les utilisateurs de medias digitaux, l’Atomic Design constitue le socle de ce que l’on appelle un Design System, c’est à dire une librairie d’éléments de design (des menus, des entêtes de page, des blocs, des boutons, etc.) accessibles en ligne et réutilisables par tous les intervenants sur les médias digitaux de la société.

 

Comment cela fonctionne-t-il ?

1 - Les équipes de création web créent les éléments du Design System à partir d’éléments préexistants ou bien de toutes pièces. Cette création inclue l’UX Design, le Web Design et le code (très important) pour la portabilité des différents éléments sur plusieurs plateformes (web, mais aussi OS mobile, par exemple)

2 - Les éléments du design sont rassemblés au sein d’une interface de gestion de la librairie. Dans cette interface, il devient possible de récupérer le code ou les éléments graphiques du Design System pour les intégrer dans différents supports. Les Design Systems plus évolués permettent d’ajouter directement ces éléments depuis un CMS. En principe, même des gens sans formation en développement ou en design doivent pouvoir utiliser le Design System, c’est là que tout son intérêt réside.

 

Le Design System doit être vivant

Un Design System est destiné à évoluer en permanence. On ne le crée pas une fois pour toute, on l’améliore constamment en lui ajoutant des éléments ou en le mettant à jour.

Un bon Design System doit pouvoir, par exemple, être capable de faire automatiquement les mises à jour sur les supports qui utilisent ses éléments.

Comme on le voit, un Design System est plus qu’un simple catalogue, c’est bien un outil de gestion des éléments d’interface de l’ensemble des interfaces digitales d’une entreprise.

 

Quelques exemples de Design System

Certaines entreprises partagent leur Design System en ligne. C’est notamment le cas de Google qui décline toutes sa charte graphique et ergonomique à travers le Material Design.

Le Material Design de Google est à la fois un Design System et un ensemble de recommandations. Tous les aspects de l’interface sont codifiés, comme ici les interactions mobiles.

Le Design System de la plateforme sociale Sprout. Tous les éléments de mise en forme pour le Web sont très précisément définis. A gauche, on voit l’arborescence du Design System, à droite le  code CSS qui correspond à chaque élément.

 

Dans quels cas adopter un Design System ?

Toutes les entreprises n’ont pas besoin d’adopter un Design System. Un certain niveau de maturité est nécessaire et une certaine taille doit être atteinte.

Le Design System révèle toute son utilité dans des entreprises où les intervenants sur le site web et /ou les applications sont nombreux. Plus ce nombre de personnes est grand, plus le risque de dispersion devient important et plus l’utilité du Design System a d’importance.

Autre cas de figure : les entreprises gérant beaucoup d’interfaces. Par exemple, une société comme Airbus possède plusieurs centaines de logiciels en interne. Adopter un Design System permet d’homogénéiser ces interfaces et créer une ergonomie commune.

 

Les avantages

L’avantage d’un Design System est de pouvoir garantir aux utilisateurs d’interfaces une expérience homogène et cohérente quelque soit le support digital qu’ils utilisent. Cette homogénéisation a son importance, car elle permet de garantir des temps d’apprentissage de l’interface plus courts, une navigation plus rapide, et, in fine, un meilleure performance des utilisateurs et site ou de l’application (on parle alors d’efficience de l’interface).

Pour les marques, c’est aussi le meilleur moyen de mieux contrôler son image à travers de nombreux médias et d’éviter des dérives. Pensez aux restaurants Mc Donalds : leur design se ressemble tous et ce n’est pas un hasard. Très vite, leurs clients s’y retrouvent qu’ils soient à Hong Kong ou à Paris. Un Design System permet exactement d’aboutir à ce même résultat.

Nouveau design d’intérieur des restaurants Mc Donald’s en 2017. En adoptant un design commun, une charte graphique unifiée et entièrement respectée par chaque propriétaire de magasin, Mc Donald’s garantit une expérience utilisateur similaire pour chaque client quelque soit l’endroit où il se trouve dans le monde.

 

Conclusion

Le Design System constitue plus qu’une bonne pratique. C’est un véritable outil qui va permettre de garantir une qualité d’expérience utilisateur au dessus de celles qui sont proposées par les entreprises qui n’ont pas de Design System. Il permet de faire gagner du temps et de réaliser des économies à tout le monde que ce soit l’entreprise, dans sa production de médias, ou les utilisateurs, dans leur utilisation des interfaces.

Intégrer un Design System à son entreprise permet d’avancer un peu plus dans sa digitalisation et de la faire avancer dans un plus grand contrôle de sa production digitale. Si vous n’avez pas encore de Design System, il est temps de vous y mettre !