Interactief Webdesign

Spelen

Mensen onthouden wat ze hebben aangeraakt. Een pagina die reageert op je muis of je vinger nodigt uit om rond te kijken, iets te proberen, wat langer te blijven. Vroeger was dat lastig, complexe 3D techniek, trage chips in telefoons, een batterij die leeglopt... moeilijk! Maar dankzij extreme optimalisatie en automatische AI-pipelines kan ik de lat nu een stuk hoger leggen! HET KAN NU, WÉL!!

Bekijk de film hieronder om het in actie te zien:

Een wereldbol voor cardiologie

gpcardio.org is het Global Primary Care Cardio Network: lezingen, updates van richtlijnen en een scan van de literatuur over hart-, nier- en stofwisselingszorg, voor huisartsen. De homepage is een wereldbol van stippen, met de aangesloten verenigingen op hun land. De nieuwste lezingen en updates draaien er als kaartjes omheen. Sleep aan de bol en de wereld draait mee, tik op een kaartje en de lezing gaat open, kies een filter en alleen de video's blijven staan. BAM, DE HÉLE WERELD! Dát is pas écht een globale ambitie vormgeven!

gpcardio.org: sleep aan de wereldbol en de nieuwste lezingen draaien mee; een tik opent er een

BEZOEK GPCARDIO.ORG

Artwork dat rent

Voor een sportevenement bracht ik het artwork van de designer tot leven, met 3D shaders en WebGL. Bij de start schieten de banen uit het ovaal, gevolgd door confetti. De rasterstippen reageren op je vinger of muis, de banen sprinten als je scrolt, de sporten racen naar een finish met elke keer een andere winnaar, en een reusachtige klok telt af naar de openingsdag. De live tekening komt voor 99,3% van de pixels overeen met het originele artwork, maar is minstens 300% leuker dankzij de interactiviteit!

Het artwork, tot leven gewekt: de start, de stippen die reageren op je vinger of muis, de woorden en de race

Gebouwen die zichzelf bouwen

Voor een technisch adviesbureau voor gebouwen en installaties vallen vier torens verdieping voor verdieping op hun plek. Daarna kleurt een scanlijn elke verdieping naar zijn conditie, en het beeld komt tot rust met groene daken: het duurzame eindbeeld. Beweeg je muis en de scène draait met je mee. Verderop lopen alle diensten langs het bouwproces op één horizontale baan, en schuiven drie ringen in elkaar als je scrolt. Dynamiek in vastgoed? KAN GEWOON!

Verdieping voor verdieping, dan de scan: elke verdieping krijgt de kleur van zijn conditie

Poppetjes

Voor een arbodienst gaf ik het mensje uit hun logo een gezicht. Ga er met je muis over en het gluurt, tik erop en het springt, danst of valt flauw en staat weer op, met iets te zeggen. Ze regenen de pagina in als je scrolt, en een hele menigte sorteert zichzelf in 20, 60 en 20 procent: verzuim met een medische oorzaak, door persoonlijke omstandigheden en met een oorzaak in de organisatie.

Tik op een collega: iedereen heeft iets te zeggen

De pakketwijzer stelt vier vragen. Bij elk antwoord veranderen de poppetjes mee: meer collega's, flexkrachten, en wie zich ziek meldt gaat liggen. Het advies laat zien wat elk pakket per jaar kost, en je neemt het zo mee naar het aanmelden of vraagt om teruggebeld te worden. Ziekte en verzuim zijn niet leuk, maar een omvallend poppetje is des te hilarischer én juist die glimlach zorgt voor de positieve impact van de verder serieuze propositie.

Vier vragen, één advies: wie zich ziek meldt, gaat liggen

Snel terwijl het beweegt

Ik bouw dit op jarenlange ervaring met game techniek: van Snake '97 tot Protect Your Eggs, een game die ik bouwde met mijn zoon van zeven, en trainingsdata in 3D. De 3D-scènes worden getekend in een worker naast de pagina, zodat de pagina zelf vrij blijft om te reageren. Ze tekenen alleen als er iets verandert en komen een seconde na de laatste aanraking tot rust. De poppetjes zijn gewoon SVG en CSS. Achter elke 3D-scène staat een stilstaand beeld: voor de eerste weergave, voor telefoons die het niet kunnen tekenen, en voor bezoekers die liever minder beweging zien. Geen framework en geen script van derden: de drie conceptpagina's wegen tussen 0,15 en 0,46 MB.

Gemeten met Lighthouse, het meetinstrument achter Google's PageSpeed Insights, prestaties op de homepage, telefoon / laptop:

	Prestaties	Grootste inhoud (telefoon)
gpcardio.org	96 / 100	2,9 s
Het sportevenement	99 / 100	1,8 s
Het technisch adviesbureau	100 / 100	1,4 s
De arbodienst	99 / 100	2,1 s

Lighthouse 13.5, mediaan van drie metingen per pagina, 18 en 19 oktober 2026.

Conclusie

Is het ook leuk?! Dát is wat een wijze professor mij steeds weer vroeg op de Universiteit. Die 'les' pas ik nu met veel plezier toe: interactief webdesign is meer dan alleen een beetje opsmuck. Het gaat over optimisme en een blijvende impact die inspeelt op de natuurlijke nieuwsgierigheid! Ook eens nadenken over de creatieve mogelijkheden, een pagina die mensen willen aanraken? Stuur mij gerust een berichtje!