Hi.
@ronedelenI know why nobody follows me…
2
Disclaimer; This is not a “how-to-use” After Effects workshop.
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
- Rachel AndrewFuture of Layout, Web Ahead w/ Jen Simmons
Everything we do is a hack,which is why everything we do is so hard.”
“
BADASS MOTION FOR INTERACTIVE | 8
BADASS MOTION FOR INTERACTIVE | 9
85” Touch Display
9” iPad
BADASS MOTION FOR INTERACTIVE | 10
BADASS MOTION FOR INTERACTIVE | 11
BADASS MOTION FOR INTERACTIVE | 12
BADASS MOTION FOR INTERACTIVE | 13
BADASS MOTION FOR INTERACTIVE | 14
BADASS MOTION FOR INTERACTIVE | 15
BADASS MOTION FOR INTERACTIVE | 16
BADASS MOTION FOR INTERACTIVE | 17
BADASS MOTION FOR INTERACTIVE | 18
BADASS MOTION FOR INTERACTIVE | 19
BADASS MOTION FOR INTERACTIVE | 20
BADASS MOTION FOR INTERACTIVE | 21
BADASS MOTION FOR INTERACTIVE | 22
23
V E R Y TA S T Y
nuggets
BADASS MOTION FOR INTERACTIVE 24
Principles of (Interactive) Animation
1
27
Staging Call and Response
29
Anticipation & Follow Through
BADASS MOTION FOR INTERACTIVE 30
Think in Terms of “States.”
2
BADASS MOTION FOR INTERACTIVE 34
Animating Nested Div’s
3
BADASS MOTION FOR INTERACTIVE 39
Development (vs) Layout (vs) Content Design
4
BADASS MOTION FOR INTERACTIVE | 42
BADASS MOTION FOR INTERACTIVE | 43
BADASS MOTION FOR INTERACTIVE | 44
BADASS MOTION FOR INTERACTIVE | 45
BADASS MOTION FOR INTERACTIVE | 46
BADASS MOTION FOR INTERACTIVE 47
Motion Informs Design
5
BADASS MOTION FOR INTERACTIVE | 51
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.
54
LO O K I N G
forward
55
What kind of designer are you?
56
http://www.fastcodesign.com/3050675/designers-should-design-coders-should-code
57
“Do not seek praise, seek criticism.”
- Paul ArdenIt’s Not How Good You Are,It’s How Good You Want to Be.
Empathy.
58
- John MaedaSXSW 2016 State of Design Address
Classic Design Business Design
Computational Design
59
You will become more specialized.
60
- John Maeda2016 Design in Tech Report
The general word “design” will come to mean less as we will start to qualify the specific kind of design we mean.
61
I’m a motion designer…
who freak’n loves interactive narrative.
Thanks!
PROTOTYPING WITH AFTER EFFECTS
Tweet me for Discount Code!
@ronedelen
NOW HIRING!!
untold-digital.com/jobs codepinch.net
1k INSTALLS