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

Designsystems mit Angular: Motion Design

Designsystems mit Angular: Motion Design

Animationen sind in modernen Anwendungen ein wichtiges und nicht mehr wegzudenkendes Werkzeug. Sie erleichtern Nutzern die Interaktion mit unseren Produkten, tragen zum Wiedererkennungswert bei und sorgen für Freude und Emotionen. Gerade deshalb wird "Motion Design" im Design- u. Entwicklungsprozess zunehmend bedeutender. Doch die besten Animationen helfen nichts, wenn sie die Entwickler ineffektiv umsetzen können. Unzureichend dokumentierte oder "Last Minute" hinzugefügte Animationen, sorgen oft nur für unnötigen Frust und verfehlen ihren eigentlichen Zweck. Aber damit soll nun Schluss sein. In diesem Webinar schauen wir uns an, was "Motion Design" eigentlich ist, wie wir Animationen in unseren Design Systems entwicklergerecht dokumentieren und schauen uns die Umsetzung anhand eines exemplarischen Use Cases an.

Sascha Lehmann

July 19, 2023
Tweet

More Decks by Sascha Lehmann

Other Decks in Programming

Transcript

  1. Designsystems mit Angular
    Motion Design
    Sascha Lehmann
    @derLehmann_S
    Developer Consultant

    View Slide

  2. Developer Consultant @ Thinktecture AG
    Sascha Lehmann
    @derLehmann_S
    [email protected]
    https://www.thinktecture.com/thinktects/sascha-lehmann/
    Spezialisierung: Angular und UI/UX



    Design Systems mit Angular
    Motion Design

    View Slide

  3. Unsere Ziele für heute

     📔
    Sinn & Zweck von
    Animationen
    verstehen
    Animationen
    effektiv
    dokumentieren
    Animationen
    zielgerichtet im
    Code umsetzen
    Design Systems mit Angular
    Motion Design

    View Slide

  4. Storytime
    A realworld project story
    Design Systems mit Angular
    Motion Design

    View Slide

  5. DEV Team Product Owner
    Wie wär’s noch
    mit ein paar
    Animationen?
    Design Systems mit Angular
    Motion Design

    View Slide

  6. DEV Team Product Owner
    Wie wär’s noch
    mit ein paar
    Animationen?
    Design Systems mit Angular
    Motion Design

    View Slide

  7. DEV Team
    Design Systems mit Angular
    Motion Design

    View Slide

  8. Lenken den Fokus
    Helfen ein Mentales
    Modell aufzubauen
    Kommunizieren
    State Change
    Verhindern
    Desorientierung
    Sorgen für
    ”Vergnügen”
    Aufgaben von Animationen in der UX
      ↻
     
    Design Systems mit Angular
    Motion Design

    View Slide

  9. Easing
    Follow Through and
    Overlapping Action
    Squash and
    Stretch
    Anticipation Staging
    Straight ahead
    action and pose to
    pose
    Arcs
    Secondary Action Timing
    Exaggeration
    Solid drawing
    Appeal
    12 Prinzipien der Animation



    2 2
    3
    Design Systems mit Angular
    Motion Design

    View Slide

  10. Prinzip 1: Easing
    https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
    Design Systems mit Angular
    Motion Design

    View Slide

  11. Prinzip 2: Follow Through and Overlapping Action
    https://dribbble.com/shots/5414524-Ocean-scrolling-animation
    Design Systems mit Angular
    Motion Design

    View Slide

  12. Prinzip 3: Squash and Stretch
    https://dribbble.com/shots/4815107-Follow-Accordion-Prototype
    Design Systems mit Angular
    Motion Design

    View Slide

  13. Prinzip 4: Anticipation
    https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration
    Design Systems mit Angular
    Motion Design

    View Slide

  14. Prinzip 5: Staging
    https://m3.material.io/styles/motion/transitions/transition-patterns
    Design Systems mit Angular
    Motion Design

    View Slide

  15. Prinzip 6: Straight ahead action and pose to pose
    https://learn.toonboom.com/modules/animation-principles/topic/straight-ahead-and-pose-to-pose-principle
    Design Systems mit Angular
    Motion Design

    View Slide

  16. Prinzip 7: Arcs
    https://m3.material.io/styles/motion/transitions/applying-transitions
    Design Systems mit Angular
    Motion Design

    View Slide

  17. Prinzip 8: Secondary Action
    https://dribbble.com/shots/14656980-Liquid-UI-Elements
    Design Systems mit Angular
    Motion Design

    View Slide

  18. Prinzip 9: Timing
    Design Systems mit Angular
    Motion Design

    View Slide

  19. Prinzip 10: Exaggeration
    https://dribbble.com/shots/11206468--Button
    Design Systems mit Angular
    Motion Design

    View Slide

  20. Prinzip 11 + 12: Solid drawing & appeal
    • Einheitliches & ansprechendes
    Design
    • Designgrundlagen
    • Durchgängiges Konzept
    • Design System
    Design Systems mit Angular
    Motion Design

    View Slide

  21. Design Systems Survey 2022
    Was steckt in unseren Design Systems
    https://designsystemssurvey.seesparkbox.com/2022/#section-2
    Design Systems mit Angular
    Motion Design

    View Slide

  22. Atomare Bestandteile von Animationen
    Transitions
    Easings
    Durations
    Lassen sich sehr gut in
    Form von Tokens abbilden
    Ideal mit Mixins oder
    Factory Funktionen
    abbildbar
    Design Systems mit Angular
    Motion Design

    View Slide

  23. Sequenz
    • Slide-In-Left
    • Group
    1. Zoom-In
    2. Fade-In
    • Stagger-Fade-In
    Dokumentation
    1
    3
    Design Systems mit Angular
    Motion Design
    2 1
    2 1
    2 1
    2 2
    1
    1
    2
    3
    1
    2

    View Slide

  24. Ein Blick …
    … in die Zukunft
    Design Systems mit Angular
    Motion Design

    View Slide

  25. Wo ist das Problem?
    Design Systems mit Angular
    Motion Design

    View Slide

  26. Wie funktiontioniert’s?
    • Screenshot des aktuellen
    Page-States
    • Callbackfunktion ausführen
    (Rendering wird pausiert)
    • Nach DOM-changes neuer
    Screenshot des neuen Page-States
    • Pseudo-DOM-Tree wird erstellt
    Building Blocks
    Design Systems mit Angular
    Motion Design

    View Slide

  27. Pseudo DOM Tree
    • Neuer Top-Layer
    • Standardanimation: Cross-fade
    • Wird nach Animation wieder zerstört
    Building Blocks
    Design Systems mit Angular
    Motion Design

    View Slide

  28. Mehrere Elemente
    Building Blocks
    Design Systems mit Angular
    Motion Design

    View Slide

  29. Sascha Lehmann
    [email protected]
    Dankeschön!
    Nächstes Webinar
    https://www.thinktecture.com/karriere/

    View Slide