Intro

We duiken in de nieuwste ontwikkelingen op het gebied van animatie technieken – WebGL. Hoe verandert deze technologie de manier waarop we websites uitdenken en ontwerpen, en hoe zou het een rol kunnen spelen in bijvoorbeeld VR & AR ervaringen? Maar eerst leggen we uit wat het belang is van beweging en animatie op je website en de gevolgen ervan op je gebruiker. Dynamische onderdelen zorgen namelijk voor een positiever beeld van je merk en het biedt slimme manieren om je verhaal en navigatie te verfijnen. Al met al zorgen nieuwe mogelijkheden tot animeren in je browser voor nieuwe grenzen in het bruisende landschap van webdesign.

De invloed van animaties op het langer vasthouden van je bezoekers

Door de eindeloze groei aan websites en apps is het almaar lastiger om de aandacht van onlie bezoekers vast te houden. Er zijn echter methodes die je kan inzetten om de kansen op een langer bezoek aanzienlijk te verhogen. Een van de meest succesvolle is het gebruik van animatie. Animatie kan je site en de aanwezige content tot leven brengen, het zorgt voor een duidelijke structuur en navigatie én leidt tot een hogere mate van interactie.

Dit zijn een paar elementaire pluspunten van animatie op je website:

Een fluwelen ervaring creëren

Een van de voornaamste redenen voor het verliezen van bezoekers op je site is de zogeheten “stop/start” factor. Dit slaat op korte pauzes die vallen tussen interacties die de gebruiker met de site heeft en kan een oorzaak zijn voor het snel verdampen van de aandacht. Het inzetten van animaties kan een helpende hand bieden om dit soort pauzes te overbruggen terwijl op de achtergrond een nieuw onderdeel of pagina wordt geladen. Het gevoel van continuïteit en een vloeiende ervaring zorgt ervoor dat de bezoeker minder snel afgeleid raakt en langer op de site blijft.

Het geeft richting

Animaties zijn een handige manier om extra aandacht van de gebruiker te richten op een specifiek element van je site of app. Dit is met name bruikbaar in enquêtes, tutorials, lessen en andere interactieve elementen. Dit soort animaties kunnen de basis leggen voor een overzichtelijke navigatie en duiden bijzondere functies van je site aan. Daarnaast is het een leuke en makkelijke manier om de toegankelijkheid van je website te vergroten.

Mate van uitleg

Een beeld schetst duizend woorden, en een animatie nog veel meer! Naast het toevoegen van een derde dimentie kunnen animaties voorzien in beweging, volgorde en interactie. Deze eigenschappen geven meer rijkdom aan het verhaal dat wordt overgebracht met het beeldmateriaal op je site. Het brengt je content tot leven en zorgt voor meer engagement dan een stilstaande afbeelding ooit zou kunnen doen.

Hoe animaties je merk er écht uit laten springen

Animaties spelen tegenwoordig een belangrijke rol in het overbrengen van je merkverhaal online. En hoewel video vaak wordt verkozen boven statische content hebben (gepersonaliseerde) animaties de potentie om complexe ideeën over te brengen op een simpele en begrijpbare manier. Animaties geven je de ruimte om diensten en producten op een heldere en creatieve manier te introduceren. Dit fenomeen komt het meest tot uiting in het vertellen van je merkverhaal (brand storytelling), en bijbehorende waarden en doelstellingen, aan bestaande of nieuwe investeerders of klanten. Dit kan nogal een uitdaging zijn. Gepersonaliseerde animateis helpen je een heel eind op weg om de juiste emotie op te wekken en voor de nodige attractiviteit te zorgen. En, niet onbelangrijk, zo steek je sneller boven het maaiveld uit.

Een unieke en memorabele site

Indrukken zijn cruciaal in webdesign, van de eerste paar seconde tot een algemene impressie na afloop. De manier waarop je bezoekers de website herinneren bepaalt hoe ze terugdenken aan je merk en zullen handelen in de toekomst. Om een langdurige impact te maken moet je zorgen voor een unieke front-end (ontwerp) van je website. Animaties die speciaal zijn ontworpen in de stijl van je bedrijf laten over het algemeen een diepere indruk achter dan individuele componenten zoals alleen een logo of het gebruik van specifieke kleuren.

Wat is WebGL?

…en nu voor het technische gedeelte!

WebGL is een JavaScript API die wordt gebruikt om 2D & 3D graphics te laden in een browser. Deze API werkt naadloos samen met het HTML5 <canvas> element en gebruikt de capaciteit aan GPU van je device om fysieke bewegingen te berekenen en de afbeeldingen en 3D elementen te laden.
Het heeft de volgende voordelen:

  • Cross-platform en Cross-browser: Het is beschikbaar op een breed scala aan apparaten en werkt op verschillende besturingssystemen en browsers.
  • Versnelde GPU voor 3D: Het laadt 3D graphics en animaties door specifieke onderdelen van de hardware aan te spreken – het vraagt om de GPU van een device in plaats van de CPU, dit zorgt voor betere resultaten.
  • Native API met GLSL ondersteuning: een lichtgewicht applicatie interface die op allerlei platformen te programmeren is. Het heeft ondersteuning voor GLSL waardoor je veranderingen in shaders kan programmeren en meer opties hebt als het gaat om developen.
  • Het werkt binnen canvas: Canvas is een veelzijdig gebruikt onderdeel van HTML5.
  • Integratie met DOM interface: De DOM interface wordt gebruikt door HTML en JavaScript om structuur aan te brengen. Dat wil zeggen dat het te gebruikten is met de meeste web technieken.
  • Open-source: Het is openlijk te verkrijgen en als gevolg hiervan ben je verzekerd van bijtijdse updates en verbeteringen.
  • Geschreven in Javascript: Je kan het integreren met de meest gebruikte programmeertaal (JavaScript) en daardoor gebruik maken van allerlei JS bibliotheken die allemaal naadloos aansluiten op WebGL

Prestaties

De uiteindelijke prestaties zijn natuurlijk van groot belang op de vooruitgang van WebGL. Op de achtergrond is er een combinatie aan technieken aan het werk om tot de beste resultaten te komen in de browser:

  • Door de rekenkracht van de gebruiker in te schakelen wordt de druk op de processor in de server verlicht.
  • WebGL gebruikt hardware in plaats van software om te laden. Dit betekent dat grafische elementen worden gevormd door interne (grafische) kaarten en geen beroep wordt gedaan op het CPU van het device.
  • WebGL maakt gebruik van automatische geheugentoewijzing, ontwikkeld door JavaScript. Dit zorgt voor minder code en geoptimaliseerde prestaties van het geheugen.

Aanpasbaarheid van de browser

Webbrowsers met JavaScript mogelijkheden worden standaard op smartphones en tablets geïnstalleerd. Dit betekent dat je WebGL kunt gebruiken in een enorm ecosysteem van desktop- en mobiele apparaten. Dit maakt WebGL een geweldige optie voor het programmeren van animaties en kan het veelzijdig gebruikt woorden door allerlei apparaten, browsers en platforms.

Een nieuwe manier om websites te ontwerpen

Door de uitgebreide mogelijkheden van webbrowsers en de integratie van WebGL en andere technieken ten behoeve van animaties zijn er nieuwe deuren geopend als het gaat om webdesign. Ontwerpers kunnen nu nóg verder buiten de box denken in termen van spraakmakende layout en navigatie.

Hier zijn wat mooie voorbeelden van websites waarbij ontwerpers en developers met behulp van animaties en 3D elementen een interactieve en attractieve beleving neer hebben gezet:

De toekomst van AR & VR

Door het gebruik van rekenkracht aan de gebruikerskant en animatie op basis van JavaScript zoekt WebGL de grenzen op voor de mogelijkheden in een browser. AR & VR zijn geen nieuwe concepten maar hebben de laatste tijd door toedoen van achterblijvende technologie en software geen grote vooruitgangen geboekt. Hierdoor hebben deze technieken niet de toekomstrol kunnen vervullen die ze door velen werden toegedicht maar zijn ze in een niche beland. WebGL heeft de potentie om de technologische inhaalslag te vormen middels een van de meest gebruikte media, de webbrowser! Deze uitbreiding van doelgroep gaat ongetwijfeld zijn effect hebben op webdesigners en het gebruik van AR en VR op sites om ze vele malen mooier en meeslepender te maken.

Conclusie

Animaties zijn een veelzijdig hulpmiddel voor esthetiek, impressies, branding, maar vooral communicatie. Te vaak zien we de derde dimensie over het hoofd als het gaat om grafische inhoud en het feit dat hiermee een veel aansprekendere en efficiëntere ervaring wordt voorgeschoteld.

De snelle ontwikkeling van deze op browser werkende animaties zorgt voor een verschuiving in de manier waarop we onze websites bedenken en ontwerpen. Simpel gezegd, we kunnen nu meer doen dan ooit tevoren. Ontwerpers en developers waren voorheen gelimiteerd door de door de prestaties en compatibiliteit van apparaten en browsers. Door het wegnemen van deze beperkingen kunnen er nieuwe ideeën en manieren ontstaan om websites te ontwerpen. Er zijn, zoals de voorbeelden aangeven, al voorlopers die experimenteren met deze technieken maar we verwachten dat animaties en 3D ervaringen in de toekomst de kern zullen vormen van concepten voor sites en apps.