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

Ce545904f81ef4a81dead98c38b4b240?s=47 Benno Loewenberg
November 12, 2019

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

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

November 12, 2019
Tweet

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