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 )

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