Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular

61 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular

  1. 1. Andreas Wissel @andreas_wissel User Experience Architect Von Applets zu Web Components Robuste Design Systems mit Storybook und Angular
  2. 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. 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. 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. 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. 6. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 6 User Experience im Alltag
  7. 7. Robuste Design Systems mit Storybook und Angular7 Menschen denken in Mustern User Experience im Alltag
  8. 8. Robuste Design Systems mit Storybook und Angular8 Menschen denken in Mustern User Experience im Alltag
  9. 9. Robuste Design Systems mit Storybook und Angular9 Und ohne Muster sind wir verloren.. User Experience im Alltag
  10. 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. 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. 12. Robuste Design Systems mit Storybook und Angular12 Kollaboration ⚡ Fachbereiche Konsistenz ⚡ Projektalltag Skalierbarkeit ⚡ Agile Prozesse Menschen
  13. 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. 14. Robuste Design Systems mit Storybook und Angular Moment mal.. 14 Ein alter Bekannter?
  15. 15. Robuste Design Systems mit Storybook und Angular • plattformunabhängig • vorrangig Desktop • JavaFX look and feel JavaFX - ein Design System? 15
  16. 16. Robuste Design Systems mit Storybook und Angular “Früher war alles einfacher” 16
  17. 17. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen früher: Windows oder Web 17
  18. 18. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen heute: Windows, (Mac), Web/PWA, iOS, Android 18
  19. 19. Robuste Design Systems mit Storybook und Angular Doch damit nicht genug! 19
  20. 20. Robuste Design Systems mit Storybook und Angular Stetig wachsender Zielmarkt 20
  21. 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. 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. 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. 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. 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. 26. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 26
  27. 27. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 27 Form Group Header Input Input Button Login Background
  28. 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. 29. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 29
  30. 30. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 30 Demo Time bit.ly/ng-ds-figma
  31. 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. 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. 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. 34. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 34
  35. 35. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 35 Demo Time
  36. 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. 37. Robuste Design Systems mit Storybook und Angular Gesamtes Team • “Shared Vocabulary” • Dokumentation • steigende Produktivität Storybook - wer profitiert davon? 37
  38. 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. 39. Robuste Design Systems mit Storybook und Angular Angular: Komponenten 39 Click me![caption]="Click me!" (click)="…" Clickety![caption]=“Clickety!" (click)="…"
  40. 40. Robuste Design Systems mit Storybook und Angular Login Komponente 40
  41. 41. Robuste Design Systems mit Storybook und Angular Login Komponente 41 Form Group Header Input Input Button Login Background
  42. 42. Robuste Design Systems mit Storybook und Angular Die Button-Komponente in Storybook mit Angular Live Coding 42
  43. 43. Robuste Design Systems mit Storybook und Angular Wrap-Up: Technologien 43 Universell einsetzbar
  44. 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. 45. Robuste Design Systems mit Storybook und Angular45 User Experience Architect Andreas Wissel 🐦 @andreas_wissel 📨 andreas.wissel@innoq.com ✍ andreaswissel.com Vielen Dank!
  46. 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. 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

×