Wireframes en Userflow
Op deze pagina geef ik meer diepgang aan de opbouw van mijn portfoliowebsite, waarom ik voor dit thema heb gekozen en welke extra plugins ik heb toegevoegd.
Welk thema heb ik gebruikt op mijn website?
Voor mijn portfoliowebsite heb ik gewerkt met het thema Astra, een van de meest gebruikte thema’s voor websites die zijn gecreëerd via WordPress. De reden dat ik voor dit thema heb gekozen, is dat het compatibel is met veel plugins. Hierdoor kon ik eenvoudiger templates installeren die ik kon gebruiken voor de opbouw van mijn website. Zo kon ik goed voorkomen dat ik later in het proces tegen fouten of problemen zou aanlopen die vertraging konden opleveren.
Wat voor extra plugins heb ik naast de benodigde plugins toegevoegd?
UAE
Een plugin waarmee ik toegang kreeg tot extra gratis elementen die ik kon toevoegen aan de website. Met deze plugin heb ik bijvoorbeeld mijn social embedded video’s kunnen toevoegen.
Starter Templates (by Neve)
Deze plugin zorgde ervoor dat ik gebruik kon maken van kant-en-klare templates die er verzorgd uitzien en aansloten bij mijn wensen. Hierdoor functioneerde mijn website beter. Naarmate ik hier vaker mee werkte, kreeg ik dit steeds meer onder de knie. Hierdoor werd het bouwen van de website makkelijker en kostte het mij minder tijd.
Header Footer Code Manager
Met deze plugin kon ik volledig in Elementor een footer creëren die aansloot bij mijn wensen en alle benodigde elementen bevatte. Hiervoor heb ik ook een instructievideo gebruikt om de footer precies naar mijn voorkeur in te richten.
Navigatiestructuur van mijn website.
Voor mijn portfoliowebsite heb ik gekozen voor de volgende opbouw. De website is duidelijk ingedeeld in twee hoofdsegmenten: het hoofdmenu en de ledenomgeving. Het hoofdmenu is altijd beschikbaar en dient als visitekaartje voor professionals. De ledenomgeving is ingericht voor docenten en is de omgeving waarin ik laat zien hoe ik mij heb ontwikkeld tijdens mijn stage.
Deze ledenomgeving is alleen toegankelijk via registratie met een e-mailadres en mijn goedkeuring. Deze pagina bevat waardevolle gegevens van mijn stagebedrijf en kan daarom niet openbaar worden gemaakt. Daarnaast bevat deze omgeving persoonlijke informatie over mijn stage, opdrachten en competentieontwikkeling. Deze scheiding is bewust gekozen om schoolinformatie en bewijsstukken af te schermen. Dit laat zien dat ik heb nagedacht over privacy, structuur en gebruiksvriendelijkheid.
De opbouw van de navigatie zorgt ervoor dat de website overzichtelijk blijft. Bezoekers kunnen eerst hoofdcategorieën bekijken en vervolgens doorklikken naar verdiepende informatie. Hierdoor wordt de informatie niet overweldigend gepresenteerd en blijft de website gebruiksvriendelijk.
Deze structuur sluit aan bij de eisen van competentiegericht onderwijs en maakt ontwikkeling, ervaringen en vaardigheden duidelijk en inzichtelijk voor de beoordelaar.
Userflow van mijn website
Voor mijn website jarigodschalk.com heb ik een doelgerichte userflow ontworpen die bezoekers stap voor stap door de website leidt. Het doel van deze website is om bezoekers in korte tijd inzicht te geven in wie ik ben, wat ik kan en hoe ik mij heb ontwikkeld tijdens mijn stage en opleiding.
De userflow start op de homepage, waar bezoekers eenvoudig de andere pagina’s van het openbare gedeelte kunnen bereiken. Hierdoor kunnen zij snel de gewenste informatie vinden en mij gemakkelijk benaderen.
Naast het openbare gedeelte is er een apart gedeelte voor een andere doelgroep. Deze userflow is gericht op het overzichtelijk doorlopen van mijn proces, waarbij alle bewijsstukken, benodigde websites en documenten gemakkelijk te vinden zijn.
Naast interne links bevat de website ook uitgaande links naar bijvoorbeeld de webshop van Proluca en de B2B-pagina. Dit sluit aan bij mijn projecten en het werk dat ik heb geleverd tijdens mijn stageperiode.
Kort samengevat is mijn userflow logisch en gestructureerd opgebouwd. Bezoekers volgen een duidelijk pad door de website, waardoor alle pagina’s goed tot hun recht komen. Dit sluit aan bij de doelgroep die ik wil bereiken en draagt bij aan een professionele en gebruiksvriendelijke website.
Wireframe van mijn website.
Voor mijn portfoliowebsite heb ik een wireframe ontworpen dat dient als basis voor de indeling en opbouw van de pagina’s. Deze wireframe richt zich op overzicht, eenvoud en gebruiksvriendelijkheid.
Voor mijn website werk ik met het thema Astra en gebruik ik extra plugins met templates om deze wireframe uit te werken. Na onderzoek en het bekijken van video’s heb ik een plugin gevonden die hierbij goed aansluit. Met deze templates kon ik een overzichtelijke en professionele uitstraling realiseren.
Elke pagina start met een grote kop die in één oogopslag laat zien wat de inhoud van de pagina is. Daarnaast voeg ik een gerelateerde afbeelding toe om deze ruimte visueel te ondersteunen. Vervolgens werk ik verder naar beneden en wissel ik deze twee elementen af van links naar rechts. Hierdoor ontstaat een Z-patroon dat zorgt voor een rustige en aantrekkelijke uitstraling en tegelijkertijd de aandacht van de bezoeker vasthoudt.
Deze wireframe is eenvoudig toepasbaar op meerdere pagina’s. Door dit patroon door de hele website te gebruiken, raken bezoekers hieraan gewend. Dit maakt het voor hen makkelijker om de aandacht vast te houden en door de content te navigeren.
Naast dit patroon werk ik ook met andere elementen, zoals korte tekstblokken zonder afbeeldingen en video’s, bijvoorbeeld van YouTube.
Dit wireframe ondersteunt het doel van mijn portfoliowebsite: het professioneel presenteren van mijn persoonlijke ontwikkeling, stage-ervaringen en digitale vaardigheden. Door de balans tussen tekst en beeld ontstaat een overzichtelijke en aantrekkelijke presentatie.