Animatie op het web

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?

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:

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.

Ik ben Kaj Rietberg. Een Front-end ontwikkelaar in Nederland. Ik bouw toekomstbestendige en onderhoudsvriendelijke websites en applicaties met HTML, CSS en JavaScript. Datavisualisatie en animatie zijn onderwerpen waar mijn interesse naar uit gaat.