2. Robuste Design Systems mit Storybook und Angular
• Design Systems Intro
• Tooling
• framework-agnostisch
• am Beispiel Angular
• platform-unabhängig
Was Euch erwartet
2
• technischer Deep Dive
• Angular Deep Dive
Was Euch nicht erwartet
3. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
3
💡 Enterprise UX
❤ Design Systems
🏢 INNOQ
✍ andreaswissel.com
🐦 @andreas_wissel
4. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
• Designer-Developer-Schnittstelle
• Workflow-Optimierung
• Beratung & Begleitung von Redesigns
• Fokus auf Design Systems mit Storybook
5. Robuste Design Systems mit Storybook und Angular
• Dachbegriff
• “all aspects of the user’s experience when interacting with
the product, service, environment or facility” (ISO 9241-210)
• ganzheitliche Betrachtung davon, wie unsere Produkte die
Anwender, Geschäftsprozesse und Umwelt beeinflussen
• Wichtig: nicht nur visuelles UI - sondern vor allem die
Architektur dahinter!
Was ist UX?
5
6. Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
6
User Experience im Alltag
7. Robuste Design Systems mit Storybook und Angular7
Menschen denken in Mustern
User Experience im Alltag
8. Robuste Design Systems mit Storybook und Angular8
Menschen denken in Mustern
User Experience im Alltag
9. Robuste Design Systems mit Storybook und Angular9
Und ohne Muster sind wir verloren..
User Experience im Alltag
10. Robuste Design Systems mit Storybook und Angular
• Menschen denken in Systemen/Mustern
• mit ihnen sparen wir kostbare kognitive Belastung ein
• Gewohnheiten navigieren uns durch den Alltag
• Software ist heute Alltag
User Experience - viele bekannte Muster
10
11. Robuste Design Systems mit Storybook und Angular
• Features müssen verständlich
sein
• Features müssen benutzbar
sein
• in anderen Worten:
• Discoverability
• Usability
• Accessibility
User Experience für Developer
11
Access
denied
12. Robuste Design Systems mit Storybook und Angular
Enge Zusammenarbeit und gemeinsames Verständnis führt
zu guter User Experience. Gute UX entsteht im Team!
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben
Denn User Experience dreht sich vor allem um eins:
Mission Statement
12
Menschen
13. Robuste Design Systems mit Storybook und Angular13
Kollaboration ⚡ Fachbereiche
Konsistenz ⚡ Projektalltag
Skalierbarkeit ⚡ Agile Prozesse
Menschen
14. Robuste Design Systems mit Storybook und Angular
• bilden die UX systematisch ab
• strukturierte Dokumentation der Bestandteile
• Anleitung zum Weiterbauen
• sind das “Produkt für’s Produkt”
• Basis zur Entwicklung neuer Produkte
• stetige Weiterentwicklung
Wie passen Design Systems dazu?
14
15. Robuste Design Systems mit Storybook und Angular
Problemstellungen
15
Konsistenz langfristig sichern
integrierter Workflow flexible Prozesse
einfacher Zugang
16. Robuste Design Systems mit Storybook und Angular
• echte, lebendige Komponenten
• direkt benutzbar
• gekapselt
• Use Case-spezifisch
• Technische Dokumentation
Design System: Was ist das?
16
• Styleguide
• statische, visuelle
Dokumentation der Marke
• “look & feel”
• Pattern Library
• Dokumentation der UI-Elemente
17. Robuste Design Systems mit Storybook und Angular
“Warum muss das heute so kompliziert
sein?”
17
18. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen früher:
Windows oder Web
18
19. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen heute:
Windows, Mac, Linux, Web/PWA, iOS, Android
19
22. Robuste Design Systems mit Storybook und Angular
• extrem viele Geräteklassen
• verschiedenste Eingabemöglichkeiten
• viele Zielplattformen
• völlig neue Möglichkeiten
• völlig neue Fehlerquellen
Stetig wachsender Zielmarkt
22
23. Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
23
Branding Guidelines
Komponenten-
bibliothek
Dokumentation
Animation, a11y, etc.
Inhalte
isoliert
iterativ
erweiterbar
brown field-Einsatz
Prozess
viele Plattformen
viele Geräteklassen
eigene Designsprache
Kapselung
Anforderungen
}+
24. Robuste Design Systems mit Storybook und Angular
Design Systems: Zusammenfassung
24
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen
30. Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
30
Demo Time
bit.ly/ngds-figma
31. Robuste Design Systems mit Storybook und Angular
• Komponenten-Modell
• Test von “Worst Case”-Werten
• Fluid Design im Tool
• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows
31
33. Robuste Design Systems mit Storybook und Angular
• Design System in Code abbilden
• Schnittstelle zwischen Design & Code
• isolierte Entwicklung von Komponenten
• Vorbereitung auf Unit Tests
• Dokumentation direkt an Komponenten
Storybook
33
34. Robuste Design Systems mit Storybook und Angular
• framework-agnostisch
• Open Source
• Verwaltet von der JS Foundation
• vielfältiges Plugin-Ökosystem
• Möglichkeit von Snapshot Tests
Storybook
34
36. Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
36
Demo Time
37. Robuste Design Systems mit Storybook und Angular
Designer
• einfache Abnahme &
Freigabe
• Testen am lebenden
Subjekt
• Konsens
Developer
• Edge Cases
• schwierig zu
erreichende States
• lebendige
Dokumentation
Tester
• Mock-Daten
• Automatisierung
• Eingrenzung auf
Komponenten
Storybook - wer profitiert davon?
37
38. Robuste Design Systems mit Storybook und Angular
Gesamtes Team
• “Shared Vocabulary”
• agile Dokumentation
• steigende
Produktivität
Storybook - wer profitiert davon?
38
40. Robuste Design Systems mit Storybook und Angular
• verwendet das Konzept komponentenbasierter
Softwareentwicklung
• erlaubt die Kapselung von CSS
(ViewEncapsulation) zur Vermeidung von
monolithischem CSS
• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular
40
41. Robuste Design Systems mit Storybook und Angular
Angular: Komponenten
41
Click me![caption]="Click me!" (click)="…"
Clickety![caption]=“Clickety!" (click)="…"
42. Robuste Design Systems mit Storybook und Angular
• Die Storybook-CLI erlaubt die Installation von Storybook in
bestehende Projekte durch ein einziges Kommando:
• sb init --use-npm
• Das verwendete Framework wird automatisch erkannt und
die Installation darauf angepasst
• für einen Großteil der Projekte funktioniert der zero config
Ansatz
Storybook + Angular
42
43. Robuste Design Systems mit Storybook und Angular
• mit einer Angular CLI Erweiterung wird die Generierung
der Komponenten leichter:
• ng add @ngx-storybook/schematics
• Komponenten lassen sich jetzt inklusive Story und Modul
mit einem Kommando generieren:
• ng g @ngx-storybook/schematics:c button
Storybook + Angular
43
45. Robuste Design Systems mit Storybook und Angular
Wrap-Up: Technologien
45
Universell einsetzbar
46. Robuste Design Systems mit Storybook und Angular
• echte Komponenten
• modulare, isolierte Entwicklung
• einfachere Wartbarkeit
• brown field-geeignet
• Dokumentation
• konsistentere User Experience
• Bonus: Unit-Tests profitieren von Mock-Daten
Wrap-Up: Design Systems mit Storybook und Angular
46
47. Robuste Design Systems mit Storybook und Angular47
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 andreas.wissel@innoq.com
✍ andreaswissel.com
Vielen Dank!
