Beratung zur strategischen Ausrichtung und Konzeption Ihres Design Systems.

• Analyse und Audit: Bestandsaufnahme bestehender UI-Komponenten, Style Guides und Designsprachen in Ihrem Unternehmen.

• Design-System-Vision und Roadmap: Entwicklung einer langfristigen Strategie inklusive Meilensteine, Ressourcenplanung und Erfolgsmetriken.

• Reifegradanalyse: Bewertung Ihres aktuellen Design-System-Reifegrads und Identifikation von Optimierungspotenzialen.

Praktische Unterstützung beim Aufbau Ihres Design Systems – von Foundations bis zu komplexen Komponenten.

• Design Tokens und Foundations: Definition von Farben, Typografie, Spacing und weiteren Designvariablen als wiederverwendbare Tokens.

• Komponentenbibliothek: Aufbau einer Komponentenbibliothek in Figma und im Code (React, Vue, Angular, Web Components).

• Storybook und Dokumentation: Einrichtung von Storybook und Aufbau einer mehrschichtigen Dokumentation für alle Zielgruppen.

Sicherstellen, dass Ihr Design System inklusiv, barrierefrei und qualitativ hochwertig ist.

• WCAG-konforme Komponenten: Konzeption und Umsetzung barrierefreier Komponenten gemäß WCAG 2.1/2.2.

• Automatisiertes Testing: Integration von Unit-, Visual-Regression- und Accessibility-Tests in Ihre CI/CD-Pipeline.

• Audits und Reviews: Regelmäßige Qualitäts- und Accessibility-Audits Ihres bestehenden Design Systems.

Trainingsformate für Designer, Entwickler und Produktteams rund um Design Systems.

• Grundlagenseminare: Einführung in Design Systems, Atomic Design, Design Tokens und Komponentenarchitektur.

• Hands-on-Workshops: Praxisnahe Workshops in Figma, Storybook und modernen Frontend-Frameworks.

• Governance und Skalierung: Workshops zur Etablierung von Contribution-Modellen und Skalierungsstrategien.

• UX/UI-Designer, die ein Design System für ihr Unternehmen oder Produkt aufbauen oder weiterentwickeln möchten

• Frontend-Entwickler, die ihre Komponentenbibliotheken systematisieren und in Design Systems integrieren wollen

• Produktmanager, die die Effizienz und Konsistenz ihrer digitalen Produkte durch Design Systems steigern möchten

• Verständnis der Grundprinzipien, Architektur und Bestandteile moderner Design Systems

• Konzeption und Strukturierung eines Design Systems nach Atomic Design oder anderen etablierten Methoden

• Definition und Implementierung von Design Tokens für Farben, Typografie, Spacing und weitere Designvariablen

• Interaktive Workshops mit praktischen Übungen am eigenen Design System oder vorbereiteten Beispielprojekten

• Hands-on-Sessions in Figma zur Erstellung von Komponenten, Tokens und Bibliotheken

• Live-Coding und gemeinsame Implementierung von Komponenten in Storybook

• Grundkenntnisse in UX/UI-Design oder Frontend-Entwicklung

• Vertrautheit mit gängigen Design-Tools (idealerweise Figma) oder Frontend-Frameworks

• Verständnis grundlegender Konzepte wie HTML, CSS und Komponenten-basierter Entwicklung

• Konsistente User Experience über alle digitalen Produkte und Touchpoints hinweg

• Deutlich verkürzte Time-to-Market durch wiederverwendbare Komponenten und etablierte Patterns

• Verbesserte Zusammenarbeit zwischen Design, Entwicklung und Produktmanagement durch eine gemeinsame Sprache

• Dauer: 1-3 Tage

• Ort: Online oder Inhouse

• Teilnehmer: ab 1 Person

• Netto-Preis 1.200 EUR pro Tag bis einschließlich drei Personen

• Brutto-Preis: 1.428 EUR pro Tag bis einschließlich drei Personen

• Auf Anfrage findet das Seminar mit individuellen Inhalten und Termin vor Ort in Ihrem Unternehmen oder online statt.

• Definition, Abgrenzung und Bestandteile eines Design Systems

• Unterschied zwischen Style Guide, Pattern Library und Design System

• Historische Entwicklung und bekannte Beispiele (Material Design, Carbon, Lightning, Polaris)

• Business Case und ROI: Warum Design Systems sich lohnen

• Rollen und Verantwortlichkeiten im Design-System-Team

• Reifegradmodelle für Design Systems

• Typische Fallstricke und Anti-Patterns

• Konzept und Architektur von Design Tokens (W3C Design Tokens Community Group)

• Hierarchie: Global, Alias und Component Tokens

• Farbsysteme: Primär-, Sekundär-, Semantik- und Status-Farben

• Typografische Skalen und responsive Typografie

• Spacing-Systeme, Grids und Layout-Foundations

• Iconografie und Illustrationssysteme

• Theming und Dark Mode: technische Umsetzung mit Tokens

• Tools: Style Dictionary, Tokens Studio, Specify

• Atomic Design nach Brad Frost: Atoms, Molecules, Organisms, Templates, Pages

• Alternative Strukturierungsansätze und Hybridmodelle

• Komponenten-API-Design: Props, Slots, Variants

• Kompositions- vs. Konfigurationsansatz bei Komponenten

• Headless Components und Logic/Presentation-Trennung

• State-Management innerhalb von Komponenten

• Performance-Aspekte bei Komponentenbibliotheken

• Versionierungs- und Breaking-Change-Strategien

• Figma als zentrale Plattform: Libraries, Variables, Auto Layout

• Komponenten- und Variantenmanagement in Figma

• Synchronisation zwischen Design und Code

• Version Control für Designdateien

• Handover-Prozesse zwischen Design und Entwicklung

• Plugins und Automatisierung: Tokens Studio, Figma to Code, Anima

• Alternative Tools: Sketch, Adobe XD, Penpot

• Wahl des Frontend-Frameworks: React, Vue, Angular, Svelte, Web Components

• Storybook als Dokumentations- und Entwicklungsumgebung

• CSS-Strategien: CSS Variables, CSS-in-JS, Utility-First (Tailwind), CSS Modules

• Build- und Distributionsstrategien (npm, Monorepo, Tools wie Turborepo)

• TypeScript-Integration und Typsicherheit in Komponenten

• Cross-Framework-Komponenten mit Web Components

• Server-Side Rendering und Hydration-Aspekte

• WCAG 2.1/2.2: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, Robustheit

• Barrierefreie Komponenten: ARIA-Attribute, Tastaturnavigation, Focus-Management

• Kontrastanforderungen und barrierefreie Farbsysteme

• Screen-Reader-Kompatibilität und Testing

• Internationalisierung (i18n) und Lokalisierung (l10n)

• Responsive Design und Mobile Accessibility

• Automatisierte Accessibility-Tests in Design Systems (axe, Pa11y)

• Inklusive Sprache und Dokumentation

• Aufbau einer effektiven Design-System-Dokumentation

• Tools: Storybook, Zeroheight, Supernova, Docusaurus

• Strukturierung von Komponenten-Dokumentation

• Use Cases, Do's & Don'ts und Best Practices

• Code-Snippets, Live-Beispiele und Sandboxes

• Onboarding-Materialien für neue Teammitglieder

• Multi-Audience-Dokumentation: Designer, Entwickler, Produktmanager

• Zentralisierte vs. dezentrale vs. föderierte Governance

• Contribution-Workflows: Wer darf was wann ändern?

• Review- und Approval-Prozesse für neue Komponenten

• Request-for-Comment (RFC)-Prozesse

• Roadmap-Planung und Stakeholder-Management

• Kommunikationskanäle und Community-Building

• Konfliktmanagement zwischen Produkt- und System-Team

• Rollen: Design System Lead, Maintainer, Contributors

• Unit-Tests für Komponenten mit Jest, Vitest oder Testing Library

• Visuelle Regressionstests mit Chromatic, Percy oder Playwright

• Accessibility-Testing in der CI/CD-Pipeline

• Cross-Browser- und Cross-Device-Testing

• Performance-Testing von Komponenten

• Snapshot-Tests und deren sinnvoller Einsatz

• End-to-End-Tests für komplexe Komponenten-Interaktionen

• Strategien zur Einführung eines Design Systems im Unternehmen

• Change Management und Stakeholder-Buy-In

• Migration bestehender Produkte auf das Design System

• Multi-Brand- und White-Label-Szenarien

• Metriken: Adoption Rate, Component Usage, Time-to-Market

• Feedback-Loops und kontinuierliche Verbesserung

• Skalierung über Teams, Produkte und Geschäftsbereiche hinweg

• Internationale Teams und verteilte Zusammenarbeit