Motion Design ‑ Hoe te beginnen?

Motion Design ‑ Hoe te beginnen?

Het proces bij Studio Vi:

Voordat we verder gaan, willen we je graag een overzicht geven van ons motion design proces voordat we enkele belangrijke fases in detail bespreken.

1. Inspiratie en Conceptontwerp – Onze ontwerpers zoeken inspiratie op het internet en werken vervolgens aan een visueel concept dat aansluit bij de waarden, het verhaal en het karakter van onze klant.
2. Animatie & Toepassing – Nadat onze toegewijde UX- en UI-ontwerpers het ontwerp van een product in Figma hebben gemaakt, gebruiken onze motion designers After Effects om elk element van het platform dat we van beweging willen voorzien, te animeren.
3. Briefing van Ontwikkelaars – Zodra het ontwerpgedeelte van het proces is afgerond, is het tijd om de motion in code te implementeren. Eerst moeten we onze ontwikkelaars echter informeren over wat er precies moet worden geïmplementeerd. Gezien het grote aantal micro-interacties en animaties dat we doorgaans gebruiken op onze digitale platforms, nemen deze briefings vaak de vorm aan van uitgebreide video’s die elk stukje beweging in detail uitleggen.
4. Implementatie in Code – Met behulp van de briefing die onze motion designers hebben opgesteld, implementeren onze ontwikkelaars vervolgens de gewenste beweging in code. Dit gebeurt meestal door middel van de implementatie van Lottie- of json-bestanden, of door de gewenste beweging direct in code opnieuw te creëren met behulp van CSS en JavaScript.

Inspiratie en Conceptontwerp

Motion design is een voortdurend evoluerend vakgebied, waarbij regelmatig nieuwe methoden, animaties en stijlen verschijnen. Onze motion designers streven ernaar om bovenop deze ontwikkelingen te blijven en werken eraan om de nieuwste innovaties in motion design toe te passen in het werk dat wij voor onze klanten uitvoeren.

Onze ontwerpers zoeken deze inspiratie op een breed scala aan plekken. Vaak is de bredere ontwerpcommunity zelf al een uitstekend startpunt. Websites zoals awwwards.com tonen regelmatig prijswinnende voorbeelden van motion design, terwijl sites zoals dribbble een enorme bibliotheek bieden van geanimeerde iconen, websites en micro-interacties. Ontwerpers bij Studio Vi zoeken ook inspiratie bij andere toonaangevende ontwerpers in het vakgebied en gebruiken connecties via sociale mediaplatforms zoals Instagram om nieuwe stijlen, benaderingen en ontwerpelementen te ontdekken. Daarnaast halen onze ontwerpers vaak inspiratie uit de bredere wereld. YouTube-advertenties, speciale effecten in films en tal van andere real-world toepassingen van motion helpen onze ontwerpers om motion design op nieuwe en spannende manieren toe te passen in hun projecten.

Hoewel algemene inspiratie natuurlijk essentieel is, komen onze klanten meestal bij ons met unieke behoeften die op maat gemaakte en gerichte oplossingen vereisen. Daarom worden onze ontwerpers vaak gevraagd om inspiratie te vinden die past bij de eisen van een specifiek project. De sleutel tot het bereiken hiervan is een scherp bewustzijn van de exacte vereisten waarmee onze klanten naar ons toekomen. Daarom laten we onze ontwerpers vragen:

• Welke waarden wil de klant communiceren?
• Wat is de persoonlijkheid van het merk van de klant? Welke emoties passen het beste bij die persoonlijkheid? Welke emoties staan er juist haaks op?
• Hoe gebruiken andere websites motion om een bepaald persoonlijkheidskenmerk of waarde te benadrukken? Door deze vragen te stellen en gebruik te maken van referentiemateriaal – zoals het bestaande ontwerp van een klant en/of hun brandbook – kan een ontwerper een moodboard maken. Deze moodboards vormen het startpunt voor het gehele ontwerpproces en stellen onze ontwerpers in staat om hun verschillende inspiratiebronnen te bundelen in één werkbare ruimte. Het spreekt voor zich dat het doel hier niet is om te kopiëren. In plaats daarvan gebruiken onze ontwerpers deze moodboards om te bedenken hoe ze het beste aan de behoeften van een klant kunnen voldoen, in lijn met hoe andere toonaangevende motion designers hetzelfde doel hebben bereikt in vergelijkbare situaties.

Animatie en Toepassing

Zodra onze ontwerpers genoeg inspiratie voor een project hebben verzameld, is het tijd om die inspiratie toe te passen en de elementen van een platform te animeren die we met beweging tot leven willen brengen. Wanneer we animeren, doen we dat in lijn met Disney’s Principles of Animation die voor het eerst in de jaren 1930 werden vastgelegd. Hoewel deze principes oorspronkelijk bedoeld waren voor karakteranimatie, hebben wij ontdekt dat ze bijzonder nuttig zijn wanneer ze worden toegepast op animatie in gebruikersinterfaces. Disney’s principles (toegepast op UI-animatie) zien er als volgt uit:

1. Squash and Stretch: Dit principe vertegenwoordigt de zwaartekracht, massa, het gewicht en de flexibiliteit van een object. Denk aan een bal die uitrekt wanneer hij van de grond stuitert. Motion designers gebruiken dit meestal in de vorm van visuele veranderingen in de massa, flexibiliteit of vorm van een knop, die veranderingen in functionaliteit of bruikbaarheid vertegenwoordigen.
2. Anticipation: Dit omvat acties of bewegingen die de kijker signaleren dat er iets gaat gebeuren. In tekenfilms wijst een brandend lontje bijvoorbeeld vaak op een naderende explosie. Motion designers gebruiken ditzelfde type anticiperende beweging om hover-states voor elementen op een webpagina te ontwerpen. Bepaalde micro-interacties geven een gebruiker aan wat er precies zal gebeuren bij het klikken op een knop (bijvoorbeeld een knop die naar rechts beweegt bij hover, wat aangeeft dat deze je naar de volgende pagina stuurt).
3. Timing: Dit verwijst naar de snelheid waarmee animaties op een interface worden weergegeven. Net als bij traditionele animatie heeft de snelheid waarmee frames worden getoond een belangrijk effect op de tevredenheid van de gebruiker. Animaties die te lang duren leiden af, terwijl animaties die te kort zijn te snel voorbijgaan om volledig te begrijpen. Motion designers moeten daarom zorgvuldig werken aan een precieze kalibratie van de timing van een animatie.
4. Slow In / Slow Out: Animaties zien er bijna altijd schokkerig uit wanneer ze abrupt en plotseling zijn. Ze moeten in plaats daarvan vloeiend in- en uitfaden om natuurlijk over te komen. Easing is daarom een cruciaal hulpmiddel voor motion designers die hun animaties natuurlijk en aangenaam voor het oog willen maken.
5. Staging: Dit principe gaat over hoe we objecten binnen een scène rangschikken en choreograferen. Goede staging benadrukt de elementen waar een ontwerper aandacht op wil vestigen. Motion designers gebruiken dit meestal om kritieke elementen binnen een interface uit te lichten.
6. Arc: Parabolische beweging (beweging die een boog volgt) komt natuurlijker over op het menselijk oog dan diagonale beweging. Motion designers passen dit principe toe bij het ontwerpen van elementen die de lengte van een interface moeten oversteken.
7. Secondary Action: Dit zijn aanvullende animaties die de primaire animatie van een object ondersteunen of versterken (denk aan rook die uit een uitlaat komt terwijl de auto vooruit rijdt). In motion design wordt dit principe gebruikt om te benadrukken dat een bepaalde knop bruikbaar en functioneel is (alle micro-interacties zijn ontworpen volgens dit principe).
8. Exaggeration: Belangrijke acties worden vaak overdreven voor dramatisch effect en om de aandacht van het publiek te trekken. Motion designers gebruiken dit op een vergelijkbare manier om belangrijke onderdelen van een interface te benadrukken waarmee een gebruiker moet interageren.
9. Solid Drawing: Dit verwijst in essentie naar het vermogen van een animator om objecten in driedimensionale ruimte weer te geven. Dit principe is belangrijk in motion design, omdat 3D-objecten over het algemeen aantrekkelijker en uitnodigender zijn voor de gebruiker.
10. Appeal: Dit principe gaat over de uitstraling en charme van een geanimeerd personage. Motion designers proberen al hun animaties een bepaalde aantrekkingskracht mee te geven, omdat dit een zeer effectieve manier is om emotie toe te voegen aan een interface.

Beslissen Wanneer Motion te Gebruiken

Motion is een krachtig hulpmiddel in de handen van een ervaren ontwerper. Een deel van die ervaring komt echter voort uit weten waar en wanneer je géén motion moet gebruiken in een interface. Motion die op de verkeerde plek wordt toegepast, of die waarden en gevoelens benadrukt die niet passen bij een bepaald merk, loopt het risico de gebruiker te vervreemden en deze van je product of platform weg te sturen.

Waar is het dan wél juist om motion te gebruiken? Hoewel elk project dat we aannemen uniek is, hebben we ontdekt dat motion het meest effectief is wanneer het wordt ingezet om:

• De gebruiker af te leiden van lange laadtijden: Loading screens en lange overgangen kunnen gebruikers afleiden van je digitale platform. Door animaties te gebruiken om deze laadtijden te maskeren, kun je de aandacht van de gebruiker vasthouden en tegelijkertijd hun focus richten op datgene wat je wilt benadrukken.
• Micro-interactions animeren en tot leven brengen: Micro-interactions, zoals hover states, zijn subtiele, geanimeerde veranderingen in een interface die reageren op gebruikersinteractie (denk aan een knop die van vorm verandert wanneer je eroverheen hovert).
• Visuele elementen toevoegen aan een webpagina: Motion kan, zoals we eerder hebben besproken (link naar eerder motion-artikel), worden gebruikt om emotie toe te voegen aan een webpagina. Door gerichte animaties en visuele elementen toe te voegen, kunnen motion designers de emotie en waarden van een merk versterken, terwijl ze tegelijkertijd het verhaal ondersteunen dat het merk wil vertellen (zie bijvoorbeeld onze recente website voor Kennemerduin Camping).

Implementatie in Code

Zodra onze ontwerpers inspiratie hebben gevonden, hierop hebben gehandeld en een visueel concept voor een website hebben geselecteerd en verfijnd, is het tijd om de verschillende animaties en micro-interactions in de code van het platform te implementeren. Motion kan op verschillende manieren worden toegepast in een digitaal platform. Twee van de meest populaire manieren om lichte animaties en micro-interactions voor websites te creëren zijn Lottie en CSS.

Lottie is een open-source JSON-gebaseerd bestandsformaat voor animatie, oorspronkelijk ontwikkeld door Airbnb. Lottie zet animaties die in After Effects zijn gemaakt om in code (in de vorm van een JSON-bestand). Lottie-bestanden zijn vector-based, wat betekent dat ze kunnen worden geschaald naar meerdere verschillende formaten zonder kwaliteitsverlies.
CSS is een programmeertaal die door front-end developers wordt gebruikt om de visuele weergave van een website te creëren. Het dekt doorgaans de visuele representatie van de lay-out, kleuren en lettertypen van een website. Belangrijk is dat CSS ook de mogelijkheid biedt om animaties te maken. CSS-animaties worden voornamelijk gebruikt voor eenvoudige interacties, zoals veranderingen in kleur, grootte of de positie van elementen. Bij het implementeren van dit soort animaties zullen onze developers animaties in CSS opnieuw creëren op basis van een briefing die is opgesteld door onze motion designers.

Conclusie

Het toevoegen van motion aan een digitaal platform is een effectieve manier om je merk te ontwikkelen en klanten te enthousiasmeren. Bij Studio Vi hebben we de ervaring en het talent in huis om je te helpen deze voordelen te realiseren. Gedurende het gehele ontwerpproces – van het vinden van inspiratie tot het uitwerken van die inspiratie en het implementeren ervan in code – werken we nauw samen met onze klanten om effectieve en emotionele motion design strategieën te creëren. Daarmee bouwen we levendige digitale platforms die de aandacht van gebruikers grijpen én vasthouden.