Kaj Rietberg

Front-end Developer

Animatie op het web

Gepubliceerd op:

In dit artikel (opsomming) over animatie staan mijn verzamelde bronnen en opmerkingen die naar mijn idee belangrijk of handig zijn als je meer wilt weten over animatie op het web. Als ik nieuwe bronnen vind zal ik deze hier plaatsen. Mocht jij een interessante bron hebben meldt het mij, mijn contactgegevens staan onderaan de pagina.

Animatie of motion design is...

Animatie is dat iets veranderd naar een andere toestand. Kan een beweging zijn of een ander vorm of een andere kleur. Motion is beweging. Je ziet dus iets bewegen. Het verschil met animatie is dat bij een animatie iets kan veranderen, maar dat hoeft geen beweging te zijn.
Tegenwoordig is Motion Designer een apart vak geworden. Er zijn bedrijven die Motion designers in dienst hebben. Zoals Google, hier kan je solliciteren naar de functie van Motion Designer.

Waarom beweging gebruiken?

Het is bedoelt om het gebruikersgemak te verbeteren. Overgangen kan je soepeler laten verlopen. Het zorgt ervoor dat het natuurlijker overkomt.
Kijk welke vragen een bezoeker zich kan stellen op je pagina en laat daar beweging op aansluiten.

  • Wat moet ik hierna doen?
  • Hoe weet ik of het formulier juist iongevuld is?
  • Hoe kan ik verder gaan?

Wat doet beweging?

Het neemt de bezoeker mee in de actie die het net deed en zorgt voor focus en orientatie waar je bent. De bezoeker heeft het gevoel dat het interacteert met echte elementen ipv met een scherm. Schermen met beweging voelen meer levend en menselijk waardoor digitale producten tot leven komen. Waarbij je wel moet denken aan dat levendigheid voor kinderen anders is dan voor ouderen.
Beweging verteld een verhaal. Het zorgt er voor dat een interactie niet uit losse onderdelen bestaat.

Hoe zet je beweging in een design zodat een ander het weet?

  • Zet er bij welke waarden veranderen en met welke eenheden. Denk daarbij aan: easing, timing, properties (de wat). Bij tijd zijn er zelfs al onderzoeken gedaan welke tijd het beste gebruikt kan worden voor welke onderdelen.
  • Schets wat er moet bewegen en hoe
    In dit interview beschrijft Eva-Lot hoe ze animaties schets. Ze vertelt over een trigger die zorgt voor de animatie, de actie die daarna komt en als laatste de kwaliteit die laat zien hoe het gebeurd. Elk van deze heeft andere schets onderdelen en kan je op een bepalde manier aanduiden zodat het geheel uiteindelijk duidelijk wordt wat je precies bedoelt.
    Schetsen is handig om eerste ideeen te bedenken en te bespreken met anderen.
  • Gebruik storyboards PDF van Rachel Nabors om te gebruiken
  • Of probeer een gif van te maken.

Motion in webforms

We weten nu wat motion is en hoe we dit online kunnen gebruiken. In mijn werkveld zijn webformulieren belangrijk. Je vraagt een zorgverzekering aan en daarvoor moet je verschillende vragen beantwoorden middels een webform. Mijn vraag hierbij is: "Hoe kunnen we een webformulier gebruiksvriendelijker maken, prettiger om in te vullen?". Ik denk dat Motion hierbij een rol kan spelen. Bewegingen kunnen een webformulier levendiger maken, het natuurlijker laten aanvoelen, de menselijke interactie er meer in verwerken dan statische webformulieren.

Maar hoe doen we dit dan?

Val Head laat in een screencast zien hoe je dit kan toepassen.

CSS of JavaScript

JS libraries

Voorbeelden:

Performance van web animaties

CSS GPU Animation: Doing It Right

Skills:

  • Kennis van animatie design
  • UX

Tools

Boeken

Bronnen:

Conferentie talks:

Mensen om te volgen

Nieuwsbrieven

Design bureau’s die werken met Animatie in de webbrowser:

Wil je reageren op dit bericht, hit me up on Twitter.

Webmentions