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

Making animations make sense

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Mariusz Cieśla Mariusz Cieśla
November 11, 2014
Design
580
0

Making animations make sense

UI animation is the new black. How to make it actually add to user experience, rather than being just a fancy addition?

Talk given at up.front Berlin on 11. November 2014

Unfortunately the GIFs from the original presentation don't work, so here's the original Keynote file zipped up: https://db.tt/FXOaa0Xs

Avatar for Mariusz Cieśla

Mariusz Cieśla

November 11, 2014

More Decks by Mariusz Cieśla

See All by Mariusz Cieśla
Design Systems - Polish Berlin Tech
Avatar for Mariusz Cieśla dotmariusz
3
610
Being Useful: A Short Introduction to Proactive UX Design — Refresh Conference 2016, Tallinn Estonia
Avatar for Mariusz Cieśla dotmariusz
2
480
Mobiconf 2014: Designing in the post-screen era
Avatar for Mariusz Cieśla dotmariusz
3
890
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
Avatar for Mariusz Cieśla dotmariusz
110
7k
Projektowanie dla ludzi: Emotional Design w praktyce - GDG Krakow 06.02.2013
Avatar for Mariusz Cieśla dotmariusz
1
290

Other Decks in Design

See All in Design
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
600
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3k
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
170
kintone Style Book
Avatar for kintone kintone
6
13k
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.2k
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
340
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
130
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
2
460
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
1k
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.1k
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
180

Featured

See All Featured
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.1k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
280
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

Transcript

  1. a Making animations make sense @dotmariusz — up.front UG, 11/11/2014

  2. Hi there! @dotmariusz — up.front UG, 11/11/2014

  3. @dotmariusz @dotmariusz — up.front UG, 11/11/2014

  4. Designer & developer
 (mostly designer) @dotmariusz — up.front UG, 11/11/2014

  5. www.lifetramp.com @dotmariusz — up.front UG, 11/11/2014

  6. t http://j.mp/designing-ui-animation @dotmariusz — up.front UG, 11/11/2014 <plug type=“shameless”> </plug>

  7. Animations are important. @dotmariusz — up.front UG, 11/11/2014

  8. Animations are awesome. @dotmariusz — up.front UG, 11/11/2014

  9. Animations are fun. @dotmariusz — up.front UG, 11/11/2014

  10. Animations are delightful. @dotmariusz — up.front UG, 11/11/2014

  11. Animations are hard. @dotmariusz — up.front UG, 11/11/2014

  12. Why should you care? @dotmariusz — up.front UG, 11/11/2014

  13. Animations are transitions. @dotmariusz — up.front UG, 11/11/2014

  14. Animations are explainers. @dotmariusz — up.front UG, 11/11/2014

  15. Animations are storytelling. @dotmariusz — up.front UG, 11/11/2014

  16. Animations are branding. @dotmariusz — up.front UG, 11/11/2014

  17. “With great power comes great responsibility” — Uncle Ben @dotmariusz

    — up.front UG, 11/11/2014

  18. Good interaction design. @dotmariusz — up.front UG, 11/11/2014

  19. Engage the user. @dotmariusz — up.front UG, 11/11/2014

  20. Illustrate state. @dotmariusz — up.front UG, 11/11/2014

  21. Provide visual feedback. @dotmariusz — up.front UG, 11/11/2014

  22. Visualize relationships. @dotmariusz — up.front UG, 11/11/2014

  23. Guide. @dotmariusz — up.front UG, 11/11/2014

  24. Reassure. @dotmariusz — up.front UG, 11/11/2014

  25. Affordances. @dotmariusz — up.front UG, 11/11/2014

  26. Good animation. (12 principles of animation, from “The Old Men”

    at Disney) @dotmariusz — up.front UG, 11/11/2014

  27. Anticipation. @dotmariusz — up.front UG, 11/11/2014

  28. @dotmariusz — up.front UG, 11/11/2014

  29. @dotmariusz — up.front UG, 11/11/2014

  30. @dotmariusz — up.front UG, 11/11/2014

  31. Squash & stretch. @dotmariusz — up.front UG, 11/11/2014

  32. @dotmariusz — up.front UG, 11/11/2014

  33. @dotmariusz — up.front UG, 11/11/2014

  34. @dotmariusz — up.front UG, 11/11/2014

  35. @dotmariusz — up.front UG, 11/11/2014

  36. Follow through. @dotmariusz — up.front UG, 11/11/2014

  37. @dotmariusz — up.front UG, 11/11/2014

  38. @dotmariusz — up.front UG, 11/11/2014

  39. @dotmariusz — up.front UG, 11/11/2014

  40. @dotmariusz — up.front UG, 11/11/2014

  41. Staging. @dotmariusz — up.front UG, 11/11/2014

  42. @dotmariusz — up.front UG, 11/11/2014

  43. @dotmariusz — up.front UG, 11/11/2014

  44. @dotmariusz — up.front UG, 11/11/2014

  45. @dotmariusz — up.front UG, 11/11/2014

  46. Pose to pose animation. @dotmariusz — up.front UG, 11/11/2014

  47. @dotmariusz — up.front UG, 11/11/2014

  48. @dotmariusz — up.front UG, 11/11/2014

  49. @dotmariusz — up.front UG, 11/11/2014

  50. @dotmariusz — up.front UG, 11/11/2014

  51. Exaggeration. @dotmariusz — up.front UG, 11/11/2014

  52. @dotmariusz — up.front UG, 11/11/2014

  53. @dotmariusz — up.front UG, 11/11/2014

  54. @dotmariusz — up.front UG, 11/11/2014

  55. @dotmariusz — up.front UG, 11/11/2014

  56. Personality. @dotmariusz — up.front UG, 11/11/2014

  57. @dotmariusz — up.front UG, 11/11/2014

  58. @dotmariusz — up.front UG, 11/11/2014

  59. @dotmariusz — up.front UG, 11/11/2014

  60. @dotmariusz — up.front UG, 11/11/2014

  61. The “nopes” of animation. @dotmariusz — up.front UG, 11/11/2014

  62. Do not annoy. @dotmariusz — up.front UG, 11/11/2014

  63. Do not distract. @dotmariusz — up.front UG, 11/11/2014

  64. Do not block. @dotmariusz — up.front UG, 11/11/2014

  65. The state of tools @dotmariusz — up.front UG, 11/11/2014

  66. Keynote @dotmariusz — up.front UG, 11/11/2014

  67. After Effects @dotmariusz — up.front UG, 11/11/2014

  68. Edge Animate @dotmariusz — up.front UG, 11/11/2014

  69. Framer Studio @dotmariusz — up.front UG, 11/11/2014

  70. Quartz Composer & Origami @dotmariusz — up.front UG, 11/11/2014

  71. HTML @dotmariusz — up.front UG, 11/11/2014

  72. “First company to come up with animation equivalent of Sketch

    will earn a lot of money.” @dotmariusz — up.front UG, 11/11/2014

  73. Where to learn from? @dotmariusz — up.front UG, 11/11/2014

  74. Classic animation @dotmariusz — up.front UG, 11/11/2014 http://the12principles.tumblr.com/

  75. Other designers @dotmariusz — up.front UG, 11/11/2014 https://dribbble.com/search?q=ui+gif

  76. Video games @dotmariusz — up.front UG, 11/11/2014

  77. Material Design by Google @dotmariusz — up.front UG, 11/11/2014

  78. Have fun. @dotmariusz — up.front UG, 11/11/2014

  79. t http://j.mp/designing-ui-animation Thanks! @dotmariusz