Crafting animation on the web
-
Upload
benjy-stanton -
Category
Documents
-
view
887 -
download
0
description
Transcript of Crafting animation on the web
![Page 1: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/1.jpg)
Hello
![Page 2: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/2.jpg)
Benjy Stanton(@benjystanton)
![Page 3: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/3.jpg)
by Mayoral
Appointment
![Page 4: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/4.jpg)
About Me
![Page 5: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/5.jpg)
Mario Paint
© Nintendo
![Page 6: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/6.jpg)
“The Nativity”by Benjy Stanton
![Page 7: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/7.jpg)
![Page 8: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/8.jpg)
![Page 9: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/9.jpg)
![Page 10: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/10.jpg)
Designer by Day
![Page 11: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/11.jpg)
Crafting Animation
on the Web
![Page 12: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/12.jpg)
F***h
![Page 13: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/13.jpg)
Animation is Immature
![Page 14: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/14.jpg)
Animation as aDesign Material
![Page 15: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/15.jpg)
“The addition of movement to a [web] experience can provide clarity,
information about context and, frankly, a dash of joy and fun.”
Rachel Hinman
![Page 16: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/16.jpg)
Clean and Simple
![Page 17: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/17.jpg)
The Time is Right
![Page 18: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/18.jpg)
AnimationPrinciples
![Page 19: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/19.jpg)
“Animation is the rapid display of a sequence of
images to create an illusion of movement.”
![Page 20: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/20.jpg)
“...a bestowing of life.”
![Page 21: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/21.jpg)
![Page 22: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/22.jpg)
![Page 23: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/23.jpg)
Timing and Spacing
![Page 24: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/24.jpg)
Easing
![Page 25: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/25.jpg)
Ease Out
![Page 26: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/26.jpg)
Ease In
![Page 27: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/27.jpg)
Anticipationand Reaction
![Page 28: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/28.jpg)
1. Tell them what you’re going to do.2. Do it.3. Tell them that you’ve done it.
![Page 29: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/29.jpg)
Testing
![Page 30: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/30.jpg)
AnimadeLernz
![Page 31: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/31.jpg)
![Page 33: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/33.jpg)
CSS3 Animation
![Page 34: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/34.jpg)
@Keyframes Ruleand
Animation Property
![Page 35: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/35.jpg)
0% 25%50%75%100%
{ color: crimson; }{ color: sandybrown; }{ color: gold; }{ color: lawngreen; }{ color: steelblue; }
![Page 36: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/36.jpg)
name:duration: timing-function:delay:iteration-count:direction:
![Page 37: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/37.jpg)
name:duration: timing-function:delay:iteration-count:direction:
![Page 38: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/38.jpg)
matthewlein.com/ceaser/or
cubic-bezier.com
![Page 39: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/39.jpg)
![Page 40: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/40.jpg)
“Easing is one of those things that web designers don’t talk about enough.”
Val Head
![Page 41: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/41.jpg)
timing-function: steps(10);
![Page 42: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/42.jpg)
© Nintendo
![Page 43: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/43.jpg)
© Nintendo
![Page 44: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/44.jpg)
24ways.org/2012/flashless-animation/
by Rachel Nabors
![Page 45: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/45.jpg)
minimalmonkey.com
![Page 46: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/46.jpg)
![Page 47: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/47.jpg)
Workflow
![Page 48: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/48.jpg)
Animation Identity
![Page 49: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/49.jpg)
Credit: Steve Karg
![Page 50: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/50.jpg)
Notes
![Page 51: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/51.jpg)
Show and Tell
![Page 52: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/52.jpg)
Act!
![Page 53: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/53.jpg)
Storyboard
![Page 54: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/54.jpg)
Animatics(Moving Storyboards)
![Page 55: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/55.jpg)
KeynotePhotoshopEdge AnimateAfter Effects
![Page 56: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/56.jpg)
After Effects
![Page 57: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/57.jpg)
![Page 58: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/58.jpg)
Conclusion
![Page 59: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/59.jpg)
Think of animation as a design material, not
a piece of content.
![Page 60: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/60.jpg)
Use it to communicate more, without adding
clutter to your designs.
![Page 61: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/61.jpg)
Use animation to give each project a unique personality.
![Page 62: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/62.jpg)
Animation is distracting, be mindful of people’s attention.
![Page 63: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/63.jpg)
Further Reading
![Page 64: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/64.jpg)
Transitional Interfacesby Pasquale D’Silva
(on Medium)
![Page 65: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/65.jpg)
A New Mobile UX Design Material
by Rachel Hinman
(on Smashing Magazine)
![Page 66: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/66.jpg)
Flashless Animationby Rachel Nabors
(on 24 Ways)
![Page 67: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/67.jpg)
Better Navigation Through Proprioception
by Cennydd Bowles
(on A List Apart)
![Page 68: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/68.jpg)
The Animator’s Survival Kitby Richard Williams
(on good ol’ fashioned paper)
![Page 69: Crafting animation on the web](https://reader033.fdocuments.net/reader033/viewer/2022061206/548231e9b4af9f820d8b46ff/html5/thumbnails/69.jpg)
Thank You