Webdesign Wijsheid
Webdesign is een dynamisch vakgebied dat voortdurend evolueert… zo kwam ik achter tijdens het vak webdesign. Ik ben op een wereldwijd web verkenningstocht geweest en hieronder vind je mijn leeruitkomsten. Hierbij heb ik mij gericht op het gebruik van design principes, richtlijnen en methoden, informatie-architecturen en navigatiestructuren, heuristieken van Jacob Nielsen en visuele perceptie. Het uiteindelijke doel was om al die opgedane kennis te verwerken in een herontwerp van een website.
Wat maakt een goede website?
Review & Testing
Er zijn een aantal aspecten van de interface die bepalen of een website hoog scoort op haar gebruiksvriendelijkheid. Dat zijn; discoverability, affordance, signifiers en feedback. Na een aantal willekeurige websites te hebben geëvalueerd was ik er klaar voor om een website aan grondig onderzoek te onderwerpen.
Uit de review van www.basisschooldevallei.nl bleek dat de navigatie verbeterd kon worden door o.a. een duidelijkere menustructuur. Het ontwerp mag bovendien wel wat moderner, aantrekkelijker en visueler. Op sommige punten bleek de website niet ‘up tot date’ of actueel.
Information Architecture & Navigation design
Om de ‘perfecte’ Information Architecture te achterhalen is een open cardsorting sessie uitgevoerd met een een ouder met schoolgaande kinderen om zodoende binnen de doelgroep van de website te blijven. Gekozen is voor een gestructureerde en volledige IA. De focus ligt op de verschillende doelgroepen, dat is terug te zien in het navigatie menu die de verschillende doelgroepen vertegenwoordigd.
Informatie kaartjes website basisschool de Vallei
Informatiekaartjes na eerste selectie
Informatiekaartjes met het oog op de wettelijke verplichting
Eerste selectie naar categorie
Tweede selectie naar categorie
Nieuwe Information Architecture
Redesign #1
De pagina’s ‘Homepage’, ‘Verhalen en ervaringen’ en ‘Visie zijn onderworpen aan een redesign. Op een democratische school zijn kinderen mede-eigenaar. In de schoolkring kunnen ze moties indienen over allerlei onderwerpen zoals het organiseren van een uitstapje tot het herinrichten van ruimtes. Vandaar dat zij ook een prominente plek op de nieuwe website krijgen.
Klik hier voor Redesign #1 👇
Redesign Low fidelity thuispagina
Redesign Low fidelity Verhalen en ervaringen
Redesign Low fidelity Visie
Toelichting grid
Op alle pagina’s is gebruikgemaakt van een 12-kolommen grid. Dit zorgt voor een bepaalde visuele hiërarchie waardoor ik de blokken logisch en gestructureerd kon plaatsen. Hiermee hoop ik consistentie en professionaliteit uit te stralen. De witruimte is overal 16 punts gemaakt. Dit zou voldoende witruimte moeten zijn om rust te creëren. Alle belangrijke informatie, zoals de navigatiebalk en de call-to-action knop (aanmelden) hebben een prominente plaats op elke pagina. Dit is een vaste header en een vaste footer die meegaat als de bezoeker verticaal scrolt. Op alle pagina’s heb ik verschillende gestaltprincipes verwerkt. Ik heb aandacht besteed aan de white space/ negative space voor een betere leesbaarheid, waardoor de bezoeker de inhoud sneller tot zich kan nemen.
Redesign #2
De website wil bezoekers direct een duidelijk beeld geven van de school, wat de Vallei te bieden heeft en hoe de school te bereiken is. De visuele indeling is erop gericht om de aandacht van de bezoeker te trekken en probeert deze te leiden naar de belangrijkste content.
Klik hier voor Redesign #2 👇
Redesign Mid fidelity thuispagina
Redesign Mid fidelity Verhalen en ervaringen
Redesign Mid fidelity Visie
Redesign #3
In de laatste fase zijn foto’s en kleur toegevoegd. Enerzijds omdat de kleur blauw uit de foto de basis vormt van de rest van het kleurgebruik. Anderzijds omdat de foto’s een essentieel onderdeel uitmaken van de uitstraling en de visie op krachtige wijze ondersteunen.
Klik hier voor Redesign #3 👇
Redesign High fidelity thuispagina
Redesign High fidelity Verhalen en ervaringen
Redesign High fidelity Visie
Tot slot zijn de drie pagina’s volledig uitgewerkt met klikbare onderdelen in Adobe XD. Klik hier voor het prototype waarbij je kan testen hoe de drie pagina’s werken.
Huidige website
Website na her ontwerp
reflectie
Het analyseren en herontwerpen van een website, met de focus op ontwerp-principes, informatie-architectuur, en navigatiestructuren, was een proces dat me dwong om dieper na te denken over wat een website echt effectief maakt.
Het was een uitdaging om ervoor te zorgen dat de herontwerpen niet alleen visueel aantrekkelijk waren, maar ook functioneel en gebruiksvriendelijk. In het herontwerp wilde ik niet alleen de visuele aspecten maar ook de gebruiksvriendelijkheid van de website aan bod te laten komen.
