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

Animation in Designsystemen (deutsch) #MuC2020

Benno Loewenberg
September 07, 2020

Animation in Designsystemen (deutsch) #MuC2020

Animation ist ein Schlüsselelement guter User Experience und Markenerscheinung, da diese – wenn gekonnt verwendet – Produkte (UUX) und die Markenpersönlichkeit unterstützt.

Aufgrund ihres flüchtigen Wesens erhält Animation zu oft nur wenige oder gar keine Beachtung in Design(systemen), trotz ihrer mindestens hilfreichen, zumeist aber fundamentalen Rolle.

Dieser sehr greifbare Vortrag zeigt Art und Anwendung guter Animation für Benutzeroberflächen sowie deren erfolgreiche Implementierung in Designsysteme.

(animierte Version der Folien hier: https://www.youtube.com/watch?v=t7k2alfyOEM )

#DesignSysteme #DesignSystem #Animation #Motion #InteractionDesign #MotionDesign #Branding #UIAnimation #MeaningfulMotion #UITransitions #InteractionStates #UX #UserExperience #Usablitity #UserFlow #Choreographie #DSXFRA

Benno Loewenberg

September 07, 2020
Tweet

More Decks by Benno Loewenberg

Other Decks in Business

Transcript

  1.   Animation 
      IN DESIGNSYSTEMEN 
    7. SEPTEMBER 2020
    @BENNOLOEWENBERG

    View Slide

  2.   WI� K��NG …  
    Quelle: Google

    View Slide

  3. Quelle: Google – Animation als Video: https://youtu.be/t7k2alfyOEM (00:19)

    View Slide

  4. Quelle: Slack – Animation als Video: https://youtu.be/t7k2alfyOEM (00:44)

    View Slide

  5. @BennoLoewenberg
    deswegen oft nicht Teil eines Designsystems
      … W�G WE� VORB�I  

    View Slide

  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, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir,
    Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork,
    Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch,
    rm, Tape, Terra, ThingWorx, Thumbprint, Uniform,
    Unison, Unity, Ustyle, Vanilla,
    erblocks, Yarn
    @BennoLoewenberg
      DESIGNSYSTEME 

    View Slide

  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, Quartz, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir,
    Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork,
    Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch,
    rm, Tape, Terra, ThingWorx, Thumbprint, Uniform,
    Unison, Unity, Ustyle, Vanilla,
    derblocks, Yarn
    @BennoLoewenberg
      �ESIGNSYSTEM� 

    View Slide

  8. @BennoLoewenberg
    + Ausdruck der Markenpersönlichkeit
    + Hilfe und Anleitung für Nutzer
      ZWE�K & NU�ZEN 

    View Slide

  9. Quelle: Audi – Animation als Video: https://youtu.be/t7k2alfyOEM (01:33)

    View Slide

  10. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM 02:02)

    View Slide

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

    View Slide

  12. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (02:34)

    View Slide

  13. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:01)

    View Slide

  14. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:15)

    View Slide

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

    View Slide

  16. Quelle: Caleb Barclay
    Visual Modularity
    Animation Modularity

    View Slide

  17. 1. Konsistenz in der Verwendung von Animation
    (über alle Produkte hinweg)
    2. Zeitersparnis für alle im Team
    3. Durchgängige Markenerscheinung
      WI�DERVERW�NDBAR� 
    B�WEGU�GSMUSTE� 
    Quelle: Val Head

    View Slide

  18. @BennoLoewenberg
      C�TCHING 
      THE HAS�Y 

    View Slide

  19. + Timing-Kurven
    + Verwendungsarten (Marke, UX)
    + Choreographische Muster (Objekte & Zusammenspiel)
    + Effekte (Größe, Sichtbarkeit)
    + Abläufe, bei denen Animation fehlt oder ERSCHLÄGT
     WORAU� ACHTE� 
    @BennoLoewenberg

    View Slide

  20.   �NIMATION �UDI� 
    Quelle: Alla Kholmatova

    View Slide

  21.   �NIMATION �UDI� 
    Quelle: Alla Kholmatova

    View Slide

  22.   �NIMATION �UDI� 
    Quelle: Caleb Barclay

    View Slide

  23. @BennoLoewenberg
      �EFINING 
     THE TRANSIEN� 

    View Slide

  24. @BennoLoewenberg
    Markenwerte und -persönlichkeit ausdrücken
    mittels bedeutungstragender Animation …
      M�RKEN�RLEBNIS 

    View Slide

  25. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (04:48)

    View Slide

  26. Quelle: Ant Motion – Animation als Video: https://youtu.be/t7k2alfyOEM (05:20)

    View Slide

  27. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (05:45)

    View Slide

  28. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:07)

    View Slide

  29. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:25)

    View Slide

  30. Quelle: Alla Kholmatova

    View Slide

  31. @BennoLoewenberg
      �UILDING 
      THE NONPERMANEN� 

    View Slide

  32. @BennoLoewenberg
    + Animationsdauer
    + Easing-Werte
    + Benannte Effekte
    + Choreographie & Rhythmus
      �AUSTEIN� 

    View Slide

  33. Motion Scale
    Typopgraphic Scale
    Quelle: Caleb Barclay

    View Slide

  34. Quelle: Otto – Animation als Video: https://youtu.be/t7k2alfyOEM (08:05)

    View Slide

  35. Quelle: Caleb Barclay – Animation als Video: https://youtu.be/t7k2alfyOEM (08:23)

    View Slide

  36. Quelle: SAP »Fiori«

    View Slide

  37. Quelle: Puralsight

    View Slide

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

    View Slide

  39. Quelle: Salesforce »Lightning«
      ASP�KTE 

    View Slide

  40. Quelle: FutureLearn
      ANWEN�UNGEN 

    View Slide

  41. Quelle: SAP »Fiori«
      FU�KTIONEN 

    View Slide

  42. Quelle: Price line »One« – Animation als Video: https://youtu.be/t7k2alfyOEM (09:27)

    View Slide

  43. Modifizierer
    Dauer
    Easing
    Anwendung
    Quelle: Caleb Barclay (commented)

    View Slide

  44.  STATICS 
      FOR ANIMATIO� 
    @BennoLoewenberg

    View Slide

  45.   S�RY→BOAR� 
    @BennoLoewenberg

    View Slide

  46. @BennoLoewenberg

    View Slide

  47. @BennoLoewenberg

    View Slide

  48. @BennoLoewenberg

    View Slide

  49. @BennoLoewenberg

    View Slide

  50. @BennoLoewenberg

    View Slide

  51. @BennoLoewenberg – Animation als Video: https://youtu.be/t7k2alfyOEM (11:02)

    View Slide

  52.  SPE��ING 
      THE GLIMPS� 
    @BennoLoewenberg

    View Slide

  53.   S�RY→BOAR� 
    @BennoLoewenberg

    View Slide

  54. @BennoLoewenberg
    + MOTION SPECS 

    View Slide

  55. @BennoLoewenberg

    View Slide

  56. @BennoLoewenberg

    View Slide

  57. @BennoLoewenberg

    View Slide

  58. @BennoLoewenberg

    View Slide

  59.   �EBENDIGE �IEFERFORM 
    + Storyboards + Motion Specs
    + Motion-Comps (d. h. Videos)
    + Interaktive Klick-Dummies
    @BennoLoewenberg

    View Slide

  60. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:13)

    View Slide

  61. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:36)

    View Slide

  62. Quelle: Caleb Barclay (commented)
    Schlüssel-
    zustände
    Easings
    Choreographie

    View Slide

  63. Quelle: Caleb Barclay (commented)
    Technische
    Spezifikation
    Motion-Comp
    (od. interaktiver
    Klick-Dummy)
    334 ?

    View Slide

  64. “ Millisekunden entscheiden darüber,
    obeine Animation gelingt oder ni…cht.”
    @BennoLoewenberg

    View Slide

  65. Quelle: Sparebank – Animation als Video: https://youtu.be/t7k2alfyOEM (13:14)

    View Slide

  66. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (13:41)

    View Slide

  67.  MOMENTUM 
      FOR M�TION 
    @BennoLoewenberg

    View Slide

  68. Quelle: Google »Material«
     W�S 

    View Slide

  69. Quelle: Google »Material«
      WI� 

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. http://
    Talks & Workshops

    View Slide