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

Designing for animation is not as hard as you t...

Avatar for Stephanie Sharp Stephanie Sharp
August 31, 2015
Design
1
1.5k

Designing for animation is not as hard as you think

Presented at /dev/world/2015

Avatar for Stephanie Sharp

Stephanie Sharp

August 31, 2015
Tweet

More Decks by Stephanie Sharp

See All by Stephanie Sharp
Material Design on iOS
Avatar for Stephanie Sharp stephsharp
0
4.6k
Designing Delightful User Experiences with UIKit Dynamics
Avatar for Stephanie Sharp stephsharp
0
1k

Other Decks in Design

See All in Design
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.4k
第18回サイゼミ
Avatar for LW lw
1
3.3k
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
490
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
830
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
860
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
200
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
950
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
0
120
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
550

Featured

See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
220
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
79
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.8k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k

Transcript

  1. /dev/world Designing for animation is not as hard as you

    think Stephanie Sharp Odecee Aug 31-Sep 1, 2015

  2. Designing for animation is not as hard as you think

    stephsharp.me/dw2015 @stephrsharp

  3. Resources stephsharp.me/dw2015 @stephrsharp [email protected]

  4. Why animate?

  5. 1 Keep the user oriented

  6. Keep the user oriented Direct user attention 2

  7. Keep the user oriented Direct user attention Connect behaviour 3

  8. Communicate personality Keep the user oriented Direct user attention Connect

    behaviour 4

  9. Delightful Weather

  10. Delightful Weather

  11. Screenshots show you too little. Apps show you too much.

    Make little animated experiments. Why prototype animation? Designing with Animation (WWDC 2015 Session 803)

  12. Which one?

  13. None

  14. Keep the user oriented

  15. Calendar on iOS Keep the user oriented 1

  16. None

  17. Duolingo Keep the user oriented 1

  18. None

  19. Stripe Checkout Keep the user oriented 1

  20. None

  21. Demo 1: Links & transitions

  22. None

  23. Direct user attention

  24. Direct user attention 2 …towards an action (focus/prompt) …towards the

    result of an action (feedback) …away from something (distract)

  25. Examples in iOS Direct user attention (focus) 2

  26. None
  27. None

  28. Pinterest Direct user attention (feedback) 2

  29. None

  30. Stripe verification code Direct user attention (distract) 2

  31. None

  32. Demo 2: Build animations

  33. Connect behaviour

  34. Clear Connect behaviour 3

  35. None

  36. Demo 3: Self-playing prototype

  37. Communicate personality

  38. MailChimp Communicate personality 4

  39. None

  40. This is your moment of glory.

  41. High fives!

  42. Communicate personality 4 Dots

  43. None

  44. Inbox by Google Communicate personality 4

  45. None

  46. Demo 4: Animated weather icons

  47. None
  48. None
  49. None

  50. Let’s recap

  51. 1 Keep the user oriented

  52. Keep the user oriented Direct user attention 2

  53. Keep the user oriented Direct user attention Connect behaviour 3

  54. Communicate personality Keep the user oriented Direct user attention Connect

    behaviour 4

  55. Resources Designing with Animation WWDC 2015 Session 803 Prototyping: Fake

    It Till You Make It WWDC 2014 Session 223 Tools and Tips for Prototyping Apps /dev/world/2014, Judit Klein
  56. None
  57. None

  58. Thanks! stephsharp.me/dw2015 @stephrsharp [email protected]