Animation Prototyping; Using After Effects to Push the Web Forward

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


85” Touch Display

9” iPad

23

V E R Y TA S T Y

nuggets

BADASS MOTION FOR INTERACTIVE 24

Principles of (Interactive) Animation

1

25

Ease

26

Staging

27

Staging Call and Response

28

Timing

29

Anticipation & Follow Through


Think in Terms of “States.”

2


Animating Nested Div’s

3


Development (vs) Layout (vs) Content Design

4


Motion Informs Design

5

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

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

Animation Prototyping; Using After Effects to Push the Web Forward

Internet

Transcript of Animation Prototyping; Using After Effects to Push the Web Forward