SlideShare ist ein Scribd-Unternehmen logo

Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung

Mit den stetig wachsenden Möglichkeiten, die Cross-Platform-Anwendungen bieten, wachsen auch die Anforderungen an deren Design. Skalierbarkeit, Flexibilität und Wandelbarkeit gehören zu den Grundprinzipien eines modernen User-Interfaces. Andreas Wissel und Christian Liebel erarbeiten mit Ihnen in diesem Workshop anhand von Praxisbeispielen einen robusten Workflow. Mit Storybook und Angular lassen sich so isolierte, test- und wartbare Komponenten im Handumdrehen umsetzen. Ihre Designer und Entwickler werden es lieben.

1 von 102
Downloaden Sie, um offline zu lesen
Robuste Design Systems mit Storybook und Angular
Vom Konzept zur lebendigen Anwendung
Andreas Wissel
@andreas_wissel
User Experience Architect
Christian Liebel
@christianliebel
Consultant
• Design Systems
• Architekturmuster zur
Entwicklung robuster
Komponenten
• Framework-agnostisches
Tooling, am Beispiel von
Angular
• Durchgängiger Workflow vom
Design bis zur echten
Angular-Komponente
Was Sie erwartet
• technischer Deep Dive
• Angular Deep Dive
Was Sie nicht erwartet
User Experience Architect
Andreas Wissel
💡 Enterprise UX
❤ Design Systems
# Cross-Platform Design Strategies
🏢 Freelancer
✍ andreaswissel.com
🐦 @andreas_wissel
User Experience Architect
Andreas Wissel
• Designer-Developer Schnittstelle
• Workflow Optimierung
• Beratung & Begleitung von Redesigns
• Fokus auf Design Systems mit
Storybook
Consultant
Christian Liebel
💡 Consulting cross-platform & SaaS
❤ Progressive Web Apps & Angular
' MVP & GDE
🏢 Thinktecture AG
✍ christianliebel.com
🐦 @christianliebel
Consultant
Christian Liebel
• Migration von Windows-only, online-
only, On-Premise-Anwendungen
• Plattformunabhängige, offlinefähige
Businessanwendungen in der Cloud
• Fokus auf Progressive Web Apps &
Angular

Recomendados

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 AngularAndreas 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
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas Wissel
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas 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 & AngularAndreas 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
 
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...Jürgen Gutsch
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightChristinaLerch1
 

Más contenido relacionado

Ähnlich wie Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung

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
 
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
 
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
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DNUG e.V.
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everythingcusy GmbH
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationGWAVA
 
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...Sebastian Huppmann
 
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
 
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
 
Nanoservice Architekturen
Nanoservice ArchitekturenNanoservice Architekturen
Nanoservice ArchitekturenLeo Lindhorst
 
Scrum als agiles Vorgehensmodell für Programmierer
Scrum als agiles Vorgehensmodell für ProgrammiererScrum als agiles Vorgehensmodell für Programmierer
Scrum als agiles Vorgehensmodell für ProgrammiererTobias Schlüter
 
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
 
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
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantChristian Nagel
 
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop Entwicklung
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop EntwicklungE-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop Entwicklung
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop EntwicklungHenrik Steffen
 
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer InfrastrukturContinuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer InfrastrukturQAware GmbH
 

Ähnlich wie Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung (20)

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
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
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
 
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
 
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
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everything
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...
Automatische Erstellung einer SharePoint 2013 Entwicklungsumgebung in Microso...
 
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...
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
 
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
 
Nanoservice Architekturen
Nanoservice ArchitekturenNanoservice Architekturen
Nanoservice Architekturen
 
Scrum als agiles Vorgehensmodell für Programmierer
Scrum als agiles Vorgehensmodell für ProgrammiererScrum als agiles Vorgehensmodell für Programmierer
Scrum als agiles Vorgehensmodell für Programmierer
 
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...
 
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
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop Entwicklung
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop EntwicklungE-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop Entwicklung
E-Commerce Total: Manuskript zu Folge 18: Professionelle Online-Shop Entwicklung
 
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer InfrastrukturContinuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
Continuous Delivery für Cloud-native Anwendungen auf Cloud-nativer Infrastruktur
 

Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung