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
710
Designing Animation Awesomeness - Artifact East
valhead
1
960
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
250
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
220
Other Decks in Design
See All in Design
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
350
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9k
Tuzukuru解説ブック
atsumaru1377
0
240
PdMを始めたUIデザイナーのリアルな課題
muture
0
620
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
Sociotechnical design for software and human systems
xinyao
2
560
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
プロダクトデザインは子育て/Product design is parenting
medley
0
510
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
330
Les petites aventures de CSS, saison 2024
goetter
2
3.7k
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
240
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
220
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Rails Girls Zürich Keynote
gr2m
93
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Code Review Best Practice
trishagee
58
16k
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!