Wireframes en Userflow
Op deze pagina geef ik meer diepgang over de opbouw van mijn portfoliowebsite, waarom ik voor mijn thema heb gekozen en welke extra plugins heb toegevoegd.
Welk thema heb ik gebruikt op mijn website?
Voor mijn portfoliowebsite heb ik gewerkt met het thema Astra. 1 van de meest gebruikte thema’s voor website gecreëerd via WordPress. De reden dat ik voor dit thema heb gekozen is dat het compatibel is met vele plugins, waardoor ik makkelijker templates kon instaleren die ik kon gebruiken voor de opbouw van mijn website. Zo kon goed voorkomen dat ik later in het proces niet tegen fouten of problemen aan zou lopen wat vertraging zou opleveren.
Wat voor extra plugins heb ik naast de benodigde plugins toegevoegd?
UAE: Een plugin waarmee ik toegang kreeg tot gratis extra elementen die ik kon toevoegen aan de website. Met deze plugin heb ik bijvoorbeeld mijn social embedded video’s erin gekregen.
Starter templates (by Neve): De plugin waarmee ik ervoor heb gezorgd dat ik kant en klare templates kreeg die er verzorgd eruitzien en die naar mijn wensen voldoen om mijn website ook goed te laten werken. Na een tijdje ermee werken kreeg ik het meer onder de knie en ging de websitebouw ook zo veel makkelijker en koste dat mij ook minder tijd.
Header Footer Code Manager: Met deze plugin heb ik ervoor kunnen zorgen dat ik volledig met Elementor een footer heb kunnen creëren naar wens en naar alle benodigdheden. Hiervoor heb ik ook een video gebruikt om precies een footer te maken naar mijn wens.
Navigatiestructuur van mijn website.
Voor mijn portfoliowebsite heb ik gemaakt met de volgende opbouw van mijn website. De website is duidelijk opgebouwd uit 2 hoofdsegmenten. Het hoofdmenu en de ledenomgeving. Het hoofdmenu is ten alle tijden beschikbaar en wordt gebruikt als visitekaartje voor professionals. De ledenomgeving is ingericht voor docenten en is de omgeving waarin ik aangeef hoe ik mij heb ontwikkeld tijdens mijn stage.
Deze ledenomgeving is daarom ook alleen bereikbaar via het registreren met je emailadres en met mijn toegang. Deze pagina bevat ook waardevolle gegevens van mijn stagebedrijf dus dit kan niet geopenbaard worden. Daarnaast geeft het ook persoonlijke informatie over mijn stage, opdrachten en competentieontwikkeling. Deze scheiding is bewust om ook de schoolinformatie en bewijsstukken afgeschermd te houden. Dit laat zien dat ik ook 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 op de website niet overweldigend gepresenteerd en blijft de website gebruiksvriendelijk.
De 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 om je stap voor stap door mijn website heen te leiden en zo mijn ontwikkeling te ontdekken. Het doel wat ik heb gesteld voor deze website is om bezoekers in een korte tijd inzicht te geven wie ik ben, wat ik kan en hoe ik mij heb ontwikkeld tijdens mijn stage en opleiding.
het start op de homepage waar je gemakkelijk de andere pagina’s van het openbare gedeelte kan bereiken. Hierdoor kan je snel naar de informatie over mij die je wilt zoeken en kan je mij snel en gemakkelijk bereiken
naast het openbare gedeelte is er een apart gedeelte voor het andere deel van de doelgroep en deze userflow is meer erop gefocust dat je gemakkelijk stap voor stap door mijn proces heen kan en hier alle bewijsstukken, benodigde websites en documenten kan vinden.
Buiten interne links door de website heen hebben diverse pagina’s ook uitgaande links naar bijvoorbeeld de webshop van Proluca en de B2B pagina. Dit sluit aan op mijn projecten en werk wat ik geleverd heb in mijn afgelopen stageperiode
In het kort, mijn userflow is sterk geordend doordat deze een logisch pad bewandeld door mijn website heen waardoor je alle pagina’s goed te zien krijgt. Dit sluit goed aan bij de doelgroep die ik wil bereiken met deze website en houdt het voor hun ook gemakkelijk. Hierdoor draagt mij userflow bij aan een professionele en gebruiksvriendelijke website.
Wireframe van mijn website.
Voor mijn portfoliowebsite heb ik een wireframe ontworpen dat dient als een basis voor de indeling en opbouw van pagina’s. Deze wireframe richt zich op overzicht, simpliciteit en gebruiksvriendelijkheid.
voor mijn website werk ik met het thema Astra, en daarbij gebruik ik extra plugins met templates die ervoor kunnen zorgen dat ik deze wireframe kan uitwerken. Na wat onderzoek en video’s ben ik achter een plugin gekomen die hiervoor werkt en ben ik met deze templates gaan werken omdat het er zo overzichtelijk en professioneel uitziet.
je start de pagina’s af met een groot stukje kop die in 1 klap laat zien wat ik ga vertellen op deze pagina. Hiernaast voeg ik een gerelateerde afbeelding toe om deze ruimte op te vullen. Hierna werk ik verder naar onder maar ruil ik deze 2 elementen van rechts naar links zodat ik dit in een Z-patroon kan verwerken waardoor het simpel en visueel mooi blijft maar de aandacht van de bezoeker wel erbij houdt.
Deze wireframe kan ook makkelijk toegepast worden op meerdere pagina’s. Door dit door de loop van mijn website te gebruiken raken de bezoekers hieraan gewend en is het voor hun makkelijker om hun aandacht erbij te kunnen houden.
Naast dit patroon werk ik ook met andere elementen zoals korte stukken tekst zonder afbeelding en voeg ik ook video’s toe van bijvoorbeeld Youtube.
Deze wireframe ondersteunt het doel van mijn portfoliowebsite: het professioneel presenteren van mijn persoonlijke ontwikkeling, stage-ervaringen en digitale vaardigheden. Door het balans tussen tekst en afbeeldingen draagt dit bij aan een mooi overzicht.