Motion is a key part pf UX and brand: animation supports the product UX and expression of the brand personality. Due to it's intagible nature, too often motion becomes an afterthought and therefore neglected in design (systems), despite it's fundamental nature. This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system.

1. motion IN DESIGN SYSTEMS
AUGUST 3. 2019
@BENNOLOEWENBERG

2. �IKE SOUN� …
Source: Google

3. Source: Google

4. @BennoLoewenberg
therefore often not part of a Design System
… G�NE WHEN DON�

5. Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora,
Axiom,
Backpack, Base, Binary, Bloom,
Blueprint,
Boundless, Build, Bouy, Bolt, Canvas,
Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Comet,
Connect, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather,
Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Forma,
Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity,
Grommet, Harmony, Hedwig, Helix, Honeycomb, Horizon, Indigo,
Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid, Luci,
Luna, Material, Mayflower, Miui, Mind, Mineral, Mixtape,
Momentum, Mosaic, Nachos, Nicollet, Northstar, Nova, One,
Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly, Photon,
Plasma, Polaris, Precise, Predix, Primer, Protocol, Purple, Quik,
Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds,
Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum,
tarling, Stitch, Swarm, ThingWorx, Thumbprint,
nison, Unity, Ustyle, Vanilla,
derblocks@BennoLoewenberg
DESIGN SYSTEMS

6. @BennoLoewenberg
+ Design debt reduction (cohesive brand & UX)
+ More focus on UX & specialties (no redundancies)
+ Speeding up the processes (design, handover, code)
+ Increasing business value (maintainability, scalability)
GOA�S

7. @BennoLoewenberg
+ Express the brand
+ Inform and guide the user
�URPOSE & US�

8. Source: Caleb Barclay
Visual Modularity
Animation Modularity

9. @BennoLoewenberg
C�TCHING
THE HAS�Y

10. + 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

11. �NIMATION �UDI�
Source: Alla Kholmatova

12. �NIMATION �UDI�
Source: Alla Kholmatova

13. �NIMATION �UDI�
Source: Caleb Barclay

14. @BennoLoewenberg
�EFINING
THE TRANSIEN�

15. @BennoLoewenberg
Expressing brand values and brand personality
with meaningful motion …
�RAND TO EXPERIENC�

16. Source: Google »Material«

17. Source: IBM »Carbon«

18. Source: Salesforce »Lightning«
ASP�CTS

19. Source: FutureLearn
A��LICATIONS

20. Source: Alla Kholmatova

21. @BennoLoewenberg
�UILDING
THE NONPERMANEN�

22. @BennoLoewenberg
+ Animation durations
+ Easing values
+ Named effects
+ Choreography & rhythm
�UILDING B�OCKS

23. modifiers
duration
easing
applicable to
Source: Caleb Barclay (commented)

24. Motion Scale
Typopgrafic Scale
Source: Caleb Barclay

25. Source: Caleb Barclay

26. Source: Puralsight

27. Source: Salesforce »Lightning«

28. @BennoLoewenberg
SPE��ING
THE GLIMPS�

29. @BennoLoewenberg

30. @BennoLoewenberg

31. @BennoLoewenberg

32. @BennoLoewenberg

33. Source: Caleb Barclay (commented)
Key stages
Easings
Choreography

34. Source: Caleb Barclay (commented)
Tech spec
Motion comp
(or interactive
click dummy)

35. @BennoLoewenber using Hype
( Live demo )

36. @BennoLoewenberg
STATICS
FOR ANIMATIO�
( Live paper prototyping session )

37. S�RY→BOAR�
@BennoLoewenberg

38. @BennoLoewenberg

39. @BennoLoewenberg

40. @BennoLoewenberg

41. @BennoLoewenberg

42. @BennoLoewenberg

43. @BennoLoewenberg
MOMENTUM
FOR M�TION

44. Source: Google »Material«
WH�T

45. Source: Google »Material«
�OW

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

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

48. http://
Talks & Workshops