Design Proces

Het design proces van mijn portfolio is begonnen met het maken van een moodboard. Hierin heb ik verschillende websites bekeken en gekeken naar de kleuren, de layout en de verschillende elementen die zij gebruiken. Ik heb dit gedaan om inspiratie op te doen voor mijn eigen portfolio.

Hieronder zijn de websites waarvan ik inspiratie heb op gedaan op het gebied van kleur en layout.

Hierna ben ik gaan kijken naar de verschillende elementen die ik wilde gebruiken in mijn portfolio. Ik heb dit gedaan door middel van een wireframe. Hierin heb ik de verschillende elementen geplaatst en gekeken naar de layouts van mijn portfolio. ik kreeg als feedback van Frank om hier naar te kijken omdat ik al een goed idee had hoe ik mijn portfolio wilde inrichten. De specifieke feedback was:

Na deze wireframes / layouts heb ik ook gekeken naar hoe het zou zijn om de wireframe in de kleuren te hebben die ik wilde gaan gebruiken.

Daarna ben ik gaan kijken naar welke lettertypes ik wilde gaan gebruiken in mijn portfolio. Ik had al een lettertype uitgekozen voor de wireframes / layouts en dit was Krona One. Alleen was die font alleen beschikbaar in 1 gewicht. Dit vond ik niet mooi om voor alles te gebruiken omdat ik dan niet genoeg variatie had.

Ik heb drie verschillende lettertypes gebruikt in mijn portfolio. Dit zijn Roboto, Roboto Condensed en Krona One. Deze lettertypes heb ik gekozen omdat ze goed passen bij de stijl van mijn portfolio. Roboto heb ik gebruikt voor de normale tekst, Roboto Condensed voor de titels van de normale tekst en Krona One voor de buttons en de grote titels.

Ik ben met mijn werk weer richting Bram gegaan voor feedback en hij zei dat ik wat miste qua kleur voor mijn design. Hij gaf als tip om paars toe te voegen als klein accent kleurtje. Dit heb ik toegepast op verschillende plekken.

• Underline onder feedback
• Accent kleur op de quick down button
• Accent kleur als underline per selector
• Accent kleur op navigatie underline
• Accent kleur op de active button in de footer

In de wireframes en eerste layouts zie je dat de navigatiebalk er nog anders uitzag dan in mijn uiteindelijke portfolio. Naarmate het project vorderde, heb ik het ontwerp aangepast.

Zo heb ik de navigatiebalk in het midden geplaatst en een ronding aan beide kanten toegevoegd. Daarnaast heb ik gekozen voor een glassmorphism-effect, omdat ik dat visueel aantrekkelijk vond en het goed paste bij de rest van het ontwerp. Dit kwam ook naar voren bij mijn moodboard.

Feedback & Usertests

Tijdens het designproces heb ik op verschillende momenten feedback gekregen. Die feedback heb ik gebruikt om mijn portfolio stap voor stap te verbeteren. Ik heb ook een aantal usertests gedaan om te kijken of alles een beetje logisch en gebruiksvriendelijk werkte. Helaas heb ik deze usertests niet concreet kunnen opschrijven omdat het meer peer-feedback was dat ik in de lessen tijdens het maken van mijn portfolio heb gekregen.

Eén van de dingen die uit de feedback naar voren kwam, was dat de leeruitkomsten-blokken eruitzagen als een slider. Mensen dachten dat je met de muis van rechts naar links kon swipen, terwijl dat eigenlijk niet de bedoeling was. Om die verwarring te voorkomen, heb ik bovenaan de pagina een korte uitleg toegevoegd waarin staat dat je gewoon naar beneden moet blijven scrollen. Zie plaatje.

Ook kreeg ik te horen dat de content op de projectpagina's te veel naar links stond, waardoor er een grote lege ruimte aan de rechterkant ontstond. Dat heb ik opgelost door de content naar het midden te verplaatsen. Dat ziet er nu een stuk strakker en evenwichtiger uit. Dit was feedback van Mette, Mette zit in semester 8 van Media & Design en heeft veel ervaring met het maken van websites.

Als laatste heb ik zelf ook nog wat dingentjes aangepast die ik niet als extra werk wilde toevoegen. Ik had namelijk langere tijd een About Me pagina. Deze heb ik verwijderd omdat ik daar niet veel focus op wilde leggen en dat het voor dit specifieke portfolio niet nodig was.

Versie Control Github

Ik heb bij mijn portfolio gebruik gemaakt van versie control. Ik heb het programma van git, Github gebruikt. Hierin zijn verschillende versies te zien hoe ik tot stand ben gekomen met het maken van dit portfolio.

Leeruitkomsten Slider

De Leeruitkomsten slider die je op de homepagina ziet van deze website heb ik gemaakt door middel van GSAP. Ik heb deze slider gebaseerd op de slider die op de website van Lenis staat.

Ik vond de layout van deze cards ook erg mooi omdat ze precies passen bij de leeruitkomsten. Wat er precies gebeurt is dat wanneer jij als gebruiker naar beneden scrolt, de slider in een horizontale scroll gaat.

Hieronder is de code te zien hoe ik de scrollanimatie heb gemaakt. Dit is gemaakt met GSAP, een animatie library.

Projecten Map Slider

Dit is de tweede slider op de index pagina. Deze slider heb ik gemaakt ter inspiratie van een slider die op de website van wyre.studiofright staat.

Ik heb deze scrollanimatie deels gemaakt door het bekijken van een youtube tutorial. Die maakte namelijk precies wat ik wilde maken en idee had om te doen.

Hieronder is de code te zien hoe ik de scrollanimatie heb gemaakt. Dit is ook gemaakt met GSAP.

Team Roles

Tijdens een workshop van Guido hebben we met onze groep verschillende rollen bepaald volgens de Theorie van Belbin. Deze heb ik aangewezen bij mezelf en bij mijn teamgenoten. Ook heb ik beschreven waarom deze rollen bij mij passen en waarom deze rollen bij mijn teamgenoten passen.

Hieronder zijn de teamrolles te zien die ik heb aangewezen bij mezelf en bij mijn teamgenoten. In het PDF hieronder wordt meer beschreven wat er besproken is in het overleg.

16 Personalities

De 16 Personalities test is een test die ik heb gedaan tijdens een workshop van Guido. Hierin ben ik erachter gekomen wat mijn eigen kernwaardes zijn, Welke kernwaardes andere van mij vinden en wat voor persoon ik zelf ben. De test wordt gebruikt om te bepalen wat voor soort persoon ik ben. Hiermee kan je namelijk beter bepalen hoe je ligt met andere mensen binnen de groep. Ook kan je hieruit afleiden wat voor persoon ik ben en wat voor persoon andere mensen binnen de groep zijn.

Hieronder zijn de resultaten van de test te zien. In het PDF hieronder wordt meer beschreven wat er besproken is in het overleg.

Toekomstige Plannen

Ik ben van plan om voor mijn toekomstige projecten en semesters richting de front-end kant van de ICT te gaan.

Ik ga nu semester 3 Front-end Developer doen. Dit past namelijk precies bij wat ik zoek voor de komende tijd en ik denk dat ik daardoor mijn kennis ga verbreden. Ik ben zelf vooral geïntereseerd in animaties op de website. Dit is nu een mega trend en denk dat dat de gebruikers ook aantrekt om mooie functionele websites te kunnen maken.

Ik ben er wel bewust van dat ik nog veel moet leren en dat ik zeker nog aan de start van mijn front-end carrière sta. Maar ik ben gemotiveerd om te blijven leren en mezelf te verbeteren. Ik wil mezelf verder gaan verdiepen in frameworks zoals Nuxt, Next, Svelte en Astro. Ook wil ik meer leren over animaties en hoe ik deze kan toepassen in mijn projecten zoals GSAP. Ik ben er van overtuigd dat ik met de kennis die ik heb opgedaan in dit semester een goede basis heb gelegd voor mijn toekomst als front-end developer.

Daarnaast wil ik ook graag dingen gaan leren over databases en Back-end zodat als klanten in de toekomst hierom vragen dat ik ook weet hoe ik daar mee om moet gaan. Heb nu vooral met Javascript gewerkt maar wil ook met Typescript gaan werken en snappen hoe dat allemaal werkt. OOk ben ik benieuwd naar authenticatie en hoe dat allemaal werkt. Dit is namelijk ook een belangrijk onderdeel van het web in het algemeen. Om je gebruikers veilig jou app te kunnen gebruiken.

Om af te ronden: voor dit portfolio heb ik gebruikgemaakt van Nuxt, GSAP, ThreeJS en Tailwind. Deze tools en frameworks beschouw ik als industriestandaarden, en ik ben blij dat ik er nu al mee heb gewerkt of er in ieder geval al wat ervaring mee heb opgedaan.

Tijdens Career Day merkte ik echter dat bijna elk bedrijf dat op zoek is naar stagiairs vooral werkt met Next.js in combinatie met React, of met React Native voor mobiele apps. Daarom wil ik me volgend semester gaan verdiepen in Next.js. De structuur van dat framework lijkt gelukkig veel op die van Nuxt, dus ik verwacht dat ik het redelijk snel onder de knie zal krijgen.