Motion in Design Systems (english) #UXcampHH

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.

Transcript

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