SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
Design better together
Styleguide driven
Web Development
Kathrin Friedrich Michael Kunze
WAS KUNDEN WOLLEN WAS PROJEKTLEITER WOLLEN WAS WIR WIRKLICH WOLLEN
SCHONWIEDERDIEBUTTONFARBEANPASSEN?
WHAT
THE
FU#K?
DAILY
DESIGN
UPDATE!
PHOTO
SHOP?
MEASUREMENT?
COLORS?
SPEC?
INTERACTIONS?
???
WHAT THE
HELL?
„IT WAS TOO BIG TO
UPLOAD TO
SHAREPOINT”
UI_final_v2-new.pdf
UI_final_v2-new_update.zip
buttons_new_contrast.jpg
Recent specs
for the
component?
Anyone?
End?
NO!
Even design
has a life
cycle.
APPLICATION
ZOO
WEBSITE BLOG
SHOP
APPINTRANET NEWS-
LETTER
SELF
SERVICE
MICRO
SITE
LANDING
PAGES
WIKI
WEB
WEB
WEB
SINGLE SOURCE
OF TRUTH
Digital & Online
Searchable
Versioned
Dedicated Format.
PITSTOP
INHERITABLE
CONCEPTS
GOALS
COLLABORATION
BEST PRACTICEBAD
65-120 X 3 X 3 X 8 X 2
6.840 PT ???
VISION &
STRATEGIE
REQUIREMENTS &
IDEATION
PROTOTYPING VISUAL
DESIGN
UI
DESIGN
ANALYSE
RESEARCH GROBKONZEPT
TESTING
USER EXPERIENCE DESIGN
ANALYSE
SOFTWARE
DESIGN ARCHITEKTUR CODING TESTING DEPLOY
DOKUMENTATION
DEVELOPMENT
DOKUMENTATION
DOKUMENTATION
DOKUMENTATION
ALT
STRESS?
DOKUMENTATION = SINGLE SOURTH OF TRUTH = LIVING STYLEGUIDE
SEO TRACKING CONTENTBRAND DESIGN &
MARKETING
VISION &
STRATEGIE
REQUIREMENTS &
IDEATION
PROTOTYPING VISUAL
DESIGN
UI
DESIGN
ANALYSE
RESEARCH GROBKONZEPT TESTING
USER EXPERIENCE DESIGN
ANALYSE
SOFTWARE
DESIGN ARCHITEKTUR CODING TESTING DEPLOY
DEVELOPMENT
NEU
Funktionen & Design
USABILITY
NUTZERERLEBNISSE
MARKENWIRKUNG
BEGEISTERUNG,
Loyalität & Umsatz
U X
DOKUMENTATION
PROTOTYPING VISUAL
DESIGN
UI
DESIGN
GROBKONZEPT TESTING
USER EXPERIENCE DESIGN
FORMER
TIMES
WEBSITES
= IMAGES
PAINTING
LAYER / JPG EXPORT
COMPROMISE
CODE
COMPROMISE
LAUNCH
IMAGE BASED
DESIGN TOOLS
Designer = Painter
From Pixel to Vector
PHOTO
SHOP
YAY … SAID NO
ONE EVER
SKETCH
MEASURE
CODE BASED
DESIGN TOOLS
Design is rendered in Code. Without Code.
Same possibilities, same constraints.
CODE DESIGN
MERGE TOOLS
Coded Components inside a design tool.
Real prototyping and UI inventory.
UX Pin Merge
UX PIN
MERGE
NEU 2019
DESIGN SPECS
HANDOFF
auto-generated code from Sketch, Photoshop,
Adobe XD, Illustrator, and Figma
SYMPLI
ZEPLIN
AVOCODE
AVOCODE
Does it help?
UX PIN
SPEC MODE
Yay! Additional Specs
UX PIN
STYLEGUIDE
& ASSETS
Design System Styleguide, Tokens, Components
DESIGN SYSTEM
STYLEGUIDE
Standards for Innovation.
Styleguide & Pattern Libraries
FRONTIFY
STYLEGUIDE
& ASSETS Mehrsprachigkeit? Suche? Rechte & Rolle? Vererbung?
FRONTIFY
UI LIBRARY
Code-Ablage? Technologien? Vererbung?
MATERIAL
DESIGN SYSTEM
4TUX Reifegradmodell
UX Health Check &
UX Schulden
UX Architekt &
agile Arbeitsmethoden
Standardisierung &
Dokumentation
Brand Experience
Plattform
niedrig mittel hoch niedrig mittel hoch niedrig mittel hoch niedrig mittel hoch
65 %
TOUCHPOINTS TEAMS TRANSPARENZ TOOLS&SERVICES
UX HEALTH CHECK PEOPLE & CULTURE TOOLS & INFRASTRUCTUREWORKFLOW & STANDARDS
Corporate Design 85 %
Usability 70 %
Accessibility 50 %
SEO 60 %
Data Driven Concepts 30 %
Living Styleguide Workflow 60 %
UX Check Lists 80 %
UX KPIS & Testing 40 %
Agile UX 50 %
UX Board 40 %
Tracking 80 %
Responsive Design 90 %
Joy of Use 80 % UX Architect Governance 10 %
UX Debts Backlog 20 %
Best Practice Sharing 60 %
Spezifikations-Standard 80 %
Rapid Prototyping 50 %
TOUCHPOINTS TEAMS TRANSPARENZ TOOLS&SERVICES
Brand Experience Plattform 20 %
Zentrales Asset Management 80 %
Onboarding & Zertifizierung 80 %
Touchpoint Holistics 40 %
Toolchain UX-Dev 80 %
4TUX
Erweiterbarkeit
Performance
INNOVATIVE FEATURES
STABILE SYSTEME
Effiziente Entwicklung
Spaß im Team
U X
EFFIZIENTE
PIPELINE !?!
Task runner
§ Gulp
§ Grunt
§ Webpack
package manager
§ Bower
§ NPM
+ package repository
isolated enviroment
§ Vagrant
§ Docker
§ Storybook
isolated components
§ Atomic Design
§ BEM
Documentation
§ Guidelines
§ KSS
§ StyleDocco
§ Sassdown
Templating
§ Nunjucks
§ Mustache
Preprocessor
§ SASS
§ LESS
§ STYLUS
Framework
§ Bootstrap
§ Material.io
§ Your own
MACHEN TOOLS
UNS WIRKLICH
EFFIZIENT?
Ja ich könnte
den Button in
jedem Projekt
neu machen.
Ich kann aber
auch per
Makro jeder
Variation
erzeugen und
nachnutzen!
Frontend ist
mehr als
HTML, CSS
oder einfach
nur hübsch.
CREATIVE CODE HEALTH CHECK PEOPLE & CULTURE TOOLS & INFRASTRUCTUREWORKFLOW & STANDARDS
Atomic Design & Themability 85 %
Buildprozesse 70 %
Testautomatisierung 50 %
Tracking Concepts 60 %
Living Styleguide Workflow 60 %
CC Check Lists 80 %
Agile Teams 50 %
Pair Programming 40 %
SEO & Accessibility 80 %
Browser Compatibility 90 %
Code Optimierung 80 %
Code Refactoring 20 %
Best Practice Sharing 60 %
Dokumentations Standard 80 %
Rapid Prototyping 50 %
TOUCHPOINTS TEAMS TRANSPARENZ TOOLS&SERVICES
Brand Experience Plattform 20 %
Zentrales Asset Management 80 %
Onboarding & Zertifizierung 80 %
Touchpoint Holistics 40 %
Toolchain UX-Dev 80 %
4TCC
Effizient. Smart. Kollaborativ
WIE MACHEN WIR ES BESSER
Mehr Freiraum für coole Features
DESIGN + DEV + OPS.
U X
WIRKLICH
NEUES GESTALTEN
Design Ops meets Dev Ops.
Automatisierung repetitiver Tasks.
Atomic Design. Edge Cases.
SEO. Tracking. Animations.
Design System. Tokens.
Design Pattern Library. Collaborative Design.
UX-Dev Sprint Team.
Pairing & Standups.
Durchgängige Pipeline.
Gleiches Wording. Bis hin zur Redaktion.
Rückfluss aus Projekten. Basis UI
Erweiterungen. Design System Governance.
Spezifikation. Checklisten.
Hands-Off Meetings.
UX/Dev Dokumentation in gemeinsam Tool.
Single Source of Truth, online.
Code Library. Theming.
Technologie-neutraler Creative Code, projektübergreifend.
9
TAKE AWAYS
Integration weiterer Touchpoints und
Technologien ausgehend von Plain HTML.
LIVING STYLEGUIDE TOOL CHAIN
Brand Design Guidelines.
Plakativ, Übersichtlich, Emotional.
Schluss mit PDF.
Basis Design Tokens
Zentrale Definition von Marke, Farben, Icons, Typo uvm.
Komponenten Spezifikation
UX Design & Frontend Code.
BRAND DESIGN MANAGEMENT PORTAL
WAS MACHEN
WIR HIER ALLE
2025 NOCH?
UX MEETS
AI
AUTOMATISIERT
BARRIEREFREIE
INTERFACES2025
ADI.
ARTIFICIAL DRIVEN
DESIGNINTELLIGENCE.
Designer werden zum Art Direktor ihrer neuen
Schüler, der künstlichen Intelligenz.
Automatisierte Anreicherung von
Code, selbst lernendes System zur
Erkennung von UI Patterns.
?
FREIRAUM FÜR
INNOVATION
Design better together.
Styleguide driven
Web Development
kathrin.friedrich@t-systems.com
User Experience Consultant
Michael.kunze@t-systems.com
Software Architekt
T-Systems Multimedia Solutions
Design Factory & Living Styleguide

Weitere ähnliche Inhalte

Ähnlich wie Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styleguide Driven Web Development

Confluence 4.1 Übersicht
Confluence 4.1 ÜbersichtConfluence 4.1 Übersicht
Confluence 4.1 Übersicht
Florian Kondert
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 

Ähnlich wie Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styleguide Driven Web Development (20)

SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
YUNA - Data Science Plattform für Unternehmen
YUNA - Data Science Plattform für UnternehmenYUNA - Data Science Plattform für Unternehmen
YUNA - Data Science Plattform für Unternehmen
 
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und ÜberblickOOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Confluence 4.1 Übersicht
Confluence 4.1 ÜbersichtConfluence 4.1 Übersicht
Confluence 4.1 Übersicht
 
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS 22-09-2009
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS 22-09-2009Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS 22-09-2009
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS 22-09-2009
 
Elasticsearch Cluster Management mit Marvel
Elasticsearch Cluster Management mit MarvelElasticsearch Cluster Management mit Marvel
Elasticsearch Cluster Management mit Marvel
 
Quo vadis-devops-nuernberg
Quo vadis-devops-nuernbergQuo vadis-devops-nuernberg
Quo vadis-devops-nuernberg
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Software Defined Everything 2016 - Post Event Report
Software Defined Everything 2016 - Post Event ReportSoftware Defined Everything 2016 - Post Event Report
Software Defined Everything 2016 - Post Event Report
 
IT Outsourcing Agentur Berlin
IT Outsourcing Agentur BerlinIT Outsourcing Agentur Berlin
IT Outsourcing Agentur Berlin
 
ConSol Unternehmenspräsentation 2019
ConSol Unternehmenspräsentation 2019ConSol Unternehmenspräsentation 2019
ConSol Unternehmenspräsentation 2019
 
Cusy Developer-Baukasten
Cusy Developer-BaukastenCusy Developer-Baukasten
Cusy Developer-Baukasten
 
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
 
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMSGentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS
Gentics Webinar: Unser Intranet mit SAP Netweaver Portal und CMS
 
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale EditionExecutive Summary - App-Entwicklung für Entscheider, Webinale Edition
Executive Summary - App-Entwicklung für Entscheider, Webinale Edition
 
120214 gpm basel_web_booklet
120214 gpm basel_web_booklet120214 gpm basel_web_booklet
120214 gpm basel_web_booklet
 
Quo vadis DevOps
Quo vadis DevOpsQuo vadis DevOps
Quo vadis DevOps
 

Mehr von DevDay Dresden

Dev Day 2019: Mike Sperber – Software Design für die Seele
Dev Day 2019: Mike Sperber – Software Design für die SeeleDev Day 2019: Mike Sperber – Software Design für die Seele
Dev Day 2019: Mike Sperber – Software Design für die Seele
DevDay Dresden
 

Mehr von DevDay Dresden (20)

The Architecture of Uncertainty - Kevlin Henney
The Architecture of Uncertainty - Kevlin HenneyThe Architecture of Uncertainty - Kevlin Henney
The Architecture of Uncertainty - Kevlin Henney
 
Dev Day 2021 - Stephan Pirnbaum - Anwendungsmodernisierung
Dev Day 2021 - Stephan Pirnbaum - AnwendungsmodernisierungDev Day 2021 - Stephan Pirnbaum - Anwendungsmodernisierung
Dev Day 2021 - Stephan Pirnbaum - Anwendungsmodernisierung
 
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-ProjektenTobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
 
Andreas Roth - GraphQL erfolgreich im Backend einsetzen
Andreas Roth - GraphQL erfolgreich im Backend einsetzenAndreas Roth - GraphQL erfolgreich im Backend einsetzen
Andreas Roth - GraphQL erfolgreich im Backend einsetzen
 
Alexander Reelsen - Seccomp for Developers
Alexander Reelsen - Seccomp for DevelopersAlexander Reelsen - Seccomp for Developers
Alexander Reelsen - Seccomp for Developers
 
DevDay 19 Accessibility: Praxistipps für Entwickler
DevDay 19 Accessibility: Praxistipps für EntwicklerDevDay 19 Accessibility: Praxistipps für Entwickler
DevDay 19 Accessibility: Praxistipps für Entwickler
 
Dev Day 2019: Phillip Krenn – Aggregierte Logging Patterns
Dev Day 2019: Phillip Krenn – Aggregierte Logging PatternsDev Day 2019: Phillip Krenn – Aggregierte Logging Patterns
Dev Day 2019: Phillip Krenn – Aggregierte Logging Patterns
 
Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...
Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...
Dev Day 2019: Mirko Seifert – Next Level Integration Testing mit Docker und T...
 
Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...
Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...
Dev Day 2019: Nathan Mattes – Kommunikation ist wichtig, scheiße wichtig und ...
 
Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...
Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...
Dev Day 2019: Stephan Birnbaum – Die Glaskugel hat ausgedient, wir machen Sof...
 
Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...
Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...
Dev Day 2019: Markus Winand – Die Mutter aller Abfragesprachen: SQL im 21. Ja...
 
Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...
Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...
Dev Day 2019: Kay Grebenstein – Wie wir müssen das noch testen? - design for ...
 
Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101
Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101
Dev Day 2019: Benjamin Wolf – "Some fixes" - Commit Message 101
 
Dev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-Teams
Dev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-TeamsDev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-Teams
Dev Day 2019: Lucas Fiedler – DevOps-Dashboard: Transparenz für DevOps-Teams
 
Dev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den Radverkehr
Dev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den RadverkehrDev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den Radverkehr
Dev Day 2019: Ulrich Deiters – Offene Daten und IT-Lösungen für den Radverkehr
 
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...
Dev Day 2019: Alexander Lichter - JAMstack - Eine neuartige Webanwendungs-Arc...
 
Dev Day 2019: Martin Schurz - Manual Work Is A Bug!
Dev Day 2019: Martin Schurz - Manual Work Is A Bug!Dev Day 2019: Martin Schurz - Manual Work Is A Bug!
Dev Day 2019: Martin Schurz - Manual Work Is A Bug!
 
Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“
Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“
Dev Day 2019: Stefan Schleyer: How to build an cloud-based IoT application“
 
Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"
Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"
Dev Day 2019: Mirko Zeibig – "Hallo " <> "Elixir"
 
Dev Day 2019: Mike Sperber – Software Design für die Seele
Dev Day 2019: Mike Sperber – Software Design für die SeeleDev Day 2019: Mike Sperber – Software Design für die Seele
Dev Day 2019: Mike Sperber – Software Design für die Seele
 

Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styleguide Driven Web Development