Design System : industrialisez vos interfaces et normalisez vos développements Front !

La digitalisation croissante de votre entreprise a pour effet la multiplication des plates-formes et applications en ligne Ă  destination de vos clients, de vos partenaires ou encore de vos collaborateurs. Savez-vous que la conception et la maintenance de ces outils peut ĂȘtre optimisĂ©e afin de faire rimer homogĂ©nĂ©itĂ© et productivitĂ© ? Tout simplement grĂące Ă  l'Ă©laboration d'un Design System...

Qu’appelle-t-on Design System ?

Un Design System ou SystÚme de Design est un référentiel qui répertorie les composants graphiques, ergonomiques et techniques des outils digitaux d'une organisation. Sites web, applications mobiles, applications métiers, newsletters, réseaux sociaux


Le Design System est partagĂ© et alimentĂ© par l’ensemble des mĂ©tiers concernĂ©s (marketing, UX/UI, dĂ©veloppement, etc
). Il a pour objectifs principaux de gagner en efficacitĂ© et d’aider les diffĂ©rentes Ă©quipes ainsi que les prestataires Ă  maintenir la cohĂ©rence de l'Ă©cosystĂšme digital. Ce rĂ©fĂ©rentiel est bien sĂ»r Ă©volutif.

Que trouve-t-on dans un Design System ?

En tant que rĂ©fĂ©rentiel global, le Design System regroupe toutes les ressources qui peuvent ĂȘtre utiles dans le cadre de la rĂ©alisation d'un produit digital :

  • IdentitĂ© de marque
  • RĂšgles typographiques
  • Palettes des couleurs et rĂšgles associĂ©es
  • Iconographie et imagerie
  • Composants UI et patterns (encarts, boutons, flags, tableaux...)
  • Composants fonctionnels
  • Gabarits de pages, d'emails
  • Grilles pour structurer les Ă©lĂ©ments
  • RĂšgles d'interaction
  • Charte Ă©ditoriale
  • Bonnes pratiques SEO
  • Etc...

Exemples de rubriques du Design System de la MAIF


Pourquoi adopter un Design System ?

Faciliter la communication entre les différentes équipes

Le Design System est une véritable solution de travail collaboratif. Il permet de centraliser les informations, de travailler ensemble sur la conception et le développement des nouvelles applis ou encore de notifier les membres du groupe des derniÚres mises à jour. Il favorise également la cohésion d'équipe et facilite l'intégration d'un nouveau membre ou le remaniement de la team. La maintenance est centralisée : tout est à jour en un seul endroit.

Pauline, expert UX/UI chez Goweb, n'y trouve que des avantages : 

Cette méthodologie de co-conception me permet de mieux organiser mon travail et de mieux communiquer avec mes collègues développeurs. C'est un véritable échange entre eux et moi, ce qui améliore mes connaissances techniques au fil des jours.


Concevoir plus rapidement des applications et services numériques

Dans le contexte d'accĂ©lĂ©ration de la transformation numĂ©rique des entreprises, la mise en oeuvre d'un Design System prend tout son sens. Les Ă©quipes de dĂ©veloppement peuvent consacrer leur temps Ă  innover et monter en compĂ©tences plutĂŽt qu'Ă  coder plusieurs fois le mĂȘme formulaire pour chaque plate-forme...

Le Design System fournit une bibliothÚque de code réutilisable. Les équipes techniques peuvent ainsi récupérer des composants écrits dans un langage commun. C'est ce qu'on appelle le "Low code".

L'intégration HTML/CSS est facilitée grùce au processus "Design to code". Le designer prépare sans charge supplémentaire le travail de l'intégrateur. et par la suite n'est plus sollicité en permanence pour la mise à disposition d'éléments visuels. Les itérations sont rapides et aucun conflit CSS ou Javascript n'est causé.

Mathieu, dĂ©veloppeur front-end chez Goweb, a bien compris l'intĂ©rĂȘt du Design System pour exĂ©cuter ses missions :

Le Design System a des avantages sur le long terme, il permet de ne plus perdre de temps à tout recréer en utilisant des composants bien identifiés en amont. Il permet une cohérence entre tous les projets, une mise à jour plus facile, et un transfert de connaissances simplifié.

En bref, le Design System vous permet d'accroßtre votre efficacité opérationnelle.

Vous ĂȘtes dĂ©veloppeur et vous aimeriez participer Ă  l'Ă©laboration de Design Systems ? Rejoignez-nous !


Optimiser l'expérience utilisateurs

La cohérence graphique, fonctionnelle et éditoriale garantie par le Design System contribue à la fluidité du parcours utilisateur, à l'appropriation des outils et à la satisfaction ressentie lors de l'utilisation. Le Design System permet d'éviter les points de rupture, les incohérences, les couacs graphiques ou techniques.

En outre, l'approche modulaire de l'atomic design permet aux graphistes et aux développeurs de concevoir des interfaces plus fonctionnelles et mieux adaptées aux besoins et aux usages actuels.

Pauline y voit une valorisation de l'UX.

Le Design System propose, dès sa phase initiale, l'organisation d'ateliers de type Design Thinking. Grâce à cette méthode, le design est mis en avant et ne sert pas juste à "créer de belles maquettes". Longtemps perçu comme non essentiel dans un projet, l'UX est ici l'élément moteur et son rôle est primordial !

On l'aura compris, le Design System contribue Ă©galement Ă  renforcer l'image de l'entreprise.

 

Quelle méthodologie adopter pour mettre en place un Design System ?

L'élaboration d'un Design System est un véritable projet d'entreprise. Nous recommandons la mise en place d'une équipe dédiée, comprenant un Chef de projet, un UX/UI designer et un développeur front-end.

Faire appel à un prestataire expert en UX/UI et en développement de sites et d'applications est la solution idéale. Il saura vous guider, apporter son regard extérieur et co-construire avec vous le Design System optimal.

Il y a 3 étapes-clés :

1. DĂ©finir le projet

  • On identifie les objectifs
  • On rĂ©alise un audit de l'existant
  • On mĂšne des entretiens auprĂšs des utilisateurs
  • On dĂ©finit un pĂ©rimĂštre et une arborescence
  • On sĂ©lectionne la solution technique

2. Construire le Design System

  • On choisit un projet pilote, par exemple la rĂ©alisation d'une application mĂ©tier
  • Les membres de l'Ă©quipe participent Ă  des ateliers de co-conception
  • Ils alimentent le Design System par un processus itĂ©ratif
  • Des tests utilisateurs sont organisĂ©s pour valider le produit final

3. DĂ©ployer et faire Ă©voluer le Design System

  • On fait la promotion du produit auprĂšs des utilisateurs
  • On le fait vivre en le tenant Ă  jour rĂ©guliĂšrement
  • On prend en compte les feedbacks des utilisateurs
  • On rĂ©pond aux nouveaux besoins et Ă  l'Ă©volution de l'entreprise

 

Quelle solution technique choisir pour créer son Design System ?

CentralisĂ© et partagĂ© par tous, le Design System doit ĂȘtre accessible en ligne.

Il existe de nombreuses solutions sur le marché. L'application Zeroheight dispose notamment d'un plug-in pour Adobe XD. Il propose une interface particuliÚrement conviviale et intuitive. On peut par exemple générer en un clic un bloc de "do's and don'ts" (pratiques recommandées et pratiques à éviter).

Vous pouvez aussi choisir de faire développer une solution sur mesure.

Sachez enfin que l'exploitation des composants du Design System dans la solution de gestion de contenu de votre site web sera facilitée si vous utilisez un CMS de type modulaire comme Umbraco, Sitefinity, Kentico, Episerver, DNN...

 

Si vous aussi êtes convaincu de l'intérêt du Design System et souhaitez le déployer dans votre organisation, contactez-nous !