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?
- 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:
- Tobias Ahlin; moving letters
- The Illusion Of Life: An SVG Animation Case Study
- A Guide to Browser Scroll Animations
Performance van web animaties
CSS GPU Animation: Doing It Right
Skills:
- Kennis van animatie design
- UX
Tools
- Webdeveloper tools in Firefox en Chrome hebben animatie tools (Safari en Opera bekijken)Visualize easing in devtools
- Scrollanim
- Web animatie API
- Vergelijk webanimatie technieken
- Adobe Illustrator en After Effects
- HTML5 canvas
- pixi.js
- Bodymovin
- Haiku
- Spiritjs
Boeken
- Val Head, Designing Interface Animation
- Sarah Drasner, SVG Animations
- Rachel Nabors, animation at work
Bronnen:
- UX Planet; Motion in UX Design
- A List Apart; Communicating Animation
- Google Design; Making Motion Meaningful
- A List Apart; Patterns and Purpose, an Excerpt from Animation at Work
- The 12 Principles of Animation as Illustrated through Disney and Disney Pixar Films
Conferentie talks:
- Rachel Nabors Smashing Conf
- Rachel Nabors The web in motion at Front-Trends 2016
- Sarah Drasner Fronteers conf 2016 en de slides
- Val Head bij Fronteers conf 2017
Mensen om te volgen
Nieuwsbrieven
- Val Head’s The UI Animation Newsletter
- Rachel Nabor’s Web Animation Weekly
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.