Pipeline d’imagerie de marque : sept images cinématographiques, un seul système de design

Le problème de la plupart des sites web d’outils pour développeurs, c’est qu’ils ressemblent exactement à tous les autres sites web d’outils pour développeurs. Typographie épurée, cartes monochromes, une seule couleur d’accent et zéro atmosphère. Nous voulions qu’AudioLab.tools donne l’impression d’une marque dotée de profondeur, et ce sans commander de séance photo.

Voici le journal de build de la façon dont nous y sommes parvenus avec la génération via Higgsfield, la pipeline d’images d’Astro et une discipline de design stricte.

Le brief

Sept images :

1. Hero : ruban atmosphérique de lumière cyan, métaphore d’une forme d’onde audio.
2. MixLab : sculpture abstraite, cyan, avec l’énergie d’un VU-mètre / analyseur.
3. VoiceLab : rubans violets abstraits, organiques, résonance vocale.
4. HearLab : spirale vert pâle, calme, soucieuse de l’accessibilité.
5. SignalLab : sculpture de données ambrée, façon spectrogramme.
6. CueLab : matrice de routage cuivre / rouge.
7. SkillLab : anneaux concentriques roses, progression par paliers.

Chaque image devait :

• Donner une impression cinématographique, pas une banque d’images.
• Utiliser le même langage d’éclairage et de profondeur de champ que les autres.
• Éviter les indices typiques de la génération par IA (doigts en trop, texte déformé, composition générique de banque d’images).
• Renvoyer clairement à la couleur d’identité de son lab.

Génération : réussir le prompt

Le modèle de prompt qui produisait systématiquement un résultat exploitable :

[Composition direction]: an abstract sculptural representation of
[concept] suspended in pitch-black void, [shape direction] of [colour],
intertwining like [domain metaphor]. Misty atmosphere with subtle
particle dust catching the light. Cinematic depth of field, Hasselblad
medium-format look, premium minimalist editorial aesthetic. Soft
volumetric glow. No text, no logos, no faces, no [obvious cliché].
Pure abstract light sculpture.

Trois éléments comptent dans ce modèle :

1. Le cadrage « pitch-black void ». Il donne au modèle la permission de s’engager pleinement dans le contraste élevé et d’ignorer les arrière-plans chargés.
2. Le « Hasselblad medium-format look ». Il déclenche une faible profondeur de champ et la compression cinématographique d’un capteur plus grand.
3. Une liste de négatifs explicite. « No text, no logos, no faces, no microphones » a empêché le modèle de retomber par défaut sur une imagerie d’objets littéraux.

Pour chaque cluster, nous avons substitué la couleur et la métaphore de domaine appropriées :

• MixLab : cyan / bleu, « audio waveform »
• VoiceLab : violet / lavande, « vocal harmonics »
• HearLab : vert pâle / aigue-marine, « inner ear curvature »
• SignalLab : ambre / or miel, « spectrogram frequency bins »
• CueLab : cuivre / rouge-orangé, « routing matrix »
• SkillLab : rose-magenta / rosé, « tiered progression rings »

Taux de réussite : ~80 % dès la première génération, 100 % en deux tentatives. Coût : ~14 crédits au total pour l’ensemble.

Optimisation : de 9 Mo en PNG à 50 Ko en WebP

Chaque sortie brute était un PNG 2k (3168×1344 pour le hero, 2752×1536 pour les clusters). Tailles de fichier :

Source	PNG	Après WebP en 2k	À 1280w	À 720w
hero	5.4 MB	56 KB	45 KB	32 KB
mixlab	9.5 MB	382 KB	75 KB	12 KB
voicelab	6.9 MB	73 KB	41 KB	4 KB
hearlab	6.4 MB	101 KB	56 KB	3 KB
signallab	5.2 MB	4 KB	7 KB	6 KB
cuelab	8.4 MB	275 KB	71 KB	14 KB
skilllab	5.5 MB	84 KB	32 KB	5 KB

Le composant <Image> intégré d’Astro (propulsé par sharp) le fait automatiquement dès que vous importez l’asset. Toute l’étape d’optimisation tient en une déclaration par image :

---
import { Image } from 'astro:assets';
import heroImg from '@/assets/brand/hero.png';
---

<Image
  src={heroImg}
  alt="A coiled ribbon of cyan light…"
  widths={[720, 1280, 1920, 2560]}
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

Cela produit :

• Une variante WebP à chacune des largeurs déclarées.
• Un srcset correct pour que le navigateur choisisse la bonne taille.
• sizes pour la sélection responsive.
• Des width/height injectés automatiquement pour éviter le décalage de mise en page.

Nous ne perdons rien sur le plan perceptible. Nous gagnons une réduction moyenne de 95 % des octets livrés. C’est le gain d’infrastructure peu spectaculaire qui se cumule sur l’ensemble des pages.

Intégration : là où chaque image gagne sa place

Six schémas de placement, volontairement cohérents :

1. Cartes de cluster (page d’accueil + /labs) : une bande d’image au format 16:8 en haut de chaque carte ; l’image s’agrandit au survol. Établit immédiatement l’identité de chaque cluster sur la grille.
2. Hero de page de cluster : l’image remplit l’aside de droite, avec une grille de métadonnées superposée en bas. Remplace ce qui était auparavant un simple panneau « en un coup d’œil ».
3. Section atmosphérique de la page d’accueil : l’image hero en pleine largeur à 60vh, avec une citation en surimpression (« Audio is craft. AI is leverage. »). Ajoute un rythme éditorial entre la grille de clusters et les principes.
4. Heros de page (about, index des labs, roadmap, press) : l’image hero à 25 % d’opacité avec un masque dégradé de gauche à droite, qui ancre la typographie.
5. Vidéo hero sur la page d’accueil : voir le journal de build du mouvement hero.
6. Page du press kit : utilisée comme preuve du système, pas comme décoration. L’image fait partie de la brand kit.

Ce qui a (brièvement) cassé

Un petit piège à signaler : lors de la génération avec une référence carrée et une demande de sortie en 21:9, le modèle produit parfois un résultat qui semble rempli par des marges plutôt que recomposé. Solution : régénérer sans image de référence et s’appuyer simplement sur le prompt.

Par ailleurs : la correspondance de ratio par défaut de Higgsfield ne gère pas toujours le 21:9 comme on pourrait s’y attendre. Nous avons dû vérifier explicitement que les dimensions de sortie correspondaient à ce que demandait le prompt.

Résultat

Le site est passé de « page d’atterrissage de développeur soignée » à « c’est une vraie marque » en un seul lot de travail. L’identité visuelle est désormais cohérente sur chaque page, chaque cluster possède son ambiance propre codée par couleur, et la typographie repose sur une imagerie qui gagne sa place au lieu de combler un vide.

Coût total : 14 crédits pour la génération, ~10 minutes de travail d’intégration par image, aucune maintenance continue.

Connexe

• Presse / brand kit
• Boucle de mouvement hero : pipeline de production
• Six démos sur une seule plateforme : architecture