Donna Works
Je eigen website moet bewijzen wat je verkoopt
Als UX/UI designer en front-end developer kon ik moeilijk aankomen met een portfolio dat alleen vertelde wat ik kon. Het moest het laten zien.
Daarom ontwierp en bouwde ik mijn portfolio opnieuw: een website waarin design, development, illustratie, motion en copy niet als losse disciplines naast elkaar staan, maar zichtbaar samenwerken.
Mijn werk groeide. Mijn portfolio niet mee.
Mijn vorige website had ik ook zelf ontworpen en gebouwd. De stijl was er: eigen illustraties, motion en een uitgesproken visuele richting. De inhoud bleef alleen vrij simpel.
Wie ik was als designer en developer bleef vaag. Disciplines stonden als losse labels op de pagina. Cases toonden vooral een eindresultaat, soms niet meer dan een filmpje en een paar regels tekst.
Eerlijk gezegd wist ik ook gewoon dat ik inmiddels iets beters kon maken.
Nu AI het makkelijker maakt om snel iets goeds te maken, begint ook steeds meer op elkaar te lijken. Ik wilde iets wat niet uit een paar prompts had kunnen rollen. Geen standaard template met mijn naam erop, maar een website die alleen van mij kon zijn.
De nieuwe website moest laten zien hoe ik denk en werk, niet alleen wat ik maak.
Hoe maak je een portfolio dat niet vertelt wat ik kan, maar het zelf bewijst en tegelijk echt van mij voelt?
De website een gezicht geven
Voor mijn LinkedIn banner had ik een illustratie van mezelf gemaakt. Rond diezelfde tijd zocht ik al een tijdje naar een nieuwe richting voor mijn website.
Ik had verschillende visuele opzetten geprobeerd. Ze werkten, maar konden net zo goed van iemand anders zijn.
De illustratie gaf de stijl letterlijk en figuurlijk een eigen gezicht.
Daarom werd dat niet iets wat ik later nog aan het ontwerp toevoegde, maar het vertrekpunt ervan. Op de website komt een getekende versie van mij steeds terug, telkens in een andere houding of situatie.
Dat geeft de site iets herkenbaars, maar vooral iets wat niet zomaar op een ander portfolio past. Een zelfgemaakte illustratie van mij doet het daar waarschijnlijk ook een stuk minder goed.
In de hero zit ik bijvoorbeeld achter mijn laptop met mijn been op en neer te bewegen. Op het scherm zoom ik met mijn vingers in, precies zoals ik dat zelf voortdurend doe.
Juist die kleine details maken het ‘personage’ meer dan decoratie. Ze vertellen ondertussen ook iets over wie er achter de website zit.
Sommige vallen waarschijnlijk pas op als je me kent.
Dat maakt ze juist leuker.
Drie D’s in één vorm
Waar de illustratie de website een gezicht gaf, moest het logo de combinatie erachter samenvatten.
De linkerzijde is gebaseerd op een code bracket. De rechterzijde op een schilderspalet. Samen vormen ze een D.
De D van Donna, design en development.
Het logo laat daarmee in één vorm zien waar Donna Works om draait. Niet design aan de ene kant en development aan de andere, maar juist wat er gebeurt wanneer die twee samenkomen. Of eigenlijk drie.
Op klein formaat blijft vooral de D over. Wie iets langer kijkt, ziet waar die uit is opgebouwd.
De homepage moest meteen antwoord geven
Met een eerste visuele richting en logo stond de basis, maar een bezoeker moet vooral snel begrijpen wat ik doe en wat ik voor een project kan betekenen.
De homepage volgt daarom een bewuste volgorde.
De hero maakt direct duidelijk dat ik UX/UI design en front-end development combineer. Daarna zorgen bekende opdrachtgevers voor social proof en autoriteit. Ze laten zien dat andere organisaties mij al vertrouwden, terwijl de herkenbare namen extra geloofwaardigheid meegeven.
De diensten laten vervolgens zien waarvoor iemand mij kan inschakelen. De USP’s maken concreet wat het oplevert wanneer design en development bij één persoon liggen.
Daarna komt het bewijs: geselecteerde projecten, mijn werkwijze en ervaringen van mensen met wie ik heb samengewerkt.
Die volgorde sluit aan op de vragen die een potentiële opdrachtgever waarschijnlijk heeft.
Wat doe je? Heb je ervaring? Waarvoor kan ik je inschakelen? Wat maakt jouw aanpak anders of goed? En waar blijkt dat uit?
Niet iedere bezoeker leest alles. Daarom dragen de koppen het verhaal voor mensen die snel door de pagina gaan. Wie wel verder leest, krijgt meer context, persoonlijkheid en af en toe een semi-slechte grap.
De footer draait om het starten van het gesprek en de link naar de ‘about pagina’ is er voor wie eerst de persoon achter het bureau wil leren kennen.
Code als design. Of design als code?
Toen de inhoudelijke volgorde stond, begon de vraag hoe de website moest voelen.
Veel ideeën draaiden namelijk niet alleen om hoe iets eruitzag. Het ging ook om timing, beweging, scrollgedrag en de reactie op een cursor.
Daarom verhuisde een groot deel van de visuele uitwerking vrij snel naar code.
Een interactie kan in een ontwerp logisch ogen en in de browser alsnog te traag, te druk of gewoon irritant blijken. Door die onderdelen direct te bouwen, kon ik ze ook direct ervaren en aanpassen.
Code werd eigenlijk mijn schetsboek.
Het zit ’m in de details
Doordat ik direct in de code werkte, werden kleine interacties vanzelf onderdeel van het ontwerp.
En daar ben ik misschien iets te gevoelig voor.
Ik ben niet snel tevreden met ‘goed genoeg’. Zodra ik zie hoe een detail beter, slimmer of leuker kan, vind ik het lastig om dat vervolgens te negeren.
Dat zie je terug in onderdelen waar niemand expliciet om heeft gevraagd, maar die de website wel meer feedback, samenhang of persoonlijkheid geven.
Een punaise laat een gaatje achter
De projecten op de homepage hangen op een interactief prikbord.
Wanneer je op desktop een polaroid oppakt en versleept, blijft het kleine gaatje van de punaise zichtbaar.
Het prikbord volgt daarmee dezelfde logica als een echt prikbord. Wanneer iets wordt losgemaakt, blijft daar een spoor van achter. Dat soort directe feedback maakt een digitale interactie begrijpelijker.
Niemand had geklaagd als dat gaatje niet bestond.
Ik waarschijnlijk wel.
De favicon houdt de scroll bij
In het browsertabblad staat een klein laptopje. Terwijl je verder door de pagina scrolt, vult het scherm van de laptop zich langzaam.
Lange casepagina’s vragen best wat aandacht. Een zichtbare voortgangsindicator geeft een idee van hoeveel iemand al heeft gelezen en hoeveel er nog komt.
Normaal gebeurt dat ergens binnen de pagina.
Hier doet zelfs de favicon mee.
De scrollbar laat precies zien waar je bent
Naast de verticale scrollbar staat de huidige scrollpositie als een Y-waarde in procenten. Ben je op veertig procent van de pagina, dan staat er Y: 040%.
De scrollbar reageert ook op scrollsnelheid. Scroll je snel, dan strecht hij kort mee.
Daardoor zie je niet alleen aan de scrollbar ongeveer hoe ver je bent, maar voel je ook hoe je door de pagina beweegt.
Een interface werkt prettiger wanneer duidelijk blijft wat er gebeurt en waar iemand zich bevindt. In dit geval is dat vrij letterlijk.
Verder sluit het direct aan op de visuele stijl van de website.
Ook de 404-pagina kreeg een eigen interactie
Als het dan toch misgaat, kan het maar beter een beetje leuk zijn.
Op desktop reageert de pagina op je cursor. Op mobiel speelt een eigen animatie, zodat er ook zonder hover iets te beleven valt.
De pagina heeft de livegang misschien niet gehaald.
De ervaring wel.
En dit zijn nog maar een paar van de details die door de hele website ‘verstopt’ zitten.
Veel beweging. Niet ten koste van toegankelijkheid.
Al die interacties en animaties maakten de website persoonlijker, maar daar zat ook meteen een gevaar. Voor sommige mensen is dat onprettig of zelfs ontoegankelijk.
Met reduced motion aan verdwijnen daarom niet alleen een paar animaties. Sommige onderdelen krijgen een andere opzet.
Het interactieve prikbord verandert bijvoorbeeld in een normale projectgrid. Grote scrollanimaties krijgen een statisch alternatief en bewegende onderdelen kunnen worden gepauzeerd. De inhoud en functionaliteit blijven beschikbaar.
Dat was een belangrijke grens. Motion mag iets toevoegen, maar mag niet nodig zijn om de website te begrijpen of te gebruiken.
Een statische versie moest daarom geen uitgeklede noodoplossing worden. Dezelfde projecten en functies blijven beschikbaar, alleen zonder de beweging eromheen.
Toegankelijkheid stopt niet bij motion. WCAG 2.2 AA was ook voor de rest van de website het uitgangspunt.
De site is opgebouwd met semantische HTML, werkt met toetsenbordbediening en bevat zichtbare focusstijlen, toegankelijke labels en voldoende contrast.
Consistentie speelt daarin ook een rol. Wanneer knoppen, links en interacties zich voorspelbaar gedragen, hoeft iemand niet op iedere pagina opnieuw uit te zoeken hoe de website werkt. Dat verlaagt de cognitieve belasting en helpt niet alleen mensen met een beperking.
Zo hoeft niemand informatie of functionaliteit te missen door beweging, het ontbreken van een muis of de manier waarop diegene door de website navigeert.
Ook de copy had een redesign nodig
De website kreeg steeds meer karakter. De teksten deden dat nog niet.
De eerste opzet voor teksten waren niet per se fout. Ze vertelden alleen vooral welke disciplines ik beheerste.
UX/UI design. Development. Illustraties. Motion. AI.
Correct.
En waarschijnlijk vijf minuten later weer vergeten.
Een lijst met disciplines vertelt namelijk nog niet wat iemand eraan heeft. De bezoeker moet zelf de vertaalslag maken van ‘front-end development’ naar een snelle, goed werkende website of van ‘UX design’ naar een structuur waarin gebruikers niet verdwalen.
Daarom herschreef ik de website vanuit de vragen van een bezoeker. Wat kan ik voor een project betekenen? Waarom is het handig dat design en development bij één persoon liggen? En wat levert dat concreet op?
Daarmee klopte de inhoud. Nu moest de tekst nog een eigen stem krijgen. Voor de copy gold hetzelfde uitgangspunt als de hele site.
Als de website niet als een standaard template mocht voelen, konden de teksten ook niet klinken alsof ze uit dezelfde bak kwamen als:
"Design is voor mij geen eindbestemming, maar een lanceerplatform voor betekenisvolle merkervaringen waar creativiteit de brandstof is, technologie de motor vormt en strategie de koers bepaalt naar impact, vertrouwen en duurzame groei 🚀✨💡."
De tone of voice moest dicht bij hoe ik zelf praat liggen, maar dan net iets minder chaotisch en iets. meer. interpunctie.
De website mocht inhoudelijk sterk zijn, maar ook een beetje leuk om te lezen. Daarom kregen de teksten ruimte voor persoonlijkheid, korte observaties en af en toe een grap die net droog genoeg is.
Ook de Nederlandse en Engelse teksten zijn apart geschreven. Ze vertellen inhoudelijk hetzelfde, maar zijn geen stijve woord-voor-woordvertalingen. Een zin die in het Nederlands natuurlijk klinkt, doet dat in het Engels namelijk niet automatisch ook.
Zo ontstonden regels als:
Ik ontwerp met de bouw in gedachten en bouw met oog voor het ontwerp.
En een foutpagina die simpelweg constateert:
Deze pagina heeft de livegang niet gehaald.
De copy werd daarmee niet iets wat na het ontwerp nog in lege vakken moest worden gezet.
De woorden bepalen net zo goed de hiërarchie, het ritme en de persoonlijkheid van de website.
Onder de motorkap
Al die keuzes moesten uiteindelijk ook technisch werken.
Wat je nu leest, draait op Next.js, React en TypeScript.
Voor de Nederlandse en Engelse versie gebruik ik next-intl. De interacties en animaties zijn gebouwd met GSAP, Lenis en Lottie.
Dark mode, light mode en motionvoorkeuren worden onthouden, zodat de website bij een volgend bezoek niet opnieuw vergeet wat iemand prettig vindt.
Techniek
Next.js · React · TypeScript · GSAP · Lenis · Lottie · next-intl · CSS Modules · Netlify
Niet alleen vertellen. Ook laten zien.
Alles bij elkaar moest de website precies doen wat mijn vorige portfolio nog te weinig deed.
Het eindresultaat is een tweetalige website waarin ieder onderdeel iets anders van mijn werk laat zien.
De structuur laat zien hoe ik informatie orden. De volgorde van de homepage helpt bezoekers van introductie naar bewijs.
De visuele stijl, het logo en de illustraties tonen mijn designwerk. De interacties en technische uitvoering bewijzen dat ik het ook kan bouwen. De copy zorgt ervoor dat iemand ondertussen nog begrijpt waar die naar kijkt.
De website bevat:
- een zelfontworpen identiteit en logo
- eigen illustraties en motion
- Nederlandse en Engelse content
- dark mode en light mode
- reduced motion en toegankelijke alternatieven
- interactieve projecten en uitgebreide cases
- een flexibel systeem dat kan meegroeien met nieuw werk
De belangrijkste verandering is alleen eenvoudiger samen te vatten.
Een website die mijn projecten liet zien.
Een website die zelf laat zien hoe ik ontwerp en bouw.
Dat was uiteindelijk de echte opdracht.
Live. Voor nu
En dan is er nog het laatste probleem van een eigen portfolio: je kunt eindeloos eraan blijven sleutelen.
Er kan altijd nog een project bij, een overgang scherper of een zin net iets beter. Ik heb onderdelen opnieuw ontworpen en waarschijnlijk meer tijd aan sommige details besteed dan strikt noodzakelijk was.
Op een gegeven moment moet een website gewoon gepubliceerd worden.
De website staat nu live, vertegenwoordigt mijn werk zoals het er vandaag uitziet en is flexibel genoeg om later weer te veranderen.
Er staan natuurlijk nog ideeën op de lijst, waarschijnlijk niet echt een verrassing als je de case tot hier gelezen hebt.