Design system : ou comment aligner design et développement

Catégorie :

UX/UI

Publié le :

24/6/2022

Temps de lecture :

4 minutes

Auteur :

#
Article
#
Design System
#
UXUI
Rouleaux de peinture sur un mur peignant des bandes de couleurs primaires

Apparus à la fin de la dernière décennie, les design systems s’imposent peu à peu aux grandes organisations. Adaptables et évolutifs, ils se positionnent comme le chainon manquant entre les équipes design et développement.

Historique et définition du design system

Comme souvent lorsqu’il s’agit d’innovation web, le nom de Google apparaît. Avec son guide Material Design, Google a révolutionné la manière de penser, concevoir et communiquer le design digital. Énorme kit UI, UX et motion, illustré en langage informatique, le guide qui en est à sa troisième version, est considéré par beaucoup comme le premier design system d’envergure à avoir vu le jour.

Mais un design system est plus qu’un kit ou un guide de bonnes pratiques. En branding, on connaît la charte graphique, document synthétique listant et harmonisant tous les éléments graphiques d’une marque. Mais elle reste un outil créé pour le print et oublie beaucoup de notions propres au digital. Le design system est quant à lui un organisme vivant, accessible et connecté, qui comprend tous les éléments de langages pour les designers ET les développeurs, voire les structures qui gravitent autour, comme les prestataires externes par exemple. Il apporte ainsi au sein des entreprises de la cohérence dans le design digital en simplifiant la collaboration entre les parties.

Écran d'ordinateur représentant un design system
Exemple de design system

Si cette définition s’attarde plus sur les usages que les fondements du concept, c’est qu’il peut exister autant de design system qu’il existe de marque. Chacun construisant le sien en fonction de ses besoins et de son organisation interne.

À quoi sert un design system ?

Avant les design systems, lorsqu’un changement s’opérait sur un élément graphique, toutes les personnes utilisant cet élément devaient en être informées afin de bien prendre en compte ce changement dans leur environnement de travail. Avec le développement des produits digitaux et web, cette chaine de communication est vite devenue intenable. L’objectif premier d’un design system est ainsi de centraliser et d’automatiser l’information en une seule interface.

Pour ce faire, plusieurs outils sont nécessaires.

En amont, on retrouve le logiciel de création. Rangez Photoshop, des outils comme Sketch ou XD sont venus révolutionner le design digital. Chez Keley, nous utilisons beaucoup Figma, qui porte la discipline à un niveau sans précédent. Comme d’autres, il permet de designer les interfaces, les animations et tous les composants nécessaires (boutons, hover, cartes, etc…), mais il ajoute la dimension librairie qui en fait un des outils les plus actuels.

En aval, il y a la correspondance code à tous ces éléments, où sont répertorié les traductions en langage informatique des éléments graphiques. Storybook est un exemple d’outil remplissant cette fonction.

Et au milieu, on retrouve l’interface qui répertorie tous les éléments graphiques en temps réel, les rend consultables, et y associe si besoin un code par exemple en CSS ou JavaScript. L’outil le plus célèbre, notamment en France, est Zeroheight, sans doute parce qu’il est utilisé par les  design systems les plus renommés. C’est une interface web en deux parties : brand et digital. Dans la première on retrouve les éléments classiques d’une charte graphique, et dans la deuxième les éléments de design digital de manière exhaustive. Par exemple, on y retrouve l’accessibilité, le responsive, les animations, les micro-interactions, etc.

Capture du design system de Décathlon réalisé sur l'outil Zeroheight
Le design system Décathlon, en open source sur Zeroheight

Tout l’intérêt de ces 3 types d’outils est qu’ils sont évidemment reliés, et se mettent à jour en temps réel. Par exemple, une modification sur le radius d’un bouton sur Figma sera instantanément traduit en code dans le design system publié sur Zeroheight. Chaque évolution apportée par un designer sera alors connue par l’ensemble des développeurs.

Pourquoi créer son design system ?

Mieux encore, il existe des passerelles directes vers les CMS. On atteint ici une limite dangereuse qui voudrait qu’un designer puisse engager un changement en production. Mais l’automatisation peut parfois se révéler utile. Il y a quelques années, Amazon apportait de nombreuses et successives modifications à sa charte graphique, ce qui impliquait pour les développeurs d’être constamment en alerte de ces modifications, ralentissant grandement la production.

Le lead design s’est alors penché sur le moyen d’apporter de la transparence et de l’automatisation, lorsque l’expertise du développeur n’était pas nécessaire. En échangeant avec ses pairs rencontrant la même problématique – Spotify et plus encore The Wall Street Journal, qui venait de passer deux ans à mettre à jour son site suite à un changement de typographie – un collectif de designer a mis en place des tokens. Ces tokens sont un format de donnée particulier qui permet ainsi l’export vers le code de manière agnostique, légère, complète et universelle. On venait d’assister à la naissance du premier Git de designer, et ainsi à un bon en avant dans la collaboration entre designer et développeurs.

Traduction en code de directives design
Traduction en code de directives design

Ces exemples ne sont cependant pas une injonction au design system pour tous. En effet, dans les petites structures, un kit UI peut être suffisant. Un design system nécessite au minimum une personne à plein temps pour le gérer, et cela peut aller jusqu’à 10 ETP pour les entreprises les plus avancées. C’est donc une charge lourde qui ne peut pas être supportée par toutes les organisations.

Il faut donc réfléchir en termes de besoins. Si le design est un pilier du produit ou de la marque, et qu’il implique un grand nombre de parties prenantes (filiales à l’étranger, prestataires externes, etc.), alors le design system sera un passage obligé. Quant à la question : faut-il un design system par entreprise ou par marque/produit, là encore, tout dépend de l’organisation de l’entreprise et de ses besoins. Le design system est une solution encore jeune aujourd’hui, et elle reste plus pragmatique que théorique, c’est ce qui fait que son adoption est exponentielle.

En France, nous avons la chance d’avoir des références mondiales de design systems, notamment Décathlon et Doctolib qui sont pris en exemple partout, parce que qualitatifs, exhaustifs et en open source. Ainsi, le design system devient un moyen de communication, valorisant la marque, mais aussi servant au recrutement des équipes design et développement.

Sources :

https://www.youtube.com/watch?v=RPHOwvDIlSE

https://www.designsystems.fr/liste-des-designs-systems-francais

https://www.decathlon.design/726f8c765/p/71b8e3-decathlon-design-system

https://oxygen.doctolib.design/60b411768/p/77fd2d-doctolib-design-system

https://www.microsoft.com/design/fluent/#/

Keley est un partenaire de co-création parmi les meilleurs acteurs du marché, notamment via son expertise des parcours clients.

Yann Ruello

Content Innovation Director, chez Orange

Jonathan Larradet

Directeur Artistique

Passionné d'art et de digital, Jonathan crée des univers de marque et des interfaces digitales performantes.Il a notamment travaillé pour Allianz Partners, Servier et Infogreffe.

Envie de partager cet article ?
Button Text
UN PROJET DE TRANSFORMATION DIGITALE ?

Il est temps de se rencontrer ! Il vous suffit de remplir ce formulaire pour nous contacter.

La collecte des informations demandées est nécessaire au traitement de votre demande par Keley, unique entité habilitée au traitement. Elle vous permettra en premier lieu de recevoir une réponse à ce message. En cas de contact ultérieur de la part de Keley, votre consentement sera au préalable recueilli. Vous disposez d’un droit d’accès, de rectification, d’opposition et de suppression des données vous concernant. Pour l'exercer, merci de nous en faire la demande par email à l’adresse communication@keley.com.

Pictogramme blanc et jaune d'une enveloppe

Comment pouvons-nous vous aider ?

Merci pour votre message !
Oops ! On dirait qu'il y a eu un problème...

La collecte des informations demandées est nécessaire au traitement de votre demande par Keley, unique entité habilitée au traitement. Elle vous permettra en premier lieu de recevoir une réponse à ce message. En cas de contact ultérieur de la part de Keley, votre consentement sera au préalable recueilli. Vous disposez d’un droit d’accès, de rectification, d’opposition et de suppression des données vous concernant. Pour l'exercer, merci de nous en faire la demande par email à l’adresse communication@keley-consulting.com.