Haring en Bier
Wandeling

Ik kreeg de opdracht om na te denken over een website voor de Haring en Bier wandeling Vlaardingen.

Sfeer en informatie verstrekking waren belangrijk

Voor de Haring & Bier Wandeltocht in Vlaardingen kreeg de website een complete redesign, met als doel een betere gebruikerservaring en een overzichtelijke presentatie van alle informatie. Mijn rol binnen dit project omvatte het opzetten van een logische informatiestructuur, zodat bezoekers eenvoudig details over de route, deelnemende locaties en ticketverkoop konden vinden.

Daarnaast werkte ik aan meerdere ontwerpversies, waarbij de focus lag op een visueel aantrekkelijke en gebruiksvriendelijke interface. Na het afronden van het definitieve ontwerp zorgde ik voor een soepele overdracht naar de developer, zodat de website technisch goed werd uitgevoerd en optimaal functioneerde. Het resultaat is een frisse, goed georganiseerde website die perfect aansluit bij de beleving van het evenement.

Proces onderdelen

Welke technieken zijn ingezet om het resultaat te kunnen behalen en waarom zijn de keuzes voor deze technieken gemaakt?

Pink magnifying glass on pink backround.jpg

Veldonderzoek naar vergelijkbare festivals en toffe website's

Research

orange sketches of UI design on orange backround, no white.jpg

Welke informatie is voor de gebruiker van waarde, en waar wordt deze getoond

Wireframing

Hoe vertalen we de sfeer naar de uitwerking zowel online als fysiek op het evenement

Visual Design

Projectmanagement

Hoe hou ik stakeholders, leveranciers en artiesten allemaal tevreden

Sitemap

Snel inzicht in structuur en navigatie voor de website Haring & Bier met een heldere sitemap.

Een sitemap is de basis van een goede gebruikerservaring. Het toont de hiërarchie en samenhang tussen pagina’s, helpt bij het plannen van de navigatie en voorkomt dat belangrijke content onvindbaar wordt. Deze sitemap is opgesteld naar aanleiding van de wensen van de klant. Hun wens om de historie van de wandelingen te vertellen, kreeg een centrale plek in de structuur.

Wireframes vormen de eerste visuele stap in het ontwerp. Ze laten zien hoe content en navigatie worden geplaatst zonder afleiding van kleuren of beeld. Deze wireframes zijn gemaakt als basis voor de website en om de klant verschillende opties te laten zien. Zo konden zij actief meedenken over de opbouw, bijvoorbeeld hoe de historie van de wandelingen het beste uitgelicht kon worden.

Grof ontwerp van Haring & Bier-website met wireframes om structuur en keuzes visueel te maken.

Wireframe

Het visuele ontwerp brengt de wireframes tot leven. Hier komen alle stijlelementen, kleuren en typografie samen om de juiste sfeer neer te zetten. Voor Haring & Bier zijn herkenbare details toegevoegd, zoals het mannetje en het schild in de footer, zodat de identiteit overal zichtbaar is. Dit ontwerp toont hoe de visuele lijn consequent is doorgevoerd op alle pagina’s en helpt de klant zich het eindresultaat goed voor te stellen.

Visueel ontwerp van Haring & Bier-website met complete stijl, kleuren en herkenbare illustraties toegepast.

Visual
Design

Eindproduct met interactieve elementen, tijdlijn en duidelijke ticketknop die bezoekers eenvoudig konden vinden.

Het eindresultaat toont de verschillende pagina’s van de Haring & Bier-website, waarin de visuele stijl volledig is doorgevoerd. Interactieve elementen maken de site levendig: visjes zijn klikbaar, de datum klapt uit op de tijdlijn en bezoekers kunnen direct tickets kopen. Reacties van bezoekers en vaste wandelaars waren positief: zij vonden de ticketknop en praktische informatie gemakkelijk, precies zoals bedoeld.