Inleiding
Alles in de natuur beweegt. Mensen lopen, water stroomt planten ontvouwen. Animatie is verandering en beweging. Animatie maakt dat websites of apps tot leven komen.
De illusie van beweging vertelt de gebruikers dat ze daadwerkelijk iets hebben gedaan. Zij hebben met succes samengewerkt met de interface en een verandering veroorzaakt.
Animatie betekende heel lang Flash. Flash zorgde voor een revolutie op het web. Hele websites en games werden met Flash gebouwd. Sinds de flashplayer niet meer wordt ontwikkeld voor iPhone en iPads heeft Flash aan populairiteit ingeboet.
Door de ontwikkling van css3, JavaScript/ jQuery en SVG-bestanden zijn de technische mogelijkheden voor animatie weer enorm uitgebreid. Deze technieken worden vaak gebruikt voor functionele animaties, die gebruikers ondersteunen in hun gebruikservaring. Het is meer SEO-vriendelijk en sneller. Met het programma Adobe Animate kun je animaties maken die omgezet kunnen worden naar css en JavaScript.
Doel van deze module
In deze module leer je hoe je animatie toepast op online- en mobile-mediaproducten.
Hoe is de training opgebouwd?
De training bestaat uit drie hoofdstukken.
- animatieprincipes
- animatie en UI
- storytelling
In het eerste hoofdstuk leer je de algemene animatieprincipes die ontwikkeld zijn in de Disneystudio's. Het tweede hoofdstuk behandelt hoe animaties een goede user experience ondersteunen.
Het laatse hoofdstuk gaat over storytelling. Storytelling is een marketingtool. Hierbij wordt onze behoefte aan verhalen gebruikt voor het onder de aandacht brengen van producten en diensten.
Lees de tekst steeds goed door. Tussen de tekst staan oefeningen die je moet maken. In het laatste hoofdstuk staan de eindopdrachten. Je werkt de opdrachten uit om te laten zien dat je alles hebt begrepen.
Wat moet je kunnen/ kennen/ bewijzen aan het eind van deze training?
Je bewijst deze kennis door de eindopdrachten te maken en in te leveren.
Waar kun je nog meer informatie vinden over het onderwerp van deze training?
- https://www.e-nemo.nl/nl/ontdek/
- http://www.costa.co.uk/experience/#/1/nations-favourite
- http://us.rimmellondon.com/#44591
- http://shibui.me/web/scroll/index.html#apple
- http://www.frankwatching.com/archive/2014/03/05/animaties-webdesign-van-fun-naar-functioneel/
- http://www.awwwards.com/websites/animation/
- http://theultralinx.com/2015/01/15-ui-animation-tutorials/
- http://ricostacruz.com/jquery.transit/
- http://blog.webbb.be/material-design-animation-examples/
- http://www.justinaguilar.com/animations/#
- http://www.creativebloq.com/web-design/parallax-scrolling-1131762
- Micro-interactions Dan Saffer (e-book)