Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  motion IN DESIGN SYSTEMS 
NOVEMBER 12. 2019
@BENNOLOEWENBERG
Sketch Edition
  �IKE SOUN� …  
Source: Google
Source: Google – Animation video: https://youtu.be/HpkAHSZBG4w (00:19)
Source: Slack – Animation video: https://youtu.be/HpkAHSZBG4w (00:44)
@BennoLoewenberg
therefore often not part of a Design System
  … G�NE WHEN DON�  
Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora, Axiom,
Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
Bou...
Alps, Alta, Anatomy,
Archipelago, Argon, Apex, Aurora, Axiom,
Backpack, Base, Binary, Bits, Bloom, Bluemix, Blueprint,
Bou...
@BennoLoewenberg
+ Express the brand
+ Inform and guide the user
  �URPOSE & US� 
Source: Audi – Animation video: https://youtu.be/HpkAHSZBG4w (01:33)
Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w 02:02)
“ Just like typography and color,
the animation you use says something
about your product and its personality.”
Source: Va...
Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (02:37)
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:05)
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:19)
“ Motion is a key part of any UX.
Because most digital interfaces
lack real world cues.
Motion helps to understand an UI.”...
Source: Caleb Barclay
Visual Modularity
Animation Modularity
1. consistency in how animation is used
(across all products)
2. save your team time
3. alignment with your brand
  �EPEAT...
@BennoLoewenberg
  C�TCHING 
		   THE HAS�Y 
+ Timing curves
+ Usage types (brand, UX)
+ Choreography patterns (objects & interplay)
+ Effects (size, visibility)
+ Flo...
  �NIMATION �UDI� 
Source: Alla Kholmatova
  �NIMATION �UDI� 
Source: Alla Kholmatova
  �NIMATION �UDI� 
Source: Caleb Barclay
@BennoLoewenberg
  �EFINING 
		  THE TRANSIEN� 
@BennoLoewenberg
Expressing brand values and brand personality
with meaningful motion …
  �RAND TO EXPERIENC� 
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (04:51)
Source: Ant Motion – Animation video: https://youtu.be/HpkAHSZBG4w (05:23)
Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (05:47)
Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:11)
Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:28)
Source: Alla Kholmatova
@BennoLoewenberg
  �UILDING 
  THE NONPERMANEN� 
@BennoLoewenberg
+ Animation durations
+ Easing values
+ Named effects
+ Choreography & rhythm
  �UILDING B�OCKS 
Motion Scale
Typopgrafic Scale
Source: Caleb Barclay
Source: Otto – Animation video: https://youtu.be/HpkAHSZBG4w (08:07)
Source: Caleb Barclay – Animation video: https://youtu.be/HpkAHSZBG4w (08:26)
Source: SAP »Fiori«
Source: Puralsight
Source: Workday »Canvas« & Puralsight (commented)
Macro Motion
Micro Motion
Source: Salesforce »Lightning«
  ASP�CTS 
Source: FutureLearn
  A��LICATIONS 
Source: SAP »Fiori«
  FU�CTIONS 
Source: Price line »One« – Animation video: https://youtu.be/HpkAHSZBG4w (09:31)
modifiers
duration
easing
applicable to
Source: Caleb Barclay (commented)
 STATICS 
  FOR ANIMATIO� 
@BennoLoewenberg
  S�RY→BOAR� 
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg – Animation video: https://youtu.be/HpkAHSZBG4w (11:04)
 SPE��ING 
  THE GLIMPS� 
@BennoLoewenberg
  S�RY→BOAR� 
@BennoLoewenberg
@BennoLoewenberg
+ MOTION SPECS 
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
Source: Motion Methods – Motion Spec Kit for Sketch
Sketch stencils
  �IVING �ELIVERABLES 
+ Storyboards + Motion Specs
+ Motion Comps (a. k. a. videos)
+ Interactive Clickdummies
@BennoLoew...
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:19)
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:36)
Source: Anima
Sketch plugin
Source: Diya
Sketch plugin
Source: Caleb Barclay (commented)
Key stages
Easings
Choreography
Source: Caleb Barclay (commented)
Tech spec
Motion comp
(or interactive
click dummy)
334 ?
“ Milliseconds can make or brake an … anim-
ation.”
@BennoLoewenberg
Source: Sparebank – Animation video: https://youtu.be/HpkAHSZBG4w (13:33)
Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (14:00)
@BennoLoewenber using Hype
( Live demo )
 MOMENTUM 
  FOR M�TION 
@BennoLoewenberg
Source: Google »Material«
 WH�T 
Source: Google »Material«
  �OW 
“ A combination of both motion principles
and implementable examples provides
the most effective combination
for teams bui...
“ If animation is always left to the end,
it can never be more than decoration.”
Source: Val Head
  @�ENNO�OEWENBERG 
 LINKEDIN / XING / TWI�ER
http://
Talks & Workshops
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
What to Upload to SlideShare
Suivant
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Motion in Design Systems - Sketch Edition (english) #SketchMUC

Télécharger pour lire hors ligne

Motion is a key part pf UX and brand, since animation – if done right – supports the product (UUX) and expression of the brand personality.

Due to it's intagible nature, too often motion becomes an afterthought – if a thought at all – and therefore neglected in design (systems), albeit its at least supporting, but often fundamental role.

This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system.

( Video of the fully animated slides here: https://youtu.be/HpkAHSZBG4w )

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Motion in Design Systems - Sketch Edition (english) #SketchMUC

  1. 1.   motion IN DESIGN SYSTEMS  NOVEMBER 12. 2019 @BENNOLOEWENBERG Sketch Edition
  2. 2.   �IKE SOUN� …   Source: Google
  3. 3. Source: Google – Animation video: https://youtu.be/HpkAHSZBG4w (00:19)
  4. 4. Source: Slack – Animation video: https://youtu.be/HpkAHSZBG4w (00:44)
  5. 5. @BennoLoewenberg therefore often not part of a Design System   … G�NE WHEN DON�  
  6. 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, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch, Swarm, e, Terra, ThingWorx, Thumbprint, Uniform, Unison, ty, Ustyle, Vanilla, Wonderblocks, Yarn@BennoLoewenberg   DESIGN SYSTEMS 
  7. 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, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, Stacks, Starling, Sticky, SynNeo, Tack, Stitch, Swarm, e, Terra, ThingWorx, Thumbprint, Uniform, Unison, ty, Ustyle, Vanilla, Wonderblocks, Yarn@BennoLoewenberg   �ESIGN SYST�MS 
  8. 8. @BennoLoewenberg + Express the brand + Inform and guide the user   �URPOSE & US� 
  9. 9. Source: Audi – Animation video: https://youtu.be/HpkAHSZBG4w (01:33)
  10. 10. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w 02:02)
  11. 11. “ Just like typography and color, the animation you use says something about your product and its personality.” Source: Val Head
  12. 12. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (02:37)
  13. 13. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:05)
  14. 14. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (03:19)
  15. 15. “ Motion is a key part of any UX. Because most digital interfaces lack real world cues. Motion helps to understand an UI.” Source: Una Kravets
  16. 16. Source: Caleb Barclay Visual Modularity Animation Modularity
  17. 17. 1. consistency in how animation is used (across all products) 2. save your team time 3. alignment with your brand   �EPEATABLE & �EUSABLE  MOTION PA�ERNS  Source: Val Head
  18. 18. @BennoLoewenberg   C�TCHING    THE HAS�Y 
  19. 19. + 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
  20. 20.   �NIMATION �UDI�  Source: Alla Kholmatova
  21. 21.   �NIMATION �UDI�  Source: Alla Kholmatova
  22. 22.   �NIMATION �UDI�  Source: Caleb Barclay
  23. 23. @BennoLoewenberg   �EFINING   THE TRANSIEN� 
  24. 24. @BennoLoewenberg Expressing brand values and brand personality with meaningful motion …   �RAND TO EXPERIENC� 
  25. 25. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (04:51)
  26. 26. Source: Ant Motion – Animation video: https://youtu.be/HpkAHSZBG4w (05:23)
  27. 27. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (05:47)
  28. 28. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:11)
  29. 29. Source: IBM »Carbon« – Animation video: https://youtu.be/HpkAHSZBG4w (06:28)
  30. 30. Source: Alla Kholmatova
  31. 31. @BennoLoewenberg   �UILDING    THE NONPERMANEN� 
  32. 32. @BennoLoewenberg + Animation durations + Easing values + Named effects + Choreography & rhythm   �UILDING B�OCKS 
  33. 33. Motion Scale Typopgrafic Scale Source: Caleb Barclay
  34. 34. Source: Otto – Animation video: https://youtu.be/HpkAHSZBG4w (08:07)
  35. 35. Source: Caleb Barclay – Animation video: https://youtu.be/HpkAHSZBG4w (08:26)
  36. 36. Source: SAP »Fiori«
  37. 37. Source: Puralsight
  38. 38. Source: Workday »Canvas« & Puralsight (commented) Macro Motion Micro Motion
  39. 39. Source: Salesforce »Lightning«   ASP�CTS 
  40. 40. Source: FutureLearn   A��LICATIONS 
  41. 41. Source: SAP »Fiori«   FU�CTIONS 
  42. 42. Source: Price line »One« – Animation video: https://youtu.be/HpkAHSZBG4w (09:31)
  43. 43. modifiers duration easing applicable to Source: Caleb Barclay (commented)
  44. 44.  STATICS    FOR ANIMATIO�  @BennoLoewenberg
  45. 45.   S�RY→BOAR�  @BennoLoewenberg
  46. 46. @BennoLoewenberg
  47. 47. @BennoLoewenberg
  48. 48. @BennoLoewenberg
  49. 49. @BennoLoewenberg
  50. 50. @BennoLoewenberg
  51. 51. @BennoLoewenberg – Animation video: https://youtu.be/HpkAHSZBG4w (11:04)
  52. 52.  SPE��ING    THE GLIMPS�  @BennoLoewenberg
  53. 53.   S�RY→BOAR�  @BennoLoewenberg
  54. 54. @BennoLoewenberg + MOTION SPECS 
  55. 55. @BennoLoewenberg
  56. 56. @BennoLoewenberg
  57. 57. @BennoLoewenberg
  58. 58. @BennoLoewenberg
  59. 59. Source: Motion Methods – Motion Spec Kit for Sketch Sketch stencils
  60. 60.   �IVING �ELIVERABLES  + Storyboards + Motion Specs + Motion Comps (a. k. a. videos) + Interactive Clickdummies @BennoLoewenberg
  61. 61. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:19)
  62. 62. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (12:36)
  63. 63. Source: Anima Sketch plugin
  64. 64. Source: Diya Sketch plugin
  65. 65. Source: Caleb Barclay (commented) Key stages Easings Choreography
  66. 66. Source: Caleb Barclay (commented) Tech spec Motion comp (or interactive click dummy) 334 ?
  67. 67. “ Milliseconds can make or brake an … anim- ation.” @BennoLoewenberg
  68. 68. Source: Sparebank – Animation video: https://youtu.be/HpkAHSZBG4w (13:33)
  69. 69. Source: Google »Material« – Animation video: https://youtu.be/HpkAHSZBG4w (14:00)
  70. 70. @BennoLoewenber using Hype ( Live demo )
  71. 71.  MOMENTUM    FOR M�TION  @BennoLoewenberg
  72. 72. Source: Google »Material«  WH�T 
  73. 73. Source: Google »Material«   �OW 
  74. 74. “ A combination of both motion principles and implementable examples provides the most effective combination for teams building internal design systems.” Source: Bryan Zavestoski
  75. 75. “ If animation is always left to the end, it can never be more than decoration.” Source: Val Head
  76. 76.   @�ENNO�OEWENBERG   LINKEDIN / XING / TWI�ER
  77. 77. http:// Talks & Workshops
  • AswathyJose

    Jun. 16, 2020
  • JuliaAnteaRiederer

    Jan. 15, 2020

Motion is a key part pf UX and brand, since animation – if done right – supports the product (UUX) and expression of the brand personality. Due to it's intagible nature, too often motion becomes an afterthought – if a thought at all – and therefore neglected in design (systems), albeit its at least supporting, but often fundamental role. This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system. ( Video of the fully animated slides here: https://youtu.be/HpkAHSZBG4w )

Vues

Nombre de vues

139

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

0

Actions

Téléchargements

4

Partages

0

Commentaires

0

Mentions J'aime

2

×