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 Sketchou 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 BootstrapFoundation 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 :

  • vous gagnerez en productivité
  • vos échanges avec l’équipe seront plus clairs
  • vous bénéficiez aussi plus aisément de l’expérience de chacun, car personne ne travaillera plus de manière isolée

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

Designer pour les extrêmes. Tous les extrêmes.

De nombreux articles sont parus, ces derniers mois, sur le fait que l’on avait une fâcheuse tendance à élaborer les maquettes pour nos cibles préférées. Quelles que soient les recherches effectuées, les analyses poursuivies et les tests utilisateurs menés, il persiste toujours un risque de définir des personas édulcorés ou des stratégies qui ne prennent pas en compte les extrêmes.

Que sont les extrêmes ?

Si je devais définir la catégorie des extrêmes, je dirais qu’elle est représentative de toutes ces personnes que l’on préfère oublier. Non pas que l’on ne les aime pas, mais on ne les comprends pas vraiment (ou nous n’avons pas envie de les comprendre). Ces sont ces daltoniens, aveugles, personnes en burn-out, celles qui vivent dans des trous paumés sans le moindre wi-fi, ceux qui pensent autrement, etc.

Une histoire de responsabilité

En tant que designer, nous avons le devoir de proposer des réponses pertinentes et attractives afin de résoudre des problèmes d’ergonomie, d’accessibilité ou de design, tout simplement. Nous avons toutefois une autre obligation, souvent oubliée dans nos journées bien, voire trop remplie : nous sommes responsables des solutions que nous proposons.

Nous sommes garants du fait que nos concepts répondent au plus grand nombre, sont en accord avec différentes cultures, n’entrent pas en conflit avec des us et coutumes, ou simplement, l’état d’esprit d’un utilisateur.

Mike Monteiro a brillamment parlé de la responsabilité du designer dans son livre You’re my favorite client chez A Book Apart ou lors de sa conférence How designers destroyed the world.

Extrême #1 : handicaps et incapacités

L’accessibilité et l’ergonomie sont des points souvent omis parce qu’ils flirtent plus avec le développement front-end qu’avec les visuels en tant que tels. Le designer doit cependant avoir pleinement conscience de ces principes pour mieux appréhender diverses contraintes.

Geri Coady nous sensibilise aux problèmes que certains de vos utilisateurs pourraient rencontrer avec les couleurs et illustrations de vos designs. Son ouvrage Pocket Guide to Colour Accessibilityoffre de précieuses informations à ce sujet. Sa conférence lors de la SmashingConf de Freiburg en 2015 était aussi une perle sur le sujet des malvoyants. Je n’ai malheureusement pu la retrouver pour cet article. Vous aurez peut-être plus de chance que moi.

Heydon Pickering a sorti cette année un ouvrage très complet, Inclusive Design Patterns, sur l’ergonomie et l’accessibilité. Celui-ci est directement lié au développement front-end, mais vous permet de prendre conscience des impératifs liés à notre travail. N’oubliez jamais que tout concept, qui n’est pas assez explicite, pourrait être interprété d’une mauvaise manière par un développeur.

Extrême #2 : expérience de vie et état d’esprit

J’ai été confronté à un sujet plutôt épineux en rejoignant une équipe de designers qui élaborait depuis quelques mois une application visant à définir des profils de travailleurs dans le domaine du recrutement.

Au bout de quelques jours au sein de cette équipe, j’ai lancé ce que l’on pourrait appeler “un pavé dans la mare”. Les cibles visées étaient des travailleurs de différentes classes sociales, de différentes formations et de différentes cultures. Ils avaient des aspirations et des ambitions différentes mais tous avaient une volonté de changer ou de progresser dans leur vie professionnelle. Ce qui n’avait pas été pris en compte ? Les travailleurs en burn-out, qui détestaient leur environnement de travail, leurs collègues, leur boss. Ceux-ci avaient des aspirations similaires aux profils de départ mais un état d’esprit beaucoup moins coopératif.

Eric A. Meyer parle aussi de ces mauvaises expériences de la vie dans son livre Design for Real Life de A Book Apart et dans l’interview qui lui est dédiée dans le N°15 de Offscreen par rapport au décès tragique de sa fille.

Focalisé sur un monde meilleur, rose et rempli de télétubbies, le designer propose des solutions qui seront, en réalité, des maladresses face à certaines périodes noires de la vie des utilisateurs. Là aussi, nous devons prendre nos responsabilités afin de proposer une expérience qui ne rappelle pas de mauvaises expériences passées.

Extrême #3 : l’utilisateur en détresse technologique

Le paria que les développeurs détestent par excellence. Cette personne qui, pour diverses raisons, dispose des pires outils qui existent. Ca peut aussi être ce voyageur coincé dans le triangle des Bermudes du numérique, sorte de no connection’s land.

L’obésité des sites web, comme en parle Maciej Ceglowski, est une problématique qui peut être évitée dès le processus de design. Il convient de faire des choix techniques qui permettent de proposer des concepts graphiques adaptés pour les différents supports et bandes passantes.

On peut aussi, désormais, envisager des alternatives lorsque l’utilisateur n’a tout simplement pas de connexion à sa disposition. La conférence de Lyza D. Gardner sur le service worker met en évidence une de ces alternatives.

Quoi qu’il en soit, il convient d’opter pour une stratégie qui répondra aux contraintes techniques du plus grand nombre de supports et de connectivités auxquels les cibles pourraient faire face au quotidien ou lors de déplacements.

Extrême #4 : la culture et les croyances

La culture est souvent un sujet méconnu et parfois épineux qui requiert une analyse approfondie selon les spécificités de votre projet. Je distingue cet extrême de l’extrême #2 même s’ils sont similaires. Je ne parle toutefois pas ici de la culture de l’entreprise (ou ADN) pour laquelle vous effectuez une mission mais bien la culture des cibles de cette entreprise.

Imaginons la création d’un avatar qui a pour objectif d’interagir avec les utilisateurs aux travers de petites phrases sympathiques, de conseils ou d’avertissements. C’est une forme de design émotionnel qui a déjà fait ses preuves avec Mailchimp, pour exemple. L’ensemble de votre équipe se prendra vite au jeu de la co-création de phrases humoristiques avec tous les risques que cela comporte. Certaines phrases qui nous semblent anodines pourraient heurter la sensibilité d’autres cultures ou ethnies. Les risques que cela engendre sont évidents : plaintes, mauvaise publicité, critiques sur les réseaux sociaux voire même procédures légales.

Il convient d’identifier les cibles de votre mission et de se documenter sur leur culture et philosophie afin de distinguer ce qui est toléré de ce qui ne l’est pas. Il est de votre responsabilité de prendre en compte cette dimension souvent méconnue même si cela occasionne de nouvelles contraintes.

D’autres extrêmes ?

Je n’ai cité dans cet article que les extrêmes auquel j’ai déjà été confronté lors de mes missions. Je ne doute toutefois pas qu’il existe encore d’autres profils dont nous devrions tenir compte dans nos projets. Une manière plus simple d’y arriver est de toujours garder un oeil sur notre travail passé. Cela fait aussi partie de notre responsabilité et nous pouvons en tirer de nouveaux enseignements, bons comme mauvais. C’est ce qui nous rend meilleur dans notre travail.