Mijn eigen portfolio ontwerpen
Ik ontwierp en bouwde zoe-alessandro.com om mijn fotografie te presenteren, mijn andere werk toe te lichten en aanvragen makkelijk te maken. Dit zijn de keuzes achter de site die je nu gebruikt.
De vraag
Een plek voor mijn foto’s.
Ik had een plek nodig waar iemand mijn foto’s kon bekijken, kon zien waarvoor die bij me terechtkan en contact kon opnemen. Ook de website zelf wilde ik als project laten zien. Daarom heeft elk onderdeel een eigen plek.
- Fotografie staat voorop op de homepage en heeft een eigen overzicht.
- Mijn websiteaanbod en bouwkundige achtergrond hebben aparte pagina’s.
Vereenvoudigd ontwerpvoorbeeld
Van inhoud naar een pagina-indeling.
Met mijn foto’s laat dit vereenvoudigde voorbeeld zien hoe een pagina ontstaat. Kies een fase en vergelijk de volgorde, indeling, kleuren en verschillende schermformaten.
-
Introductie · foto’s · contact
Wat komt er op de pagina?
Ik begin bij wat iemand wil weten. Hier betekent dat een korte introductie, foto’s om te bekijken en een manier om naar een shoot te vragen.
- Vertellen wie de fotograaf is
- Een selectie foto’s laten zien
- Makkelijk contact kunnen opnemen
-
Beeldformaat · leesvolgorde · ruimte
Waar krijgt alles een plek?
Voordat ik kleuren kies, bepaal ik hoeveel ruimte elk onderdeel nodig heeft. De foto’s moeten groot genoeg zijn om goed te bekijken, en de introductie moet daar ruimte voor laten.
- De openingsfoto ruimte geven
- Tekstregels prettig leesbaar houden
- Onderdelen die bij elkaar horen samen zetten
-
Letters · kleur · foto’s
Het uiterlijk kiezen
Ik koos een donkere achtergrond zodat de kleuren in mijn foto’s opvallen. Warme accenten markeren links en kleine details; dezelfde letters en afstanden verbinden de pagina’s.
- Leesbare koppen en lopende tekst
- Een donkere achtergrond met warme accenten
- Voldoende ruimte rondom elke foto
-
Desktop · tablet · mobiel
Verschillende schermen
Het voorbeeld krijgt een andere indeling op kleinere schermen. Foto’s en tekst houden hun leesvolgorde, met meer ruimte per onderdeel op mobiel.
- Beelden onder elkaar op kleinere schermen
- Links en knoppen werken met toetsenbord en aanraking
- De inhoud blijft leesbaar zonder animatie
Eén paginavoorbeeld, op vier momenten in het ontwerpproces.
Keuze 01
Laat de foto’s het verhaal vertellen.
Een donkere achtergrond geeft de kleuren en het licht in de foto’s ruimte. Bijschriften staan onder de beelden en je kunt elke foto groter openen. Een korte toelichting vertelt over het onderwerp, zonder dat je eerst een lang verhaal hoeft te lezen.
Keuze 02
Ook op je telefoon moet het kloppen.
Onderdelen die naast elkaar staan, krijgen op een kleiner scherm één leesvolgorde. Beelden laden op een formaat dat bij het scherm past en de navigatie blijft bereikbaar. Nederlandse koppen vragen apart aandacht: ze nemen vaak meer ruimte in dan de Engelse versie.
Keuze 03
Maak het eerste bericht makkelijk.
Je hoeft alleen een naam, e-mailadres en bericht in te vullen. Extra vragen staan in een optioneel onderdeel en passen zich aan het soort aanvraag aan. Iemand met een eerste idee kan daardoor net zo goed een bericht sturen als iemand met een uitgewerkt plan.
Technische implementatie
Gebouwd met Astro en TypeScript.
Het resultaat
Wat het portfolio vandaag doet.
Het resultaat is een werkend portfolio in het Engels en Nederlands, met fotoseries, interactieve demonstraties en een formulier dat zich aanpast aan het soort aanvraag.
- Volledige Engelse en Nederlandse pagina’s met wederzijdse taalverwijzingen.
- Fotogalerijen met toetsenbordbediening.
- Een demonstratie van responsive websitebouw en een gelabeld workflowconcept.
- Een contactformulier voor fotografie-, website-, workflow- en samenwerkingsvragen.
Jouw website
Een eigen website in gedachten?
Deel wat je doet, voor wie de site is en wat er al ligt. Dan bespreken we een passende eerste stap.
Bespreek jouw website