La construction d'un design system

La construction d’un design system permet de faciliter la relation entre le chef de projet, le designer et le développeur en cristallisant tous les éléments de design (élément de formulaire, couleur, typographie, bouton, etc.) en un seul endroit. Au delà de faciliter la relation, il permet donc d’avoir un référentiel UX & UI pour toute les parties. 

Comment va-t-on le construire ?

Ce n’est pas la chose la plus facile à faire. C’est relativement compliqué car il va falloir prévoir tous les cas de figure, sans oublier le moindre éléments. Il faut donc penser aux fonctionnement de l’application en amont du développement. Cela sous-entend qu’au préalable, toute l’UX (architecture, user flow, wireflow, recherche UX, persona, etc.) de votre interface a bien été validée et éditée sous forme de document que le designer pourra récupérer pour construire le design. Partons du principe que c’est le cas, quelle méthode le designer mettra en place pour conceptualiser tout le design system. Il utilisera la « méthode Atomique« .

01. Niveau atomique

On va commencer à développer les éléments graphiques de base qui vont apparaître dans toutes les interfaces. Généralement, ce sera le/les logos, la charte colorimétrique et toute la typographie.

02. Niveau moléculaire

Ici, on aura des éléments un peu plus évolués étant composés de plusieurs atomes. Par exemple, on va construire les champs de formulaires (vide, erroné, manquant, valide, en cours d’édition, etc.), les différents boutons et leurs statuts (invalide, valide, survol, pas survol, etc.)

03. Conception d’un organisme

On commence à visualiser des éléments concrets de la future application avec les headers, menu, menu de navigations, etc.

04. Conception de templates

Selon Brad frost (concepteur de la méthode « Atomic design »), ils sont développés en code, peuvent être sans contenu et servent à tester le fonctionnement du design system en responsive.

05. Conception des écrans / pages

C’est la dernière phase où on ajoute tous les éléments précédents (atome + molécule + organisme) pour constituer les écrans et leur contenu.