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

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