Design mit System Workshop: Skalierbare Design Systems mit Storybook und Angular

Beherrschen Sie User Experience in wachsenden Systemen!

Beschreibung

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 …

 

  • ☑️ das Konzept der komponentenbasierten Produktentwicklung schon in visuellen Konzeption einsetzen
  • ☑️ für bessere Kommunikation zwischen Design- und Development-Teams sorgen
  • ☑️ Eine eigene Komponentenbibliothek entwickeln und warten
  • ☑️ ihre Komponenten automatisiert testen
  • ☑️ die Zusammenarbeit zwischen Teams mithilfe eines Design Systems effektiver gestalten

Sprache
Dieses Training findet auf Deutsch statt.

 

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

 

Einige Impressionen

Wir sind alle über ein browserbasiertes virtuelles Klassenzimmer verbunden.

 

 

Viele Live-Codierungen und interaktive Übungen, einschließlich Paarprogrammierung mit Ihren Trainern

 

Ihr Trainer

 

Andreas Wissel: Bekannter Sprecher sowie Experte für Design Systems und UX

 

Unser Extra: Offene Q&A-Runde 🎁

Als kleines Extra hängen wir an beide Kurstage eine offene Q&A-Runde an, wo Sie Fragen, die über den Workshop hinaus gehen, einbringen können. Auf diese Weise können Sie mit uns zum Beispiel Projekt-bezogene Problemstellungen diskutieren. Damit ergänzen wir den Workshop um Consulting-Aspekte.

 

Didaktischer Ansatz

Theoriephasen wechseln sich mit Live-Coding und Übungen ab.

 

Voraussetzungen

Grundlagenwissen zu Angular

 

Early Bird

Bis 14.11.2021 bieten wir noch die günstigen Early Bird Preise an.

 

Unternehmenstraining
Bitte kontaktieren Sie uns, wenn Sie einen Unternehmensworkshop mit diesen oder ähnlichen Themen (remote oder vor Ort) organisieren möchten. Generell sind Firmenschulungen bei mindestens acht Teilnehmern günstiger. Sie erreichen uns hier: office@angulararchitects.io

 


29.11. - 30.11.2021

Datum & Uhrzeit:

29.11.2021, 9:00 Uhr - 30.11.2021, 17:00 Uhr

Veranstalltungsort:

Remote

Alternativen:

Deutsch

Ihre Trainer:

Andreas Wissel

Alle Workshop-Inhalte



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

Nichts mehr verpassen!


Melde Dich jetzt zu unserem Newsletter an und erhalte alle Informationen zu Angular, unseren Workshops und Terminen.


* Für die Anmeldung bei unserem Newsletter gilt unsere Datenschutz-Richtlinie.

Aktuelle Öffentliche Termine

Immer Nach Vereinbarung

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

Remote oder In-House

23. 11 -
25. 11
2021

Trainer: Manfred Steyer, GDE und Michael Zikes

Remote

Englisch

29. 11 -
30. 11
2021

Trainer: Andreas Wissel

Remote

Deutsch

06. 12 -
07. 12
2021

Trainer: Rainer Hahnekamp

Remote

Englisch

14. 12 -
16. 12
2021

Trainer: Manfred Steyer, GDE und Michael Zikes

Remote

Deutsch

Nur einen Schritt entfernt!

Stellen Sie noch heute Ihre Anfrage,
wir beraten Sie gerne!

Jetzt anfragen!