Motion design dat je website laat leven

Waarom beweging het verschil maakt

Denk aan de websites die je zijn bijgebleven. Grote kans dat het niet alleen de kleuren of teksten waren, maar hoe de site vóélde: een knop die reageert op je muis, content die soepel in beeld schuift, een overgang die precies goed valt. Beweging is de lichaamstaal van je website: hij vertelt bezoekers dat er over elk detail is nagedacht.

Dat effect is meer dan gevoel. Goede animatie geeft richting (kijk hier, dit hoort bij elkaar), geeft feedback (je klik is aangekomen, er wordt geladen) en geeft karakter (dit merk is verzorgd, modern, zelfverzekerd). Onderzoek en praktijk wijzen dezelfde kant op: interfaces die goed reageren, voelen betrouwbaarder en houden de aandacht langer vast.

Maar er is een grens, en die ligt eerder dan veel sites denken. Te veel beweging maakt een site onrustig, traag en soms zelfs onbruikbaar. Daarom is ons uitgangspunt altijd: elke animatie heeft een taak. Heeft hij die niet, dan gaat hij eruit.

Micro-interacties: de details die je voelt

De meeste beweging op een goede website zie je nauwelijks bewust: een knop die heel licht meeveert onder je muis, een invoerveld dat vriendelijk aangeeft dat het je aandacht nodig heeft, een menu dat opent alsof het niets weegt. Deze micro-interacties duren tienden van seconden, maar bepalen samen hoe "af" je site aanvoelt.

Wij ontwerpen die details bewust: welke elementen reageren, hoe snel, met welke curve en hoe ver. Timing is daarbij alles: dezelfde animatie voelt bij 200 milliseconden strak en bij 600 milliseconden stroperig. Het resultaat is een site die reageert zoals een goed product in je handen ligt: je kunt niet precies aanwijzen waarom, maar het klopt.

Scroll-animaties en overgangen met een verhaal

Scrollen is de meest natuurlijke beweging op het web, en dus een kans. Content die op het juiste moment in beeld komt, cijfers die optellen wanneer je ze bereikt, een productverhaal dat zich laag voor laag opbouwt: zo wordt een pagina een route in plaats van een poster. We zetten scroll-animaties in om hiërarchie aan te brengen: wat belangrijk is, krijgt een moment.

Ook paginaovergangen en laadmomenten verdienen aandacht. Een website die tussen pagina’s hard knippert, voelt als een diavoorstelling; een site met doordachte overgangen voelt als één geheel. Juist omdat wij de sites die we animeren ook zelf bouwen, kunnen we die overgangen tot in de techniek kloppend maken.

Vormen van motion design die we inzetten:

• Micro-interacties op knoppen, formulieren en menu’s
• Scroll-animaties die content gedoseerd onthullen
• Hero-animaties die direct de toon zetten
• Paginaovergangen die de site als één geheel laten voelen
• Animerende cijfers, grafieken en illustraties

Beweging zonder prijs: snel én toegankelijk

De grootste zonde van webanimatie is een site die er traag van wordt. Daarom bouwen we animaties technisch scherp: we animeren alleen eigenschappen die de browser vloeiend kan verwerken, laden animatiecode pas wanneer hij nodig is en zorgen dat een pagina nooit op zijn animaties hoeft te wachten. Beweging mag nooit ten koste gaan van je laadtijd, en dus ook niet van je vindbaarheid.

Toegankelijkheid nemen we net zo serieus. Niet iedereen kan of wil bewegende interfaces: sommige bezoekers worden er letterlijk misselijk van. Elke site die wij bouwen respecteert daarom de systeeminstelling "verminderde beweging": wie die aan heeft staan, krijgt een rustige versie van dezelfde site, zonder iets van de inhoud te missen. Zo maakt beweging je site beter voor de één, zonder hem slechter te maken voor de ander.