SlideShare uma empresa Scribd logo
1 de 62
Baixar para ler offline
Hi.
@ronedelen
I know why nobody follows me…
2
Disclaimer;

This is not a “how-to-use” After Effects workshop.
3
4
5
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 Andrew

Future of Layout, Web Ahead w/ Jen Simmons
Everythingwedoisahack,

whichiswhyeverythingwedoissohard.”
“
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
VERY TAST 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
BADASS MOTION FOR INTERACTIVE 30
Think in Terms of “States.”
2
31
32
33
BADASS MOTION FOR INTERACTIVE 34
Animating Nested Div’s
3
35
36
37
38
BADASS MOTION FOR INTERACTIVE 39
Development
(vs) Layout (vs) Content Design
4
40
41
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
48
49
50
BADASS MOTION FOR INTERACTIVE | 51
Animation Prototyping; Using After Effects to Push the Web Forward
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
LOOKING
forward
55
Whatkindofdesignerareyou?
56
http://www.fastcodesign.com/3050675/designers-should-design-coders-should-code
57
“Do not seek praise,
seek criticism.”
- Paul Arden

It’s Not How Good You Are,

It’s How Good You Want to Be.
Empathy.
58
- John Maeda

SXSW 2016 State of Design Address
ClassicDesign
Business
Design
Computational
Design
59
Youwillbecomemorespecialized.
60
- John Maeda

2016 Design in Tech Report
Thegeneralword“design”will
cometomeanlessaswewillstart
toqualifythespecifickindof
designwemean.
61
I’mamotiondesigner…
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
1kINSTALLS

Mais conteúdo relacionado

Destaque

Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas FeltonFITC
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next WebFITC
 
Unleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJSUnleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJSFITC
 
Kickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineKickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineFITC
 
5 Things Every Designer Should be Doing Right Now
5 Things Every Designer Should be Doing Right Now5 Things Every Designer Should be Doing Right Now
5 Things Every Designer Should be Doing Right NowFITC
 
Open Sourcing the Secret Sauce
Open Sourcing the Secret SauceOpen Sourcing the Secret Sauce
Open Sourcing the Secret SauceFITC
 
Universal Applications
Universal ApplicationsUniversal Applications
Universal ApplicationsFITC
 
Cats, Dinosaurs and A Lot of Pizza with Reed + Rader
Cats, Dinosaurs and A Lot of Pizza with Reed + RaderCats, Dinosaurs and A Lot of Pizza with Reed + Rader
Cats, Dinosaurs and A Lot of Pizza with Reed + RaderFITC
 
Creating Content that Captivates
Creating Content that CaptivatesCreating Content that Captivates
Creating Content that CaptivatesFITC
 
How to SURVIVE the Creative Industry
How to SURVIVE the Creative IndustryHow to SURVIVE the Creative Industry
How to SURVIVE the Creative IndustryFITC
 
Your UX is not my UX
Your UX is not my UXYour UX is not my UX
Your UX is not my UXFITC
 
Components are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be OkayComponents are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be OkayFITC
 
Learning from Science Fiction with Greg Borenstein
Learning from Science Fiction with Greg BorensteinLearning from Science Fiction with Greg Borenstein
Learning from Science Fiction with Greg BorensteinFITC
 
Jedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingJedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingFITC
 
Creating a Smile Worthy World
Creating a Smile Worthy WorldCreating a Smile Worthy World
Creating a Smile Worthy WorldFITC
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in MinutesFITC
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform AppsFITC
 
Programming Play
Programming PlayProgramming Play
Programming PlayFITC
 
I HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob HeubelI HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob HeubelFITC
 

Destaque (19)

Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas Felton
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next Web
 
Unleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJSUnleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJS
 
Kickstarting Your Stupid Magazine
Kickstarting Your Stupid MagazineKickstarting Your Stupid Magazine
Kickstarting Your Stupid Magazine
 
5 Things Every Designer Should be Doing Right Now
5 Things Every Designer Should be Doing Right Now5 Things Every Designer Should be Doing Right Now
5 Things Every Designer Should be Doing Right Now
 
Open Sourcing the Secret Sauce
Open Sourcing the Secret SauceOpen Sourcing the Secret Sauce
Open Sourcing the Secret Sauce
 
Universal Applications
Universal ApplicationsUniversal Applications
Universal Applications
 
Cats, Dinosaurs and A Lot of Pizza with Reed + Rader
Cats, Dinosaurs and A Lot of Pizza with Reed + RaderCats, Dinosaurs and A Lot of Pizza with Reed + Rader
Cats, Dinosaurs and A Lot of Pizza with Reed + Rader
 
Creating Content that Captivates
Creating Content that CaptivatesCreating Content that Captivates
Creating Content that Captivates
 
How to SURVIVE the Creative Industry
How to SURVIVE the Creative IndustryHow to SURVIVE the Creative Industry
How to SURVIVE the Creative Industry
 
Your UX is not my UX
Your UX is not my UXYour UX is not my UX
Your UX is not my UX
 
Components are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be OkayComponents are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be Okay
 
Learning from Science Fiction with Greg Borenstein
Learning from Science Fiction with Greg BorensteinLearning from Science Fiction with Greg Borenstein
Learning from Science Fiction with Greg Borenstein
 
Jedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and PitchingJedi Mind Trick: Networking, Selling and Pitching
Jedi Mind Trick: Networking, Selling and Pitching
 
Creating a Smile Worthy World
Creating a Smile Worthy WorldCreating a Smile Worthy World
Creating a Smile Worthy World
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in Minutes
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
 
Programming Play
Programming PlayProgramming Play
Programming Play
 
I HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob HeubelI HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob Heubel
 

Mais de FITC

Cut it up
Cut it upCut it up
Cut it upFITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 

Mais de FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Último

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 

Último (12)

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 

Animation Prototyping; Using After Effects to Push the Web Forward