Vous avez dit « Design System »?

En juin 2014, Google a changé le monde du design digital avec la sortie de Material Design. Peu après, Brad Frost a inventé le terme Atomic Design, qui a posé le premier pilier du temple qui deviendra  un jour le design system. Atomic Design a facilité le processus de décomposition des composants complexes en éléments simples et elle a a précipité la redéfinition du processus de construction du produit digital de chaque grande organisation. Nous avons tous commencé à concevoir des systèmes au service des produits afin de les présenter de manière engageante ??, au lieu de mettre à jour, d’adapter et de modifier sans cesse les interfaces en raison des tendances, des nuances ou des demandes obscures des parties prenantes. IBM a publié son système de conception : Carbon. Microsoft a sorti le sien : Fluent. Adobe : Spectrum. Même Uncle Sam a suivi et le gouvernement des États-Unis a publié l’USWDS : United States Web Design System.

Mais… Pourquoi avons-nous besoin d’un Design System ?

L’itération, les commentaires des utilisateurs, l’innovation et les avancées technologiques apportent des paysages en constante évolution, des changements rapides et de nouvelles découvertes sur le marché. Dans ce monde en constante évolution, les designers doivent être agiles et s’adapter rapidement.

Construire vite, de manière évolutive et efficace est le fondement de tout projet et/ou entreprise. 

Imaginons deux designers : Tony et Tara.

Tony n’utilise pas de design system et conçoit, aligne et ajuste minutieusement chaque élément de son interface.

Tara utilise un design system, avec une bibliothèque de composants, une bibliothèque de motifs, etc.

Ils travaillent tous les deux sur des interfaces de 40 pages, avec environ 80 boutons présents dans toute l’expérience qu’ils sont en train de concevoir. Soudain, le client veut changer la couleur des boutons du vert au rose.

Il faut 2 heures à Tony pour modifier chaque bouton dans son interface. Il faut 2 secondes à Tara pour modifier son design system.

“Don’t be like Tony. Be like Tara”

Les design systems vont beaucoup plus loin…

En vérité, il ne s’agit pas seulement de changements et d’adaptations, mais aussi d’un changement de paradigme fondamental dans la façon dont un designer aborde la conception d’un produit digital. On conçoit d’abord des éléments plus petits (boutons, styles de titres, etc.) qui s’assemblent en composants (blocs, etc.) qui eux-mêmes s’assemblent pour former des sections, puis des templates, puis des pages. Concevoir avec un système, c’est comme développer avec du code. Et c’est pourquoi c’est si puissant. Après des années et des années de désaccords, de ressources gaspillées sur la transmission de spécifications, nous avons enfin un processus rationalisé qui permet aux designers et aux développeurs de parler le même langage. 

Et c’est là le véritable super pouvoir des design systems. Il permet une itération plus rapide, une  meilleure adaptabilité et une collaboration entre les designers, mais surtout entre les équipes de designs et de développement. C’est un véritable changement pour toute organisation digitale.

En un mot ?

Un design system est une collection de composants réutilisables, guidés par des normes claires, qui peuvent être assemblés pour construire un nombre quelconque d’applications. Le design system est un ensemble de directives et de composants réutilisables avec des fonctionnalités sur différents appareils qui accélère le processus de design, de développement, de livraison et d’itération tout en maintenant la qualité du produit.

Les design systems sont l’avenir (même s’ils sont déjà omniprésent). Si vous souhaitez créer un produit digital de quelque nature que ce soit avec nous, ne vous inquiétez pas.

Nous designons comme Tara. Et non comme Tony.

PS: envie de devenir incollable sur le sujet? Figma a publié des vidéos simples et didactiques pour apprendre étape par étape à construire un design system: