Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Stephanie Sharp Stephanie Sharp
August 31, 2015
Design
1.5k
1

Designing for animation is not as hard as you think

Presented at /dev/world/2015

Avatar for Stephanie Sharp

Stephanie Sharp

August 31, 2015

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
Starfall (2025)
Avatar for Rachel Poon rezaline
0
170
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
190
Navigating the journey into design leadership - Hatch Atelier, Berlin, 2026
Avatar for Andy Polaine apolaine
0
120
RawrXD: The Sword
Avatar for Sean Natarajan seanvraj_arts
0
180
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
Avatar for AccessInnovations accessinnovations
0
270
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
430
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
Avatar for sekig(ojiee) sekiguchiy
0
200
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6.3k
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
1k
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
2
240
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
Avatar for Assured Inc. assuredjp
PRO
0
240
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
1
360

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
630
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
380
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
2
2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
410
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.4k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
410
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k

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]