Design mit System: Skalierbare Design Systems mit Storybook und Angular
Beherrschen Sie User Experience in wachsenden Systemen!
Remote
2 Tage
Grundkenntnisse Angular erforderlich
Mix aus Theorie, Live-Coding & Übungen
Auch als Firmen-Workshop verfügbar
- Dauer: 2 Tage
- Remote: 20.04.2023
- Gruppenrabatt verfügbar
- Individuell vereinbar
- In-House oder remote
- Ab ca. 8 Teilnehmer günstiger
Design Systems mit Angular
In diesem Workshop lernen Sie alle Bestandteile eines Design Systems mit Angular kennen. Angefangen beim Design Tooling, über Komponentenbibliotheken bis zum automatisierten visuellen Testing erfahren Sie hands-on, wie ein skalierbares Design System entsteht.
Anhand von Beispielprojekten und auch Ihren eigenen Projektbeispielen erarbeiten wir gemeinsam ein fertiges Design System.
So erfahren Sie in diesem Workshop, wie Sie …
- Komponenten schon in visuellen Konzeption einsetzen
- die Kommunikation zwischen Design- und Dev-Teams verbessern
- Eine eigene Komponentenbibliothek entwickeln und warten
- ihre Komponenten automatisiert testen
- die Zusammenarbeit zwischen Teams effektiver gestalten
Highlights
✅ Komplett online – Keine Anreise erforderlich!
✅ Interaktiv: Stellen Sie Fragen und nehmen Sie an Diskussionen teil
✅ Viele Übungen und Live-Coding
✅ Fallstudie, die Sie als Blaupause für Ihre eigenen Projekte verwenden können
✅ Pair-Programming mit Ihrem Trainer
Ausgewählte zufriedene Kunden
Den Verlauf unserer Design Systems Schulung auf einen Blick!
Motivation und Basics
- Was sind Design Systems?
- Wie passen Komponentenbibliotheken dazu?
- Warum eine eigene Bibliothek statt vorgefertigter Komponenten?
Professioneller Prozess: Der Component Design Lifecycle
- Warum Komponentenentwicklung?
- Wie entwickelt man holistische Komponenten (Konzept -> Design -> Dev)?
- Ubiquituous Language: Warum Namen wichtig sind und wie sie die Zusammenarbeit prägen
- Zusammenspiel zwischen Design und Development
Robuste Komponenten im agilen Prozess - Wie konzipiere ich gute Komponenten?
Storybook
- Was ist Storybook?
- Historie
- Abgrenzung: Was kann es, was kann es nicht?
- Framework-agnostisches Beispiel: ButtonWebComponent
Figma als komponentenbasiertes Design Tool
- Figma Components: Wiederverwendbare Komponenten im Design-Tool
- Design Tokens
- Component Libraries
- Prototyping
- Constraints, Slots, Auto-Layout
Umsetzung mit Angular
- Was qualifiziert Angular für diese Idee?
- Wie sind die vorangeganenen Konzepte mit Angular zu verwenden?
- Vor-/Nachteile
- Abgrenzung: Wer braucht das, wer braucht es nicht?
- Framework-spezifisches Beispiel: NgButtonComponent
Umfassendes Praxisbeispiel
- Design in Figma
- Isolierte Entwicklung mit Storybook: Komponenten, States und Cypress E2E Tests
- Zusammenführung in der Angular Applikation
- MockService
Abschließende Infos
- Key takeaways zu den Technologien
- Das “how to convince your manager”-Paket: welche Vorteile bringt dieser Prozess für die Organisation?
Bonus
- Ausblick: Was ist ein Design Sprint und wie hilft meine Komponentenbibliothek dabei?
- Ausblick: Accessible Components
- Ausblick: Nx Monorepos
Alle unsere Seminare sind jederzeit auch Remote oder In-House verfügbar. Kontaktieren Sie uns für eine Terminvereinbarung
21. 04 09:00 - 17:00 (CET)
Design mit System: Skalierbare Design Systems mit Storybook und Angular
12. 04 09:00 - 17:00 (CET)
Professional Angular Testing
20. 04 14:30 - 18:30 (CET)
Angular Performance Optimization Workshop
12. 05 09:00 - 17:00 (CET)
Professional NGRX: Advanced State Management & Best Practices
17. 05 09:00 - 16:30 (CET)
24. 05 09:00 - 17:00 (CET)
Schulung: Fullstack Angular mit NestJS
24. 05 09:00 - 17:00 (CET)
Angular Architektur Workshop
25. 05 09:00 - 17:00 (CET)
Moderne .NET-Backends für Angular
27. 06 09:00 - 16:30 (CET)
30. 06 09:00 - 16:30 (CET)
Professional NGRX: Advanced State Management & Best Practices
13. 07 13:00 - 17:30 (CET)
Angular Architektur Workshop
Manfred Steyer ist Google Developer Expert (GDE) für Angular sowie Tursted Collaborator im Angular-Team. Zusammen mit seinem Team betreut er Kunden im gesamten deutschen Sprachruam. Der Fokus liegt dabei auf Geschäfts- und Industrie-Anwendungen auf der Basis von Angular.
