animatie /
interactief /
visual /
scrollytelling /
webdesign /
webrealisatie /
Webflow /
Digitale Watersafari
'In de Waterweg'
Een interactieve scrollanimatie op de website van De Waterkaravaan waarmee je kan ontdekken hoe rijk het waterleven in en op de Amsterdamse grachten kan zijn als het water van een goede kwaliteit is. Scroll met je muis of swipe op je telefoon, en je duikt in de gracht! Onderweg kom je allerlei dieren en plantjes tegen waarop je kan klikken. Ze vertellen je hun verhaal en soms kan je ook nog een filmpje of foto bekijken. De allerkleinste micro-organismen kan je ontdekken met behulp van een vergrootglas.
Moderne online schoolplaat
Kan je een moderne online schoolplaat maken, zoals M.A. Koekkoek ‘In Sloot En Plas’ aan het begin van de vorige eeuw maakte? Maar dan van de Amsterdamse gracht, waarbij de ecologische waterkwaliteit goed op orde is. Dat was de vraag van Amber Beernink van De Waterkaravaan, aan mij.
Een utopie
Een digitale schoolplaat van een utopie dus. Waarbij we ons voorstelden dat de door Amber ontwikkelde Drijvende Tuinen langs de kades dobberen, de bodem bedekt is met structuurmatten en er een fauna-uittreedplaats (FUP) langs de steile kade is gerealiseerd. Welke beestjes, vissen, vogels, planten en andere organismen zouden er dan allemaal kunnen leven? Die je nu al tegen zou kunnen komen in het brakke water rond Amsterdam, maar ook de meer zeldzame soorten. En wat zouden ze je dan vertellen?
Scrollytelling
Amber deed het onderzoek naar deze soorten en schreef de teksten. Ik maakte schetsen en ging nadenken over hoe dit te visualiseren. Uiteindelijk kwamen we op een vorm van 'scrollytelling' waarbij je al scrollend (of swipend) de gracht induikt en zelf op ontdekking kan.
In één beeld zichtbaar
Visueel is op deze manier in één beeld zichtbaar waar de dieren, planten en micro-organismen leven. Vervolgens kan je ze aanklikken en zie je hoe ze heten en je krijgt wat informatie over de soort. Vervolgens kan je van sommige soorten ook nog een 'echt' beeld zien omdat je via een button in het praatwolkje door kan klikken naar een filmpje of foto.
Kan je een moderne online schoolplaat maken, zoals M.A. Koekkoek ‘In Sloot En Plas’ aan het begin van de vorige eeuw maakte? Maar dan van de Amsterdamse gracht, waarbij de ecologische waterkwaliteit goed op orde is. Dat was de vraag van Amber Beernink van De Waterkaravaan, aan mij.
Een utopie
Een digitale schoolplaat van een utopie dus. Waarbij we ons voorstelden dat de door Amber ontwikkelde Drijvende Tuinen langs de kades dobberen, de bodem bedekt is met structuurmatten en er een fauna-uittreedplaats (FUP) langs de steile kade is gerealiseerd. Welke beestjes, vissen, vogels, planten en andere organismen zouden er dan allemaal kunnen leven? Die je nu al tegen zou kunnen komen in het brakke water rond Amsterdam, maar ook de meer zeldzame soorten. En wat zouden ze je dan vertellen?
Scrollytelling
Amber deed het onderzoek naar deze soorten en schreef de teksten. Ik maakte schetsen en ging nadenken over hoe dit te visualiseren. Uiteindelijk kwamen we op een vorm van 'scrollytelling' waarbij je al scrollend (of swipend) de gracht induikt en zelf op ontdekking kan.
In één beeld zichtbaar
Visueel is op deze manier in één beeld zichtbaar waar de dieren, planten en micro-organismen leven. Vervolgens kan je ze aanklikken en zie je hoe ze heten en je krijgt wat informatie over de soort. Vervolgens kan je van sommige soorten ook nog een 'echt' beeld zien omdat je via een button in het praatwolkje door kan klikken naar een filmpje of foto.
Springt in het oog
Mina de Mantelmeeuw heet je welkom en geeft de instructies hoe je De Waterweg kunt verkennen
Als een vogel start je hoog boven het water. Als je scrollt of swipet, zak je langzaam af naar de waterspiegel, duik je daar vervolgens doorheen en kom je door het water uiteindelijk uit in de bodem
Dieren vliegen, kruipen en zwemmen door je beeld terwijl je scrollt of swipet
In totaal kan je maar liefst 61 dieren, planten en micro-organismen ontdekken waarop je kunt klikken en meer over kunt leren!
Met behulp van vergrootglasjes kan je ook de allerkleinste micro-organismen ontdekken
Alle soorten hebben hun eigen naam en vertellen jou hun verhaal
Technische details
Digitaal getekend en ingekleurd in Procreate
Interactieve scrollanimatie met een ruimtelijk effect en geanimeerde dieren gemaakt in Rive
Bij een bezoek op een computer of laptop, zit er ook een ruimtelijk effect op de muiscursor
Geïntegreerd in Webflow, met een op maat gemaakt stukje JavaScript-code dat ervoor zorgt dat de video's en foto's van de aangeklikte soorten openen in een overlay
Met de taal-switch van Webflow worden de namen en teksten van de dieren en planten getoond in het Nederlands of in het Engels
Interactief ontdekken en leren
De Digitale Watersafari is een schoolplaat in een modern jasje geworden: er is een extra interactieve laag bovenop de visuele plaat toegevoegd.
Regie bij de bezoeker
Daarmee is hij, net als een schoolplaat, niet alleen mooi om naar te kijken, maar ook gemaakt om je iets te leren. Waarbij je zelf veel regie hebt: je bepaalt zelf wat en hoe lang je iets bekijkt en in welke volgorde. En je kan het altijd nog eens bekijken. Daarmee geeft het de mogelijkheid om zelf te gaan ontdekken en leren, in kleine brokjes informatie.
Zelf op onderzoek gaan
Er zijn in totaal wel 61 planten, dieren en micro-organismen aan te klikken in de Digitale Watersafari! Maar die worden je niet zomaar voorgeschoteld. Je moet zelf zoeken welke dat allemaal zijn. Zo blijft het spannend en verrassend: bij elk bezoek ontdek je misschien wel wat nieuws.
Speels en behapbaar visualiseren van informatie
Dit digitale schoolplaatconcept kan op allerlei projecten toegepast worden om bezoekers iets te leren. Alles wat je kan bedenken waarbij informatie geanimeerd, interactief en in kleine porties aan de bezoeker gepresenteerd kan worden. Het zou bijvoorbeeld een verhelderend en visueel mooie oplossing kunnen zijn in school- en educatieprojecten.
Informatie wordt op een speelse manier overgebracht en behapbaar gepresenteerd. Daarmee kan je het ook inzetten om complexe processen of organisaties en ingewikkelde producten of machines uit te leggen.
Interactie met de bezoeker
Deze vorm neemt het beste van illustratie, explainers en video en verweeft het tot een eigen vertelvorm. Waarbij het zich vooral onderscheidt door de interactie en regie van de bezoeker, waarmee je je publiek betrokken houdt. Het is leuk om zelf op onderzoek te kunnen gaan.
Van idee tot realisatie en implementatie
Voor mij is het ook erg leuk om ze te maken! Op zoek te gaan naar het verhaal, het te verbeelden en digitaal tot leven te wekken. Voor deze interactieve en geanimeerde scrollanimatie heb ik alle vaardigheden en technieken zelf in huis: ik denk mee over het verhaal, maak het ontwerp, de illustraties en animaties, de scroll-animatie en de uiteindelijke integratie in de website.
De Digitale Watersafari is een schoolplaat in een modern jasje geworden: er is een extra interactieve laag bovenop de visuele plaat toegevoegd.
Regie bij de bezoeker
Daarmee is hij, net als een schoolplaat, niet alleen mooi om naar te kijken, maar ook gemaakt om je iets te leren. Waarbij je zelf veel regie hebt: je bepaalt zelf wat en hoe lang je iets bekijkt en in welke volgorde. En je kan het altijd nog eens bekijken. Daarmee geeft het de mogelijkheid om zelf te gaan ontdekken en leren, in kleine brokjes informatie.
Zelf op onderzoek gaan
Er zijn in totaal wel 61 planten, dieren en micro-organismen aan te klikken in de Digitale Watersafari! Maar die worden je niet zomaar voorgeschoteld. Je moet zelf zoeken welke dat allemaal zijn. Zo blijft het spannend en verrassend: bij elk bezoek ontdek je misschien wel wat nieuws.
Speels en behapbaar visualiseren van informatie
Dit digitale schoolplaatconcept kan op allerlei projecten toegepast worden om bezoekers iets te leren. Alles wat je kan bedenken waarbij informatie geanimeerd, interactief en in kleine porties aan de bezoeker gepresenteerd kan worden. Het zou bijvoorbeeld een verhelderend en visueel mooie oplossing kunnen zijn in school- en educatieprojecten.
Informatie wordt op een speelse manier overgebracht en behapbaar gepresenteerd. Daarmee kan je het ook inzetten om complexe processen of organisaties en ingewikkelde producten of machines uit te leggen.
Interactie met de bezoeker
Deze vorm neemt het beste van illustratie, explainers en video en verweeft het tot een eigen vertelvorm. Waarbij het zich vooral onderscheidt door de interactie en regie van de bezoeker, waarmee je je publiek betrokken houdt. Het is leuk om zelf op onderzoek te kunnen gaan.
Van idee tot realisatie en implementatie
Voor mij is het ook erg leuk om ze te maken! Op zoek te gaan naar het verhaal, het te verbeelden en digitaal tot leven te wekken. Voor deze interactieve en geanimeerde scrollanimatie heb ik alle vaardigheden en technieken zelf in huis: ik denk mee over het verhaal, maak het ontwerp, de illustraties en animaties, de scroll-animatie en de uiteindelijke integratie in de website.