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.
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Animation in Designsystemen (deutsch) #MuC2020

Télécharger pour lire hors ligne

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 )

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
  • Soyez le premier à aimer ceci

Animation in Designsystemen (deutsch) #MuC2020

  1. 1.   Animation    IN DESIGNSYSTEMEN  7. SEPTEMBER 2020 @BENNOLOEWENBERG
  2. 2.   WI� K��NG …   Quelle: Google
  3. 3. Quelle: Google – Animation als Video: https://youtu.be/t7k2alfyOEM (00:19)
  4. 4. Quelle: Slack – Animation als Video: https://youtu.be/t7k2alfyOEM (00:44)
  5. 5. @BennoLoewenberg deswegen oft nicht Teil eines Designsystems   … W�G WE� VORB�I  
  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, 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. 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. 8. @BennoLoewenberg + Ausdruck der Markenpersönlichkeit + Hilfe und Anleitung für Nutzer   ZWE�K & NU�ZEN 
  9. 9. Quelle: Audi – Animation als Video: https://youtu.be/t7k2alfyOEM (01:33)
  10. 10. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM 02:02)
  11. 11. “ Just like typography and color, the animation you use says something about your product and its personality.” Quelle: Val Head
  12. 12. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (02:34)
  13. 13. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:01)
  14. 14. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (03:15)
  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. 16. Quelle: Caleb Barclay Visual Modularity Animation Modularity
  17. 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. 18. @BennoLoewenberg   C�TCHING    THE HAS�Y 
  19. 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. 20.   �NIMATION �UDI�  Quelle: Alla Kholmatova
  21. 21.   �NIMATION �UDI�  Quelle: Alla Kholmatova
  22. 22.   �NIMATION �UDI�  Quelle: Caleb Barclay
  23. 23. @BennoLoewenberg   �EFINING   THE TRANSIEN� 
  24. 24. @BennoLoewenberg Markenwerte und -persönlichkeit ausdrücken mittels bedeutungstragender Animation …   M�RKEN�RLEBNIS 
  25. 25. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (04:48)
  26. 26. Quelle: Ant Motion – Animation als Video: https://youtu.be/t7k2alfyOEM (05:20)
  27. 27. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (05:45)
  28. 28. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:07)
  29. 29. Quelle: IBM »Carbon« – Animation als Video: https://youtu.be/t7k2alfyOEM (06:25)
  30. 30. Quelle: Alla Kholmatova
  31. 31. @BennoLoewenberg   �UILDING    THE NONPERMANEN� 
  32. 32. @BennoLoewenberg + Animationsdauer + Easing-Werte + Benannte Effekte + Choreographie & Rhythmus   �AUSTEIN� 
  33. 33. Motion Scale Typopgraphic Scale Quelle: Caleb Barclay
  34. 34. Quelle: Otto – Animation als Video: https://youtu.be/t7k2alfyOEM (08:05)
  35. 35. Quelle: Caleb Barclay – Animation als Video: https://youtu.be/t7k2alfyOEM (08:23)
  36. 36. Quelle: SAP »Fiori«
  37. 37. Quelle: Puralsight
  38. 38. Quelle: Workday »Canvas« & Puralsight (commented) Macro Motion Micro Motion
  39. 39. Quelle: Salesforce »Lightning«   ASP�KTE 
  40. 40. Quelle: FutureLearn   ANWEN�UNGEN 
  41. 41. Quelle: SAP »Fiori«   FU�KTIONEN 
  42. 42. Quelle: Price line »One« – Animation als Video: https://youtu.be/t7k2alfyOEM (09:27)
  43. 43. Modifizierer Dauer Easing Anwendung Quelle: 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 als Video: https://youtu.be/t7k2alfyOEM (11:02)
  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.   �EBENDIGE �IEFERFORM  + Storyboards + Motion Specs + Motion-Comps (d. h. Videos) + Interaktive Klick-Dummies @BennoLoewenberg
  60. 60. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:13)
  61. 61. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (12:36)
  62. 62. Quelle: Caleb Barclay (commented) Schlüssel- zustände Easings Choreographie
  63. 63. Quelle: Caleb Barclay (commented) Technische Spezifikation Motion-Comp (od. interaktiver Klick-Dummy) 334 ?
  64. 64. “ Millisekunden entscheiden darüber, obeine Animation gelingt oder ni…cht.” @BennoLoewenberg
  65. 65. Quelle: Sparebank – Animation als Video: https://youtu.be/t7k2alfyOEM (13:14)
  66. 66. Quelle: Google »Material« – Animation als Video: https://youtu.be/t7k2alfyOEM (13:41)
  67. 67.  MOMENTUM    FOR M�TION  @BennoLoewenberg
  68. 68. Quelle: Google »Material«  W�S 
  69. 69. Quelle: Google »Material«   WI� 
  70. 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. 71. “ If animation is always left to the end, it can never be more than decoration.” Quelle: Val Head
  72. 72.   @�ENNO�OEWENBERG   LINKEDIN / XING / TWI�ER
  73. 73. http:// Talks & Workshops

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 )

Vues

Nombre de vues

115

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

0

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

0

×