Qu'est ce qu'un Design System ?

Régulièrement, le terme Design System apparaît dans des articles concernant le design. Il s'agit d'un référentiel visuel. Le Design System répertorie de façon organisée l'ensemble des guidelines et des ressources, d'un service ou d'une application.

Pourquoi répertorier ? Plusieurs raisons à cela.

Il est important de répertorier et par la même d'expliquer les choix présents dans le Design System. La compréhension permet une meilleure adhésion à la règle des équipes.

Un Design System met en place un ensemble de standards, partageables et compréhensibles par tous. Il n'est pas fait que pour les Designer. Il est un indispensable de travail pour tous les membres d'une équipe, Designers UX/UI, Développeurs, Chefs de projet... Le "gap" entre les membres d'une même équipe ou entre les différentes équipes travaillant sur une même application s'en trouve grandement réduit.

Le Design System permet d'accélérer le processus de design. En (ré)utilisant les composants, nous obtenons une application plus standardisée et donc plus compréhensible. Les Designers sont plus libres de se focaliser sur l'expérience utilisateur, plutôt que sur le style des composants. De plus, ils ne recréent pas l'existant. Le Design System va également permettre l'accélération du prototypage, avec des flows et des interactions déjà connus et réutilisables à l'infini pour expérimenter différentes solutions. Nous obtenons un design consistant donc d'une expérience utilisateur consistante.

Les applications ou services évoluent au rythme des ans et des fonctionnalités qui s'ajoutent, le Design System permettra d'éviter une dette de design et une dette technique trop importante. Un Design System est donc raisonnablement évolutif, et doit être impérativement mis à jour.

Que contient-il concrètement ?

Guidelines : C'est l'ensemble des documents contenant les conventions à respecter, lors de la conception de l'application.

• Les Guidelines générales concernent la structure/architecture des dossiers, les conventions de naming...

• Les Guidelines UX sont les règles générales en matière de flow, d'interactions, mais aussi la ligne éditoriale, la structure des messages de l'application dans leur langage et leur tonalité...

• Les Guidelines de style qui contiennent l'ensemble des modèles perceptifs de l'application. Nous parlons ici du logos, des couleurs, de la typographie, mais aussi du son, des vibrations, du mouvement...

• Les Guidelines UI sont plus précises et sont les blocs UI constitutifs de l'application. Il est important dans ces guidelines UI d'ajouter la réflexion derrière la construction des éléments (margin, padding... H1, H2...), ainsi que tous les états d'un composant. C'est une bibliothèque descriptive de composants. (Alerts, buttons, checkboxes, grid, icônes, tooltips...)
  

Ressources : Il s'agit d'éléments réutilisables servant de blocs de constructions pour l'application. Il peut s'agir de fichiers sources, d'échantillons de code...

• Le Design Toolkit rassemble les fichiers sources UI. (Logos, palettes de couleurs, fichiers sources Sketch...)

• Le Developper Toolkit correspond aux blocs, échantillons, exemples créés par les Développeurs à des fins d'utilisation et de référence.

Des exemples ?

Si vous travaillez pour des applications qui s'intégreront parfaitement aux plateformes Apple, c'est un indispensable.

Carbon Design System by IBM : C'est ici !

Carbon Design System est le système de conception open source d'IBM. Ce système se compose de code, d'outils de design et de ressources, de guidelines pour les interfaces et d'une communauté dynamique de contributeurs.

Il inclut Design Toolkit assez riche pour Carbon qui permet un processus de conception efficace.Vous pouvez y trouver des kits de code frontend complet pour Angular, React et Vue.

Material Design by Google : C'est ici !

Material Design est un Design System combinant théorie, ressources, et outils pour créer des expériences digitales.

Atlassian : C'est ici !

Si vous bossez de façon Agile, vous connaissez JIRA et Atlassian la société qui l'édite. Son Design System s'inspire de l'Apple's Human Interface Guidelines. Son système de conception est basé sur du code tout en conservant une facilité d'utilisation. L'accessibilité est le facteur le plus important pour Atlassian et leur conception respecte les rapports de contraste standard qui garantissent que les utilisateurs malvoyants peuvent voir et utiliser leurs produits.

Pour plus de Designs System voici un annuaire : Ici !

Et pour aller plus loin, et concevoir votre propre Design System, voici un free-book très utile, qui recense les meilleurs pratiques en matière de planification, de conception, de construction et de mise en œuvre d'un Design System : c'est ici !