Motion in Design Systems - Sketch Edition (english) #SketchMUC

Motion is a key part pf UX and brand, since animation – if done right – supports the product (UUX) and expression of the brand personality.

Due to it's intagible nature, too often motion becomes an afterthought – if a though at all – and therefore neglected in design (systems), albeit its at least supporting, but often fundamental role.

This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system.

( Video of animated slides here: https://youtu.be/HpkAHSZBG4w )

#DesignSystems #DesignSystem #Animation #Motion #InteractionDesign #MotionDesign #Branding #UIAnimation #MeaningfulMotion #UITransitions #InteractionStates #UX #UserExperience #Usabliity #UserFlow #Choreography #DSXFRA

Transcript

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