Motion Graphic / Animatie diensten

1. Motion Graphics

Bewegende beelden trekken meer aandacht dan statische. Van dat gegeven kun je gebruik maken bij het begeleiden van je gebruikers, door waar nodig of gewenst een onderdeel van je content te voorzien van een soort spotlight. Strategisch gebruik daarvan kan veel betekenen voor bijvoorbeeld je overkoepelende boodschap, de juiste manier van handelen, de stap voorwaarts in het proces en/of het bevestigen van een voltooide actie.

Als je hebt vastgesteld wat de juiste animatie is, is het eerst die animatie zelf die nader moet worden uitgewerkt. Bij een korte animatie - zoals het tonen van een vinkje als iets gelukt is - is dat eenvoudig. Het is één van de korte animaties die niet vaak het hele scherm inneemt. Maar als je iets wil uitleggen of verkopen met behulp van een animatie, moet er goed worden nagedacht over welke beelden je toont en over de timing. Je wil er de aandacht mee vasthouden, maar het moet tegelijk overzichtelijk blijven. Het gebeurt makkelijk dat je ergens overdrijft en daardoor niet maximaal scoort.

Voor het vinden van de juiste balans hierin, bestaat geen eenvoudige en vaste formule. Iedere uiting of boodschap vergt een logisch en eigen pad. Soms is subtiel zijn de beste keus, zeker als je tijd hebt voor een langdurige opbouw. Maar bij een andere gelegenheid kan het zijn dat er bij de gebruiker geen twijfel mag ontstaan, geen onduidelijke seconden, zodat het van het scherm moet knallen.

Korte animatie als aankleding of focus point

Als je een user interface design hiervan wil voorzien, dan zoek je meestal een korte animatie die ook maar een (klein) deel van het scherm gebruikt. Je wil bijvoorbeeld bereiken dat meer mensen je contactformulier invullen, door een element hiervan te animeren. Na het invullen en succesvol versturen ervan, kun je de ontvangst ook nog op een speelse wijze bevestigen. Het resultaat is dat er meer gebruikers-aandacht naar deze interactie gaat en dat het ‘saaie’ formulier als wat leuker wordt ervaren.

Aanpassingen zoals je logo in de bovenhoek animeren en laten herhalen, kan ik niet aanbevelen. Even de aandacht erop vestigen voor merkherkenning is prima, maar als het logo eenmaal opgevallen is, moet je dat vooral niet blijven herhalen. Dan herkent men je logo wel, maar vooral als irritant en dus negatief.

HTML en CSS of BodyMovin en Lottie animaties

Binnen de front end code van HTML en CSS kun je animaties opzetten. Over het algemeen zijn dit eenvoudige animaties. Van boven naar beneden, van links naar rechts, van transparant naar dekkend zichtbaar, roteren, etc. Als je ze goed combineert, kun je leuke resultaten boeken en vooral de wat subtielere varianten zijn hiermee prima te ontwikkelen. Zo’n animatie bestaat uit maar enkele regels code en dus ook maar enkele KB’s data. Goed voor bijvoorbeeld HTML5-Banners! Een ander voordeel is dat tegenwoordig iedere gangbare browser dit moet ondersteunen. Een nadeel kan zijn dat je bijvoorbeeld wat meer grafische impact zou willen hebben en dan logischerwijs sneller op de grenzen stuit.

In zo’n geval kun je kiezen voor BodyMovin en Lottie, software die je kunt gebruiken om animaties als motion graphics op te zetten voor het web. Ook die animaties zijn, anders dan bijvoorbeeld geanimeerde Gifjes, heel klein in data-omvang. De eerstgenoemde is een plugin voor After Effects die je de mogelijkheid biedt om de motion graphic niet als video, maar als code te renderen. De 2e is een script dat je kunt aanspreken om hiermee die code om te zetten naar grafische weergave in je website, webshop en webapp, maar ook binnen iOS en Android Apps. Mocht je dus een platform hebben met apps daaraan gekoppeld, kun je ze ook daarvoor inzetten. Leuke bonus...

Een HTML banner met CSS animaties

2x een Lottie animatie, deze is 25KB

Minder dan 9KB

Volledig geanimeerde motion graphics in After Effects

Als je een videoboodschap wil hebben en deze delen via bijvoorbeeld Instagram, Facebook, Twitter of Linkedin om je product of dienst aan te prijzen, maak je een video render van een langere animatie. Ik maak ze vaak voor bijvoorbeeld acties van webshops of het aankondigen van een nieuwe dienst. Je kunt ze voorzien van allerlei extra’s die je op andere wijze niet kunt inzetten. Videobeelden, foto’s, hoge resolutie afbeeldingen, 3D renders, muziek, en zo meer. Hier loop je ook niet tegen data grenzen aan, maar moet je vooral nadenken over de kijkervaring (user journey) tijdens de presentatie. Je wil een spanningsboog opzetten die de aandacht vasthoudt en de uiteindelijke boodschap helder overbrengt aan je grote, vaak wat uiteenlopende doelgroep.

Ik heb intussen heel wat van zulke producties gemaakt en ik begin nu eerst met het bedenken van de structuur, voor ik daadwerkelijk iets produceer. Aan de hand van een korte uitleg/briefing over de klantwensen, zet ik een structuur op die diens boodschap moet ondersteunen. Daarna nemen we samen het ruwe idee door en vervolgens kan ik het in After Effects uitwerken tot het uiteindelijke videobestand.

Materiaal eigendom van Douglas