"Connecting with motion. The Choreography of the in between moments"
Workshop that introduced a way of prototyping with After Effects and Proto.io
Credits to @matticane @Isanstrom @martinspurway for a creative topic!
TERMINOLOGY:
Anchor point
Anchor points are used to define the
frame of an object – e.g. a square has
one anchor point in every corner.
Composition
The composition is essentially the frame
of the video — it is the size of your view
port as well as length of clip and more.
Container
Works the same as composistions in
After Effects. Used to separate items
in your Proto.io prototype.
Draggable
Allows elements to be moved around
the screen, in any direction, horizontal,
vertical and rotation.
Easing
Creates a smoother more natural
animation and draws attention to
a particular interaction.
Interaction
Allows user to perform an action based
on a variety of inputs.
Keyframe
Marks the position within the timeline
where something changes.
Layer
Each item (picture, vector shape, text
etc.) is a layer in After Effects.
Scrubber
Shows where in the timeline you are in
relation to what is shown in the preview
window.
State
Can be added to screens and containers
and allows animations and transistions
between states.
USEFUL RESOURCES:
Illusion of Life
https://vimeo.com/93206523
Motion Inspiration
http://omgshift.tumblr.com/
Material Design
https://www.google.com/design/spec/animation/authentic-motion.html
IBM
https://www.ibm.com/design/language/framework/animation/fundamentals
UX Choreography
https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a#.bjnao1lau
After Effects UX Workflow
https://www.smashingmagazine.com/2015/06/fitting-after-effects-into-a-ux-workflow/
Microinteractions
http://microinteractions.com/what-is-a-microinteraction/
Jedi Principles of UI Animation
https://medium.com/@adaptivepath/jedi-principles-of-ui-anima tion-2b88423b1dac