headerbeeld van website Great Highland doedelzak

Great Highland doedelzak

Januari 2023

lijn met bovenaan lus in

UX, Design & Development

Een interactieve longread rond de Great Highland doedelzak voor het Muziekinstrumentenmuseum te Brussel.

geometrische figuren op elkaar gestapeld
geometrische figuren op elkaar gestapeld
Beeld intro hoofdstuk muzikaal wapen

De briefing

Het Muziekinstrumentenmuseum (MIM) te Brussel merkt dat jongeren hun weg niet vinden naar het museum. Daarom willen ze een digitale beleving creëren rond een muziekinstrument, om zo het jongere publiek warm te maken om het museum te bezoeken.

Creëer voor hen een interactieve longread die jongeren aanspreekt om het museum te gaan ontdekken. Zorg ervoor dat je design is afgestemd op de doelgroep en daarnaast ook responsive is.

geometrische figuren op elkaar gestapeld
beeld bouw doedelzak beeld ten val, Schot met tekst achter hem

Het concept

Ik koos ervoor om een ervaring te creëren rond de Great Highland Doedelzak. Aangezien de doedelzak vroeger gebruikt werd als oorlogswapen koos ik ervoor om aan de hand van een bekende veldslag het instrument in de kijker te zetten.

De website neemt je terug naar 16 april 1746, waar jij en je Schotse troepen de confrontatie aangaan met de Engelse troepen. Tijdens het marcheren naar het front kom je meer te weten over de doedelzak en zijn gebruik tijdens een veldslag, en moet je verschillende challenges ondergaan in de vorm van kleine interacties. Dit alles leidt naar een veldslag, de Slag bij Culloden die effectief heeft plaatsgevonden en een grote invloed heeft gehad op de Great Highland doedelzak.

scherm van desktop website, test klikken

Het proces

Om de veldslag tot leven te brengen koos ik ervoor om oude schilderijen te gaan combineren met typo om harde en schreeuwerige geluid van de battle en doedelzak te visualiseren. Om hier een moderen toets aan te geven bewerkte ik de beelden met twee kleuren, die elk een kant van de slag visualiseerden. Als extra visueel elementen koos ik om de typische Schotse ruiten toe te voegen op een modernere en abstractere manier.

Om de gehele longread interessant te houden voor de gebruiker voegde ik aan de hand van gsap scroll-animaties toe. Hierdoor werd de website veel dynamischer en was het ech een beleving. Daarnaast waren er ook drie kleine testen aan de hand van Javascipt, voor meer interactiviteit te bezorgen aan de gebruiker.

zwarte rechthoek met geaometrische figuren op gestapeld

Het
resultaat

Desondanks dat ik niet al te veel afweet van muziek, behoort de opdracht voor het MIM toch tot mijn favorieten. Zo kon ik experimenteren met GSAP en maakte de scroll-animaties van een statische website een echte beleving. Daarnaast was het ook mijn eerste grote project waar er focus lag op responsive design en coderen. Waardoor ik eindelijk aan mensen kon laten zien wat ik deed als studies, zonder me zorgen moest maken dat de website er niet goed zou uitzien op hun scherm.

Benieuwd naar het eindresultaat? Ontdek zelf de website of bekijk hieronder de video.

Ontdek de site arrow
blauw kruis met figuren op gestapeld

Video

Volgende project

zwarte balk met geometrische figuren
Beeld uit kickstarter video

Kickstarter

Een promovideo voor de Kickstarter-campagne van de Cino Printer Go.

Bekijk project arrow Terug naar overzicht