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

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

Benno Loewenberg
November 12, 2019

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

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 though 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 animated slides here: https://youtu.be/HpkAHSZBG4w )

#DesignSystems #DesignSystem #Animation #Motion #InteractionDesign #MotionDesign #Branding #UIAnimation #MeaningfulMotion #UITransitions #InteractionStates #UX #UserExperience #Usabliity #UserFlow #Choreography #DSXFRA

Benno Loewenberg

November 12, 2019
Tweet

More Decks by Benno Loewenberg

Other Decks in Design

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

    something about your product and its personality.” Source: 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.” Source: Una Kravets
  5. 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
  6. + 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
  7. @BennoLoewenberg + Animation durations + Easing values + Named effects

    + Choreography & rhythm   �UILDING B�OCKS 
  8.   �IVING �ELIVERABLES  + Storyboards + Motion Specs + Motion

    Comps (a. k. a. videos) + Interactive Clickdummies @BennoLoewenberg
  9. “ A combination of both motion principles and implementable examples provides

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

    never be more than decoration.” Source: Val Head