This document discusses motion and animation in design systems. It provides over 100 examples of design systems that include motion, discusses best practices for incorporating animation, and outlines a process for specifying animation that includes storyboards, motion specs, motion comps, and clickdummies. The document argues that meaningful motion can help express a brand's personality and that milliseconds in timing can significantly impact an animation's effectiveness.

1. motion IN DESIGN SYSTEMS
NOVEMBER 12. 2019
@BENNOLOEWENBERG
Sketch Edition

2. �IKE SOUN� …
Source: Google

3. Source: Google – Animation video: https://youtu.be/HpkAHSZBG4w (00:19)

4. Source: Slack – Animation video: https://youtu.be/HpkAHSZBG4w (00:44)

5. @BennoLoewenberg
therefore often not part of a Design System
… G�NE WHEN DON�

6. Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora, Axiom,
Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon,
Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation,
Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather,
Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma,
Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity,
Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon,
Indigo, Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid,
Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae,
Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar,
Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly,
Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol,
Purple, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter,
Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark,
Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch, Swarm,
e, Terra, ThingWorx, Thumbprint, Uniform, Unison,
ty, Ustyle, Vanilla, Wonderblocks,
Yarn@BennoLoewenberg
DESIGN SYSTEMS

7. Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora, Axiom,
Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon,
Chrome, Cirrus, Clarity, Clay, Comet, Connect, Constellation,
Cosmos, DressCode, Duet, Eos, Epoxy, Evergreen, Fabric, Feather,
Feelix, Fiori, Fish Tank, Fleet, Float, Fluent, Foundation, Forma,
Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity,
Grommet, Group, Harmony, Hedwig, Helix, Honeycomb, Horizon,
Indigo, Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid,
Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Minutiae,
Mixtape, Momentum, Mosaic, Muesli, Nachos, Nicollet, Northstar,
Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly,
Photon, Plasma, Polaris, Poncho, Precise, Predix, Primer, Protocol,
Purple, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter,
Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark,
Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch, Swarm,
e, Terra, ThingWorx, Thumbprint, Uniform, Unison,
ty, Ustyle, Vanilla, Wonderblocks,
Yarn@BennoLoewenberg
�ESIGN SYST�MS

8. @BennoLoewenberg
+ Express the brand
+ Inform and guide the user
�URPOSE & US�

9. Source: Audi – Animation video: https://youtu.be/HpkAHSZBG4w (01:33)

10. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w 02:02)

11. “ Just like typography and color,
the animation you use says something
about your product and its personality.”
Source: Val Head

12. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (02:37)

13. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:05)

14. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:19)

15. “ Motion is a key part of any UX.
Because most digital interfaces
lack real world cues.
Motion helps to understand an UI.”
Source: Una Kravets

16. Source: Caleb Barclay
Visual Modularity
Animation Modularity

17. 1. consistency in how animation is used
(across all products)
2. save your team time
3. alignment with your brand
�EPEATABLE & �EUSABLE
MOTION PA�ERNS
Source: Val Head

18. @BennoLoewenberg
C�TCHING
THE HAS�Y

19. + Timing curves
+ Usage types (brand, UX)
+ Choreography patterns (objects & interplay)
+ Effects (size, visibility)
+ Flows where motion is missing or too heavy
WHAT TO L�K FOR
@BennoLoewenberg

20. �NIMATION �UDI�
Source: Alla Kholmatova

21. �NIMATION �UDI�
Source: Alla Kholmatova

22. �NIMATION �UDI�
Source: Caleb Barclay

23. @BennoLoewenberg
�EFINING
THE TRANSIEN�

24. @BennoLoewenberg
Expressing brand values and brand personality
with meaningful motion …
�RAND TO EXPERIENC�

25. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (04:51)

26. Source: Ant Motion – Animation video: https://youtu.be/HpkAHSZBG4w (05:23)

27. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (05:47)

28. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:11)

29. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:28)

30. Source: Alla Kholmatova

31. @BennoLoewenberg
�UILDING
THE NONPERMANEN�

32. @BennoLoewenberg
+ Animation durations
+ Easing values
+ Named effects
+ Choreography & rhythm
�UILDING B�OCKS

33. Motion Scale
Typopgrafic Scale
Source: Caleb Barclay

34. Source: Otto – Animation video: https://youtu.be/HpkAHSZBG4w (08:07)

35. Source: Caleb Barclay – Animation video: https://youtu.be/HpkAHSZBG4w (08:26)

36. Source: SAP »Fiori«

37. Source: Puralsight

38. Source: Workday »Canvas« & Puralsight (commented)
Macro Motion
Micro Motion

39. Source: Salesforce »Lightning«
ASP�CTS

40. Source: FutureLearn
A��LICATIONS

41. Source: SAP »Fiori«
FU�CTIONS

42. Source: Price line »One« – Animation video: https://youtu.be/HpkAHSZBG4w (09:31)

43. modifiers
duration
easing
applicable to
Source: Caleb Barclay (commented)

44. STATICS
FOR ANIMATIO�
@BennoLoewenberg

45. S�RY→BOAR�
@BennoLoewenberg

46. @BennoLoewenberg

47. @BennoLoewenberg

48. @BennoLoewenberg

49. @BennoLoewenberg

50. @BennoLoewenberg

51. @BennoLoewenberg – Animation video: https://youtu.be/HpkAHSZBG4w (11:04)

52. SPE��ING
THE GLIMPS�
@BennoLoewenberg

53. S�RY→BOAR�
@BennoLoewenberg

54. @BennoLoewenberg
+ MOTION SPECS

55. @BennoLoewenberg

56. @BennoLoewenberg

57. @BennoLoewenberg

58. @BennoLoewenberg

59. Source: Motion Methods – Motion Spec Kit for Sketch
Sketch stencils

60. �IVING �ELIVERABLES
+ Storyboards + Motion Specs
+ Motion Comps (a. k. a. videos)
+ Interactive Clickdummies
@BennoLoewenberg

61. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:19)

62. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:36)

63. Source: Anima
Sketch plugin

64. Source: Diya
Sketch plugin

65. Source: Caleb Barclay (commented)
Key stages
Easings
Choreography

66. Source: Caleb Barclay (commented)
Tech spec
Motion comp
(or interactive
click dummy)
334 ?

67. “ Milliseconds can make or brake an … anim-
ation.”
@BennoLoewenberg

68. Source: Sparebank – Animation video: https://youtu.be/HpkAHSZBG4w (13:33)

69. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (14:00)

70. @BennoLoewenber using Hype
( Live demo )

71. MOMENTUM
FOR M�TION
@BennoLoewenberg

72. Source: Google »Material«
WH�T

73. Source: Google »Material«
�OW

74. “ A combination of both motion principles
and implementable examples provides
the most effective combination
for teams building internal
design systems.”
Source: Bryan Zavestoski

75. “ If animation is always left to the end,
it can never be more than decoration.”
Source: Val Head

76. @�ENNO�OEWENBERG
LINKEDIN / XING / TWI�ER

77. http://
Talks & Workshops