Animatie / WebGL ‑ wat die 3e dimensie doet voor je website en je development
March 31, 2021Studio Vi
De vooruitgang in render technologie voor animaties heeft de manier waarop we over webdesign denken veranderd.
Intro
We verkennen de nieuwe trend in animatie technologie – WebGL. Hoe deze technologie de manier waarop we websites conceptualiseren en ontwerpen verbeterd, en hoe het een sleutelrol zou kunnen spelen in online VR- en AR-ervaringen.
Maar eerst bespreken we de impact en het belang van animatie, de invloed ervan op user retention, hoe het een langdurige indruk creëert voor je merk en hoe het slim kan worden gebruikt voor storytelling en webnavigatie. De ontwikkeling van animatiemogelijkheden in webbrowsers verbreedt de horizon van webdesign.
De invloed van animaties op user retention
Het bereiken van een hoge user retention wordt een steeds moeilijkere taak met de uitbreiding van websites en apps die concurreren om de aandacht van klanten. Toch zijn er methoden die je kunt implementeren die je kansen op het behouden van je gebruikers aanzienlijk kunnen vergroten. Een van de meest succesvolle van deze methoden is het gebruik van animatie. Animatie kan een website en de inhoud ervan tot leven brengen, het kan gebruikers begeleiden en de interactiviteit aanzienlijk verhogen. Hier zijn enkele belangrijke elementen die animaties aan je website kunnen toevoegen:
Een moeiteloze ervaring creëren
Een van de belangrijkste redenen voor het verlies van user retention is de “stop/start”-factor. Deze korte pauzes van interactie tussen pagina’s of elementen van een website kunnen de interesse van gebruikers vrij snel wegnemen. Het gebruik van animaties om de kloof tussen stilstaande delen van een website te overbruggen is een slimme manier om gebruikers betrokken te houden terwijl de verwerking of overgangen plaatsvinden. Het gevoel van continuïteit dat deze animaties geven, zorgt voor moeiteloze ervaring waarbij gebruikers minder snel afhaken.
Geeft richting
Animaties kunnen slim worden gebruikt om de aandacht van gebruikers naar een vooraf bepaald element of functie te leiden. Dit is vooral handig in formulieren, tutorials, lessen en andere interactieve functies. Deze animaties kunnen de basis vormen voor het opnemen van complexe functionaliteit en navigatie, zonder de gebruiker extra te belasten. Animaties gebruiken om richting te geven is ook een slimme manier om de toegankelijkheid van je website te verbeteren.
Beschrijvingsniveau
Een beeld zegt meer dan duizend woorden; en animaties kunnen dat nog meer! Animaties zorgen niet alleen voor een derde dimensie, maar ook voor beweging, flow en interactie. Deze elementen geven gebruikers een gedetailleerder inzicht in de boodschap die de visuele content uitdraagt. Het brengt visuele content tot leven, maakt het realistischer en verhoogt de betrokkenheid, door een detailniveau te geven dat een stilstaand beeld niet kan bereiken.
Hoe animaties je merk laten opvallen
De laatste tijd spelen animaties een grote rol bij het vertellen van merkverhalen online. Videocontent heeft altijd de voorkeur gehad boven statische content, maar gepersonaliseerde animaties hebben de mogelijkheid om complexe ideeën over te brengen in een eenvoudig, begrijpelijk format. Met animaties kunnen bedrijven producten en diensten op een creatieve, beschrijvende en vloeiende manier introduceren.
Dit is vooral nuttig bij het merkverhaal vertellen, waarbij het primaire doel is om je klanten, investeerders en/of stakeholders een duidelijk beeld te geven van de waarden en richting van een merk. Dit kan iets ingewikkelds zijn om te bereiken, maar het gebruik van animaties maakt het een stuk eenvoudiger. Gepersonaliseerde animaties zorgen voor een langdurige indruk door emotie op te roepen en entertainment te bieden. Zo onderscheidt je merk zich van de concurrentie.
Websites uniek en opvallender maken
Bij webdesign draait alles om indrukken: van de eerste indruk, tot het creëren van een blijvende indruk. Hoe de mensen die je website bezoeken zich de website herinneren, zal bepalen hoe ze in de toekomst met je merk of bedrijf zullen omgaan. Om een blijvende indruk te maken, heb je een uniek, impactvol front-end design nodig. Animaties die speciaal voor bedrijven zijn gemaakt, met merk, logo’s en kleuren, zullen een blijvende indruk achterlaten.
Wat is WebGL?
…en nu het technische gedeelte!
WebGL is een JavaScript API die wordt gebruikt om 2D en 3D afbeeldingen te renderen in een webbrowser. Deze API integreert naadloos met het HTML5 <canvas>-element en maakt gebruik van de GPU-mogelijkheden van een apparaat om fysica te verwerken en afbeeldingen en 3D-vormen weer te geven. Het heeft de volgende functies:
- Platform- en browseroverschrijdend: Het werkt op verschillende apparaten, besturingssystemen en browsers.
- GPU 3D-versnelling: Het rendert 3D-graphics en animaties met behulp van grafische specifieke hardware – het richt zich op de GPU van een computer in plaats van op de CPU, wat resulteert in betere prestaties.
- Native API met GLSL-ondersteuning: een app-programmeer interface die op alle platforms kan worden gebruikt. Het heeft GLSL-ondersteuning, wat betekent dat je shaders programmatic kunt wijzigen, waardoor de mogelijkheden vanuit een ontwikkelingsperspectief worden uitgebreid
- Werkt binnen een canvas: Canvas is een HTML5-element dat veel wordt gebruikt op het web
- Integratie met DOM-interfaces: DOM-interfaces worden gebruikt door HTML en Javascript om structuur te bieden, wat betekent dat het compatibel is met de meeste webtechnologieën.
- Open-source: dit betekent dat het consistent ontwikkeld en verbeterd wordt
- Geschreven in Javascript: dus je kunt programmeren met ‘s werelds populairste taal en al je favoriete JS bibliotheken opnemen om naadloos samen te werken met WebGL.
Prestaties
Prestaties zijn een belangrijke factor in de vooruitgang van WebGL. Er is een combinatie van technologieën aan het werk om dergelijke prestaties binnen een browser te bereiken:
- De client-side rendering mogelijkheden betekenen dat de processing load van de server wordt gehaald en op de machines van individuele gebruikers wordt geplaatst.
- WebGL maakt gebruik van hardware rendering in plaats van software rendering, dit betekent dat afbeeldingen worden gerenderd met behulp van grafische kaarten, in plaats van dat de volledige processing load op de CPU wordt gelegd.
- WebGL gebruikt automatische geheugentoewijzing, gebruikmakend van Javascripts reeds geconstrueerde geheugenallocatie mogelijkheden. Dit zorgt voor minder code en reeds geoptimaliseerde geheugenprestaties.
Vidar Daniels CEO
Verder van gedachten wisselen?
Browser compatibility
Webbrowsers met JavaScript-mogelijkheden zijn standaard geïnstalleerd op smartphones en tablets. Dit betekent dat je WebGL kunt gebruiken op een groot ecosysteem van desktop- en mobiele apparaten. Dit maakt WebGL een geweldige optie voor het programmeren van animaties, door zijn veelzijdigheid over een reeks apparaten, browsers en platforms.
Een nieuwe manier om websites te ontwerpen
De ontwikkeling van de mogelijkheden van webbrowsers en de integratie van WebGL en andere animatietechnologieën heeft nieuwe opties geopend voor webdesign. Webdesigners denken nu buiten de gebaande paden als het gaat om de traditionele lay-out en navigatie van websites.
Hier zijn enkele voorbeelden van hoe ontwerpers en ontwikkelaars de interactiviteit, betrokkenheid en gebruikerservaring van hun websites verbeteren door het gebruik van animaties en 3D-technologieën:
De toekomst van AR & VR
Met client-side rendering in combinatie met JavaScript-gebaseerde animatie verlegt WebGL de grenzen van wat mogelijk is in een browser. Augmented en virtual reality is geen nieuw concept, maar het heeft lang op zich laten wachten door de hardware- en software mogelijkheden die het vereist. Hierdoor is het nogal een niche geworden en daarom nog niet zo veelvuldig gebruikt als eerder gedacht.
WebGL kan gezien worden als de overbrugging van deze technologieën naar een groter publiek, via een van de meest gebruikte platformen die er zijn, webbrowsers! Dit grotere publiek zal ontwerpers aanmoedigen om AR en VR in hun websites op te nemen en hun gebruikers een meer meeslepende ervaring te bieden.
Conclusie
Animaties zijn een veelzijdig hulpmiddel, voor esthetiek, indrukken, branding, maar vooral voor communicatie. Te vaak zien we de derde dimensie over het hoofd als het gaat om grafische content, terwijl deze een veel realistischere en impactvollere kijkervaring biedt.
De geleidelijke ontwikkeling van deze browser-based animation frameworks zorgt voor een verschuiving in de manier waarop we onze websites conceptualiseren en ontwerpen. Simpel gezegd kunnen we nu meer dan vroeger. Ontwerpers en ontwikkelaars waren altijd sterk gebonden aan prestatie-, apparaat- en browsercompatibiliteit. Het loslaten van deze beperkingen heeft geleid tot nieuwe ideeën en manieren om websites te ontwerpen.
Er zijn briljante geesten die gebruik maken van deze nieuwe manier van ontwerpen en ik verwacht dat animaties en 3D-ervaringen de kern zullen vormen van nieuwe ontwerpconcepten voor de toekomst.
Klaar om samen <mark>te bouwen aan groei?</mark>
Hoe kan AI de bouwsector helpen duurzaamheidsdoelen te behalen?
AI transformeert de bouw en techniek sector door intelligente processen die duurzaamheidsdoelen meetbaar maken.
Wat is de rol van AI in bouwprojectplanning?
AI speelt een steeds belangrijkere rol in bouwprojectplanning door complexe processen te automatiseren, kosten te voorspellen en risico's vroeg te identificeren.
Welke bouwprocessen kunnen worden geautomatiseerd met AI?
AI oplossingen kunnen bouwbedrijven helpen bij o.a. kostenbesparing en procesoptimalisatie.