Design system : pourquoi, pour qui, comment ?

D’abord un design system c’est quoi ? 

C’est une librairie d’éléments ou “composants” utilisés pour des services digitaux : site web, application, logiciel.

Le design system va présenter dans le détail tous les éléments qui vont servir à construire le service. Ils sont mis en forme dans le respect de la charte graphique de la marque, et déclinés avec leurs différents états.

Par exemple, dans le cas d’un site web, lorsqu’on a besoin d’un bouton, le design system va préciser :

  • ses caractéristiques graphiques : couleur, font 
  • ses caractéristiques techniques : dimensions, taille de texte, espacement
  • ses caractéristiques à l’usage (changements d’état) : au survol de la souris, s’il est inactif…

Le fond et la forme, Atomic Design & Design system :

Le design system est un livrable, mais son élaboration est généralement faite en suivant la méthode de l’Atomic Design, créée par Brad Frost. Cette méthode consiste à partir du plus petit élément possible dont on a besoin dans ses gabarits de page, pour ensuite les assembler, tel un jeu de construction. De l’atome à la molécule, aux organismes puis aux templates pour arriver jusqu’à la page complète.

On suit ainsi la logique du code, sur laquelle on ajoute la couche graphique/esthétique. Cela permet un gain de temps en évitant certains développements spécifiques pour respecter un design pas toujours cohérent avec les réalités techniques.

Quelques exemples de parties de design systems :

L’un des plus connu, Material de Google

Un exemple de la partie boutons d’un projet de Dedi agency, et un exemple de la partie éléments de formulaires de la librairie bootstrap, framework utilisé par des millions de personnes.

Beaucoup de grandes entreprises ont leur Design system, et beaucoup le mettent également à disposition pour consultation.

Le site Design Systems France les répertorie.

Il est aussi tout à fait possible d’avoir son propre design system lorsqu’on a une petite entreprise, même si on en entends moins parler !

Pourquoi est-ce utile et important d’avoir son propre design system ?

4 raisons principales à cela :

  • garantir la cohérence et l’harmonie dans les rendus d’un bout à l’autre
  • travailler main dans la main avec les développeurs
  • communiquer facilement sur votre marque en interne et en externe sur les lignes à suivre.
  • la durabilité et maintenabilité : d’un part le design system permet d’ajouter facilement un nouveau service, une nouvelle page, puisque tous les éléments sont déjà disponibles tel un jeu de lego®. D’autre part, lorsque vous souhaitez faire évoluer votre identité de marque, les modifications pourront être appliquées facilement et à grande échelle sur vos produits et services.

Pour qui ?

Tous ceux qui ont une présence en ligne ! Dès lors que vous avez un projet de service digital ou de site web (même une page web même unique), vous pouvez déjà poser les bases d’un design system.

Il est flexible et peut évoluer pour grandir en même temps que votre activité.

Et si vous avez déjà des services digitaux en place, pas de panique, il n’est jamais trop tard !

Comment ?

Découvrez l’offre Design system : En utilisant la méthode de l’Atomic design, je crée pour vous un design system ou charte web complète comprenant tous les composants utiles à la réalisation de votre site web ou d’une application

Comments are closed

© 2021 Yellowazo