Je template moet dood

Het oude portfolio woonde in een Framer-template. Het deed zijn werk zoals een huurwoning dat doet: alles functioneert, niets is van jou. De copy had ziel. Het vat had een abonnement.

Het vatprobleem

Andermans vat

De template sprak als eerste, en vooral in stockbeeld. De herofoto was van mij, een zonsondergang die ik schoot in de Houthavens in Amsterdam, maar de werkpagina opende op een 3D-render uit een fotobibliotheek en contact verschool zich achter een stadssilhouet dat alles had kunnen verkopen. Daaronder stond een woordmerk in een afgerond displaylettertype dat inmiddels volledig uit het merk is verdwenen.

De oude Framer-landingspagina: Marco's eigen zonsondergangfoto van zeilboten in de Houthavens, Amsterdam, met Witty Wolf Design in het oude afgeronde displaylettertype — De oude landing: mijn eigen Houthavens-zonsondergang, het gepensioneerde lettertype, de copy die er al uit wilde.

De oude hero van de werkpagina: een generieke stock-3D-render van atomen en draaiende bollen — Stockatomen die de cases aankondigen, een stockskyline die de telefoon opneemt.

De oude contactpagina: een stockfoto met lange sluitertijd van een skyline en een gigantische titel Contact — Stockatomen die de cases aankondigen, een stockskyline die de telefoon opneemt.

Het merkdenken was echt en het bewaren waard: humor als werkprincipe, gewone taal, persoonlijkheid in dienst van helderheid. Het verdiende beter dan een layout die iemand anders al duizend keer had verkocht.

Het oude merkdocument: de tone of voice overleefde de verhuizing, het lettertype niet.

De Witty Wolf-site geopend in de Framer-editor, met variantpanelen en een zichtbare Upgrade Now-knop — Het vat zelf: mijn site, andermans editor, een upgradeknop waar een commit had moeten staan.

De verhuizing

Dezelfde ziel, een nieuw vat

De beslissing: de template met pensioen en een statische Astro-site met de hand coderen. De stem van de copy behouden, alles waar die op stond vervangen. De art direction werd field notes: warm papier, inkt, een vaag hulpraster, dun lijnwerk en één amberkleurig accent, zuinig uitgegeven. Twee lettertypen, beide self-hosted: Geist Mono als de stem voor koppen, navigatie, labels en cijfers, Work Sans alleen voor lange leesteksten. Het oude afgeronde displaylettertype ging overal met pensioen, ook in het merk zelf.

De nieuwe Astro-homepage in het lichte thema: typemachine-hero met doorgestreepte pixels, de lijntekening van de wolf op warm papier — Hetzelfde adres na de verhuizing: papier, inkt, monostem en de wolf in lijnwerk.

01 · Het vakwerk

Details die hun plek verdienen

De hero typt zichzelf, maakt expres een fout, streept die door en gaat verder: pixels wordt mensen. De wolf ernaast is het echte logo, getekend als pure lijnkunst die zichzelf inschetst, geen vulling behalve de amberen tong. Een amberkleurig geurspoor tekent zich over de pagina terwijl je scrolt, een live klok houdt Madrileense tijd bij in de metaregel en de footer antwoordt in terminalstijl. Dark mode komt aan zonder flits van het verkeerde thema, respecteert de systeemvoorkeur, en het omschakelen verdient een moment: de wolf buigt naar voren, trilt, flitst een amberen oog, dan flikkert de lamp en landt het thema. Elke animatie staat stil zodra reduced motion aanstaat.

De nieuwe Astro-homepage in het donkere thema: dezelfde hero met het lijnwerk van de wolf in papiertint op bijna-zwart — Dark mode is een volwaardig thema, geen inversie: de wolf ruilt inkt voor papier.

02 · Het systeem

Eén bron van waarheid

De casepagina’s draaien op een klein systeem in plaats van een stapel beslissingen. De marge-labels die je op deze pagina ziet, zijn de enige bron van waarheid voor de sectie-index: de scroll-spy-rail op desktop, de zwevende pil op mobiel en de ankerlinks die blijven werken met JavaScript uit, tijdens de build gestempeld door een kleine rehype-plugin. Figuren delen één field-notes-behandeling, tape en punaises alleen voor beelden, nooit voor tekst. Elke case opent onder een rubberen stempel van het merk van de klant, die neerkomt zodra de titel klaar is met typen.

Een casespread op de nieuwe site: de sectie-rail links, een marge-label en kop, en daaronder een live productscreenshot — De sectie-rail, gevoed door de marge-labels: schrijf de notitie één keer, de index volgt.

Mijn lastigste klant

Ik ben mijn eigen lastigste klant

Voor jezelf shippen betekent je eigen kritische ik tegenkomen, en die van mij is de lastigste klant die ik heb. Geen briefing om je achter te verschuilen, niemand anders om de schuld te geven. Een showcase houdt je ook in toom: het ontwerp moet uit de weg van het werk stappen, dus terughoudendheid is de opdracht, niet het compromis.

De Framer-site kostte bijna vier maanden. Het meeste daarvan was niet bouwen, maar beslissen. Wat te laten zien, wat te schrappen, welke beelden hun plek verdienden, waar de balans lag. Deze herbouw ging sneller, omdat het beslissen al gedaan was. Het werk was redigeren: schrappen wat te veel was en wat ik stilletjes was gaan verafschuwen. Het moeilijkste was mijn lievelingen vermoorden.

Kritiek van een klant of werkgever slik ik makkelijker dan kritiek van mezelf. Ik ben nogal een eikel als ik mezelf moet beoordelen. Daarna wordt het gepolijst.

Eerlijk gezegd

De eerlijkste test die er is

Een portfolio heeft geen conversiecijfers die het citeren waard zijn, dus ik ga ze niet verzinnen. De uitkomst is eigenaarschap: elke regel van deze site is van mij om te veranderen, en veranderen duurt minuten, geen supportticket. Urbiqo leerde me dat je eigen ontwerp bouwen de eerlijkste usabilitytest is die het krijgt; hier kwam die les thuis, want dit keer was de klant ik, en de klant ziet alles.