Das Dokument behandelt die Entwicklung eines effektiven Styleguides für Webprojekte, der eine zentrale Rolle in der Zusammenarbeit zwischen Design und Entwicklung spielt. Es hebt die Bedeutung eines revisionssicheren Quotensystems sowie die Implementierung zeitgemäßer Design-Tools hervor, um Einheitlichkeit in der Nutzererfahrung zu gewährleisten. Zudem werden zukünftige Trends wie AI-unterstütztes Design und die Entwicklung einer lebendigen Designbibliothek bis 2025 angesprochen.

1. Design better together
Styleguide driven
Web Development
Kathrin Friedrich Michael Kunze

2. WAS KUNDEN WOLLEN WAS PROJEKTLEITER WOLLEN WAS WIR WIRKLICH WOLLEN

3. SCHONWIEDERDIEBUTTONFARBEANPASSEN?

5. WHAT
THE
FU#K?
DAILY
DESIGN
UPDATE!

6. PHOTO
SHOP?
MEASUREMENT?
COLORS?
SPEC?
INTERACTIONS?
???

7. WHAT THE
HELL?
„IT WAS TOO BIG TO
UPLOAD TO
SHAREPOINT”

8. UI_final_v2-new.pdf
UI_final_v2-new_update.zip
buttons_new_contrast.jpg
Recent specs
for the
component?
Anyone?

9. End?
NO!
Even design
has a life
cycle.

10. APPLICATION
ZOO

11. WEBSITE BLOG
SHOP
APPINTRANET NEWS-
LETTER
SELF
SERVICE
MICRO
SITE
LANDING
PAGES
WIKI
WEB
WEB
WEB

12. SINGLE SOURCE
OF TRUTH
Digital & Online
Searchable
Versioned
Dedicated Format.
PITSTOP
INHERITABLE
CONCEPTS
GOALS
COLLABORATION

13. BEST PRACTICEBAD

14. 65-120 X 3 X 3 X 8 X 2
6.840 PT ???

15. 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

16. STRESS?

17. 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

18. Funktionen & Design
USABILITY
NUTZERERLEBNISSE
MARKENWIRKUNG
BEGEISTERUNG,
Loyalität & Umsatz
U X

19. DOKUMENTATION
PROTOTYPING VISUAL
DESIGN
UI
DESIGN
GROBKONZEPT TESTING
USER EXPERIENCE DESIGN

20. FORMER
TIMES
WEBSITES
= IMAGES
PAINTING
LAYER / JPG EXPORT
COMPROMISE
CODE
COMPROMISE
LAUNCH

21. IMAGE BASED
DESIGN TOOLS
Designer = Painter
From Pixel to Vector

22. PHOTO
SHOP
YAY … SAID NO
ONE EVER

23. SKETCH
MEASURE

24. CODE BASED
DESIGN TOOLS
Design is rendered in Code. Without Code.
Same possibilities, same constraints.

25. CODE DESIGN
MERGE TOOLS
Coded Components inside a design tool.
Real prototyping and UI inventory.
UX Pin Merge

26. UX PIN
MERGE
NEU 2019

27. DESIGN SPECS
HANDOFF
auto-generated code from Sketch, Photoshop,
Adobe XD, Illustrator, and Figma

28. SYMPLI
ZEPLIN

29. AVOCODE

30. AVOCODE
Does it help?

31. UX PIN
SPEC MODE
Yay! Additional Specs

32. UX PIN
STYLEGUIDE
& ASSETS
Design System Styleguide, Tokens, Components

33. DESIGN SYSTEM
STYLEGUIDE
Standards for Innovation.
Styleguide & Pattern Libraries

34. FRONTIFY
STYLEGUIDE
& ASSETS Mehrsprachigkeit? Suche? Rechte & Rolle? Vererbung?

35. FRONTIFY
UI LIBRARY
Code-Ablage? Technologien? Vererbung?

36. MATERIAL
DESIGN SYSTEM

37. 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

38. 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

39. Erweiterbarkeit
Performance
INNOVATIVE FEATURES
STABILE SYSTEME
Effiziente Entwicklung
Spaß im Team
U X

40. 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

41. MACHEN TOOLS
UNS WIRKLICH
EFFIZIENT?

42. Ja ich könnte
den Button in
jedem Projekt
neu machen.

43. Ich kann aber
auch per
Makro jeder
Variation
erzeugen und
nachnutzen!

44. Frontend ist
mehr als
HTML, CSS
oder einfach
nur hübsch.

45. 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

47. Effizient. Smart. Kollaborativ
WIE MACHEN WIR ES BESSER
Mehr Freiraum für coole Features
DESIGN + DEV + OPS.
U X

48. WIRKLICH
NEUES GESTALTEN
Design Ops meets Dev Ops.
Automatisierung repetitiver Tasks.

49. 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.

50. 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

51. WAS MACHEN
WIR HIER ALLE
2025 NOCH?
UX MEETS
AI

52. 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.
?

53. FREIRAUM FÜR
INNOVATION

54. 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