Pijplijn voor merkbeelden: zeven cinematische beelden, één designsysteem

Het probleem met de meeste websites voor developertools is dat ze er precies zo uitzien als elke andere website voor developertools. Strakke typografie, monochrome kaarten, één enkele accentkleur en nul sfeer. We wilden dat AudioLab.tools zou aanvoelen als een merk met diepgang, en dat moest lukken zonder een fotoshoot te laten organiseren.

Dit is het bouwlogboek van hoe we dat voor elkaar kregen met generatie via Higgsfield, de beeldpijplijn van Astro en strikte designdiscipline.

De briefing

Zeven beelden:

1. Hero: sfeervol lint van cyaan licht, metafoor van een audiogolfvorm.
2. MixLab: abstracte sculptuur, cyaan, met de energie van een VU-meter / analyser.
3. VoiceLab: abstracte violette linten, organisch, stemresonantie.
4. HearLab: bleekgroene spiraal, kalm, toegankelijkheidsbewust.
5. SignalLab: amberkleurige datasculptuur, spectrogramachtig.
6. CueLab: koper-/rode routeringsmatrix.
7. SkillLab: roze concentrische ringen, getrapte progressie.

Elk beeld moest:

• Cinematisch aanvoelen, niet als stockfoto.
• Dezelfde taal van belichting en scherptediepte gebruiken als de andere.
• De typische tekenen van AI-generatie vermijden (extra vingers, verminkte tekst, generieke stockfotocompositie).
• Helder verwijzen naar de identiteitskleur van het bijbehorende lab.

Generatie: de prompt goed krijgen

Het prompt-sjabloon dat consequent bruikbare output opleverde:

[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.

Drie dingen zijn cruciaal in dit sjabloon:

1. De kaderstelling “pitch-black void”. Geeft het model toestemming om vol voor hoog contrast te gaan en drukke achtergronden te negeren.
2. De “Hasselblad medium-format look”. Activeert een ondiepe scherptediepte en de cinematische compressie van een grotere sensor.
3. Een expliciete negatieve lijst. “No text, no logos, no faces, no microphones” voorkwam dat het model standaard naar letterlijke objecten greep.

Voor elk cluster vervingen we de passende kleur en domeinmetafoor:

• MixLab: cyaan / blauw, “audio waveform”
• VoiceLab: violet / lavendel, “vocal harmonics”
• HearLab: bleekgroen / aquamarijn, “inner ear curvature”
• SignalLab: amber / honinggoud, “spectrogram frequency bins”
• CueLab: koper / roodoranje, “routing matrix”
• SkillLab: roze-magenta / rozerood, “tiered progression rings”

Slaagpercentage: ~80 % bij de eerste generatie, 100 % binnen twee pogingen. Kosten: ~14 credits in totaal voor de hele set.

Optimalisatie: van 9 MB PNG naar 50 KB WebP

Elke ruwe output was een 2k PNG (3168×1344 voor de hero, 2752×1536 voor de clusters). Bestandsgroottes:

Bron	PNG	Na WebP op 2k	Bij 1280w	Bij 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

De ingebouwde <Image>-component van Astro (aangedreven door sharp) doet dit automatisch wanneer je het asset importeert. De hele optimalisatiestap is één declaratie per beeld:

---
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"
/>

Dit levert op:

• Een WebP-variant op elk van de opgegeven breedtes.
• Een correcte srcset, zodat de browser de juiste grootte kiest.
• sizes voor responsieve selectie.
• Automatisch ingevoegde width/height om layoutverschuiving te voorkomen.

Waarneembaar verliezen we niets. We winnen een gemiddelde reductie van 95 % in geleverde bytes. Dat is de saaie infrastructuurwinst die zich opstapelt over elke pagina.

Integratie: waar elk beeld zijn plek verdient

Zes plaatsingspatronen, bewust consequent gehouden:

1. Clusterkaarten (homepage + /labs): een 16:8-beeldstrook bovenaan elke kaart; het beeld schaalt op bij hover. Vestigt direct de identiteit per cluster op het raster.
2. Hero van clusterpagina: het beeld vult de aside aan de rechterkant, met een metadataraster onderaan eroverheen. Vervangt wat eerst een gewoon “in één oogopslag”-paneel was.
3. Sfeersectie op de homepage: het herobeeld full-bleed op 60vh, met een citaat-overlay (“Audio is craft. AI is leverage.”). Voegt redactioneel ritme toe tussen het clusterraster en de principes.
4. Pagina-hero’s (about, labs-index, roadmap, press): het herobeeld op 25 % dekking met een gradiëntmasker van links naar rechts, dat de typografie verankert.
5. Herovideo op de homepage: zie het bouwlogboek van de hero-beweging.
6. Persmappagina: gebruikt als bewijs van het systeem, niet als decoratie. Het beeld is onderdeel van de brand kit.

Wat (even) misging

Eén kleine valkuil die het vermelden waard is: bij het genereren met een vierkante referentie en een verzoek om 21:9-output produceert het model af en toe een resultaat dat eruitziet alsof het is opgevuld in plaats van opnieuw gecomponeerd. Oplossing: opnieuw genereren zonder referentiebeeld en gewoon op de prompt leunen.

Ook: de standaard aspectmapping van Higgsfield gaat niet altijd om met 21:9 zoals je zou verwachten. We moesten expliciet verifiëren of de outputafmetingen overeenkwamen met wat de prompt vroeg.

Resultaat

De site ging van “verzorgde developer-landingspagina” naar “dit is een echt merk” in één enkele werkronde. De visuele identiteit is nu consistent over elke pagina, elk cluster heeft zijn eigen kleurgecodeerde sfeer, en de typografie rust op beeldmateriaal dat zijn plek verdient in plaats van een gat opvult.

Totale kosten: 14 credits voor generatie, ~10 minuten integratiewerk per beeld, geen doorlopend onderhoud.

Gerelateerd

• Pers / brand kit
• Hero-bewegingsloop: productiepijplijn
• Zes demo’s in één platform: architectuur