Minimalisme en pratique : ce que la sobriété a vraiment rapportée à ce site Ce site est censé avoir l'air presque vide quand vous arrivez.
C'est la première impression pour laquelle j'ai dessiné. Une page fine, un petit jeu de couleurs, un en‑tête avec presque rien dedans, des bordures qui se tracent une fois puis ne bougent plus. Si vous jetez un œil à Edokko et repartez, le minimalisme est tout ce que vous en aurez eu, et c'est très bien. C'est à ça que sert un coup d'œil.
Restez un instant de plus et il commence à donner des choses. Presque rien ici ne bouge tout seul. Le mouvement attend presque entièrement que vous le déclenchiez : bougez le curseur et un suiveur le traque, survolez une carte d'article et elle s'ouvre sur ce qu'il y avait dessous, cliquez sur la marque d'un en‑tête d'article et elle se transforme en tampon qui vient s'appuyer dans le coin de la couverture. 2 choses tournent bien d'elles‑mêmes, un grain de pellicule et un bandeau défilant, et les 2 sont assez discrètes pour qu'il faille aller les chercher.
C'est délibéré et c'est l'essentiel de la marque. De la sobriété à l'arrivée, et quelque chose à trouver si vous restez. Ce qui rend l'écriture d'un article sur le minimalisme et ce site précis légèrement embarrassante, parce qu'un lecteur pourrait ouvrir la page 404, la regarder envoyer de la physique dans tous les sens, et demander à juste titre de quoi je pense parler.
Ceci n'est donc pas un texte qui soutient que le minimalisme a raison. C'est une promenade dans un site, là où j'ai choisi d'être strict, là où j'ai choisi de ne pas l'être, et ce que la moitié stricte a vraiment rapportée. L'article précédent sur le SXO couvrait le versant recherche de la même reconstruction, et voici son versant design.
Ce que le minimalisme veut dire pour le design d'un site
Soustraire, pas décorer
La chose la plus sobre de ce site est aussi la plus sur‑conçue, ce qui m'a pris un moment à accepter.
Il n'y a aucune bordure CSS ici. Pas une. Chaque trait visible est un composant appelé BorderWrap
qui rend 4 span positionnés en absolu, un par côté, et il apparaît dans 21 fichiers différents.
border: 1px solid aurait été plus court à chaque fois.
Je l'ai fait ainsi parce qu'une bordure faite de 4 éléments séparés peut être animée côté par côté, et le chargement de page les trace au lieu de les faire apparaître d'un coup. C'est une vraie fonctionnalité et c'est ce qui rend l'échange rentable, mais je veux être honnête : ça coûte plus de code que ce que ça remplace.
Et c'est la partie du minimalisme qu'on saute. Ce n'est pas moins de code. C'est moins de sortes de choses. Une seule méthode de mise en page, CSS Grid, avec flexbox autorisé seulement là où rien n'est réellement mis en page. Un seul mécanisme de bordure. Un seul endroit d'où viennent les valeurs, Noren, le Design System d'Edokko, si bien qu'aucun code hexadécimal ni aucune mesure en pixels ne traîne nulle part dans l'application. Le nombre de décisions disponibles rétrécit, donc le nombre de décisions que j'ai à prendre rétrécit avec, et 2 pages ne peuvent pas être discrètement en désaccord sur ce qu'est une bordure.
Ça veut aussi dire que le jour où je me suis trompé sur le mécanisme de bordure, je me suis trompé à un seul endroit au lieu de 21.
L'espace est un token, pas un reste
Chaque mesure d'espace de ce site sort d'un jeu de pas fixe, et je veux être exact sur la façon dont c'est arrivé, parce que « l'espacement est systématique » donne à croire que ça l'était depuis le début. Ça ne l'était pas.
J'ai commencé par des wireframes en basse fidélité et aucun token, au feeling. Le système est arrivé à l'étape haute fidélité. Je suis allé dans Noren, j'ai regardé les pas d'espacement qui y existaient déjà, et j'ai pris celui qui tombait au plus près de ce que j'avais dessiné. Ça a parfois voulu dire déplacer la maquette pour rejoindre le token plutôt qu'ajouter un token pour rejoindre la maquette.
C'est là qu'est la vraie discipline, et c'est moins romantique que de dériver une échelle des premiers principes. On dessine librement, puis on s'aligne. Un design system est une façon de penser, et je le défendrais, mais cette pensée se fait dans l'abstrait. Un site en est un cas d'usage. L'alignement, c'est le moment où l'on découvre si l'on est vraiment strict avec le système qu'on a construit.
Ce que ça achète, c'est que l'espace cesse d'être un reste. Personne ne tape 23 px parce que 23 px
avaient l'air à peu près justes sur l'écran qu'il avait sous les yeux. Et comme ces pas s'échelonnent
en clamp() entre un téléphone et la largeur de 1440 px pour laquelle j'ai dessiné, l'espacement
grandit et rétrécit en continu au lieu de sauter à un point de rupture pour rattraper son retard.
Strict ne veut pas dire que le système ne bouge pas. Construire ce site a mis des choses nouvelles
dans Noren plus d'une fois, chaque fois que je tombais sur un cas que l'abstraction n'avait pas
prévu. Le suiveur de curseur avait besoin d'une couleur qui refuse délibérément de suivre le thème,
parce qu'elle se pose sur un fondu difference où la valeur est un opérande dans une soustraction
plutôt que quelque chose qu'on regarde. Une couche qui basculerait en même temps que le fond
s'annulerait et rendrait à l'identique dans les 2 thèmes. Rien dans Noren ne couvrait ça, alors Noren
a gagné un token pour ça, et la règle qui va avec.
Le trafic va aussi dans l'autre sens. Une partie de ce que ce site a poussé dans le design system s'est avérée être le vocabulaire propre à l'Atelier déguisé en design system, nommé d'après des composants qui n'ont jamais existé ailleurs qu'ici, et je les ai depuis ramenés dans le site, à leur place. La plupart du temps je m'aligne sur ce qui existe déjà. Parfois le site trouve quelque chose auquel le système n'avait pas pensé. Parfois il trouve quelque chose qu'on n'aurait jamais dû demander au système de porter.
Typographie et couleur, gardées volontairement étroites
Les couleurs passent ici par 2 couches. Il y a un jeu de valeurs brutes dans Noren (j'appelle ces tokens les primitives) qui ne sont jamais utilisées directement, et un jeu de tokens nommés qui le sont, si bien que rien dans l'application ne désigne jamais une couleur par son apparence. On demande l'accent, ou le fond de page, ou la bordure, et le thème décide de ce que ça veut dire aujourd'hui. Pareil pour la typographie : une échelle, et aucune taille arbitraire en dehors.
Ce qui est intéressant dans un système pareil, c'est là où il casse, et il casse à exactement 2 endroits sur ce site. Les 2 sont des couleurs qui refusent de suivre le thème, et dans les 2 cas il a fallu que le design ne fonctionne pas pour m'en convaincre.
Le premier, c'est le curseur. Il y a un losange qui suit votre pointeur, composité avec un fondu
difference, ce qui veut dire qu'il affiche l'inverse de ce qu'il recouvre. Je l'avais d'abord fait
suivre le thème, comme tout le reste. C'est en testant dans Figma que j'ai vu le problème :
difference renvoie l'écart entre le fond et la couche, donc si la couche bascule quand le thème
bascule, l'écart ressort identique les 2 fois et l'un des 2 thèmes se retrouve avec un suiveur de
curseur invisible. Cette couleur‑là doit rester immobile pendant que tout bouge autour d'elle.
Le second, c'est un sceau. Il y a un tampon caché dans les en‑têtes d'articles, et il est fait de papier, d'encre et de pigment rouge. Ce ne sont pas des couleurs d'interface qui ressemblent par hasard à du papier, c'est ce dont l'objet est fait (inspiré des signatures japonaises de certaines estampes de l'ère Edo), et le papier ne devient pas sombre parce que vous êtes passé en thème sombre.
2 exceptions dans un système fermé, toutes les 2 écrites là où le système vit, avec la raison attachée. C'est la partie qui compte, je crois. Une palette étroite n'est pas étroite parce qu'on a résisté à l'envie d'y ajouter, elle est étroite parce que les ajouts sont visibles et doivent se justifier devant celui qui lira le fichier ensuite, c'est‑à‑dire en général moi dans 4 mois sans aucun souvenir de tout ça.
Là où je ne me suis rien interdit, exprès
Ce qui suit est la liste des choses que je ne me suis pas interdites, et je veux la passer vite, parce qu'un catalogue de tout ce que je me suis autorisé serait un tour d'honneur.
De l'animation partout. Une page 404 qui fait tourner un moteur physique. Des icônes qui se transforment d'une forme à l'autre, du texte qui se brouille quand on change de langue, quelque chose qui suit le curseur, des cartes d'articles qui s'ouvrent au survol, un dégradé différent et sa propre forme d'icône nommée pour chaque article, et une icône qui se presse en tampon si vous allez la chercher. Rien de tout ça n'est minimal, et c'est l'essentiel de la raison pour laquelle on reste après le premier écran.
Ce sont les coupes qui montrent que la ligne est réelle.
Le titre d'article se posait avant sur l'image de couverture, composité avec le même fondu
difference que le curseur utilise encore. Ça me plaisait beaucoup. C'était aussi illisible, et je ne
sais à quel point que parce que je l'ai mesuré au lieu de plisser les yeux. Sur la couverture de cet
article, celui que vous lisez, le contraste médian entre le titre et ce qui se trouvait derrière
ressortait à 1,98:1, contre les 3:1 dont a besoin du texte de cette taille. La moitié des lettres
passait sous 2:1 et les pires avaient exactement la luminosité de la photo dessous. Le titre est donc
parti dans la colonne sobre à gauche, où il mesure 17:1 et où aucune image de couverture que je
téléverserai à l'avenir ne pourra le casser à nouveau.
J'ai aussi essayé d'animer le titre de la page d'accueil. Celui‑là n'a pas eu besoin d'être mesuré. C'était trop, alors il n'y est pas.
Et il y a un losange sur la page d'accueil que je veux toujours faire bouger, et que je n'ai pas livré parce que je n'ai pas trouvé de façon de le faire qui ne gêne pas. Il restera peut‑être immobile pour toujours. C'est à peu près là que je voudrais laisser cette section : la ligne n'est pas un principe que j'applique, c'est quelque chose que je teste sans arrêt et que je perds parfois.
Ce que cette sobriété a vraiment rapportée
Une interface plus calme, là où ça compte
Le conseil habituel est de tenir un en‑tête à 4 ou 5 liens. Il n'y en a aucun dans le mien. L'en‑tête porte un logo, 3 interrupteurs pour le thème, le grain et la langue, et un bouton qui ouvre le menu. Les 2 liens que j'ai, l'accueil et la Gazette, vivent dans ce menu, et la page légale est dans le pied de page, là où personne n'a besoin de trébucher dessus.
Ça changera à mesure que le site grandira et qu'il y aura plus d'endroits où aller. Pour l'instant, la raison honnête pour laquelle la navigation est petite, c'est qu'il n'y a pas encore grand‑chose.
Le calme vient de ce qui se passe à l'arrivée plutôt que du nombre de liens. Une page ici est silencieuse au chargement et le reste jusqu'à ce que vous y touchiez. Toutes les mises en page sont construites avec la même méthode, donc les pages ne se surprennent pas les unes les autres. Rien ne se dispute votre attention parce que presque rien ne bouge.
Ce que je n'ai pas fait, c'est rendre l'expérience calme de bout en bout. Survolez une carte d'article et elle s'ouvre. Allez fouiller dans un en‑tête d'article et quelque chose vient se tamponner dans la couverture. Le calme est un état de repos, pas un caractère.
La vitesse, effet secondaire d'une structure fine
L'argument vitesse du minimalisme se fait d'habitude sur le poids, et l'article précédent en a couvert l'essentiel : polices auto‑hébergées, aucun script tiers, pages construites à l'avance. Ce que j'ajouterais ici, c'est le versant structurel, moins affaire de combien arrive que de combien de formes différentes ça prend.
Une seule méthode de mise en page veut dire que la feuille de styles ne transporte pas 3 façons de disposer les choses. Un jeu de valeurs fermé veut dire qu'elle ne transporte pas des quasi‑doublons de la même mesure. Ni l'un ni l'autre n'est spectaculaire, et je survendrais en prétendant qu'un visiteur peut sentir la différence.
Et ce n'est pas uniformément vrai, ce que je préfère admettre plutôt que vous laisser le trouver. Ce composant de bordure rend 4 éléments pour chaque bordure qu'il trace, à 21 endroits. Il rend le document plus gros, pas plus petit.
Je l'ai construit comme ça pour que chaque côté puisse être animé séparément, parce que les bordures se tracent au chargement d'une page. C'est en écrivant ce paragraphe que je suis allé vérifier si ça marchait toujours, et ça marchait, au pire sens du terme. Chacun des 41 morceaux de bordure de cette page était masqué puis retracé, derrière un rideau qui ne se lève qu'une fois qu'ils ont tous fini. On voyait l'effet sur l'ancienne version de ce site. Puis j'ai ajouté le rideau, et rendu 37 de ces animations invisibles sans remarquer que je venais de le faire.
Elles ne tournent plus que sur le liseré fin qui trace le bord de la fenêtre, la seule partie qui se trouve au‑dessus du rideau et qui est réellement visible pendant que la page arrive. La page fait mesurablement moins de travail au chargement qu'avant que j'écrive cette section.
Le seul endroit où ça touche vraiment à la recherche est plus petit que ne le laisse croire un article qui n'arrête pas de parler de vitesse. Un document fin est plus facile à analyser pour un robot, et plus facile à garder sémantiquement correct, parce qu'il y a moins de choses entre les titres, les repères et le travail qu'ils font. Personne ne vous classe pour du CSS bien rangé. Ce qu'une structure sobre fait, c'est supprimer des raisons d'être lent et des raisons d'être ambigu, et le contenu doit faire le reste tout seul.
Donc la version honnête de l'échange. Le composant coûte plus de balisage partout et achète du mouvement à un seul endroit. Partout ailleurs il achète de la cohérence, ce qui est un bénéfice plus petit et plus terne, et reste la raison pour laquelle je le garderais : 2 façons de tracer un trait, c'est comme ça qu'on finit par maintenir 2 façons de tracer un trait.
Comment ça s'est appliqué ici, concrètement
Déterminer ce qui était essentiel a surtout consisté à supprimer des choses que j'avais construites. L'en‑tête a perdu tout ce qui n'était pas une destination. La page d'article a gardé un sommaire et une barre de progression et rien d'autre, parce que ces 2 choses aident à lire et que le reste aurait été de la décoration portant un badge.
La navigation a été repliée dans un menu derrière un seul bouton, décision que je défendrais même avec 20 pages au lieu de 2. Un en‑tête qui porte le logo, les commandes et une porte d'entrée est un en‑tête qu'on cesse de remarquer. Tout le reste est un lien à l'intérieur du contenu, là où les gens cliquent de toute façon.
Le design a été contraint des 3 façons que cet article a déjà parcourues. Une méthode de mise en page, un mécanisme de bordure, un endroit d'où viennent les valeurs. C'est le moment où la sobriété a cessé d'être uniquement une esthétique pour devenir aussi un système auquel je dois obéir.
Tester et itérer est l'étape que je sautais et que je ne peux plus sauter. Il y a une vérification à chaque commit qui fait échouer le build si une page casse une règle d'accessibilité, donc une erreur est attrapée par une machine avant de l'être par une personne. Le dernier audit de performance a montré que la chose coûteuse n'était pas le composant que je soupçonnais mais celui d'à côté. Ces 2 choses sont racontées dans l'article précédent sur le SXO, et les 2 sont arrivées après que j'avais décidé que le site était fini.
Conclusion
Est‑ce que je le referais pareil ? Oui, et la raison est ce autour de quoi je tourne depuis un bon millier de mots.
Une réserve d'abord, parce que j'y tiens : le minimalisme n'est pas une réponse universelle. Beaucoup de sites l'emploient, donc il ne vous distinguera peut‑être de personne, et selon ce qu'est votre marque il peut être franchement le mauvais choix.
Voici ce que j'ajouterais. Le minimalisme qu'on recommande optimise presque toujours une seule chose : amener le visiteur de A à B avec le moins de friction possible, pour que l'achat aboutisse. C'est un objectif sain quand on tient une boutique. Ce n'est pas le mien, en tout cas pas ici. Quoi qu'il finisse par y avoir sur ce site, je n'ai aucun intérêt à raccourcir votre visite.
Ce que je veux, c'est que vous trouviez ce pour quoi vous êtes venu sans effort, puis que vous perdiez un peu de temps. Jouez à la machine à sous de la page 404. Survolez des choses et voyez lesquelles répondent. Remarquez que le bandeau défilant repart dans l'autre sens quand vous remontez, ce que presque personne ne fait et qui a demandé une quantité de travail surprenante.
Un minimalisme plus strict aurait donc été un mauvais choix ici, et c'est la coupure en 2 qui le rend juste. Une structure fine pour que rien ne vous gêne, et tout le reste laissé libre pour qu'il y ait quelque chose à trouver si vous restez.
Il y a une idée japonaise sous tout ça, et c'est de là que vient la marque : mono no aware. Tout est passager, ce site compris, et c'est exactement ce qui le rend digne d'être regardé. Alors autant faire un petit détour et l'admirer en chemin.
