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

Designing Animation Awesomeness - Artifact Austin

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
May 06, 2014
Design
4
440

Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

May 06, 2014
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
110
Designing Animation Awesomeness - FOWD 2014
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
520
Putting Your UIs in Motion (AEA Orlando)
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
640
Designing Animation Awesomeness - Artifact East
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
870
Web Designer/ Motion Designer - Blend Conf 2014
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
200
Web Design / Motion Design
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
130
Creative CSS: Thinking in the 3rd dimension FOWD NY
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
400
CSS Animations Are The Awesomest!
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
180
Responsive Typography Techniques
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
680

Other Decks in Design

See All in Design
Детский парк Фили
E56b3a9f8228a4274e30ae739ecca06c?s=48 zapoimu
0
560
Bec Purser - Are you consulting, collaborating, or co-designing? And why it matters.
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
110
Overflow - IdentityDeck
88fa9de638d9581ccb33a627b9d2ebf5?s=48 overflowinc
0
3.9k
「気持ちのよい朝」をつくるデザイン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
0
120
Nobel Finds a Staryu
A2b28582eb2007b9efe661942bb29a94?s=48 innsamity
0
160
バーチャル街づくり連合（構想V1）
8c36fb60ec838f3116b7fbebe778948e?s=48 showyingart
0
1.3k
Bertha
4dd3c0167458259cfadf714fad734ee9?s=48 yvonnehsuanho
PRO
1
320
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
3.1k
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
Ed946da673ee07c8b3b41b7aa8268e13?s=48 bookslope
0
470
Misconceptions of Design Thinking
B421ef1d479124a64323e42e3c266366?s=48 yosukeonishi
3
370
tsunasapo_branch-concept202007
05b48de035af15c85515c4900571c3a0?s=48 tsunasapo
0
180
Driveline: Arizona (Storyboards)
966a7d3473313a57827602754b617993?s=48 8sided
PRO
0
170

Featured

See All Featured
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.2k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
48
2.6k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k

Transcript

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

    & IN OUR DESIGN PROCESS

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

    & IN OUR DESIGN PROCESS

  3. RWD + Animation?

  4. None

  5. Animation = Communication

  6. None
  7. None

  8. Animation must match your message.

  9. None

  10. cubic-bezier(0.47, 0, 0.745, 0.715)

  11. vimeo.com/93206523

  12. More than fluff

  13. None
  14. None

  15. Animation + UX FTW

  16. ANIMATION CAN: Establish location

  17. None
  18. None

  19. ANIMATION CAN: Guides tasks

  20. None
  21. None
  22. None

  23. ANIMATION CAN: Demonstrate

  24. None
  25. None
  26. None

  27. ANIMATION CAN: Turn your hierarchy up to 11

  28. None
  29. None

  30. UI animation principles

  31. 1 Always be flexible

  32. None
  33. None

  34. 2 Avoid creating obstacles

  35. None
  36. None

  37. 3 Speed is an art

  38. UI animations should be as fast as they can still

    be readable. readable.

  39. Context matters more than magic numbers for animation speed.

  40. Getting out of your head

  41. None
  42. None

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

  44. None
  45. None
  46. None

  47. framerjs.com/

  48. goo.gl/RXImkC

  49. None

  50. Look beyond the web

  51. artofthetitle.com

  52. capptivate.co

  53. None

  54. Make the awesomest of things!

  55. alltherightmoves.valhead.com

  56. valhead.com/book

  57. codepen.io/valhead alltherightmoves.valhead.com valhead.com @vlh val@valhead.com Thanks!