SlideShare a Scribd company logo
Andreas Wissel
@andreas_wissel
User Experience Architect
Figma,Storybook und Angular
Toolchain für plattformunabhängige UI-Entwicklung
Special Day Cross-Plattform Applications
Thema Sprecher Datum, Uhrzeit
Figma, Storybook und Angular: Toolchain für
plattformunabhängige UI-Entwicklung
Andreas Wissel


DO, 23. September 2021,


09.15 bis 10.15


Realtime Cross-Plattform-Applikationen mit
Angular, ASP.NET Core und SignalR
Fabian Gosebrink DO, 23. September 2021,


10.45 bis 11.45
Angular & Ionic –


Cross-Plattform aus einer Hand
Max Schulte DO, 23. September 2021,


12.15 bis 13.15
Electron.NET –


Neue Features, Tipps und Tricks
Gregor Biswanger DO, 23. September 2021,


15.30 bis 16.30
Electron, Capacitor, PWA –


was, wann, wie & warum?
Christian Liebel DO, 23. September 2021,


17.00 bis 18.00
Robuste Design Systems mit Storybook und Angular
• Design Systems Intro


• Tooling


• framework-agnostisch


• am Beispiel Angular


• platform-unabhängig
Was Sie erwartet
3
• technischer Deep Dive


• Angular Deep Dive


Was Sie nicht erwartet
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
💡 Collaboration & Communication


❤ Design Systems


👨💻 Human-centric workflows
🏢 Freelance Consultant


✍ andreaswissel.com


🐦 @andreas_wissel
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
5
• 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 die
Anwender, Geschäftsprozesse und Umwelt beeinflussen


• Wichtig: nicht nur visuelles UI - sondern vor allem die
theoretische Architektur dahinter!
Was ist UX?
6
Robuste Design Systems mit Storybook und Angular
UX: Ein Musterbeispiel
7
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
8
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
9
Menschen denken in Mustern
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
10
Menschen denken in Mustern
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen sind Gewohnheitstiere.
11
Robuste Design Systems mit Storybook und Angular
12
Und ohne Muster sind wir verloren..
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
• Menschen denken in Systemen/Mustern


• mit ihnen sparen wir kostbare kognitive Ressourcen ein


• Gewohnheiten navigieren uns durch den Alltag


• Software ist heute Alltag
User Experience - viele bekannte Muster
13
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
14
Access
denied
Robuste Design Systems mit Storybook und Angular
Verstanden.


Aber wie passiert das trotzdem?
15
Robuste Design Systems mit Storybook und Angular
Der übliche Arbeitsmodus
16
Konzeption
Entwicklung
Test
Mit etwas Glück unterhalten sich hier Menschen miteinander


...aber meistens ist das eher nicht der Fall.
Robuste Design Systems mit Storybook und Angular
• Je besser wir miteinander kommunizieren, desto mehr
gemeinsames Verständnis entwickeln wir für das Produkt.


• Enge Zusammenarbeit und gemeinsames Verständnis führt zu
guter User Experience
Die Arbeitsthese
17
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben
Robuste Design Systems mit Storybook und Angular
Der gewünschte Arbeitsmodus
18
Iterative Entwicklung


der Komponente
ständiger Sync zwischen


Entwicklung und Design
Robuste Design Systems mit Storybook und Angular
Der Workflow den wir suchen
19
sichert Konsistenz langfristig


für alle verständlich
nicht in Stein gemeißelt


einfach integrierbar
Robuste Design Systems mit Storybook und Angular
Der erste Baustein: Design System
20
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen
Robuste Design Systems mit Storybook und Angular
• echte, lebendige Komponenten


• direkt benutzbar


• gekapselt


• Use Case-spezifisch


• Technische Dokumentation
Design System: Was ist das?
21
• Styleguide


• statische, visuelle Dokumentation
der Marke


• “look & feel”


• Pattern Library


• Dokumentation der UI-Elemente
Robuste Design Systems mit Storybook und Angular
Moment mal..
22
Ein alter Bekannter?
Robuste Design Systems mit Storybook und Angular
• eine Plattform (Windows)


• eingeschränkte Geräteklassen (vorrangig Desktop)


• Microsoft Design-Sprache


• … Accessibility?
Windows Forms und WPF
23
Robuste Design Systems mit Storybook und Angular
“Warum muss das heute so kompliziert
sein?”
24
Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen früher:


Windows oder Web
25
Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen heute:


Windows, Mac, Linux, Web/PWA, iOS, Android
26
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
27
Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
28
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
Design Systems: Zusammenfassung
29
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen
Robuste Design Systems mit Storybook und Angular
Fundament für skalierbare Anwendungen:
Komponentenbasierte Softwareentwicklung
Moderne Design Systems treffen Softwareentwicklung
30
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
31
Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
32
Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
33
Form Group Header
Input
Input
Button
Login Background
Robuste Design Systems mit Storybook und Angular
34
Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen Apps


• Zusammenarbeit in Echtzeit


• Prototyping


• (rudimentäre) CSS-Generierung


• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
35
Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
36
Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
37
Demo Time


bit.ly/ngds-figma
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
38
Robuste Design Systems mit Storybook und Angular
39
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
40
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
41
Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
42
Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
43
Demo Time
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?
44
Robuste Design Systems mit Storybook und Angular
Gesamtes Team


• “Shared Vocabulary”


• agile Dokumentation


• steigende Produktivität
Storybook - wer profitiert davon?
45
Robuste Design Systems mit Storybook und Angular
46
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
47
Robuste Design Systems mit Storybook und Angular
Angular: Komponentenbasierte Entwicklung
48
Click me!
[caption]="Click me!" (click)="…"
Clickety!
[caption]=“Clickety!" (click)="…"
Robuste Design Systems mit Storybook und Angular
Login Komponente
49
Robuste Design Systems mit Storybook und Angular
Login Komponente
50
Form Group Header
Input
Input
Button
Login Background
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
51
Robuste Design Systems mit Storybook und Angular
Storybook: Aufbau von Stories
52
Robuste Design Systems mit Storybook und Angular
Die Button-Komponente in Storybook mit Angular
Live Coding
53
Robuste Design Systems mit Storybook und Angular
Wrap-Up: Technologien
54
Universell einsetzbar
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
55
Robuste Design Systems mit Storybook und Angular
56
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel


📨 business@andreaswissel.com


✍ andreaswissel.com
Vielen Dank!
Robuste Design Systems mit Storybook und Angular
57
Figma Projekt:


bit.ly/ngds-figma


Repository:


bit.ly/b2021f-repo


Slides:


bit.ly/b2021f-slides
Links
Robuste Design Systems mit Storybook und Angular
58
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

More Related Content

Similar to Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung

Bridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A StorybookBridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A Storybook
Marko Letic
 
IncQuery Server for Teamwork Cloud - Talk at IW2019
IncQuery Server for Teamwork Cloud - Talk at IW2019IncQuery Server for Teamwork Cloud - Talk at IW2019
IncQuery Server for Teamwork Cloud - Talk at IW2019
Istvan Rath
 
Highlights from MS build\\2016 Conference
Highlights from MS build\\2016 ConferenceHighlights from MS build\\2016 Conference
Highlights from MS build\\2016 Conference
EastBanc Tachnologies
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
Oursky
 
Boilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development ProcessBoilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development Process
Fibonalabs
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and Mustard
Kaelig Deloumeau-Prigent
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @media
Glenn Cahill
 
TEST TEST TEST
TEST TEST TESTTEST TEST TEST
TEST TEST TEST
Glenn Cahill
 
Configuring in the Browser, Really!
Configuring in the Browser, Really!Configuring in the Browser, Really!
Configuring in the Browser, Really!
Tim Geisler
 
Adobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
Adobe MAX: Rapidly Build HTML5 Apps with Sencha DesignerAdobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
Adobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
Aaron Conran
 
DevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOpsDevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOps
Emmanuel Gomes Brandão
 
The Power of Azure DevOps
The Power of Azure DevOpsThe Power of Azure DevOps
The Power of Azure DevOps
Jeff Bramwell
 
User Experience Prototyping
User Experience PrototypingUser Experience Prototyping
User Experience Prototyping
Catapult New Business
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
Marc D Anderson
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
Gaurav Singh
 
Cloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationCloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool Integration
Istvan Rath
 
Databases - beyond SQL : Cosmos DB (part 6)
Databases - beyond SQL : Cosmos DB (part 6)Databases - beyond SQL : Cosmos DB (part 6)
Databases - beyond SQL : Cosmos DB (part 6)
Alexandre BERGERE
 
Cincom Smalltalk News
Cincom Smalltalk NewsCincom Smalltalk News
Cincom Smalltalk News
ESUG
 
Starting from scratch in 2017
Starting from scratch in 2017Starting from scratch in 2017
Starting from scratch in 2017
Stefano Bonetta
 

Similar to Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung (20)

Bridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A StorybookBridging the gap between UX and development – A Storybook
Bridging the gap between UX and development – A Storybook
 
IncQuery Server for Teamwork Cloud - Talk at IW2019
IncQuery Server for Teamwork Cloud - Talk at IW2019IncQuery Server for Teamwork Cloud - Talk at IW2019
IncQuery Server for Teamwork Cloud - Talk at IW2019
 
Highlights from MS build\\2016 Conference
Highlights from MS build\\2016 ConferenceHighlights from MS build\\2016 Conference
Highlights from MS build\\2016 Conference
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
 
Boilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development ProcessBoilerplates: Step up your Web Development Process
Boilerplates: Step up your Web Development Process
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and Mustard
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @media
 
TEST TEST TEST
TEST TEST TESTTEST TEST TEST
TEST TEST TEST
 
Configuring in the Browser, Really!
Configuring in the Browser, Really!Configuring in the Browser, Really!
Configuring in the Browser, Really!
 
Adobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
Adobe MAX: Rapidly Build HTML5 Apps with Sencha DesignerAdobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
Adobe MAX: Rapidly Build HTML5 Apps with Sencha Designer
 
DevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOpsDevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOps
 
The Power of Azure DevOps
The Power of Azure DevOpsThe Power of Azure DevOps
The Power of Azure DevOps
 
User Experience Prototyping
User Experience PrototypingUser Experience Prototyping
User Experience Prototyping
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
 
Cloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationCloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool Integration
 
Databases - beyond SQL : Cosmos DB (part 6)
Databases - beyond SQL : Cosmos DB (part 6)Databases - beyond SQL : Cosmos DB (part 6)
Databases - beyond SQL : Cosmos DB (part 6)
 
Cincom Smalltalk News
Cincom Smalltalk NewsCincom Smalltalk News
Cincom Smalltalk News
 
Starting from scratch in 2017
Starting from scratch in 2017Starting from scratch in 2017
Starting from scratch in 2017
 

More from Andreas Wissel

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
Andreas Wissel
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
Andreas Wissel
 
Design systems-2021-fall
Design systems-2021-fallDesign systems-2021-fall
Design systems-2021-fall
Andreas Wissel
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
Andreas Wissel
 
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Andreas Wissel
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Andreas Wissel
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Andreas Wissel
 

More from Andreas Wissel (8)

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
Design systems-2021-fall
Design systems-2021-fallDesign systems-2021-fall
Design systems-2021-fall
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
 
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
 

Recently uploaded

Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
manji sharman06
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
Ortus Solutions, Corp
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 

Recently uploaded (20)

Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
Call Girls Chandigarh🔥7023059433🔥Agency Profile Escorts in Chandigarh Availab...
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 

Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung

  • 1. Andreas Wissel @andreas_wissel User Experience Architect Figma,Storybook und Angular Toolchain für plattformunabhängige UI-Entwicklung
  • 2. Special Day Cross-Plattform Applications Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige UI-Entwicklung Andreas Wissel DO, 23. September 2021, 
 09.15 bis 10.15 Realtime Cross-Plattform-Applikationen mit Angular, ASP.NET Core und SignalR Fabian Gosebrink DO, 23. September 2021, 
 10.45 bis 11.45 Angular & Ionic – 
 Cross-Plattform aus einer Hand Max Schulte DO, 23. September 2021, 
 12.15 bis 13.15 Electron.NET – 
 Neue Features, Tipps und Tricks Gregor Biswanger DO, 23. September 2021, 
 15.30 bis 16.30 Electron, Capacitor, PWA – 
 was, wann, wie & warum? Christian Liebel DO, 23. September 2021, 
 17.00 bis 18.00
  • 3. Robuste Design Systems mit Storybook und Angular • Design Systems Intro • Tooling • framework-agnostisch • am Beispiel Angular • platform-unabhängig Was Sie erwartet 3 • technischer Deep Dive • Angular Deep Dive Was Sie nicht erwartet
  • 4. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 4 💡 Collaboration & Communication ❤ Design Systems 👨💻 Human-centric workflows 🏢 Freelance Consultant ✍ andreaswissel.com 🐦 @andreas_wissel
  • 5. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 5 • Designer-Developer-Schnittstelle • Workflow-Optimierung • Beratung & Begleitung von Redesigns • Fokus auf Design Systems mit Storybook
  • 6. 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 theoretische Architektur dahinter! Was ist UX? 6
  • 7. Robuste Design Systems mit Storybook und Angular UX: Ein Musterbeispiel 7
  • 8. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 8 User Experience im Alltag
  • 9. Robuste Design Systems mit Storybook und Angular 9 Menschen denken in Mustern User Experience im Alltag
  • 10. Robuste Design Systems mit Storybook und Angular 10 Menschen denken in Mustern User Experience im Alltag
  • 11. Robuste Design Systems mit Storybook und Angular Menschen sind Gewohnheitstiere. 11
  • 12. Robuste Design Systems mit Storybook und Angular 12 Und ohne Muster sind wir verloren.. User Experience im Alltag
  • 13. Robuste Design Systems mit Storybook und Angular • Menschen denken in Systemen/Mustern • mit ihnen sparen wir kostbare kognitive Ressourcen ein • Gewohnheiten navigieren uns durch den Alltag • Software ist heute Alltag User Experience - viele bekannte Muster 13
  • 14. 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 14 Access denied
  • 15. Robuste Design Systems mit Storybook und Angular Verstanden. Aber wie passiert das trotzdem? 15
  • 16. Robuste Design Systems mit Storybook und Angular Der übliche Arbeitsmodus 16 Konzeption Entwicklung Test Mit etwas Glück unterhalten sich hier Menschen miteinander ...aber meistens ist das eher nicht der Fall.
  • 17. Robuste Design Systems mit Storybook und Angular • Je besser wir miteinander kommunizieren, desto mehr gemeinsames Verständnis entwickeln wir für das Produkt. • Enge Zusammenarbeit und gemeinsames Verständnis führt zu guter User Experience Die Arbeitsthese 17 Dieser Talk soll das nötige Handwerkszeug für enge Zusammenarbeit geben
  • 18. Robuste Design Systems mit Storybook und Angular Der gewünschte Arbeitsmodus 18 Iterative Entwicklung der Komponente ständiger Sync zwischen Entwicklung und Design
  • 19. Robuste Design Systems mit Storybook und Angular Der Workflow den wir suchen 19 sichert Konsistenz langfristig für alle verständlich nicht in Stein gemeißelt einfach integrierbar
  • 20. Robuste Design Systems mit Storybook und Angular Der erste Baustein: Design System 20 Sammlung aller Komponenten klar definierte Use-Cases Zusammenspiel aller Disziplinen
  • 21. Robuste Design Systems mit Storybook und Angular • echte, lebendige Komponenten • direkt benutzbar • gekapselt • Use Case-spezifisch • Technische Dokumentation Design System: Was ist das? 21 • Styleguide • statische, visuelle Dokumentation der Marke • “look & feel” • Pattern Library • Dokumentation der UI-Elemente
  • 22. Robuste Design Systems mit Storybook und Angular Moment mal.. 22 Ein alter Bekannter?
  • 23. Robuste Design Systems mit Storybook und Angular • eine Plattform (Windows) • eingeschränkte Geräteklassen (vorrangig Desktop) • Microsoft Design-Sprache • … Accessibility? Windows Forms und WPF 23
  • 24. Robuste Design Systems mit Storybook und Angular “Warum muss das heute so kompliziert sein?” 24
  • 25. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen früher: Windows oder Web 25
  • 26. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen heute: Windows, Mac, Linux, Web/PWA, iOS, Android 26
  • 27. 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 27
  • 28. Robuste Design Systems mit Storybook und Angular Moderne Design Systems: Bausteine 28 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 } +
  • 29. Robuste Design Systems mit Storybook und Angular Design Systems: Zusammenfassung 29 Sammlung aller Komponenten klar definierte Use-Cases Zusammenspiel aller Disziplinen
  • 30. Robuste Design Systems mit Storybook und Angular Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung 30
  • 31. 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 31
  • 32. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 32
  • 33. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 33 Form Group Header Input Input Button Login Background
  • 34. Robuste Design Systems mit Storybook und Angular 34
  • 35. Robuste Design Systems mit Storybook und Angular • Browserbasiert mit nativen Apps • Zusammenarbeit in Echtzeit • Prototyping • (rudimentäre) CSS-Generierung • Kommerziell, kostenfrei nutzbar (für öffentliche Projekte) Figma: Komponentenbasiertes Design 35
  • 36. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 36
  • 37. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 37 Demo Time bit.ly/ngds-figma
  • 38. 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 38
  • 39. Robuste Design Systems mit Storybook und Angular 39
  • 40. 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 40
  • 41. 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 41
  • 42. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 42
  • 43. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 43 Demo Time
  • 44. 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? 44
  • 45. Robuste Design Systems mit Storybook und Angular Gesamtes Team • “Shared Vocabulary” • agile Dokumentation • steigende Produktivität Storybook - wer profitiert davon? 45
  • 46. Robuste Design Systems mit Storybook und Angular 46
  • 47. 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 47
  • 48. Robuste Design Systems mit Storybook und Angular Angular: Komponentenbasierte Entwicklung 48 Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"
  • 49. Robuste Design Systems mit Storybook und Angular Login Komponente 49
  • 50. Robuste Design Systems mit Storybook und Angular Login Komponente 50 Form Group Header Input Input Button Login Background
  • 51. 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 51
  • 52. Robuste Design Systems mit Storybook und Angular Storybook: Aufbau von Stories 52
  • 53. Robuste Design Systems mit Storybook und Angular Die Button-Komponente in Storybook mit Angular Live Coding 53
  • 54. Robuste Design Systems mit Storybook und Angular Wrap-Up: Technologien 54 Universell einsetzbar
  • 55. 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 55
  • 56. Robuste Design Systems mit Storybook und Angular 56 User Experience Architect Andreas Wissel 🐦 @andreas_wissel 📨 business@andreaswissel.com ✍ andreaswissel.com Vielen Dank!
  • 57. Robuste Design Systems mit Storybook und Angular 57 Figma Projekt: bit.ly/ngds-figma Repository: bit.ly/b2021f-repo Slides: bit.ly/b2021f-slides Links
  • 58. Robuste Design Systems mit Storybook und Angular 58 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