Portfoliocode

Het ontwerpproces van mijn portfolio website

Bij het schetsen van mijn showcase website heb ik een aantal ontwerpvragen gesteld. Deze ontwerpvragen waren:

Hoe kan ik mijn website een persoonlijke uitstraling geven?
Hoe kan ik mijn website bijzonder maken?
Hoe kan ik mijn website een duidelijke en gebruiksvriendelijke uitstraling geven?
Hoe kan ik mijn website een goede balans geven in de lay-out?

Ik heb eerst fysiek geschetst. Toen ik genoeg geëxperimenteerd had met verschillende lay-outs heb ik geprobeerd de schetsen om te zetten in mid fidelity. Dit heb ik gedaan met AdobeXD, maar digitaal kreeg ik toch een heel ander gevoel bij mijn design dan bij mijn fysieke schetsen. Na lang worstelen met verschillende ideeën heb ik gekozen om de template van OnderwijsOnline te gebruiken als basis. Deze heb ik uiteraard aangepast naar mijn eigen smaak en ideeën. Ik heb hier geprobeerd te letten op de balans en het kleurgebruik in mijn portfolio. Ik wilde graag dat mijn website een persoonlijk, rustig, maar geen leeg gevoel geeft

De mid fidelity schets heb ik door een aantal peers laten testen. Ik startte het interactieve design op de homepage en vroeg of ze de website wilden rondkijken zoals ze dat normaal gesproken ook zouden doen. Na deze gebruikerstest kwam ik achter een aantal problemen. Ik kreeg feedback over; kleurgebruik, pagina’s en tekst. De homepage achtergrond was één kleur, daardoor was voor mijn testpersonen niet duidelijk dat zij op de pagina naar beneden konden scrollen voor meer content. Ook paste het kleurenschema dat ik gebruikte niet echt bij mij. Op heb moment dat mijn testpersonen mijn portfolio pagina bekeken viel ze nog iets op. Mijn persoonlijke werk en mijn schoolwerk stonden op één pagina, zonder duidelijk onderscheid. De tip die ik kreeg was dat ik door middel van twee aparte portfolio pagina’s, één voor eigen werk en één voor schoolwerk, een duidelijk onderscheid kon maken tussen de twee kanten van mijn portfolio. Het laatste punt van kritiek ging over mijn tekst. De tekst stond telkens in het midden van de pagina’s, waardoor het een erg saai beeld werd om naar te kijken. Ook paste mijn gebruikte lettertype niet goed bij de rest van mijn ontwerp.

Toen ik een beter idee had van wat ik wilde met mijn kleur, lettertype en lay-out, heb ik een aantal afbeeldingen gezocht die ik (voorlopig) wil gebruiken in ieder geval op mijn homepage en ben ik begonnen aan mijn high fidelity schets. Mijn laatste schets heb ik aangehouden bij het maken van mijn website in HTML en CSS. Terwijl ik aan het coderen was merkte ik dat ik het belangrijker vond om eerst mijn website werkend te maken. Daarom heb ik onderweg mijn schetsen een beetje achter mij gelaten en heb ik in HTML/CSS mijn ontwerp anders aangepakt. Uiteindelijk ben ik redelijk tevreden met hoe mijn website er nu uitziet, ookal is het nog niet wat het moet zijn.