Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch die Vorarbeit von Anbietern wie Microsoft mit Windows Forms geleistet wurde, muss heute selbst Hand angelegt werden. In dieser Session von Andreas Wissel erfahren Sie, wie Ihr Team mit robusten Workflows in einer agilen Welt mit diesen Anforderungen Schritt hält. Angefangen bei Grundkonzepten für erfolgreiche Redesigns über Custom Elements in Angular bis hin zur Entwicklung von isolierten Komponenten in Storybook. Mit diesem Handwerkszeug schaffen Sie die Grundlage für eine konsistente Designsprache in skalierbaren Anwendungen.

1. Andreas Wissel
@andreas_wissel
User Experience Architect
Von Applets zu Web Components
Robuste Design Systems mit Storybook und Angular

2. Robuste Design Systems mit Storybook und Angular
• Design Systems Intro
• Tooling
• framework-agnostisch
• am Beispiel Angular
• platform-unabhängig
Was Sie erwartet
2
• technischer Deep Dive
• Angular Deep Dive
Was Sie nicht erwartet

3. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
3
💡 Enterprise UX
❤ Design Systems
# Cross-Platform Design
🏢 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
Anwender, Geschäftsprozesse und Umwelt beeinflussen
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
• Features müssen sichtbar sein
• Features müssen benutzbar
sein
• UX schafft Zugang:
• Discoverability
• Usability
• Accessibility
User Experience für Developer
10
Access
denied

11. Robuste Design Systems mit Storybook und Angular
Enge Zusammenarbeit und gemeinsames Verständnis führt zu
guter User Experience. 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
11
Menschen

12. Robuste Design Systems mit Storybook und Angular12
Kollaboration ⚡ Fachbereiche
Konsistenz ⚡ Projektalltag
Skalierbarkeit ⚡ Agile Prozesse
Menschen

13. Robuste Design Systems mit Storybook und Angular
• echte, lebendige Komponenten
• direkt benutzbar
• gekapselt
• Use Case-spezifisch
• Pattern Library
• Dokumentation der UI-Elemente
Design System: Was ist das?
13
• Styleguide
• statische, visuelle Dokumentation
der Marke
• “look & feel”
• Technische Dokumentation
• Best practices

14. Robuste Design Systems mit Storybook und Angular
Moment mal..
14
Ein alter Bekannter?

15. Robuste Design Systems mit Storybook und Angular
• plattformunabhängig
• vorrangig Desktop
• JavaFX look and feel
JavaFX - ein Design System?
15

16. Robuste Design Systems mit Storybook und Angular
“Früher war alles einfacher”
16

17. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen früher:
Windows oder Web
17

18. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen heute:
Windows, (Mac), Web/PWA, iOS, Android
18

19. Robuste Design Systems mit Storybook und Angular
Doch damit nicht genug!
19

20. Robuste Design Systems mit Storybook und Angular
Stetig wachsender Zielmarkt
20

21. 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
21

22. Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
22
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
}+

23. Robuste Design Systems mit Storybook und Angular
• geraten durch anspruchsvollen B2C-Markt unter Druck
• müssen einfach zu bedienen sein
• aber dabei trotzdem viele Funktionen liefern
• nach Möglichkeit auf allen Plattformen verfügbar sein
Moderne Business Anwendungen
23
“Machen wir es doch wie Facebook”

24. Robuste Design Systems mit Storybook und Angular
• iterative Entwicklung von UX und Code
• fail early, fail often
• robuster Prozess
• isolierte Komponenten
• enge Zusammenarbeit
• starker Austausch
• interdisziplinär
Die Herausforderung
24

25. Robuste Design Systems mit Storybook und Angular
• …ist so alt wie Softwarearchitektur selbst
• Idee übertragen aus der Industrie
• abgeschlossen, black-box
• wohldefinierte Ein- und Ausgänge
• einfach testbar
• wiederverwendbar
• flexibel
• von Drittanbietern erhältlich
Komponentenbasierte Softwareentwicklung
25

26. Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
26

27. Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
27
Form Group Header
Input
Input
Button
Login Background

28. Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen Apps
• Zusammenarbeit in Echtzeit
• Components, Constraints, Grids, uvm.
• Prototyping
• (rudimentäre) CSS-Generierung
• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
28

29. Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
29

30. Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
30
Demo Time
bit.ly/ng-ds-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

32. 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
32

33. 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
33

34. Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
34

35. Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
35
Demo Time

36. Robuste Design Systems mit Storybook und Angular
Designer
• einfache Abnahme
• Freigabe von
Änderungen
• Testen am lebenden
Subjekt
• Konsens
Developer
• Edge Cases
• schwierig zu
erreichende States
• Regression Testing
• lebendige
Dokumentation
Tester
• Mock-Daten
• Automatisierung
• Eingrenzung auf
Komponenten
Storybook - wer profitiert davon?
36

37. Robuste Design Systems mit Storybook und Angular
Gesamtes Team
• “Shared Vocabulary”
• Dokumentation
• steigende Produktivität
Storybook - wer profitiert davon?
37

38. 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
38

39. Robuste Design Systems mit Storybook und Angular
Angular: Komponenten
39
Click me![caption]="Click me!" (click)="…"
Clickety![caption]=“Clickety!" (click)="…"

40. Robuste Design Systems mit Storybook und Angular
Login Komponente
40

41. Robuste Design Systems mit Storybook und Angular
Login Komponente
41
Form Group Header
Input
Input
Button
Login Background

42. Robuste Design Systems mit Storybook und Angular
Die Button-Komponente in Storybook mit Angular
Live Coding
42

43. Robuste Design Systems mit Storybook und Angular
Wrap-Up: Technologien
43
Universell einsetzbar

44. 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
44

45. Robuste Design Systems mit Storybook und Angular45
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 andreas.wissel@innoq.com
✍ andreaswissel.com
Vielen Dank!

46. Robuste Design Systems mit Storybook und Angular46
Figma Projekt:
bit.ly/ng-ds-figma
Repository:
bit.ly/jax-ds-repo
Slides:
bit.ly/jax-ds-slides
Links

47. Robuste Design Systems mit Storybook und Angular47
Quellen
https://twitter.com/DougCollinsUX/status/1021789284846788609
https://www.htc.com/us/newsroom/2019-03-26/
https://www.heise.de/select/ix/2017/11/1509663159694094
https://www.samsung.com/sg/refrigerators/family-hub-rf56n9740sg/
https://www.apple.com/shop/buy-watch/apple-watch-series-3/38mm-gps-silver-aluminum-white-sport-band
https://support.apple.com/kb/sp770?locale=de_DE
https://www.apple.com/de/shop/buy-ipad/ipad-pro
https://www.apple.com/de/shop/buy-mac/macbook-pro
https://www.apple.com/de/shop/buy-mac/imac
https://www.microsoft.com/de-de/p/surface-studio-2/8sbjxm0m58t4
https://twitter.com/rsg/status/1148421102009344000
https://twitter.com/Talk_To_The_Hat/status/1166460235982233600
https://www.reddit.com/r/CrappyDesign/comments/c55puw/piss_poor_location/
https://twitter.com/DougCollinsUX/status/1122881214040420352