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
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
3D空間を扱うUI表現とユーザビリティ
akinen
0
450
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
リリース1ヶ月後で機能をなくした話
hinofu
1
700
他人事じゃないWebアクセシビリティ入門
arihiro17
0
210
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Portfolio 2023.07.28
helemarudesu
0
580
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
380
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
How to Ace a Technical Interview
jacobian
272
22k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Fireside Chat
paigeccino
20
2.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Adopting Sorbet at Scale
ufuk
67
8.6k
Infographics Made Easy
chrislema
238
18k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Ruby is Unlike a Banana
tanoku
96
10k
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!