SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Downloaden Sie, um offline zu lesen
Andreas Wissel
@andreas_wissel
User Experience Architect
Von Windows Forms zu Web Components
Robuste Design Systems mit Storybook und Angular
Robuste Design Systems mit Storybook und Angular
• Design Systems
• Tooling
• framework-agnostisch
• am Beispiel Angular
• platform-unabhängig
Was Sie erwartet
2
• technischer Deep Dive
• Angular Deep Dive
Was Sie nicht erwartet
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
3
💡 Enterprise UX
❤ Design Systems
# Cross-Platform Design
🏢 Thinktecture AG
✍ andreaswissel.com
🐦 @andreas_wissel
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
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
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
6
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular7
Menschen denken in Mustern
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular8
Menschen denken in Mustern
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular9
Und ohne Muster sind wir verloren..
User Experience im Alltag
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 Entwickler
10
Access
denied
Robuste Design Systems mit Storybook und Angular
Enge Zusammenarbeit und gemeinsames Verständnis führt zu
guter User Experience
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
Robuste Design Systems mit Storybook und Angular12
Kollaboration ⚡ Fachbereiche
Konsistenz ⚡ Projektalltag
Skalierbarkeit ⚡ Agile Prozesse
Menschen
Robuste Design Systems mit Storybook und Angular
• echte, lebendige Komponenten
• direkt benutzbar
• gekapselt
• Use Case-spezifisch
• Dokumentation
• Styleguide
• Verwendung von Komponenten
Design Systems
13
Robuste Design Systems mit Storybook und Angular
Moment mal..
14
Ein alter Bekannter?
Robuste Design Systems mit Storybook und Angular
• eine Plattform (Windows)
• eingeschränkte Geräteklassen (vorrangig Desktop)
• Microsoft Design-Sprache
Windows Forms und WPF
15
Robuste Design Systems mit Storybook und Angular
“Früher war alles einfacher”
16
Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen früher:
Windows oder Web
17
Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen heute:
Windows, (Mac), Web/PWA, iOS, Android
18
✝ R.I.P. Windows Phone
Robuste Design Systems mit Storybook und Angular
Doch damit nicht genug!
19
Robuste Design Systems mit Storybook und Angular
Stetig wachsender Zielmarkt
20
Robuste Design Systems mit Storybook und Angular
• extrem viele Geräteklassen
• verschiedenste Eingabemöglichkeiten
• viele Zielplattformen
• völlig neue Möglichkeiten
• völlige neue Fehlerquellen
Stetig wachsender Zielmarkt
21
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
}+
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”
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
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
25
Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
26
Demo Time
Robuste Design Systems mit Storybook und Angular
• Komponenten-Modell
• Test von “Worst Case”-Werten
• Responsive Design im Tool
• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows
27
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
28
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 (visuell, code)
Storybook
29
Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
30
Demo Time
Robuste Design Systems mit Storybook und Angular
Designer
• einfache Abnahme
• Testen am lebenden Subjekt
• Konsens
Storybook - wer profitiert davon?
31
Robuste Design Systems mit Storybook und Angular
Developer
• Edge Cases
• schwierig zu erreichende States
• Regression Testing
• lebendige Dokumentation
Storybook - wer profitiert davon?
32
Robuste Design Systems mit Storybook und Angular
Tester
• Mock-Daten
• Automatisierung
• Eingrenzung auf Komponenten
Storybook - wer profitiert davon?
33
Robuste Design Systems mit Storybook und Angular
Designer
• einfache Abnahme
• 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?
34
Robuste Design Systems mit Storybook und Angular
Gesamtes Team
• gemeinsames Verständnis
• einfacherer Zugang zu Komponenten
• Übersicht und Dokumentation
Storybook - wer profitiert davon?
35
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
36
Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
37
Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
38
Form Group Header
Input
Input
Button
Login Background
Robuste Design Systems mit Storybook und Angular
Die Input-Komponente in Storybook mit Angular
Live Coding
39
Robuste Design Systems mit Storybook und Angular
Wrap-Up: Technologien
40
Universell einsetzbar
Robuste Design Systems mit Storybook und Angular
1. Der Designer erstellt eine Komponente in Figma
2. Der Entwickler generiert ein passendes Modul, eine Komponente
sowie eine Story
3. Der Entwickler übernimmt die CSS-Stile aus Figma
4. Der Entwickler implementiert den HTML-Aufbau und übernimmt
die Logik
5. Der Entwickler implementiert eine passende Story (und Unit-Tests)
6. Review mit dem Designer, bei Bedarf die obigen Schritte
wiederholen
Wrap-Up: Workflow
41
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
42
Robuste Design Systems mit Storybook und Angular43
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 inquiries@kaeku.io
✍ andreaswissel.com
Vielen Dank!
Robuste Design Systems mit Storybook und Angular44
Figma Projekt:
bit.ly/ng-ds-figma
Repository:
bit.ly/basta-ds-repo
Slides:
bit.ly/basta-ds-slides
Links
Robuste Design Systems mit Storybook und Angular45
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

Weitere ähnliche Inhalte

Ähnlich wie Von Windows Forms zu Web Components: robuste und flexible User Experience mit Storybook und Angular

Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Community ITmitte.de
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015AboutYouGmbH
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit AngularJens Binfet
 
2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und TestsDaniel Fisher
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenRoland Mast
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightChristinaLerch1
 
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Lena Königsberger
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenSymposia Media
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen....NET User Group Rhein-Neckar
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everythingcusy GmbH
 
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Marc Bless
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudAarno Aukia
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt socDaniel Fisher
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerDennis Wilson
 

Ähnlich wie Von Windows Forms zu Web Components: robuste und flexible User Experience mit Storybook und Angular (20)

Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests2005 - NRW Conf: Design, Entwicklung und Tests
2005 - NRW Conf: Design, Entwicklung und Tests
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha Night
 
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Web-Tools für das Studium
Web-Tools für das StudiumWeb-Tools für das Studium
Web-Tools für das Studium
 
Webtools studium
Webtools studiumWebtools studium
Webtools studium
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everything
 
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
 
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die CloudApplikationsmodernisierung: Der Weg von Legacy in die Cloud
Applikationsmodernisierung: Der Weg von Legacy in die Cloud
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 

Von Windows Forms zu Web Components: robuste und flexible User Experience mit Storybook und Angular

  • 1. Andreas Wissel @andreas_wissel User Experience Architect Von Windows Forms zu Web Components Robuste Design Systems mit Storybook und Angular
  • 2. Robuste Design Systems mit Storybook und Angular • Design Systems • 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 🏢 Thinktecture AG ✍ 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 Entwickler 10 Access denied
  • 11. Robuste Design Systems mit Storybook und Angular Enge Zusammenarbeit und gemeinsames Verständnis führt zu guter User Experience 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 • Dokumentation • Styleguide • Verwendung von Komponenten Design Systems 13
  • 14. Robuste Design Systems mit Storybook und Angular Moment mal.. 14 Ein alter Bekannter?
  • 15. Robuste Design Systems mit Storybook und Angular • eine Plattform (Windows) • eingeschränkte Geräteklassen (vorrangig Desktop) • Microsoft Design-Sprache Windows Forms und WPF 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 ✝ R.I.P. Windows Phone
  • 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öllige 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 • 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 25
  • 26. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 26 Demo Time
  • 27. Robuste Design Systems mit Storybook und Angular • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows 27
  • 28. 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 28
  • 29. 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 (visuell, code) Storybook 29
  • 30. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 30 Demo Time
  • 31. Robuste Design Systems mit Storybook und Angular Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Storybook - wer profitiert davon? 31
  • 32. Robuste Design Systems mit Storybook und Angular Developer • Edge Cases • schwierig zu erreichende States • Regression Testing • lebendige Dokumentation Storybook - wer profitiert davon? 32
  • 33. Robuste Design Systems mit Storybook und Angular Tester • Mock-Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon? 33
  • 34. Robuste Design Systems mit Storybook und Angular Designer • einfache Abnahme • 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? 34
  • 35. Robuste Design Systems mit Storybook und Angular Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten • Übersicht und Dokumentation Storybook - wer profitiert davon? 35
  • 36. 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 36
  • 37. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 37
  • 38. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 38 Form Group Header Input Input Button Login Background
  • 39. Robuste Design Systems mit Storybook und Angular Die Input-Komponente in Storybook mit Angular Live Coding 39
  • 40. Robuste Design Systems mit Storybook und Angular Wrap-Up: Technologien 40 Universell einsetzbar
  • 41. Robuste Design Systems mit Storybook und Angular 1. Der Designer erstellt eine Komponente in Figma 2. Der Entwickler generiert ein passendes Modul, eine Komponente sowie eine Story 3. Der Entwickler übernimmt die CSS-Stile aus Figma 4. Der Entwickler implementiert den HTML-Aufbau und übernimmt die Logik 5. Der Entwickler implementiert eine passende Story (und Unit-Tests) 6. Review mit dem Designer, bei Bedarf die obigen Schritte wiederholen Wrap-Up: Workflow 41
  • 42. 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 42
  • 43. Robuste Design Systems mit Storybook und Angular43 User Experience Architect Andreas Wissel 🐦 @andreas_wissel 📨 inquiries@kaeku.io ✍ andreaswissel.com Vielen Dank!
  • 44. Robuste Design Systems mit Storybook und Angular44 Figma Projekt: bit.ly/ng-ds-figma Repository: bit.ly/basta-ds-repo Slides: bit.ly/basta-ds-slides Links
  • 45. Robuste Design Systems mit Storybook und Angular45 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