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
Öffentlicher Workshop
  • Dauer: 2 Tage
  • Remote: 01.03.2023
  • 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

2023 01. 03 -
03. 03
13:00 - 17:30 (CET)
Group DiscountEarly Bird bis 31.01.2023

Design mit System: Skalierbare Design Systems mit Storybook und Angular

8.30 to 12.30 ET = 13:00 - 17:30 CET
2023 20. 04 -
21. 04
09:00 - 17:00 (CET)
GruppenrabattEarly Bird bis 28.02.2023

Design mit System: Skalierbare Design Systems mit Storybook und Angular

Weitere öffentliche Termine

2022 05. 12 -
07. 12
09:00 - 17:00 (CET)
Gruppenrabatt

Moderne .NET-Backends für Angular

2022 14. 12 -
16. 12
09:00 - 17:00 (CET)
Gruppenrabatt

Angular Architektur Workshop

2022 19. 12 -
19. 12
09:00 - 16:30 (CET)
Group Discount

Advanced TypeScript

2022 20. 12 -
20. 12
09:00 - 16:30 (CET)
Group Discount

Playwright Workshop

2023 07. 02 -
08. 02
09:00 - 17:00 (CET)
GruppenrabattEarly Bird bis 31.01.2023

Angular Performance Workshop

2023 15. 02 -
17. 02
09:00 - 17:00 (CET)
GruppenrabattEarly Bird bis 31.01.2023

Angular Architektur Workshop

2023 27. 02 -
28. 02
09:00 - 17:00 (CET)
Group DiscountEarly Bird bis 31.01.2023

Angular Security with Dr De Ryck

2023 06. 03 -
07. 03
09:00 - 17:00 (CET)
GruppenrabattEarly Bird bis 31.01.2023

Professional Angular Testing

2023 07. 03 -
10. 03
13:00 - 17:30 (CET)
Group DiscountEarly Bird bis 31.01.2023

Angular Architektur Workshop

8:30 am - 12:30 pm Eastern Time = 1:30 pm - 5:30 pm CET
2023 09. 03 -
10. 03
09:00 - 17:00 (CET)
GruppenrabattEarly Bird bis 31.01.2023

Professional NGRX: Advanced State Management & Best Practices

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!