Il y a une demande qui revient tôt ou tard quand on a livré un site qui plaît : « refais-moi le même, mais en plusieurs versions ». Un modèle, décliné pour trois univers différents. Sur le papier c'est du gâteau, le travail est déjà fait. Dans les faits, c'est le meilleur moyen de produire trois sites qui se ressemblent tous, et dont personne ne comprend pourquoi ils sonnent faux.
J'ai construit une petite famille de galeries d'art de démonstration précisément pour me confronter à ce problème. Même métier, même structure de code, même machinerie sous le capot. Et pourtant chacune devait paraître dessinée pour elle seule. Deux contraintes m'ont appris la même chose, dans deux registres différents : la singularité d'un design ne se pose pas en surface, elle sort des contraintes qu'on assume au lieu de les cacher.
Le piège du template qu'on clone
La première galerie m'a pris des semaines. Quand est venue la deuxième, j'ai fait le geste naturel, celui que tout le monde fait : j'ai dupliqué la première et j'ai renommé. C'était plus rapide, et c'était un piège.
Parce qu'en clonant, on ne recopie pas seulement la structure. On recopie l'identité, et pire, on recopie les accidents. J'ai traîné derrière moi le contenu de la première galerie, ses adresses fictives, des faits qui ne valaient que pour elle, et jusqu'à des morceaux de code prévus pour un cas de figure qui n'existait plus dans la deuxième. Le nouveau site héritait du goût du précédent, mais aussi de ses cicatrices. Chaque renommage laissait derrière lui une chance de casser un correctif sans s'en apercevoir. Une tâche que je croyais mécanique a dérapé sur le contenu réel, encore et encore.
La leçon n'était pas cosmétique. Il fallait séparer nettement deux choses qu'on a tendance à mélanger : ce qui est structure (réutilisable, invisible, partagé) et ce qui est identité (unique, visible, jamais partagé). Le code peut, et doit, se réutiliser. La direction artistique, jamais.
La correction : un squelette neutre, pas un site à cloner
Au lieu de repartir d'un site existant, j'ai distillé un squelette : un projet déjà initialisé mais volontairement vide. Tout ce qui est plomberie y est mutualisé et éprouvé, une fois pour toutes. La gestion des langues, les fiches d'œuvres, les expositions, le référencement, la sécurité, le système d'images, le harnais de tests, le déploiement. Tout ce qui, en clonant, se recopie à l'aveugle avec ses correctifs durement gagnés.
La différence tient dans un mot : ce squelette impose la structure, jamais le style. Palette, polices, favicon, textes, tout ce qui porte une identité est vidé, remplacé par des repères marqués « à remplir ». Le code garde un préfixe neutre qu'on ne renomme pas d'une instance à l'autre. On ne clone plus une galerie pour en faire une autre : on part du modèle vide et on le remplit.
L'écart de coût a été net. La galerie construite par défrichage, puis celle bricolée par clonage, puis celle bâtie proprement à partir du squelette neutre : de plusieurs semaines à quelques jours, sans traîner la moindre cicatrice de la précédente.
Une nuance honnête, parce que rien n'est jamais aussi propre qu'on l'espère. Le squelette imposait en réalité un peu plus que je ne le croyais. Le rythme clair ou sombre du site, par exemple, était logé dans la feuille de style principale, pas seulement dans les couleurs. Une galerie voulue lumineuse a dû réécrire cette base, là où je pensais n'avoir qu'à changer trois variables. « Vide » ne vaut que pour ce qu'on a explicitement vidé. Tout paramètre d'exemple resté câblé en douce est un héritage à auditer, pas un acquis.
La DA disjointe : le test décisif
Ce que le squelette ne fournit pas, donc, c'est l'âme. Chaque galerie reçoit une direction artistique disjointe, construite pour diverger de toutes les autres sur quatre axes que je traite comme un système : palette, géométrie, typographie, signature.
Le résultat, ce sont des univers qui n'ont rien à voir. Une galerie pauliste de modernistes latino-américaines en cobalt nuit, sérif à empattements marqués, touches d'or : une nuit chaude et dense. Une galerie d'estampes japonaises en washi clair, indigo et accents vermillon, mincho japonais : la clarté d'un papier ancien. Trois palettes, trois géométries, trois familles de polices, trois signatures, et pas une seule couleur, pas une police, pas une forme en commun.
Pearl Street, Continente, AIZURI : trois directions artistiques disjointes sur un même squelette de code.
Le test honnête, c'est celui-là : un designer qui regarde deux de ces sites côte à côte ne doit pas pouvoir deviner qu'ils tournent sur le même code. S'il le devine, c'est que la structure a débordé sur l'identité, et il faut refaire diverger.
C'est un point de friction révélateur entre les deux métiers. Le réflexe du développeur, c'est ce qu'il appelle factoriser : tout ce qui se répète doit être mutualisé. Le réflexe du designer, c'est l'inverse : ce qui se répète tue la singularité. Les deux ont raison, mais pas sur le même objet. On factorise la plomberie, on singularise la peau.
Ce principe a d'ailleurs une limite que je m'impose. La famille comprend aussi une boutique en ligne, une maison d'édition fictive à l'identité « cartographie » (parchemin, bleu de mer, rose des vents). Elle n'est pas bâtie sur le squelette des galeries : la plateforme est complètement différente, et je me refuse à extraire un modèle commun tant que je n'ai pas un deuxième cas du même genre. Abstraire trop tôt, sur un seul exemple, c'est fabriquer un template qui ne colle à rien. Le bon squelette ne se devine pas, il se distille après coup.
Faire diverger une typographie sans caricature
Dire qu'on change la typo d'un site à l'autre, c'est facile. Le faire sans tomber dans le cliché, beaucoup moins. Pour la galerie d'estampes japonaises, le réflexe paresseux aurait été une de ces polices « faux-japonais » à faux coups de pinceau, celles des menus de restaurants à sushis. Refusé. À la place, un vrai mincho japonais pour porter les caractères japonais, associé à un sérif européen à fort contraste pour le français, choisis pour que les deux écritures respirent au même rythme au lieu de se battre.
Parce que le levier, ce n'est presque jamais la police prise isolément, c'est l'accord. Un sérif de titrage plein posé sur un grotesque neutre ne raconte pas du tout la même chose qu'un sérif humaniste aux empattements fins, même sur la même grille. Deux galeries peuvent chacune marier un sérif et un sans-serif et sembler venir de deux planètes, à condition d'avoir accordé les hauteurs d'œil, les graisses et les tailles optiques pour que la page tienne comme un seul objet, pas comme deux polices en colocation forcée. Concrètement, ça se tranche à la main : le mincho japonais tirait plus clair que le sérif français, alors j'ai monté sa graisse d'un cran pour que les deux écritures tiennent le même gris typographique sur la page, sans quoi le japonais aurait semblé timide à côté du français. C'est un travail invisible tant qu'il est bien fait, et criant dès qu'il est bâclé.
Contrainte juridique : quand un « non » dessine une signature
La deuxième contrainte n'avait rien de technique. Une galerie montre des œuvres. Or beaucoup d'œuvres du XXe siècle sont encore sous droits : on ne peut tout simplement pas les afficher. La solution facile, celle qu'on voit partout, c'est de tricher, d'aller chercher une image quelque part et de fermer les yeux. C'est exactement ce que je ne voulais pas sur une démo censée montrer du sérieux.
De ce « non » est né un parti pris que j'appelle le color-field, en clin d'œil à la peinture du même nom, celle de Rothko ou de Barnett Newman, où un aplat de couleur porte à lui seul toute la charge. Plutôt qu'une reproduction, la vignette d'une œuvre sous droits devient un champ de couleur construit en CSS, une abstraction qui évoque la dominante et l'ambiance de l'œuvre sans jamais la reproduire. La vraie reproduction, elle, est réservée aux œuvres tombées dans le domaine public, où le droit ne pose plus de question.
Ce qui devait être une limitation est devenu une grammaire lisible. Sur la galerie pauliste, Tarsila do Amaral illustrait les deux cas : son Abaporu, encore protégé, réduit à un aplat de couleur ; son portrait, photographié par quelqu'un mort depuis assez longtemps, en vraie image. Là où il y a une reproduction, c'est du domaine public ; là où il y a un aplat, l'œuvre est protégée. La contrainte juridique s'est transformée en règle qu'on lit d'un coup d'œil.
Le cas inverse le confirme. Pour la galerie d'estampes japonaises, les œuvres sont dans le domaine public depuis longtemps, sans la moindre ambiguïté. Là, le color-field n'est plus qu'un repli marginal : ce sont les estampes qui portent le site. Même dispositif, contrainte différente, forme différente. La forme suit la contrainte, pas l'inverse. Détail amusant : sur la boutique, ce même color-field revient sur les couvertures de livres, non plus par obligation (les cartes anciennes sont libres) mais par pur choix esthétique. Le même geste visuel peut naître d'un mur ou d'une envie.
Le fil commun
Dans les deux cas, la même mécanique. Une contrainte se présente, technique ou juridique, et deux chemins s'ouvrent. Le premier, la masquer : cloner en douce, tricher avec une image. Le second, l'assumer et en faire un moteur de forme. C'est le second qui produit quelque chose de vivant.
C'est contre-intuitif, parce qu'on associe la création à la liberté et à la page blanche. Dans mon expérience c'est l'inverse : le « non » oriente là où la page blanche paralyse. « Tu ne peux pas réutiliser cette identité » force une direction artistique propre ; « tu ne peux pas montrer cette œuvre » invente un système d'images. Les meilleures idées visuelles que j'ai eues sur ces projets sont toutes venues d'un mur, pas d'un espace ouvert.
Rule of thumb (au doigt mouillé) : quand une contrainte apparaît, avant de chercher à la contourner, demandez-vous ce qu'elle vous oblige à inventer. La réponse est souvent plus riche que le site que vous aviez en tête.
Pour un développeur qui travaille avec des designers, ou pour un designer qui code, c'est peut-être là que se joue la collaboration. Le développeur apporte la structure réutilisable, celle qui permet de tenir trois, cinq, dix sites sans crouler sous la maintenance. Le designer apporte la divergence assumée, celle qui empêche ces sites de se confondre. Et tous les deux gagnent à écouter la contrainte plutôt qu'à la fuir. C'est elle, le plus souvent, qui tient le crayon.
Les trois galeries
Les démos évoquées dans cet article sont en ligne :
- Pearl Street Gallery (New York)
- Continente (São Paulo)
- AIZURI · 藍摺 (Yanaka, Tōkyō)