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.
Sommaire du cours
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.
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.
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 :
Ç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 :
Dans cet exemple, certaines cartes sont alignées à gauche et d’autres centrées, certaines ont des ombres, d’autres sont foncées…
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 :
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 ?
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.
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.
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 !
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 :
Un autre est dédié aux composants comme les cartes, boutons, en-têtes, formulaires…
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 :
Et voici celui du 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.
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.
Ainsi on pourra avoir des boutons gros, petits, avec la couleur principale, secondaire, une icône…
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 :
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.
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.
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