Designsystems mit Angular: Motion Design

by Sascha Lehmann

Slide 1

Slide 1 text

Designsystems mit Angular Motion Design Sascha Lehmann @derLehmann_S Developer Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Unsere Ziele für heute   📔 Sinn & Zweck von Animationen verstehen Animationen effektiv dokumentieren Animationen zielgerichtet im Code umsetzen Design Systems mit Angular Motion Design

Slide 4

Slide 4 text

Storytime A realworld project story Design Systems mit Angular Motion Design

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

DEV Team Design Systems mit Angular Motion Design

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Prinzip 9: Timing Design Systems mit Angular Motion Design

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Wo ist das Problem? Design Systems mit Angular Motion Design

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Mehrere Elemente Building Blocks Design Systems mit Angular Motion Design

Slide 29

Slide 29 text

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