Design mit System: Skalierbare Design Systems mit Storybook und Angular

Remote: 05.09. - 06.09.2022

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
Öffentlicher Workshop
  • Dauer: 2 Tage
  • Remote: 05.09.2022
  • Gruppenrabatt verfügbar
Firmen-Workshop
  • 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

Impressionen

Impressionen

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

Aktuelle Termine

Alle unsere Seminare sind jederzeit auch Remote oder In-House verfügbar. Kontaktieren Sie uns für eine Terminvereinbarung

2022 05. 09 -
06. 09
09:00 - 17:00
Early BirdGruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

2022 19. 09 -
21. 09
14:00 - 18:30
Early Bird bis 04.09.2022Gruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

8:00 am - 12:30 ET
2022 14. 11 -
15. 11
09:00 - 17:00
Early BirdGruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

Weitere öffentliche Termine

2022 24. 08 -
26. 08
09:00 - 17:00
Early BirdGruppenrabatt

Angular Architektur Workshop

2022 05. 09 -
06. 09
09:00 - 17:00
Early BirdGruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

2022 19. 09 -
21. 09
14:00 - 18:30
Early Bird bis 04.09.2022Gruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

8:00 am - 12:30 ET
2022 20. 09 -
23. 09
14:00 - 18:30
Very Early BirdGruppenrabatt

Angular Architektur Workshop

8:00 am - 12:30 pm Eastern Time
- 4 halbe Tage: Amerika- und Europa-freundlich
2022 17. 10 -
18. 10
09:00 - 17:00
Very Early BirdGruppenrabatt

Professional Angular Testing

2022 18. 10 -
20. 10
09:00 - 18:00
Very Early BirdGruppenrabatt

Moderne .NET-Backends für Angular

2022 20. 10 -
21. 10
09:00 - 17:00
Very Early BirdGruppenrabatt

Professional NGRX: Advanced State Management & Best Practices

2022 07. 11 -
08. 11
09:00 - 17:00
Early BirdGroup Discount

Angular Security with Dr De Ryck

2022 14. 11 -
16. 11
18:00 - 22:00
Early BirdGroup Discount

Professional Angular Testing

9 am - 12 noon PT // 12:00 noon - 4 pm ET // 6pm - 10pm CET
2022 14. 11 -
15. 11
09:00 - 17:00
Early BirdGruppenrabatt

Design mit System: Skalierbare Design Systems mit Storybook und Angular

2022 17. 11 -
18. 11
09:00 - 17:00
Early BirdGroup Discount

Professional NGRX: Advanced State Management & Best Practices

2022 28. 11 -
01. 12
18:00 - 22:00
Early BirdGroup Discount

API Security Workshop

9 am - 12 noon PT // 12:00 noon - 4 pm ET // 6pm - 10pm CET
2022 28. 11 -
30. 11
09:00 - 17:00
Early BirdGruppenrabatt

Moderne Spring-Backends für Angular

2022 28. 11 -
30. 11
09:00 - 17:00
Early BirdGruppenrabatt

Moderne .NET-Backends für Angular

2022 28. 11 -
30. 11
09:00 - 17:00
Early BirdGruppenrabatt

Schulung: Fullstack Angular mit NestJS

2022 14. 12 -
16. 12
09:00 - 17:00
Very Early BirdGruppenrabatt

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.

Jetzt anfragen!