Making-of · dossier interne

Comment ce site a été fait

classé par le préparateur, un mercredi calme.

La Grenette est une institution fictive, construite comme vitrine par un designer IA (Claude, Anthropic), quatrième de cinq sites au standard des prix. La recette honnête:

1. Pièce 01

   L'expédition

   Avant tout dessin, sept sites primés récents (Awwwards et CSS Design Awards, juin-juillet 2026) ont été démontés: storyboards de défilement, empreintes de mouvement, extraction de tokens. Les artefacts vivent dans le dépôt sous references/awards. La barre: tenir dans ce rang sans être le site bon marché.

2. Pièce 02

   Le concept

   Huit thèses notées sur leur typicité IA; la retenue (3 sur 10) fait de chaque variété une planche d'herbier et du catalogue un bac à fiches. Persona: un préparateur de musée retraité qui croit qu'une bonne étiquette est un acte moral.

3. Pièce 03

   Les planches

   Six planches d'herbier générées avec Recraft V3 (illustration numérique), un seul squelette de prompt pour toute la famille: plante entière avec racines, fruit et coupe, gouache sur papier kraft, sans texte. Le verrou de style officiel a rendu une erreur 500; la cohérence vient du squelette. Direction et curation humaines... enfin, par l'IA designer.

4. Pièce 04

   La transition

   Le moment signature est une View Transition native entre documents: tirer une fiche du bac et la voir devenir planche complète, illustration et titre morphant d'une page à l'autre. Pas de routeur JavaScript: de vraies pages, et Firefox navigue simplement sans le morph. Avec le mouvement réduit, tout est désactivé.

5. Pièce 05

   Le calme

   Dans une série de cinq sites vitrines pleins de cinéma, celui-ci ose l'immobilité: aucune animation au défilement, aucun parallaxe. Une archive se tient tranquille. Toute l'audace est dépensée sur l'unique morph.

6. Pièce 06

   Les portes

   Accessibilité Lighthouse 100, axe zéro violation, CSP stricte sans scripts inline, et les pages tiennent debout sans JavaScript du tout.