Het product was visueel sterk, De website nu ook.
Het product als basis voor de website
Imagin.Studio maakt automotive beelden. Niet de foto’s die een fotograaf schiet op een parkeerplaats, maar de gecontroleerde, pixel-perfecte renders en composities die automerken gebruiken voor campagnes, configurators en showrooms. Het werk is technisch en visueel tegelijk en het eindresultaat mag nooit het gevoel geven dat er software aan te pas is gekomen.
De uitdaging
De website communiceerde dat helemaal niet. Het was een generieke template die eruitzag als duizenden andere portfoliosites. Niks mis mee als je een hobby-fotograaf bent. Maar als je pitcht voor een internationaal automerk en de potentiële klant even snel je site checkt tijdens de vergadering, heb je een probleem. De eerste indruk moet kloppen met het niveau van het werk. Die indruk klopte niet.
Er was al een ontwerp dat is het interessante aan dit project. Een Portugese designer had de visuals en het concept al uitgewerkt. Mijn opdracht was niet om iets nieuws te bedenken, maar om iets precies goed te doen. Pixel-perfect bouwen vanuit een extern Figma-bestand, in samenwerking met iemand die ik nooit persoonlijk heb ontmoet, voor een klant die hoge standaarden gewend is. Dat is een compleet andere uitdaging dan een blanco canvas.
De aanpak
Ik begon met het Figma-bestand grondig door te nemen voordat ik één element aanraakte in Webflow. Niet om het te kopiëren, maar om het te begrijpen. Een goed Figma-bestand vertelt je niet alleen wat er moet staan, maar ook waarom. Welk gevoel wil de designer oproepen met deze witruimte? Waarom is dit element zo groot ten opzichte van de rest? Wat is de bedoeling van die subtiele animatie?
Pas als ik die vragen kon beantwoorden, begon ik te bouwen. En pas toen ik bouwde, kwamen de vragen die een Figma-bestand nooit beantwoordt: hoe gedraagt deze sectie zich als de tekst drie keer zo lang is in het Duits als in het Nederlands? Wat gebeurt er op een 13-inch scherm versus een 27-inch monitor? Hoe laadt een afbeelding van 8MB op een 4G-verbinding? Die vragen loste ik op terwijl ik bouwde.
Meertaligheid was een kernvereiste Imagin.Studio werkt voor internationale merken, dus de site moest naadloos schakelen tussen talen zonder dat de structuur of de snelheid eronder leed. En ondanks het zware beeldmateriaal moest de laadtijd scherp blijven. Dat vraagt bewuste keuzes in hoe afbeeldingen worden geselecteerd, gecomprimeerd en geladen.
Het resultaat
De site staat nu op het niveau van het werk dat Imagin.Studio maakt. Laadtijd onder 1,1 seconden. Het team voegt zelf nieuwe projecten toe, categoriseert ze en publiceert zonder developer, zonder wachttijd. En het aantal inbound offerte-aanvragen steeg met 65 procent in het kwartaal na livegang. Dat zijn aanvragen van mensen die de site zagen en dachten: dit is het niveau dat wij nodig hebben.
