Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animation in Designsystemen (deutsch) #MuC2020

Benno Lœwenberg
September 07, 2020

Animation in Designsystemen (deutsch) #MuC2020

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 )

#DesignSysteme #DesignSystem #Animation #Motion #InteractionDesign #MotionDesign #Branding #UIAnimation #MeaningfulMotion #UITransitions #InteractionStates #UX #UserExperience #Usablitity #UserFlow #Choreographie #DSXFRA

Benno Lœwenberg

September 07, 2020
Tweet

More Decks by Benno Lœwenberg

Other Decks in Business

Transcript

  1. 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 
  2. 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� 
  3. “ Just like typography and color, the animation you use says

    something about your product and its personality.” Quelle: Val Head
  4. “ 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
  5. 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
  6. + 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
  7.   �EBENDIGE �IEFERFORM  + Storyboards + Motion Specs + Motion-Comps

    (d. h. Videos) + Interaktive Klick-Dummies @BennoLoewenberg
  8. “ A combination of both motion principles and implementable examples provides

    the most effective combination for teams building internal design systems.” Quelle: Bryan Zavestoski
  9. “ If animation is always left to the end, it can

    never be more than decoration.” Quelle: Val Head