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
700
Designing Animation Awesomeness - Artifact East
valhead
1
950
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
240
Web Design / Motion Design
valhead
1
140
Designing Animation Awesomeness - Artifact Austin
valhead
4
490
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
430
CSS Animations Are The Awesomest!
valhead
2
210
Other Decks in Design
See All in Design
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
0
130
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.3k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
350
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
600
B/43プラスカードができるまで
putchomsmartbank
0
530
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
200
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
140
生成AIのデザイン活用
asakohs
0
120
User Experience Design für Entwickler
joergneumann
3
870
社内管理画面のデザインもプロダクトデザイン
takanorip
4
760
Breaking News on the Web
souvikdg
0
100
3D空間を扱うUI表現とユーザビリティ
akinen
0
480
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Building Applications with DynamoDB
mza
88
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Docker and Python
trallard
35
2.7k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Visualization
eitanlees
137
14k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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!