SlideShare a Scribd company logo
Hello
Design Camp!
GreatUI animation has
purpose and style
http://img.archiexpo.com/images_ae/photo-g/contemporary-chair-polypropylene-charles-ray-eames-80422-3019841.jpg
Animating With Purpose
The Brain Benefits of Animation
Reduce cognitive load
Prevent change blindness
Better recall of spacial relationships
Lower perceived load times
Design Problems
Animation Can Solve
Orientation
Reinforce mental models of the interface and
show how content is related.
Guide Tasks
By showing cause and effect and cueing
current or potential actions.
Demonstrate
Showing how something works or what to
expect in a short amount of time.
Direct Attention
Leading the eye and calling attention to
changes and important items.
Animating With Style
Create animation that
feels a little bit real
Timing & Spacing
Animation Principle:
Timing
The amount of time it takes for an
action to happen. The duration.
Timing
Spacing
The changes in speed over the 

duration of the action’s timing.
Spacing
Timing & Spacing
Makes animated objects appear to obey the
laws of physics.

Establishes mood, emotion and reaction.
Timing = duration
Spacing = easing
CSS Easing Keywords
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1);
cubic-bezier(x1,y1,x2,y2);
(x1, y1)
(x2, y2)
cubic-bezier.com
easings.net
Everything
is better with
cubic-beziers
cubic-bezier.com
Follow Through
Animation Principle:
Follow Through
Not everything comes to a stop at once.
Follow Through
Follow Through
Overshooting the target position. 

cubic-bezier.com
Secondary Action
Animation Principle:
Secondary Action
Supplemental action, reinforces 

and adds dimension.
Timing
…and one quick stop back at
Getting Timing Right
Focus on how animation feels to interact with
Ease-outs for animated interactions
Prototype & iterate
The Bigger Picture
Choreography
Designing all your UI animations 

to feel logical and related.
Similar objects animate in similar ways
Entrance informs exit
Match velocities
Cohesive over consistent.
Consistent
Cohesive
Expressing your brand
with animation?
Finding your best moves
Start with your star interaction
Look for real world things to exemplify
Match design adjectives to animation styles
Design Adjectives
Energetic?
Friendly?
Sleek?
Strong?
Playful?
Follow through & anticipation:
Energetic, friendly, bold
Squash and stretch:
High energy and playful
Ease-in-outs:
Balanced and measured
Smaller movements:
Calm and subtle
Opacity and blurs:
Soft and stable
Be Inspired!
artofthetitle.com
capptivate.co
@vlh
uianimationewsletter.com

More Related Content

Viewers also liked

Moodle LMS Overview
Moodle LMS OverviewMoodle LMS Overview
Moodle LMS Overview
Steve Rayson
 
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from DisneyThe animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
Mobile Monday Brussels
 
A brief history of clay animators
A brief history of clay animatorsA brief history of clay animators
A brief history of clay animators
Leigh Rees
 
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx TalkYour Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
Sameer Mathur
 
نظام إدارة التعلم الالكتروني Moodle lms
 نظام إدارة التعلم الالكتروني Moodle lms نظام إدارة التعلم الالكتروني Moodle lms
نظام إدارة التعلم الالكتروني Moodle lms
Ali Alshourbagy
 
Basic Principles of Design
Basic Principles of DesignBasic Principles of Design
Basic Principles of Design
akn4fotos
 
Principle of Animation: Staging
Principle of Animation: StagingPrinciple of Animation: Staging
Principle of Animation: Staging
Wan Akhyar
 
It413 animation
It413 animationIt413 animation
It413 animation
Meg Yodnad
 
Principles of Animation
Principles of AnimationPrinciples of Animation
Golden Krishna – The Best Interface is No Interface
Golden Krishna – The Best Interface is No InterfaceGolden Krishna – The Best Interface is No Interface
Golden Krishna – The Best Interface is No Interface
inUse
 

Viewers also liked (10)

Moodle LMS Overview
Moodle LMS OverviewMoodle LMS Overview
Moodle LMS Overview
 
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from DisneyThe animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
 
A brief history of clay animators
A brief history of clay animatorsA brief history of clay animators
A brief history of clay animators
 
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx TalkYour Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
Your Body Language Shapes Who you Are - Amy Cuddy - Tedx Talk
 
نظام إدارة التعلم الالكتروني Moodle lms
 نظام إدارة التعلم الالكتروني Moodle lms نظام إدارة التعلم الالكتروني Moodle lms
نظام إدارة التعلم الالكتروني Moodle lms
 
Basic Principles of Design
Basic Principles of DesignBasic Principles of Design
Basic Principles of Design
 
Principle of Animation: Staging
Principle of Animation: StagingPrinciple of Animation: Staging
Principle of Animation: Staging
 
It413 animation
It413 animationIt413 animation
It413 animation
 
Principles of Animation
Principles of AnimationPrinciples of Animation
Principles of Animation
 
Golden Krishna – The Best Interface is No Interface
Golden Krishna – The Best Interface is No InterfaceGolden Krishna – The Best Interface is No Interface
Golden Krishna – The Best Interface is No Interface
 

Similar to Designing Meaningful Animation - AIGA Design Camp 2015

Principles of animation
Principles of animationPrinciples of animation
Principles of animation
Gena Montgomery
 
Animation
AnimationAnimation
Animation
mandalina landy
 
Lecture 9 animation
Lecture 9 animationLecture 9 animation
Lecture 9 animation
Mr SMAK
 
Applying the Multimedia & Contiguity Principle
Applying the Multimedia & Contiguity PrincipleApplying the Multimedia & Contiguity Principle
Applying the Multimedia & Contiguity Principle
boise state
 
Learning Design for the Brain - Multimedia Principles
Learning Design for the Brain - Multimedia PrinciplesLearning Design for the Brain - Multimedia Principles
Learning Design for the Brain - Multimedia Principles
rani h gill
 
20120827120826 lecture 03_prod_process_n_principles_of_anim
20120827120826 lecture 03_prod_process_n_principles_of_anim20120827120826 lecture 03_prod_process_n_principles_of_anim
20120827120826 lecture 03_prod_process_n_principles_of_anim
Asiah Jamaluddin
 
Rhythm, framing, transparency and time & motion
Rhythm, framing, transparency and time & motionRhythm, framing, transparency and time & motion
Rhythm, framing, transparency and time & motion
Kopi Maheswaran
 
Multimedia chapter 5
Multimedia chapter 5Multimedia chapter 5
Multimedia chapter 5
PrathimaBaliga
 
Applying the Multimedia Principle
Applying the Multimedia PrincipleApplying the Multimedia Principle
Applying the Multimedia Principle
Dorea Hardy
 

Similar to Designing Meaningful Animation - AIGA Design Camp 2015 (9)

Principles of animation
Principles of animationPrinciples of animation
Principles of animation
 
Animation
AnimationAnimation
Animation
 
Lecture 9 animation
Lecture 9 animationLecture 9 animation
Lecture 9 animation
 
Applying the Multimedia & Contiguity Principle
Applying the Multimedia & Contiguity PrincipleApplying the Multimedia & Contiguity Principle
Applying the Multimedia & Contiguity Principle
 
Learning Design for the Brain - Multimedia Principles
Learning Design for the Brain - Multimedia PrinciplesLearning Design for the Brain - Multimedia Principles
Learning Design for the Brain - Multimedia Principles
 
20120827120826 lecture 03_prod_process_n_principles_of_anim
20120827120826 lecture 03_prod_process_n_principles_of_anim20120827120826 lecture 03_prod_process_n_principles_of_anim
20120827120826 lecture 03_prod_process_n_principles_of_anim
 
Rhythm, framing, transparency and time & motion
Rhythm, framing, transparency and time & motionRhythm, framing, transparency and time & motion
Rhythm, framing, transparency and time & motion
 
Multimedia chapter 5
Multimedia chapter 5Multimedia chapter 5
Multimedia chapter 5
 
Applying the Multimedia Principle
Applying the Multimedia PrincipleApplying the Multimedia Principle
Applying the Multimedia Principle
 

More from Val Head

Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure  - Generate NYC 2018Choosing your animation adventure  - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018
Val Head
 
UX in Motion
UX in MotionUX in Motion
UX in Motion
Val Head
 
The Ins and Outs of Easing
The Ins and Outs of EasingThe Ins and Outs of Easing
The Ins and Outs of Easing
Val Head
 
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Val Head
 
Animation in design systems and process - Val Head
Animation in design systems and process - Val HeadAnimation in design systems and process - Val Head
Animation in design systems and process - Val Head
Val Head
 
The Ins and Outs of Easing - dotCSS 2016
The Ins and Outs of Easing - dotCSS 2016The Ins and Outs of Easing - dotCSS 2016
The Ins and Outs of Easing - dotCSS 2016
Val Head
 
Web Designer to Motion Designer - Generate NYC
Web Designer to Motion Designer - Generate NYCWeb Designer to Motion Designer - Generate NYC
Web Designer to Motion Designer - Generate NYC
Val Head
 
Motion Design with CSS
Motion Design with CSS Motion Design with CSS
Motion Design with CSS
Val Head
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)
Val Head
 

More from Val Head (9)

Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure  - Generate NYC 2018Choosing your animation adventure  - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018
 
UX in Motion
UX in MotionUX in Motion
UX in Motion
 
The Ins and Outs of Easing
The Ins and Outs of EasingThe Ins and Outs of Easing
The Ins and Outs of Easing
 
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
 
Animation in design systems and process - Val Head
Animation in design systems and process - Val HeadAnimation in design systems and process - Val Head
Animation in design systems and process - Val Head
 
The Ins and Outs of Easing - dotCSS 2016
The Ins and Outs of Easing - dotCSS 2016The Ins and Outs of Easing - dotCSS 2016
The Ins and Outs of Easing - dotCSS 2016
 
Web Designer to Motion Designer - Generate NYC
Web Designer to Motion Designer - Generate NYCWeb Designer to Motion Designer - Generate NYC
Web Designer to Motion Designer - Generate NYC
 
Motion Design with CSS
Motion Design with CSS Motion Design with CSS
Motion Design with CSS
 
Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)Putting Your UIs In Motion On The Web (Animation & UX)
Putting Your UIs In Motion On The Web (Animation & UX)
 

Recently uploaded

Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 

Recently uploaded (20)

Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 

Designing Meaningful Animation - AIGA Design Camp 2015