Atelier d'essais : image article IA-lentement 1/3 — Lab

Itération 3 — version validée. Cover sociale A, miniature M2, carte À la une sablier. Hero in-article : deux candidats en compétition (B vs C). Couleurs hardcodées (#b8252e rouge, #ffd900 jaune, #1f3d8c bleu, #111 encre, #f5efe6 crème).

Rappel du ton

Avec l'IA, je code plus lentement

Article 1/3 — « ce que les chiffres ne mesurent pas »

Le 4 avril 2026, j'ai vibe-codé un outil en quelques heures pour gérer mes tâches quotidiennes. […] Quatre semaines plus tard, je corrige toujours les bugs de cette élégance.

Depuis, je code plus lentement. Et je produis plus.

Cover sociale (1200×630) validée

Format universel LinkedIn / Twitter / OG. Triptyque chiffres comic : prédit / perçu / mesuré. Le −19 % rouge oversize sur le panneau crème arrête le scroll.

A · Triptyque chiffrescover sociale · 1200×630

Tradeoff assumé : la cover focalise sur l'étude METR (−19 %), c'est un léger spoiler de la première section. Acceptable car la thèse — paradoxe entre perçu et mesuré — est portée par les 3 chiffres ensemble, pas par la valeur seule.

Covers sociales rejetées archive

B v1 · titre + Mondrianrejetée social · redirigée hero

Première proposition cover sociale. Manque d'impact face au triptyque A (typo seule, pas de chiffre choc). Le concept survit en candidat hero in-article (cf. section Hero, variantes B v3/v3a/v3b).

C v1 · sablier + bandeau noirrejetée social · redirigée hero

Sablier écrasé (ratio H/W 1.0), sable mord les bords noirs (z-order non corrigé), bandeau noir écrasant l'humeur joyeuse. Le concept survit en hero v2 retravaillé (sablier élancé, sable derrière stroke, bandeau bleu).

D · mix typo + objetrejetée · concept abandonné

Mix typo gauche + chiffre droite. Pas faux mais trop chargé : deux fois le titre (verbal + numéro), composition lourde, le message dilué. A fait mieux sur le même registre.

Hero in-article (1200×630) validée · B v3a

conséquence sémantiqueLe hero porte visuellement le titre de l'article. Le <h1> HTML reste obligatoire (SEO, lecteur d'écran, fil d'Ariane) mais doit passer en sr-only pour ne pas doublonner visuellement. Détails dans la section Décisions restantes en bas de page.

B v3a · validéekicker discret + bloc credits

Composition Mondrian asymétrique. Trois éléments variables par article : kicker (« ARTICLE n/3 » + sous-titre), numéro magazine §01.20 en bleu De Stijl, titre principal en deux lignes Redaction display. « LENTEMENT » se loge dans le bloc rouge, baseline alignée avec « JE CODE PLUS ». Le bloc bleu en bas-gauche peut accueillir une signature ou rester vide.

Hero rejetés archive

B v3 · baseline sans kickerzone haut-gauche vide

Version intermédiaire — alignement baseline JE CODE PLUS / LENTEMENT acquis, mais zone haut-gauche reste vide. Surmontée par v3a.

B v3b · bloc jaune Mondrianplus chargé que v3a

Mini-bloc jaune (240×100) miroir du bloc bleu en bas-gauche. Composition Mondrian plus structurelle, mais alourdit le rendu — quatre blocs colorés au lieu de trois. La typo kicker (v3a) habite la zone vide de façon plus aérée.

C v2 · sablier joyeuxobjet narratif spécifique 1/3

Très bon candidat. Rejeté car le sablier est un objet narratif spécifique à 1/3 — non reproductible sur 2/3 et 3/3. Le sablier garde sa place comme objet de la carte « À la une » (où le slot accueille un objet par article).

Miniature liste /ecrits (180×120) validée · M4

Template reproductible par article. Structure constante (cercle jaune central + bandeau bleu bas + cadre noir) reprise du hero C ; trois slots variables remplis article par article :

Slot	Constant ?	Exemple article 1/3
Numéro magazine (gros, gauche, Redaction bleu De Stijl)	variable	`§01.20`
Élément hero (centré sur le cercle, Redaction display rouge)	variable	`−19 %`
Tag source (bandeau bleu, gauche, mono caps crème)	variable	`METR · 2025`
Titre court (bandeau bleu, droite, mono caps crème)	variable	`CODER LENTEMENT`
Cercle jaune, bandeau bleu, cadre noir, filet noir séparateur	constant	(idem pour tous les articles)

27 mai 2026

Avec l'IA, je code plus lentement

M4 v2 · numéro magazine grand à gauche, cercle décalé à droite. Le tag source rejoint le bandeau bleu (mono caps).

Étape suivante (hors lab) : factoriser en shortcode Zola {{ ecrit_cover(numero="01.20", chiffre="−19", unite="%", source="METR · 2025", titre_court="CODER LENTEMENT") }} appelé depuis chaque article. La géométrie reste identique d'un écrit à l'autre.

Miniatures rejetées archive

M2 · chiffre seul sur crème

Sans signature visuelle stable

Rejetée car pas reproductible identité-fortes : un article sans chiffre choc (ou même un article 2/3 avec un autre chiffre) perdrait toute cohérence visuelle. M4 résout en posant un fond stable (cercle jaune + bandeau bleu).

§01.20

M1 · placeholder typo

Numéro magazine en mono

Rejetée pour cet article. Reste le fallback par défaut pour les articles sans cover déclarée (template).

M3 · sablier comic mini

Variante humeur joyeuse

Rejetée. À 180×120 le sablier devient un picto un peu décoratif sans la force du chiffre. M2 lit mieux la thèse en un coup d'œil.

Carte « À la une » accueil validée

Dernier écrit

Avec l'IA, je code plus lentement

27/05/2026 · 8 MIN · §01.20

Sable derrière le stroke noir (pattern fill-puis-sable-puis-stroke) — plus de morsure des bords. Sablier identique au hero C v2 pour rappel visuel à travers les surfaces.

Carte « À la une » rejetée archive

Variante chiffre · rejetée

−19 % METR

Redondance avec M2 ; sablier porte mieux l'identité.

Décisions restantes

Génération PNG : workflow Zola pour exporter la cover sociale A en .png 1200×630 (OG + Twitter cards). À voir avec resize_image ou pipeline externe (svgo + rsvg-convert / sharp).
Frontmatter article — miniature M4 : prévoir un macro ecrit_cover (cousin du ecrit_hero ci-dessous) appelé depuis le template ecrits.html listing, alimenté par extra.cover_chiffre, extra.cover_unite, extra.cover_source, extra.cover_titre_court. Permet d'afficher M4 sur la liste /ecrits et la carte « À la une » d'accueil sans fichier image statique.
Frontmatter article — hero B v3a : pose à ajouter dans le frontmatter de chaque article qui veut un hero. Macro templates/macros/ecrit_hero.html créée, template page.html détecte la présence et passe le <h1> en sr-only via la classe .ecrit-page--has-hero.

Frontmatter type pour le hero B v3a

À ajouter dans le frontmatter de l'article (entre les +++) :

[extra]
numero = "01.20"
# … champs existants …
hero = "b_v3a"
hero_kicker = "ARTICLE 1/3"
hero_soustitre = "ce que les chiffres ne mesurent pas"
hero_l1 = "AVEC L'IA,"
hero_l2 = "JE CODE PLUS"
hero_l3 = "LENTEMENT"

Le champ numero est réutilisé pour le §01.20 du kicker — pas besoin de le redupliquer.

Sémantique HTML résultante

<article class="ecrit-page ecrit-page--has-hero">
  <p class="issue-bar">…</p>

  <figure class="ecrit-page__hero" aria-hidden="true">
    <svg viewBox="0 0 1200 630" role="presentation">…</svg>
  </figure>

  <header class="ecrit-page__header">
    <h1 class="ecrit-page__title sr-only">Avec l'IA, je code plus lentement.</h1>
    <p class="ecrit-page__subtitle">Pourquoi le discours…</p>
  </header>

  <div class="ecrit-page__content">…</div>
</article>

<h1> reste dans le DOM (SEO, lecteur d'écran, fil d'Ariane), mais invisible grâce à .ecrit-page--has-hero .ecrit-page__title qui applique sr-only.
<figure aria-hidden="true"> : l'assistive tech saute le SVG (évite que les <text> soient lus glyph par glyph en plus du h1).
Le subtitle reste visible : il complète l'image avec une description courte indexable.

Si on veut une variante hero pour 2/3 ou 3/3

Ajouter un nouveau macro dans templates/macros/ecrit_hero.html (ex. b_v3a_alt, c_v2), puis dans page.html ajouter une branche {% elif page.extra.hero == "..." %}. Garder un macro par variante (pas de macro géant paramétré) — plus simple à maintenir.