Design system, atomic design et framework

Le design system est la nouvelle tendance de l’année à la lecture des blogs et réseaux. L’atomic design n’est plus vraiment un sujet brûlant tant on en a parlé ces quelques dernières années. Les frameworks css sont, quant à eux, de plus en plus décriés avec l’arrivée de CSS Grid. Et si nous envisagions ces trois méthodes comme un ensemble homogène ? De mon point de vue, elles sont les grands chapitres de beaux projets web.

Design system

Le design system est un langage visuel structuré et solide dédié à votre projet. C’est un dérivé de l’identité graphique. Il va plus loin que celle-ci en développant la culture de la marque ou de l’entreprise et en apportant une base de documentation et de nomenclature. C’est d’ailleurs LE point fédérateur des trois concepts : le lexique commun.

Vous devez nommer vos éléments graphiques, de la simple couleur à la barre de navigation complexe,  afin de lever toute ambiguïté lors d’échanges et de consignes avec n’importe quel intervenant sur votre projet, du preneur de décision à l’équipe de développement. C’est la base de tout projet d’équipe.

La culture de la marque est un élément que l’on ne retrouvera de manière indirecte dans l’atomic design et le framework. Celle-ci va surtout évoluer au travers de l’architecture de l’information et des éléments de contenu du projet (texte, photos et vidéos).

D’un point de vue plus technique, il y a trente-six façons d’élaborer un design system. Si vous désirez plus de liberté, vous opterez certainement pour le papier ou une application comme Sketch ou Illustrator. Si vous vous sentez uuu à l’aise avec la conception de design system, vous choisirez une application web comme UXPin ou Frontify qui offrent un cadre de travail structuré.

Quel que soit votre choix, n’oubliez jamais que le design system, l’atomic design et le framework sont des outils partagés. Optez pour des solutions techniques qui seront accessibles facilement et avec un minimum de contraintes.

Atomic design

L’atomic design est une méthode de design liée au prototype html/css. On y distingue tous les éléments d’un futur projet web au travers de quatre grandes catégories : les atomes, les molécules, les éléments et les templates. De ces quatre catégories découlent les pages, association des templates avec des contenus réels. Brad Frost, auteur de la méthode, en parle bien mieux que moi sur son blog ainsi que dans son livre dédié à l’atomic design.

Le pattern lab est une application dédiée à la conception d’atomic design. Il faut voir cet outil comme un générateur de site statique mais dédié à la présentation de votre atomic design. Le pattern lab n’a que très peu de contraintes et vous laisse organiser vos projets comme vous l’entendez. Cela peut sembler déstabilisant au départ et vous préférerez certainement utiliser un starter kit pour disposer de la structure par défaut du pattern lab, mais avec l’expérience, vous apprécierez cette liberté d’action.

Le site statique généré est une excellente documentation pour tout projet de site web. Designers et développeurs front-end peuvent y répertorier et tester tous les éléments qui constitueront chacune des pages web. Vous pourrez passer d’un prototype rapide, réalisé en quelques jours à peine et testé avec des contenus réels, à un site fonctionnel en effectuant les améliorations au fur et à mesure. Je vous conseille l’installation du module de tabs additionnelles afin d’afficher le code css, scss, less ou encore javascript selon vos besoins. Vous disposerez ainsi d’une documentation en ligne très utile pour l’ensemble de votre équipe.

Framework

Le framework est un sujet qui fâche… Quand on parle de framework css, on envisage toujours Bootstrap, Foundation ou les trente-six mille autres qui ont votre préférence. Leur réputation est en dents de scie : d’un point de vue visuel, ils aident à faire de belles choses plus facilement, mais d’un point de vue technique, le système de grille basé sur les blocs flottants ou, plus récemment, sur flexbox irrite la plupart des développeurs.

CSS Grid permet désormais de créer des mises en page de grande qualité avec un minimum de code. À elle seule, cette nouvelle spécification CSS fait voler en éclat le plus gros intérêt des frameworks CSS populaires.

À mon sens, le framework reste pourtant un élément important dans le travail d’équipe si l’on s’entend sur son objectif : définir une structure/architecture du projet et un lexique commun tout en tenant compte des valeurs des langages utilisés. Le framework n’est pas là pour dénaturer les concepts de base de langages comme CSS.

Prenons BEM comme exemple : une méthode pour créer des éléments réutilisables en CSS au travers de conventions de nommage. Le principe est intéressant mais fait souvent perdre de vue le principe de cascade de CSS (Cascading Style Sheet). On finit par dénaturer à tort la philosophie même de la feuille de style en ajoutant un code complémentaire futile. Le framework CSS, dans son excès de ré-utilisabilité, est le meilleur exemple de dérive.

Le fait est que le travail d’équipe nécessite de la rigueur et de l’organisation. Correctement employé, le framework peut être le dernier chapitre d’une collaboration fructueuse et permettra, à l’avenir, à d’autres équipes de mieux appréhender le travail que vous avez accompli.

Pour conclure

Le design system, l’atomic design et le framework sont d’excellentes méthodes pour fédérer une équipe de travail (au sens large) sur un projet web. Elles vous permettent de définir un langage commun et une documentation qui seront les fondements d’un travail collaboratif sain et d’une compréhension générale.

Les bénéfices de cette rigueur ne sont pas négligeables :

Lancez-vous dès maintenant. Vos premiers essais seront peut-être maladroits. Les miens étaient catastrophiques… Affinez votre méthodologie et partagez-là !

Pour aller plus loin