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

Designing Animation Awesomeness - Artifact Austin

Avatar for Val Head Val Head
May 06, 2014
Design
4
520

Designing Animation Awesomeness - Artifact Austin

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

Avatar for Val Head

Val Head

May 06, 2014
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
150
Designing Animation Awesomeness - FOWD 2014
Avatar for Val Head valhead
2
540
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
780
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
300
Web Design / Motion Design
Avatar for Val Head valhead
1
170
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
440
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
250
Responsive Typography Techniques
Avatar for Val Head valhead
10
790

Other Decks in Design

See All in Design
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
180
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
280
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
770
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
210
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
460
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
330
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
160
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
470
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
Avatar for マズロー安達 maslow_akkun
0
150
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
440
How to get a Tiger to Tulsa
Avatar for Brynn McDucky P. mcduckyart
0
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
5
1.4k

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
970
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k

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 [email protected] Thanks!