Animation in Designsystemen (deutsch) #MuC2020

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

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

September 07, 2020
Tweet

Transcript

  1.   Animation    IN DESIGNSYSTEMEN  7. SEPTEMBER 2020 @BENNOLOEWENBERG

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

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

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

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

    VORB�I  
  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 
  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� 
  8. @BennoLoewenberg + Ausdruck der Markenpersönlichkeit + Hilfe und Anleitung für

    Nutzer   ZWE�K & NU�ZEN 
  9. Quelle: Audi – Animation als Video: https://youtu.be/t7k2alfyOEM (01:33)

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

  11. “ Just like typography and color, the animation you use says

    something about your product and its personality.” Quelle: Val Head
  12. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (02:34)

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

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

  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
  16. Quelle: Caleb Barclay Visual Modularity Animation Modularity

  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
  18. @BennoLoewenberg   C�TCHING    THE HAS�Y 

  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
  20.   �NIMATION �UDI�  Quelle: Alla Kholmatova

  21.   �NIMATION �UDI�  Quelle: Alla Kholmatova

  22.   �NIMATION �UDI�  Quelle: Caleb Barclay

  23. @BennoLoewenberg   �EFINING   THE TRANSIEN� 

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

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

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

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

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

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

  30. Quelle: Alla Kholmatova

  31. @BennoLoewenberg   �UILDING    THE NONPERMANEN� 

  32. @BennoLoewenberg + Animationsdauer + Easing-Werte + Benannte Effekte + Choreographie

    & Rhythmus   �AUSTEIN� 
  33. Motion Scale Typopgraphic Scale Quelle: Caleb Barclay

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

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

  36. Quelle: SAP »Fiori«

  37. Quelle: Puralsight

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

  39. Quelle: Salesforce »Lightning«   ASP�KTE 

  40. Quelle: FutureLearn   ANWEN�UNGEN 

  41. Quelle: SAP »Fiori«   FU�KTIONEN 

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

  43. Modifizierer Dauer Easing Anwendung Quelle: 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 als Video: https://youtu.be/t7k2alfyOEM (11:02)

  52.  SPE��ING    THE GLIMPS�  @BennoLoewenberg

  53.   S�RY→BOAR�  @BennoLoewenberg

  54. @BennoLoewenberg + MOTION SPECS 

  55. @BennoLoewenberg

  56. @BennoLoewenberg

  57. @BennoLoewenberg

  58. @BennoLoewenberg

  59.   �EBENDIGE �IEFERFORM  + Storyboards + Motion Specs + Motion-Comps

    (d. h. Videos) + Interaktive Klick-Dummies @BennoLoewenberg
  60. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:13)

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

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

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

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

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

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

  67.  MOMENTUM    FOR M�TION  @BennoLoewenberg

  68. Quelle: Google »Material«  W�S 

  69. Quelle: Google »Material«   WI� 

  70. “ A combination of both motion principles and implementable examples provides

    the most effective combination for teams building internal design systems.” Quelle: Bryan Zavestoski
  71. “ If animation is always left to the end, it can

    never be more than decoration.” Quelle: Val Head
  72.   @�ENNO�OEWENBERG   LINKEDIN / XING / TWI�ER

  73. http:// Talks & Workshops