Tutorial | 20. November 2025 –
UX Tutorial "Rapid Prototyping & Design Systeme" mit Fazilet Özisci

Und darum geht es

In diesem Video zeigt Fazilet Özisci, Lead UX-Designerin bei der EnBW, die Praxis des Rapid Prototyping für komplexe Enterprise-Anwendungen. Ausgehend von einem kurzen theoretischen Überblick – vom Triple Diamond bis hin zur Rolle von Prototypen im UX-Prozess – demonstriert sie, wie man mit Figma und einem Enterprise Design System in kurzer Zeit realitätsnahe Prototypen erstellt.
 

Das erwartet dich

• Einordnung von Prototyping im Designprozess (Triple Diamond)
• 5 Elements of User Experience & UI vs. UX
• Was ist ein UX-/UI-Prototyp? Low- vs High-Fidelity
• Tool-Landschaft für UI-Design & Prototyping
• Was ist ein (Enterprise) Design System?
• Aufbau eines Enterprise Design Systems & Multi-Brand
• Business-Impact von Designsystemen
• Live-Demo in Figma: Dashboard-Grundgerüst aufbauen, Karten, Tabellen & Interaktionen
• Q&A: UX Writing, Atomic Design, Dokumentation & Accessibility, Responsive Prototyping & Multi-Brand-Setups in Figma, AI-Funktionen in Figma & Abschluss

Wichtige Take-Aways für UX-Professionals

• Low-Fidelity vs. High-Fidelity sinnvoll kombinieren
  Skizzen und Low-Fi-Prototypen eignen sich zum schnellen Struktur-Check und zur Teamabstimmung, High-Fidelity-Click-Prototypen für UX-Tests und Stakeholder-Präsentationen.
• Designsysteme sind die Basis für Rapid Prototyping
  Ein gut aufgebautes (Enterprise) Design System mit wiederverwendbaren Komponenten, Tokens und klaren Richtlinien ermöglicht es, komplexe Enterprise-UIs in kurzer Zeit prototypisch umzusetzen.
• Single Source of Truth für Design & Code
  UI-Bibliotheken in Figma und zugehörige Code-Komponenten (z. B. im Storybook) sorgen dafür, dass Design und Entwicklung konsistent arbeiten und nicht „das Rad neu erfinden“ müssen.
• Deutliche Effizienzgewinne & schnellere Time-to-Market
  Mit einem Designsystem lassen sich UI-Design, Entwicklung und Rollout messbar beschleunigen – gerade bei umfangreichen Enterprise- und B2B-Anwendungen.
• Figma als zentrales Werkzeug im Enterprise-Kontext
  Durch Auto Layout, Komponenten, Design-Libraries, Dev-Mode und Prototyping-Funktionen eignet sich Figma besonders gut, um interaktive Enterprise-Dashboards und komplexe Views aufzubauen.
• Multi-Brand-Designsysteme skalieren über Marken und Plattformen
  Mit Design-Tokens, Brand-Modes und Plattform-Toolkits (Web, App, Enterprise) können unterschiedliche Markenauftritte und Use Cases aus einem einzigen System bedient werden.
• Konsistenz, Barrierefreiheit und UX Writing werden mitgedacht
  Farben, Typografie und Komponenten werden so definiert, dass sie zugänglich sind; Sprache und Microcopy werden über Guidelines, Do’s & Don’ts und Komponenten-Dokumentation gesteuert.
• Prototypen reduzieren Risiko und Fehlentwicklungen
  Durch frühzeitige, visuelle und interaktive Validierung mit Nutzer*innen und Stakeholdern sinkt das Risiko, an echten Bedürfnissen vorbeizuentwickeln – besonders wichtig bei teurer Individualsoftware.