Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Animation Awesomeness - FOWD 2014

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Val Head Val Head
November 04, 2014
Design
550
2

Designing Animation Awesomeness - FOWD 2014

Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.

Avatar for Val Head

Val Head

November 04, 2014

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
190
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
840
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1.1k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
360
Web Design / Motion Design
Avatar for Val Head valhead
1
190
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
550
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
480
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
270
Responsive Typography Techniques
Avatar for Val Head valhead
10
860

Other Decks in Design

See All in Design
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
550
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
810
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.2k
The Art of Caring
Avatar for Klemens klemens
0
320
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
28k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
620
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
Avatar for BASE, Inc. base
PRO
0
100
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
4
1.7k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
220
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
270

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
170
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
130
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
170
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
220
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
110
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
190

Transcript

  1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS
  2. None
  3. None
  4. None

  5. Animation + UX FTW

  6. ANIMATION: Establishes location

  7. None
  8. None

  9. ANIMATION: Guides tasks

  10. None
  11. None
  12. None

  13. ANIMATION: Demonstrates

  14. None
  15. None
  16. None

  17. ANIMATION: Is totally a diva

  18. None
  19. None

  20. http://goo.gl/XKODuq

  21. Doing it with style

  22. Keep UI Animations Flexible

  23. None
  24. None

  25. Don’t create obstacles

  26. None
  27. None

  28. prototype 
 prototype 
 prototype!

  29. Look at speed and readability

  30. .2s to .6s 
 a happy place for “small” interactions

  31. Ease-outs 
 feel more “responsive”

  32. None

  33. “Sometimes when we release an update, I tighten up an

    old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
  34. None

  35. More complex easing needs more time 
 to be readable.

  36. None

  37. Match motion to your message

  38. None
  39. None
  40. None

  41. Your choice of easing makes all the difference. 

  42. cubic-beziers

  43. Getting out of your head

  44. None
  45. None

  46. Get your idea moving on screen as early as possible.

  47. None
  48. None

  49. http://goo.gl/7IzUDh

  50. None

  51. goo.gl/RXImkC

  52. Look beyond 
 the web

  53. artofthetitle.com

  54. capptivate.co

  55. None

  56. Make 
 the awesomest 
 of things!

  57. alltherightmoves.valhead.com valhead.com/book codepen.io/valhead ! @vlh [email protected] Thanks!

  58. alltherightmoves.valhead.com

  59. valhead.com/book