Okan

Portfolio Link

Het portfolio is toegankelijk via de volgende Git repository:

Logo Design

Tijdens de les van Bram kregen we de opdracht om binnen een korte tijd een naamlogo te ontwerpen dat geschikt zou zijn voor de portfolio website. De designs was geïnspireerd op bekende woordmerken zoals Zara, Prada en Sony, die werken met minimalistische maar krachtige typografische oplossingen. We mochten niet langer dan vijf minuten per versie werken, waardoor de nadruk lag op snelheid, gevoel en eerste ideeën.

Ik begon met het verkennen van verschillende typografische stijlen voor mijn naam "OKAN". Hierbij wilde ik ontdekken welke uitstraling het beste past bij wie ik ben: strak, krachtig, experimenteel maar ook gestructureerd. In korte tijd maakte ik meerdere logo's met verschillende fonts: van geometrisch en futuristisch tot klassiek en serif-geïnspireerd.

Deze eerste fase was vooral gericht op variatie en het snel vastleggen van verschillende stemmingen en sferen. Elk logo gaf weer een andere indruk van robuust en zwaar, tot licht en stijlvol.

Geselecteerd Ontwerp

Na de feedback van Bram bleek dat één logo eruit sprong: een vet, hoekig geometrisch ontwerp met afgeronde hoeken. Dit logo straalt kracht en duidelijkheid uit. Volgens Bram had dit logo de meeste herkenbaarheid en karakter, iets wat belangrijk is bij een persoonlijk merk.

Finale Evolutie

(update) Later besloot ik toch verder te gaan met dit logo en het op een speelse manier te deconstrueren. Dit leidde tot een reeks nieuwe experimenten waarin ik de letters uit het logo los trok, roteerde en herschikte.

Mijn idee is om deze laatste logo-versie te gebruiken op mijn portfolio-website. Het logo zijn niet alleen de letters van mijn naam, ook heeft het een andere betekenis: Aim, Klikken en Navigeren de onderdelen dat terug komt op mijn portfolio.

Wireframes

Het ontwerpproces begon met het maken van wireframes om de basisstructuur van de website te definiëren.

Inspiratie en Concept

Het idee voor mijn portfolio-website is ontstaan uit een elementen van shooting game, en een speelse. Ik denk aan websites uit het vroegere internettijdperk, gecombineerd met interactiviteit en humor. Ik denk niet dat er een soortgelijke website bestaat althans ik heb geen directe inspiratie van andere sites gehaald. Ik heb veel Call of Duty gespeeld en het idee dat je om iemand kan richten en schieten komt wellicht daar vandaan.

Mogelijk komen er in de toekomst meer verborgen easter eggs zoals andere scopes, geluid en levels. Deze elementen wilde ik combineren met een professioneel portfolio-gevoel om een unieke gebruikerservaring te creëren die zowel informeert als entertaint.

Basisstructuur Wireframes

Ik begon met ruwe wireframes in zwart-wit, waarin de basisstructuur van de website zichtbaar werd:

• Een duidelijke navigatiebalk bovenaan (logo, menu-items en een darkmode-toggle).
• Een welkomstbericht centraal op de homepage.
• Zwevende hoofden (mijn eigen afbeelding) als speels visueel element dat later als interactief "easter egg" kon dienen.
• Een cursor in de vorm van een richtkruis, waarmee je eventueel op de zwevende elementen kunt klikken of "schieten".

Het idee hierachter: je komt op een pagina die niet direct traditioneel is, maar wel boeiend en persoonlijk voelt.

Projectpagina Concept

De tweede wireframe toonde hoe de projectpagina (zelfde voor de leeruitkomsten) eruit zou zien:

• Projectkaarten (1 t/m 4) in een grid-indeling.
• De zwevende hoofden blijven aanwezig om de stijl en identiteit van de homepage door te trekken.
• De actieve navigatieknop wordt opgelicht als een Hover functie
• De derde wireframe bevatte een lezer-geïnspireerd documentvenster voor elk project:
• Een grote tekstcontainer, met scrollfunctie (zoals een PDF-reader).
• Een duidelijke terug-knop naar de vorige pagina.
• Alles in dezelfde visuele stijl: strak, functioneel

Voor in de toekomst mits er tijd voor is, een zoek functie of highlights om zo sneller iets terug te kunnen vinden.

Uitgewerkt Prototype

In het uitgewerkte prototype zijn de ideeën verder uitgewerkt tot een dynamische interface:

• Dark mode / Light mode toggle: gebruikers kunnen schakelen tussen twee thema's.
• Object toggle functie: zwevende elementen veranderen van één type (bijv. alleen gezichten) naar meerdere soorten (maskers, figuren, emoji's) om de visuele ervaring te verrijken.
• De interface blijft strak, maar door de interactieve elementen voelt het persoonlijker en speelser aan.

De combinatie van minimalistische interface met absurde en interactieve elementen zorgt ervoor dat mijn portfolio opvalt tussen andere. Het maakt nieuwsgierig, maar blijft functioneel genoeg om mijn projecten duidelijk te presenteren.

Ontwerp VOOR de feedback

Gebruikerstesten Portfolio Website

Prototypekeuze (Gebruikerstest 1)

Om een beslissing te kunnen maken tussen het klassieke (prototype 1) en het speels interactieve ontwerp (prototype 2), heb ik een kleinschalige gebruikersonderzoek uitgevoerd. In totaal namen 6 deelnemers deel, bestaande uit studiegenoten, vrienden en een externe gebruiker die ervaring heeft met portfolio's ontwerpen (semester 3 leerling).

Testopzet:

• Beide prototypes werden kort gepresenteerd
• Gebruikers kregen tijd om de designs te bekijken
• Daarna beantwoordden ze 3 vragen:
  1. Welk ontwerp spreekt je het meest aan en waarom?
  2. Welke site zou je langer blijven verkennen?
  3. Wat voelt moderner en creatiever aan?

Resultaten:

• Prototype 1 (klassiek): 1 voorkeur – "Duidelijk en rustig, maar een beetje saai."
• Prototype 2 (interactief): 5 voorkeuren – "Uniek, speels, verrassend", "Ik krijg zin om verder te klikken", "De cursor en zwevende hoofden maken het heel eigen."

Conclusie: De meerderheid gaf aan dat prototype 2 veel beter bij mij past. Het combineert persoonlijkheid met creativiteit zonder de gebruiksvriendelijkheid te verliezen. Daarom is dit de versie waarmee ik doorga.

Kleurkeuze Resultaat (A/B/C Test)

In een visuele A/B/C-test zijn drie kleurvarianten van de homepage voorgelegd aan dezelfde testgroep van 6 deelnemers.

Test Resultaten:

• Variant A: Felroze achtergrond met gele tekst – "Te fel, voelt amateuristisch" (0 stemmen)
• Variant B: Zwarte achtergrond met witte tekst – "Te standaard, lijkt op elke andere site" (2 stemmen)
• Variant C: Donkerblauwe achtergrond met felblauwe accenten – "Modern, uniek en prettig voor de ogen" (4 stemmen)

Gekozen kleur: Variant C. Deze kleurstelling werd ervaren als professioneel én onderscheidend. De combinatie van blauw op blauw geeft een rustiger gevoel, zonder dat het saai wordt.

Functiekeuze / Interactieve Elementen

De interactieve functionaliteiten zijn belangrijk voor mijn identiteit als maker: ik wil verrassen, spelen met conventies en bezoekers laten interacteren met mijn werk.

Geplande Functies:

1. Zwevende objecten toggle: Bezoekers kunnen switchen tussen verschillende soorten zwevende objecten (hoofden, maskers, emojis)
2. Dark mode / Light mode toggle: Gebruiker kan zelf wisselen tussen lichte en donkere versie van de site

Implementatie beslissing: Uiteindelijk maar voor één toggle gekozen, omdat het hebben van twee toggle knoppen de website verstoort naar mijn mening. In plaats daarvan zijn 3 verschillende zwevende objecten standaard geïmplementeerd.

Reden voor keuze: Versterken de ervaring en zorgen voor interactie met de omgeving, iets dat mijn concept "Aim, Klikken, Navigeren" versterkt.

Samenvatting Gebruikerstesten

• Prototype 2 is gekozen op basis van user testing: speels, uniek, interactief
• Kleurvariant C sluit het beste aan bij mijn merkidentiteit: creatief, modern en prettig in gebruik
• Één toggle functie word opgenomen, 3 verschillende zwevende objecten zijn standaard

Implementatie van Gebruikerstest Resultaten

Na de gebruikerstesten heb ik de volgende aanpassingen doorgevoerd:

• Design keuze: Definitief gekozen voor het interactieve prototype op basis van 5/6 positieve stemmen
• Kleurschema: Donkerblauwe basis met felblauwe accenten geïmplementeerd
• Interactieve elementen: Dark/light mode toggle toegevoegd, zwevende elementen gestandardiseerd
• Gebruikerservaring: Focus op speelse maar functionele navigatie

Deze keuzes sluiten aan bij mijn doel om een portfolio te maken dat opvalt, bij mij past en waarin je letterlijk door mijn wereld navigeert.

Feedback Verwerking

Checkpoint 7 (15-04-2025)

Bij deze ronde heb ik om feedback gevraagd op mijn portfolio. De belangrijkste punten:

Kleurgebruik: de huidige tint roept niet de gewenste sfeer op; er is behoefte aan een nieuw kleurenpalet.

Tekstlengte vs. kader: per project staat er te veel tekst in te kleine, vierkante kaders. Daardoor oogt het geheel niet aantrekkelijk en is de leesbaarheid laag.

Checkpoint 8 (22-04-2025)

Ik heb de vorige feedback verwerkt en een nieuwe stijl gepresenteerd. Punt van aandacht:

'Cleaner' uitstraling: de opzet ziet er al beter uit, maar nog strakker ontwerpen

Achtergrondelementen: de zwevende hoofden op de achtergrond trekken teveel aandacht en belemmeren de focus op andere onderdelen. Overweeg om die elementen op een aparte pagina te plaatsen, zodat je elders meer ontwerpruimte hebt.

Implementatie van Gebruikerstest Resultaten

Na de gebruikerstesten heb ik de volgende aanpassingen doorgevoerd:

• Design keuze: Definitief gekozen voor het interactieve prototype op basis van 5/6 positieve stemmen
• Kleurschema: Donkerblauwe basis met felblauwe accenten geïmplementeerd
• Interactieve elementen: Dark/light mode toggle toegevoegd, zwevende elementen gestandardiseerd
• Gebruikerservaring: Focus op speelse maar functionele navigatie