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.

Transcript

1. Designsystems mit Angular Motion Design Sascha Lehmann @derLehmann_S Developer Consultant
2. Developer Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Spezialisierung: Angular und UI/UX  ✉  Design Systems mit Angular Motion Design
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
4. Storytime A realworld project story Design Systems mit Angular Motion Design
5. DEV Team Product Owner Wie wär’s noch mit ein paar Animationen? Design Systems mit Angular Motion Design
6. DEV Team Product Owner Wie wär’s noch mit ein paar Animationen? Design Systems mit Angular Motion Design
7. DEV Team Design Systems mit Angular Motion Design
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
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
10. Prinzip 1: Easing https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration Design Systems mit Angular Motion Design
11. Prinzip 2: Follow Through and Overlapping Action https://dribbble.com/shots/5414524-Ocean-scrolling-animation Design Systems mit Angular Motion Design
12. Prinzip 3: Squash and Stretch https://dribbble.com/shots/4815107-Follow-Accordion-Prototype Design Systems mit Angular Motion Design
13. Prinzip 4: Anticipation https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration Design Systems mit Angular Motion Design
14. Prinzip 5: Staging https://m3.material.io/styles/motion/transitions/transition-patterns Design Systems mit Angular Motion Design
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
16. Prinzip 7: Arcs https://m3.material.io/styles/motion/transitions/applying-transitions Design Systems mit Angular Motion Design
17. Prinzip 8: Secondary Action https://dribbble.com/shots/14656980-Liquid-UI-Elements Design Systems mit Angular Motion Design
18. Prinzip 9: Timing Design Systems mit Angular Motion Design
19. Prinzip 10: Exaggeration https://dribbble.com/shots/11206468--Button Design Systems mit Angular Motion Design
20. Prinzip 11 + 12: Solid drawing & appeal • Einheitliches & ansprechendes Design • Designgrundlagen • Durchgängiges Konzept • Design System Design Systems mit Angular Motion Design
21. Design Systems Survey 2022 Was steckt in unseren Design Systems https://designsystemssurvey.seesparkbox.com/2022/#section-2 Design Systems mit Angular Motion Design
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
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
24. Ein Blick … … in die Zukunft Design Systems mit Angular Motion Design
25. Wo ist das Problem? Design Systems mit Angular Motion Design
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
27. Pseudo DOM Tree • Neuer Top-Layer • Standardanimation: Cross-fade • Wird nach Animation wieder zerstört Building Blocks Design Systems mit Angular Motion Design
28. Mehrere Elemente Building Blocks Design Systems mit Angular Motion Design
29. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! Nächstes Webinar https://www.thinktecture.com/karriere/