Formation « Créer un site WordPress avec le Full Site Editing »

Design system : le pont entre designers et développeurs

Lecture : 6 minutes • 0

Dans une approche web moderne, le design system est la fondation sur laquelle se base un projet web. Il possède un langage commun compris par les designers autant que par les développeurs. Et ça tombe bien, car WordPress se base intégralement sur ce langage. De quoi enfin réconcilier développeurs et designers.

Avant d’attaquer la partie technique, je vous invite à un voyage du côté du métier du designer. Dans un but de rationaliser ses créations, il a adopté le design system, ou système de design/conception en français.

Et ça me parait important qu’on passe un tout petit peu de temps là dessus, car ce système est la base sur laquelle Gutenberg a fondé son éditeur.

Ainsi, on va voir à quel point le Full Site Editing est en phase avec les standards de l’industrie.

Définition du design system

Un design system est un ensemble de règles et de composants permettant de concevoir des sites et des applications.

C’est un peu une boite à outils permettant de standardiser visuellement notre produit numérique grâce à :

  • Des bibliothèques de composants ;
  • Une guide de styles ;
  • Une charte graphique ;
  • Une documentation.

Le design system est un langage complet souvent utilisé pour les grosses applications et grandes marques. Par exemple, Material Design par Google est un design system permettant de donner des directives claires aux développeurs d’applications mobiles Android.

Exemple de composants d'interface avec Material Design de Google.
Le Material Design de Google

Au niveau d’une agence web, on n’est bien entendu pas obligés de s’astreindre à une telle rigueur pour la création de sites.

Toutefois, c’est quand même très intéressant de mettre en place, en plus d’une simple charte graphique et d’une maquette, une librairie de composants réutilisables et un guide de styles.

Et les logiciels comme Figma s’y prêtent très bien. D’ailleurs la communauté Figma propose plein de design system gratuits.

Un design system réalisé avec Figma présentant des couleurs, des boutons, des typographies et des éléments d'interface.
Un design system disponible gratuitement sur Figma Community

Dans un design system, on documente tout : des couleurs au logo, en passant par les typographies, les espacements et les arrondis, mais également les composants.

Le but c’est d’établir une librairie complète des composants de votre site ou application, comme les boutons, les cartes, les sections, les formulaires et tout autre élément d’interface.

Après tout un bouton, c’est tout simple non ? Eh bien… pas forcément. Il peut y avoir :

  • Plusieurs styles : primaire, secondaire, transparent…
  • Des variations : grand, petit, carré, arrondi…
  • Une icône : avant, après ou aucune.
  • Des états : actif, désactivé, en cours d’exécution…
  • Et pourquoi pas une version light et une déclinaison dark ?

Et du coup, si on veut anticiper tout cela, il faudra designer toutes les possibilités :

Les nombreuses déclinaions des boutons du design system. Certains sont colorés, d'autres ont des icônes…
Toutes les déclinaisons des boutons

Ça en fait pas mal non ? Et ça va être le même travail pour tous les autres composants du site, comme les cartes par exemple :

Les 6 variations graphiques de cartes disponibles dans ce design system.
Différents modèles de la même carte

Dans cet exemple, certaines cartes sont alignées à gauche et d’autres centrées, certaines ont des ombres, d’autres sont foncées…

Conseil

Bien évidemment, le design system doit refléter la complexité du site et le budget. Pour un site simple, il devrait y avoir moins de composants et de variations à concevoir.

Le design system est un bon moyen d’estimer la complexité, et donc le travail nécessaire à la réalisation d’un site ou d’une application.

Les avantages d’un bon design system sont les suivants :

  • Rationaliser la conception du design jusqu’à la production du projet ;
  • Créer un langage unifié entre les designers et les développeurs ;
  • Gagner en efficacité et productivité grâce aux composants ;
  • Harmoniser la marque au travers de plusieurs projets ;
  • Simplifier la maintenance et l’évolutivité des produits ;
  • Garantir une meilleure expérience utilisateur entre les produits et appareils.

Voyons ce qu’en pense Joffrey Jochum, un expert dans la conception de design systems :

Joffrey Jochum
Designer
Design mentor

Le conseil de Joffrey Jochum

Fondateur de l’agence Fantassin et du bureau de Design Bter

La création de sites web a radicalement évolué ces dernières années. La conception modulaire, avec toutes ses nuances, est devenue la vision de référence, tant d’un point de vue Design que Technique. Atomic Design, Guides de Styles, Design System… autant de notions qu’il est indispensable de connaître pour donner vie à des projets impactants, maintenables, et évolutifs.

Le travail avec l’Éditeur de blocs et le Full Site Editing peut demander plusieurs niveaux de conception modulaire. Un Guide de Styles bien construit peut convenir à la création de projets qu’on pourrait qualifier de « classiques », tandis qu’un Design System plus complet pourra être nécessaire pour des projets volumineux ou encore pour des produits propulsés par WordPress et Gutenberg.

Quoi qu’il en soit, cette vision modulaire de la conception est aujourd’hui un must-have pour aborder des projets WordPress de manière moderne et viable, notamment avec le Full Site Editing. Elle permet même, à l’inverse des croyances des résistants au changement, de libérer la créativité en lui donnant un cadre d’expression mieux défini. Alors, on attend quoi ?

Suivez-moi sur X : @bter_design • Mon site : Bter

Exemple de Design System

Il y a un très bon élève dans le monde des design system, et c’est probablement pas à lui que vous auriez pensé en premier : c’est l’État français.

Exemple de palette de couleurs dans un Design System.
Quelques couleurs de la charte de l’État et leurs déclinaisons

Avec toute une ribambelle de sites à gérer qui ne respectaient jadis aucune règle (et encore moins celles de l’accessibilité), on s’est retrouvé avec des sites sans aucune harmonie.

De plus, refaire un design pour chaque site a demandé des budgets plus élevés que nécessaires. Et qui c’est qui paie pour ça ? C’est nous !

Le Design System de l’État, ou DSRF est accessible sur un site dédié du gouvernement.

Capture d'écran du site de l'État dédié au Système de Design (ou DSFR).
Le site du Système de Design de l’État

Mais c’est encore sur Figma que ce sera plus intéressant, puisque l’État met à disposition l’intégralité du design system et c’est super pour s’en inspirer !

Design System de l’État sur Figma

Il existe plusieurs fichiers. Le premier gère uniquement la charte graphique. On y retrouve les couleurs, les typographies et même la grille 12 colonnes :

La charte graphique du design system de l'État, montrant diverses couleurs, typographies et l'organisation en 12 colonnes.
La charte graphique du système de design de l’État

Un autre est dédié aux composants comme les cartes, boutons, en-têtes, formulaires…

Exemples d'éléments composant le design system de l'État, comme les boutons et leurs variations, les cartes et les en-têtes de sites.
Les composants du système de design de l’État

Je vous laisse y jeter un œil, vous allez voir à quel point c’est complet ! Il faudra utiliser la barre latérale de gauche dans Figma pour naviguer entre les différentes pages.

Résultat sur les sites de l’État

Aujourd’hui, lorsqu’on se balade sur les sites de l’État français, on remarque qu’ils sont désormais cohérents. C’est bien plus propre !

Voici le site de l’ANTS qui permet de gérer son permis et son passeport :

Le site ANTS, qui respecte le système de design de l'État Français.
Le Site ANTS

Et voici celui du Service Public :

Le site du service public Français, qui respecte le système de design de l'État Français.
Le site Service Public

Ce sont bien des sites différents, sur des sous-domaines différents mais ils respectent avec harmonie les normes du design system de l’État français.

Le saviez-vous ?

Il existe plus de 20 000 sous-domaines .gouv.fr, alors imaginez devoir gérer tout ça sans design system !

Maintenant, on aimerait bien la même chose pour les applications des impôts !

Parallèle avec le Full Site Editing

Pourquoi je vous parle de tout cela ? Car le Full Site Editing a été conçu pour s’accorder parfaitement avec tous ces concepts de design system.

C’est d’ailleurs le seul constructeur de site vraiment pensé en ce sens, même si Elementor possède un guide de styles, des styles globaux et une bibliothèque de composants réutilisables.

Et vous allez voir que c’est très simple de mettre en parallèle les concepts.

Les styles du FSE

L’interface du FSE permet de configurer les couleurs de la palette ainsi que les typographies, comme on l’a vu un peu plus tôt dans cette formation.

Le Full Site Editing permet de configurer les couleurs du site et les typographies en amont. À droite, les couleurs personnalisées de la palette.
La palette de couleurs du FSE

Il nous suffira de reporter les informations du design Figma directement dans notre éditeur d’apparence du FSE.

Dans la suite de la formation, on va apprendre à le faire en JSON directement dans les fichiers du thème afin de pouvoir versionner l’interprétation de notre design system.

Les variations de styles

Grâce aux variations de styles, on va pouvoir définir des déclinaisons pour nos blocs, comme par exemple avec les boutons.

Les variations de styles de blocs

Ainsi on pourra avoir des boutons gros, petits, avec la couleur principale, secondaire, une icône…

Les boutons et leurs variations

Malheureusement pour le moment, il n’est pas possible de cumuler des variations de styles, mais les contributeurs sont en train de réfléchir à ça.

Les styles globaux

On va même pouvoir appliquer des réglages de base pour chaque bloc et chacune de ses variations depuis le FSE :

Le guide de styles montre à quoi ressemblent différents blocs (bouton, colonnes...) une fois les styles appliqués dans l'inspecteur, à droite.
L’interface des styles de blocs et le guide de styles

D’ici, on applique donc les styles qu’arboreront chacun de nos blocs, conformément au design system.

Le petit plus sympa, c’es que WordPress permet d’afficher un guide de styles pour montrer à quoi ressemblent chacun des blocs une fois les réglages par défaut appliqués.

Les compositions

Enfin, les compositions sont le reflet des composants de notre design system.

Le Full Site Editing affiche une liste des compositions disponibles au centre, avec un rangement par catégories à gauche.
L’interface des compositions de WordPress

C’est ici que l’on va pouvoir concevoir et modifier nos compositions, véritables briques réutilisables de partout sur le site.

Grâce au FSE, on va pouvoir préparer en amont toutes nos briques de Lego colorées, et prêtes à être assemblées dans Gutenberg.

Attention

Il ne faudra pas négliger cette partie interprétation du design system dans WordPress, car elle peut prendre pas mal de temps à mettre en place au début d’un projet.


Vous comprenez maintenant pourquoi j’adore le Full Site Editing : car il est intimement lié au concept de Design System.

De cette manière, nous avons désormais un langage commun entre les designers et les développeurs, et ça permet de travailler dans de bien meilleures conditions.

Dans le prochain cours, on va parler d’approche par composant, et d’atomic design.

0

Questions, réponses et commentaires

Laisser un commentaire