Motion in Design Systems (english) #UXcampHH

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.

Ce545904f81ef4a81dead98c38b4b240?s=128

Benno Loewenberg

August 03, 2019
Tweet

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