Design mit System Workshop: Scalable Design Systems mit Storybook und Angular (100% Online, Interaktiv, English)

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

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 10.4.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 ab mindestens acht Teilnehmern günstiger. Sie erreichen uns hier: office@angulararchitects.io

 


02.05. - 03.05.2022

Datum & Uhrzeit:

02.05.2022, 9:00 Uhr - 03.05.2022, 17:00 Uhr

Veranstalltungsort:

Remote

Alternativen:

13.06. - 14.06.2022 ( Deutsch )

Englisch

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.

Nur einen Schritt entfernt!

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

Jetzt anfragen!