Concept & doel

Deze portfolio-website is ontworpen om mijn werk als student programmeren en designer te tonen. Het doel was een overzichtelijke, rustige interface te creëren waarin bezoekers snel inzicht krijgen in mijn projecten, vaardigheden en stijl. Startdatum: 3 oktober 2025

Proces

1. Moodboard: samengesteld met aardetinten, minimalistisch beelden en elegante lettertypes
2. Wireframes: opgezet voor homepagina, projectenpagina en detailpagina's in Figma
3. Wireframes: getest op leesbaarheid en navigatieflow
4. Ontwikkeling: resultaat gecodeerd in HTML/CSS met Visual Studio Code.

Evolutie

1. Onderzoek en inspiratie

   Ik begon met het analyseren van bestaande portfoliosites van studenten, junior designers en architecten. Vooral navigatie, kleurgebruik en typografie stonden centraal. Ik verzamelde voorbeelden op Pinterest om een richting te vinden die past bij mijn eigen stijl: rustig, natuurlijk en minimalistisch. Uit die oefening groeide mijn moodboard en eerste kleurenpalet.

2. Wireframes & structuur

   Daarna maakte ik wireframes om de logische opbouw van mijn website te testen. Ik probeerde een evenwicht te vinden tussen overzicht en persoonlijkheid: duidelijk gestructureerd, maar met zachte visuele accenten. In deze fase vereenvoudigde ik de overzichtspagina, besloot ik over het aantal projecten per categorie en besefte ik de noodzaak van een categorie-pagina.

3. Prototype in Figma

   In Figma werkte ik de wireframes verder uit tot een visueel prototype. Ik testte verschillende lettertypes en kleurencombinaties, maar koos uiteindelijk voor een rustig palet met aardse tinten en veel witruimte. Het prototype hielp me om te zien hoe consistentie en ritme belangrijk zijn voor een aangename gebruikerservaring.

4. Coderen en bijsturen

   Toen ik begon te coderen in HTML en CSS, merkte ik dat sommige visuele ideeën moeilijk uitvoerbaar waren, zoals de gecentreerde button op de "over mij"-pagina. Ik paste mijn ontwerp aan om beter aan te sluiten bij de technische realiteit. Ik leerde wat een flexbox was en hoe je met display: flex; elementen netjes kunt uitlijnen. Ook de hiërarchie van de headings (h1-h3) en de semantische structuur heb ik bewust opgebouwd volgens UX-principes. Ik ben soms ook tegen de muur gelopen, door pagina per pagina uit te werken, eerst in html dan in css. bijvoorbeeld toen ik een tweede nav wilde voorzien in de overichtspagina van de projecten, heb ik een originele oplossing moeten vinden om de bestaande css op de nav te bypassen.

5. Eindversie en publiecatie

   De eindversie sluit sterk aan bij mijn oorspronkelijke Figma-prototype: het ontwerp bleef sober en minimalistisch, met veel witruimte en een rustig kleurenpalet. De navigatie is eenvoudig en intuïtief, de hiërarchie van headings duidelijk en overzichtelijk. Alles kreeg zijn plek in een natuurlijke flow: eerst kennismaken, dan de projecten ontdekken, en uiteindelijk contact opnemen. Het resultaat is een consistente, gebruiksvriendelijke website die trouw blijft aan mijn ontwerpideeën.

Resultaat

Het eindresultaat is een minimalistische, overzichtelijke website met:

• Homepagina met tagline
• Over mij-pagina met CV
• Projectenpagina met categorieën en projectdetailpagina's
• (blanco) werkplekken-pagina
• Contact-pagina met contactformulier
• Consistente typografie en kleurenpalet gebaseerd op aardetinten en rustige pastels

download code