Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing Motion (The JavaScript Version)
Search
Val Head
November 29, 2011
Design
7
570
Designing Motion (The JavaScript Version)
Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011
Val Head
November 29, 2011
Tweet
Share
More Decks by Val Head
See All by Val Head
Getting Animation Done
valhead
0
130
Designing Animation Awesomeness - FOWD 2014
valhead
2
530
Putting Your UIs in Motion (AEA Orlando)
valhead
0
720
Designing Animation Awesomeness - Artifact East
valhead
1
960
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
250
Web Design / Motion Design
valhead
1
150
Designing Animation Awesomeness - Artifact Austin
valhead
4
500
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
430
CSS Animations Are The Awesomest!
valhead
2
220
Other Decks in Design
See All in Design
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
120
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
970
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
36
21k
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
180
MLP_Cleanup_Olga
olgastoryboard
0
120
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
1.9k
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2.3k
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.4k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
Tuzukuru解説ブック
atsumaru1377
0
300
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
140
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
430
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
For a Future-Friendly Web
brad_frost
174
9.3k
Side Projects
sachag
451
42k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
How to Ace a Technical Interview
jacobian
274
23k
Unsuck your backbone
ammeep
667
57k
The Mythical Team-Month
searls
218
43k
Transcript
Designing Motion Make Animation On The Web Extra Awesome!
EVENTS! MAKING THINGS! DESIGN!
Designing Motion Make Animation On The Web Extra Awesome!
Details Insert cliche here
None
Why Now?
None
None
None
with great comes Responsibility Power Great
None
{...}
Animation for UI
OPEN, CLOSE! BUTTONS, LINKS! BASED ON USER INPUT FADES
None
None
None
Animation for Experience
None
None
None
BREAK IT DOWN
None
None
None
{...}
SO Many Options!
Metaphor What are you imitating?
None
None
None
None
Weight & Physics Light as a feather. Stiff as a
board.
None
None
The idea that various aspects of the character’s attributes come
together to just feel “right”. Appeal
“... it’s easy to forget that when you’re building a
game you’re not just building a set of rules or a pile of content. You’re crafting and experience... Animation happens to be my weapon of choice to achieve this” [Mika Mobile blog post]
Internet != Cartoon
Rules Just For Us :)
Are we there yet? “Point B” isn’t static.
Yeah I changed my mind
None
None
None
None
Semantics Matter We care about that codestuffs
That’s Mr. DOM respect!
Hi, I’m a link! Hi, I’m a link! Hi, I’m
a link!
New Things!! yay?
Fallbacks+ browsers, devices, the future, oh my!
None
Limitations work with them, not against them. frenemies?
None
None
Dealing With Multiples
Transference
None
None
Time Signatures
None
None
None
None
None
Go Play! Experiment. Make things. Have fun. Edit later.
Slides & Things: valhead.com Let’s Chat:
[email protected]
• @vlh Thanks!