Presented at FITC Toronto 2016
See details at www.fitc.ca
Web animation has dominated conversations for the last few years. Front-end developers and interaction designers are hungry to provide more value than just arranging boxes and text on screen. Users have come to expect UI animation as a standard. This talk will show you how to use Adobe After Effects as a prototyping tool to create cutting edge UX animation. We will dissect practical examples of prototyping for desktop, mobile and installations. This process allows for rapid discovery, giving front-end developers and interaction designers the ability to achieve new standards and push the web forward, without wasting countless hours juggling complex code libraries.
Target Audience
Front-end developers, interaction designers, UX/UI designers, web designers, motion designers. This talk is designed for those who have no formal animation training but are practicing in the field of web/app design and development.
Desired Outcome For This Session
Theory and best practices for purpose-driven animation
Walk away with the tools and techniques for creating web animation prototypes using After Effects
Learn how the basic principles of animation can be applied to push new and immersive interaction design solutions
6. 6
-> Angular for general app architecture and to manage the front-end layer
-> Three.js and EffectComposer for Webgl rendering
-> D3 for more advanced svg animations and displays
-> Snap.svg for lightweight svg animation
-> Greensock GSAP to replace any animations that would be normally done with jquery
7. 7
- Rachel Andrew
Future of Layout, Web Ahead w/ Jen Simmons
Everythingwedoisahack,
whichiswhyeverythingwedoissohard.”
“
53. 53
1. EASE.Use principle of animation.
Learn and use principles such as ease, squash, stretch, anticipation, arcs, follow through, etc.
2. Motion is NOT decoration.
It should have purpose–guide, inform or support the interaction.
3. It is expensive.
Adding animation to the world of UX/UI requires time - a lot of time.
4. Hold back.
Avoid confusing hierarchy and laggy performance.
5. Avoid modular thinking.
Everything in the layout (what you see and don’t see) is part of your orchestra.