De afgelopen maanden heb ik intensief gewerkt aan het ontwerpen en ontwikkelen van mijn portfolio-website. Mijn doel was om een website te creëren die zowel visueel aantrekkelijk is als goed functioneert voor het weergeven van mijn leertaken. Ik heb gefocust op een retro-stijl, geïnspireerd door oude DOS applicaties. Gedurende het proces heb ik meerdere feedbackmomenten gehad, waarbij ik waardevolle inzichten heb gekregen om mijn portfolio steeds verder te verbeteren.
Project Lifecycle:
Project start:
In de beginfase richtte ik me op het bepalen van de stijl en structuur van mijn portfolio. Ik koos voor een retrothema dat doet denken aan oude DOS/NES applicaties, omdat dit een uniek en memorabel beeld geeft. De focus lag op:
Typografie: Monospace-lettertypen voor de lopende tekst en opvallende kopteksten met brackets.
Structuur: Een duidelijke navigatie die gebruikers intuïtief door mijn portfolio leidt.
Design:
Het ontwerp van mijn portfolio verliep in meerdere fasen:
Wireframe: De eerste ontwerpen kregen feedback over inhoudsweergave en lettertype. Ik paste eenvoudige stijlelementen toe en verbeterde de leesbaarheid door andere typografie te kiezen voor lopende tekst.
Iteraties: In latere versies breide ik de stijlelementen uit. Daarnaast veranderde ik de afbeeldingen naar gepixeleerde afbeeldingen om beter aan te sluiten bij het retrothema.
Final Design: Uiteindelijk bevatte mijn portfolio een header met geanimeerde tekst, een vaste grid-achtergrond, dynamische menu’s en duidelijk georganiseerde artiekelen.
Ontwikkeling:
Om het portfolio ook daadwerkelijk te realiseren heb ik gebruik gemaakt van HTML5, CSS en Javascript.
Methods:
Figma:
Voor het maken van mijn wireframes en iteraties van mijn design heb ik Figma gebruikt. Dit kan je hier bekijken:
Hier heb ik vastgesteld hoe ik de inhoud van mijn portfolio wilde weergeven.
De feedback hierop was positief waardoor ik de layout verder aangehouden heb tijdens het werken aan mijn portfolio.
Eerste iteratie:
Ik besloot op een retro thema te geven aan mijn portfolio.
De feedback hierop was dat ik mij nog meer moest verdiepen in retro stijlen, vooral gericht op oude DOS-applicaties en spellen. Het thema was al duidelijk maar kon nog verder op ingewerkt worden.
Tweede iteratie:
Hier heb ik het retro thema al verder uitgewerkt. Dit moest niet 100% accuraat zijn, maar de sfeer moest duidelijk overkomen.
Laatste iteratie:
Ik besloot om de retro-stijl verder te versterken door een grid achtergrond toe te voegen met een parallax-effect.
Hiermee was is zelf ook tevreden over het design en ben ik mij voornamelijk gaan richten op de inhoud van mijn portfolio.
Code:
Voor het animeren van de tekst in de header op de home pagina heb ik keyframes in CSS gebruikt.
Om de "blinking dash" mogelijk te maken en hem op het juiste moment naar de tweede regel te laten springen heb ik een klein stukje code geschreven.
Reflectie:
Het ontwerpen en ontwikkelen van mijn portfolio website was een leerzaam proces. De keuze voor een retro-thema leek mij aan het begin minder werk dan het daadwerkelijk was. Door iteratieve ontwikkeling kon ik een website realiseren die zowel visueel aantrekkelijk als functioneel is. Ik heb vooral geleerd dat het soms voor dit soort projecten belangrijker is om aan de inhoud te werken dan aan het ontwerp. Omdat ik zelf voornamelijk een visueel denker ben gaat dit nog een uitdaging voor mij worden.
