Portfolio

Idee fase

Inspiratie portfolio's

Ik heb mij georiënteerd op wat anderen voor hun portfolio hebben gemaakt en daaruit een selectie samengesteld die ik zelf inspirerend vond.

Uiteindelijk heb ik elementen van de website van Sin Tesis Studio als inspiratie gebruikt voor mijn portfolio.

Het idee

Ik heb met Evy besproken wat mijn plannen waren voor mijn portfolio, maar gaf aan dat ik nog niet precies wist hoe ik dit wilde verwerken. Zij kwam met het idee om te werken met een pad waarlangs de opdrachten en leeruitkomsten gepresenteerd worden. Vervolgens stelde ik voor om als richtingsaanwijzer een ‘ouderwetse’, typische wandelrichtingspijl te gebruiken, passend bij het thema. Om een beter beeld te krijgen van de stijl die ik voor mijn portfolio wil hanteren, heb ik een moodboard gemaakt.

Moodboard

Hierna hebben wij les gehad van Bram, waarin hij uitlegde dat moodboards vaak te druk worden doordat er veel soortgelijke afbeeldingen in staan. Hij gaf aan dat het beter is om van elk element slechts één afbeelding te gebruiken, zodat je een rustiger en duidelijker beeld krijgt. Op basis van die feedback heb ik uit mijn eerdere moodboard de afbeeldingen geselecteerd die niet te veel op elkaar lijken, zodat ik mijn moodboard op een rustige en overzichtelijke manier kan presenteren.

Deze afbeeldingen heb ik verwerkt in een nieuw moodboard. In elke hoek staat een seizoen: ik begin met de herfst en eindig met de zomer, wat ook het seizoen is waarin ik mijn semester afrond. In de vier hoeken heb ik dus de seizoenen geplaatst. Boven- en onderaan in het midden heb ik natuurbeelden toegevoegd die mij aanspreken, maar die elkaars tegenpolen zijn—net als de beelden links en rechts. Mijn idee is om dit thema eventueel door te trekken naar de rest van de pagina’s. Het is voor mij nog niet zeker hoe ik mijn homepage eruit wil laten zien. Elk project krijgt een eigen seizoen als thema. De afwijkende pagina’s, zoals de leeruitkomsten en de homepage, krijgen hun eigen unieke uitstraling. Ik twijfel nog tussen een one-pager of losse pagina’s, maar voor nu kies ik ervoor om meerdere pagina’s te maken. Een mogelijk idee is dat je op de homepage start met een animatie waarin je neerdaalt vanuit de lucht, of waarin de overgang van nacht naar dag plaatsvindt. Vervolgens ‘bewandel’ je de pagina en verandert het seizoen. Bij elk project wil ik een kleine animatie toevoegen: in de herfst dwarrelende bladeren, in de winter sneeuwvlokken, in de lente bloemblaadjes en in de zomer zonnestralen.

Omdat ik op elke pagina een seizoen wil weergeven, wil ik de pagina’s niet te druk maken. Daarom heb ik gekozen voor een rustig en veelgebruikt lettertype: Open Sans. Dit lettertype is goed leesbaar op het internet en heeft een neutrale, maar vriendelijke uitstraling. Die eigenschappen sluiten aan bij het gevoel dat ik met mijn portfolio wil overbrengen. In mijn moodboard wilde ik dit niet alleen laten zien met de standaard tekstweergave (AaBbCc), maar juist ook het gevoel overbrengen. Daarom heb ik gebruikgemaakt van quotes, zodat het lettertype direct in de juiste context en sfeer wordt weergegeven.

Ik gebruik Open Sans als leestekst, maar ik wil daarnaast ook een mooie typografie voor titels en eventueel een aparte typografie voor tussenkoppen. Ik ben begonnen met mij hierin te oriënteren en heb de gekozen typografieën weergegeven. Verder heb ik voor elke pagina een apart kleurenpalet gekozen dat aansluit bij het gekozen seizoen. Deze kleurenpaletten heb ik op mijn moodboard geplaatst, zodat ik een goed beeld krijg van wat bij mijn thema past.

Typografie

Ik had de verschillende typografieën voor de titel op het moodboard geplaatst om te kijken of deze bij de sfeer van het moodboard passen. Daarna heb ik de typografieën los van het moodboard gehaald om kritischer naar de verschillende opties te kijken en een selectie te maken. Toen ik tot een kleiner aantal was gekomen, heb ik deze opnieuw op het moodboard geplaatst om de keuze makkelijker te maken. De definitieve typografie en kleuren heb ik vervolgens op het moodboard gezet, zodat in één oogopslag duidelijk is welke sfeer ik met mijn moodboard wil overbrengen.

Daarna heb ik alle lettertypen op een lege pagina geplaatst en heb ik de verschillende fonts gegroepeerd en per groep afgekruist. Na dit proces heb ik twee typografieën overgehouden. Ik heb gekozen voor Cherry Swash, omdat het een goed leesbaar lettertype is en de ronde vormen een fantasierijke sfeer oproepen die aansluit bij het thema. De andere typografie viel af omdat deze zonder een duidelijke achtergrond niet goed leesbaar was.

Hierna ben ik begonnen met het juist positioneren van de titeltypografie in het moodboard. Daarnaast wilde ik de kleuren ook sorteren op hoofdkleuren en accentkleuren.

Hierna heb ik een gesprek gehad met Bram. Hieruit kwam naar voren dat het, gezien mijn privésituatie, lastig kan worden om mijn oorspronkelijke idee volledig uit te voeren vanwege tijdgebrek. Het is dan beter om te beginnen met een simpel design en dit later uit te breiden wanneer er tijd over is. Daarom heb ik besloten om het idee, dat oorspronkelijk bedoeld was voor de homepage, projectpagina of leeruitkomstenpagina, te gebruiken voor mijn hele portfolio. Hierdoor heb ik ook mijn typografie aangepast naar Syncopate, omdat deze moderner en stadsachtig oogt. De dunne, uitgespreide letters geven een rustige en moderne uitstraling.

Schetsen

Nadat ik mijn schetsen had gemaakt, bleef ik twijfelen over wat voor soort navigatiebalk ik wilde gebruiken: hangende stoplichten, een stoplicht aan de zijkant? Daarna kwamen er meerdere ideeën. Ik dacht bijvoorbeeld aan een hamburger¬menu dat eruitziet als een stoplicht. Maar dat is misschien te onduidelijk en dus niet gebruiksvriendelijk. Vervolgens kreeg ik het idee dat, omdat ik te veel menu-items heb om in een stoplicht te verwerken, ik beter wegwijzers kan gebruiken.

Wireframes

Ik heb besloten om rechte hoeken te gebruiken, omdat het ontwerp bedoeld is voor desktop én omdat ik een moderne stad in de nacht wil nabootsen. Een strak design wordt vaak geassocieerd met rechte hoeken, wat goed past bij de sfeer die ik wil creëren.

Ik wist nog niet zeker hoe ik mijn navigatiebalk wilde weergeven. Eventueel alleen de projecten en leeruitkomsten in een sticky navigatie (in de vorm van stoplichten), of een dubbel stoplicht aan de linkerzijkant.

Oorspronkelijk was het idee om de kopjes uit te lijnen over een bord of brug heen. Dit kan nog steeds, maar het is makkelijker om ze horizontaal te plaatsen. Ten eerste is dit eenvoudiger om te maken, en ten tweede komen er verder geen schuine vlakken of teksten in voor, waardoor het anders uit de toon zou vallen.

Over de breedte van de tekst: deze was eerst 50/50 verdeeld, maar hierdoor bleef er te weinig ruimte over voor de bus. Daarnaast heb ik tijdens de uitleg van Bram geleerd dat het oog geen voorkeur heeft voor een exacte 50/50-verdeling, maar juist voor een iets afwijkendere verhouding, zoals 33/66. Daarom heb ik ervoor gekozen om mij daaraan te houden.

Er zit te weinig ruimte tussen de leeruitkomsten, waardoor het geheel te druk oogt. Ik wil ook weer niet te veel ruimte ertussen laten, omdat ik al veel witruimte gebruik en je dan onnodig veel moet scrollen – wat niet gebruiksvriendelijk is. Toch oogt het beter om iets meer ruimte toe te voegen, zodat je het gevoel krijgt mee te reizen met de bus. Ik wil dat de gebruiker op ‘reis’ gaat in plaats van simpelweg een website te bezoeken.

Eerst had ik twee grid-vakken ruimte tussen de navbar en de projectbeschrijving. Om de illustratie beter tot zijn recht te laten komen, zonder dat het te druk wordt, heb ik dit aangepast naar drie vakken.

Ik heb gekeken naar de positionering van de projecten, omdat er ondanks de verschillende thema's toch een visuele samenhang moet zijn. Drie van de vier projecten waren links-midden gepositioneerd en één project rechts-midden. Daarom heb ik besloten om dit te spiegelen (zie wireframe: project met plein).

Om de balans te behouden, heb ik ook de ruimte tussen de tekst en het resultaat vergroot.

Daarna ben ik met verschillende kleuren gaan experimenteren. Ik vroeg mij af: wat als ik de kleuren van vaste elementen dezelfde kleuren geef als een stoplicht? Dus bijvoorbeeld de navigatiebalk rood, de tekstgedeeltes geel of oranje, en de footer groen. Of misschien juist blauw, als verwijzing naar de lucht bovenaan de pagina.

Ik heb met verschillende kleurcombinaties geëxperimenteerd, maar sommige varianten riepen de zorg op dat het kleurenpalet te 'lego-achtig' en kinderlijk oogde. Laurens bevestigde deze zorg door te zeggen: 'Het ziet er inderdaad kinderlijk uit en doet denken aan Lego. Het heeft zelfs iets weg van de uitstraling van McDonald’s.’

Ik heb als tip gekregen om Real Time Colors te gebruiken om een goed kleurenpalet samen te stellen. Hiermee heb ik gekeken naar kleuren die goed bij elkaar passen en een rustige, mysterieuze uitstraling hebben.

Hierna heb ik feedback gevraagd aan Bram. Hij gaf aan dat het, gezien het tijdgebrek, verstandiger is om een inspiratiesite na te maken. Op basis daarvan heb ik de volgende wireframes gemaakt.

Ik heb nagedacht over de schets voor de losse projectpagina. Deze blijkt overbodig, aangezien alle projecten al in de carrousel staan. Bij het onderdeel ‘Projecten’ heb ik naar de schets gekeken en besloten dat het beter is om één groot tekstvlak te gebruiken. Zo kun je een uitgebreider verhaal kwijt, zonder dat de zinnen te kort worden.

Ik heb gekeken naar het patroon van de leeruitkomsten. Er staan nu twee horizontale balken met quotes direct achter elkaar, maar dit oogt niet mooi omdat het patroon niet wordt herhaald.

Ook heb ik gekeken naar de eerste drie leeruitkomsten: bij de eerste staat de tekst links, bij de tweede rechts en bij de derde in het midden. Daarom zou het logischer zijn om de vierde weer links uit te lijnen en de vijfde, die nu ook links staat, juist rechts uit te lijnen. Daarna wil ik nog onderzoeken of dit aansluit bij de verschillende manieren waarop mensen een website lezen, zoals de Z- of F-leesstijl.

Designs

Ik heb naar de headers gekeken en merkte op dat de ene hoger gepositioneerd lijkt dan de andere, terwijl dit technisch gezien niet het geval is. Daarna heb ik verschillende uitlijningen van de headerafbeeldingen uitgeprobeerd en hieruit een selectie gemaakt.

Ik heb de geschreven tekst toegevoegd en vervolgens de uitlijning van de secties aangepast. Daarna heb ik gekeken naar de verschillende afbeeldingen en opgemerkt dat deze niet overal dezelfde grootte hebben. Om een rustige site te creëren, is het tot op zekere hoogte belangrijk dat er een patroon in terug te vinden is. Ook merkte ik dat de verwoording van de leeruitkomsten anders was dan op de index- en leeruitkomstenpagina. Dit heb ik aangepast, en daarnaast de titels goed uitgelijnd. Op de leeruitkomstenpagina heb ik witte lijnen toegevoegd zodat de stijl aansluit bij de andere pagina’s. Tot slot heb ik in de ontwerpen de afbeeldingen aangepast zodat deze beter bij elkaar passen.

Feedback Bram

Gebruik een aantrekkelijke koptekst, lijn deze links uit en verklein het lettertype zodat de tekst op de indexpagina in twee zinnen past. Maak de hamburgerknop even dik als ‘Dominique’ en lijn ‘Dominique’ rechts uit. Zorg er bij de leeruitkomsten voor dat er evenveel ruimte tussen zit. Verdeel de leestekst in alinea’s, zodat het prettiger leest. In verband met tijdgebrek ga ik op dit moment niet verder met het design, maar begin ik met het bouwen. Wel pas ik nog de lettergrootte en positionering van de koptekst aan. Het is belangrijk om de koptekst aan te passen, omdat deze er nu wat ‘levenloos’ uitziet en als het ware ‘opgeplakt’. Door kleine aanpassingen te doen, kan ik ervoor zorgen dat de tekst meer tot leven komt en er echt uitspringt. Zo vormen de foto en tekst samen een geheel. Wanneer ik de hamburgerknop even dik maak als ‘Dominique’ en deze naam rechts uitlijn, zorgt dat voor symmetrie – iets wat mensen onbewust als prettig en esthetisch ervaren. Om dezelfde reden is het belangrijk dat de verticale lijnen van de leeruitkomsten op de indexpagina op gelijke afstand van elkaar staan. Mensen willen liever geen lange lappen tekst lezen; dan haken ze snel af. Door de leestekst op te delen in alinea’s, maak ik het leesbaarder en prettiger voor de gebruiker.

Samenvatting tot dusver

Ik ben begonnen met het idee om elk project een seizoen te laten zijn en dat je dit bewandelt als een pad. Hier heb ik een moodboard voor gemaakt. Tijdens dit proces heb ik uitleg gekregen over hoe je op de juiste manier moodboards maakt, en hierop heb ik mijn moodboard aangepast. Daarna heb ik voor elk seizoen drie kleuren gekozen die worden weergegeven op de desbetreffende pagina. Ik ben begonnen met het vinden van een typografie die past bij elk seizoen en niet te druk is. Daaruit is het font ‘Cherry Swash’ gekomen.

Vervolgens ben ik in gesprek gegaan en kwam naar voren dat ik het te ingewikkeld aan het maken was en het beter kleiner kon aanpakken. Ik heb besloten om verder te werken met een ‘Night City’-thema en heb hiervoor opnieuw een moodboard gemaakt. Ik heb schetsen en wireframes gemaakt. In elk project kwam een stuk ‘Night City’ terug en kon je door de projecten een weg volgen. Hier heb ik verschillende iteraties voor gemaakt en ik was net begonnen met de designfase, totdat ik opnieuw het advies kreeg om het kleiner aan te pakken.

Ik heb vervolgens gebruikgemaakt van een inspiratiesite en dit gecombineerd met mijn moodboard. Hier heb ik nieuwe schetsen en wireframes voor gemaakt. Dit keer ben ik verder gegaan met het ontwerpen. Ik ben begonnen met het toevoegen van headerfoto’s en het aanpassen van de achtergrondkleur. Ik merkte dat de positionering van de headerfoto’s invloed had op hoe de koptekst eruitzag. Hierdoor kwam de tekst niet overal gecentreerd over, hoewel dit technisch wel het geval was.

Door middel van verschillende versies ben ik tot een eindversie gekomen. Daarna heb ik de geschreven tekst in mijn design verwerkt om te zien hoeveel ruimte dit innam, en heb ik hier mijn designs op aangepast. Daarnaast heb ik gezorgd voor meer samenhang door op elke pagina gebruik te maken van witte lijnen.

Reflectie

Ik ben begonnen met het schetsen en verwoorden van mijn idee voor mijn portfolio. Daarna ben ik gestart met het uitwerken van mijn eerste concept. Tijdens dit proces werd mij aangeraden om het kleiner aan te pakken. Daarom heb ik in plaats van een ‘vier seizoenen’-thema gekozen voor een ‘Night City’-thema. Ook tijdens dit proces kreeg ik opnieuw het advies om het kleiner te houden en gebruik te maken van een inspiratiesite.

Ik vind het jammer dat ik door tijdgebrek mijn originele ideeën niet volledig heb kunnen uitwerken, maar ik vond het ook interessant en leerzaam om te werken met een inspiratiesite. Hierdoor kreeg ik inzicht in hoe anderen hun website hebben ontworpen en heb ik meer kennis opgedaan over wat er allemaal mogelijk is en hoe ik dit kan toepassen op mijn eigen portfolio. Het heeft mijn horizon verbreed.

Als ik terugkijk op het proces van mijn portfolio, zie ik hoe ik me heb ontwikkeld en welke weg ik heb afgelegd. Hoewel ik het leuk vind om mijn eigen designs te maken en uit te werken, denk ik dat het in de toekomst erg behulpzaam kan zijn om vaker gebruik te maken van inspiratiesites.

Daarnaast vind ik het lastig om mijn bewijslast bij de leeruitkomsten goed weer te geven; ik heb moeite om hier overzicht en richting in te vinden.

Als ik meer tijd had gehad, zou ik graag meer gebruikerstests hebben uitgevoerd op mijn portfolio. Dan had ik het op tijd kunnen aanpassen op punten die niet vloeiend liepen. Dit had bijvoorbeeld gekund door middel van een interactief Figma-bestand.