SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
Pattern Libraries
design systems exchange | dsx #2
Eine Schnittstelle zwischen
User Interface Design und
Development
Titelbild © Nathan Sawaya www.brickartist.com
Wir helfen Unternehmen zu
erkennen, was Menschen
bewegt − und sich damit die
digitale Zukunft zu
erschließen.
die firma . experience design – Unsere Mission
www.diefirma.de
Customer / User Insights
Brand Storytelling
Content Marketing Strategy
User Experience / Service Design
Digital Transformation / Business
Models
Digital Prototypes / Web Design
die firma . experience design – Was wir tun
1. Terminologie
2. Warum
3. Werkzeuge
4. Best Practice vs. Worst Practice
4
Terminologie
• (Living) Styleguide
• Pattern Library
• Component Library
• Design System
6
Ein Styleguide ist ein statisches und
abgeschlossenes Dokument, welches … vornehmlich
Aspekte des Visual Designs definiert. Der Styleguide
ist damit eng verwand mit dem Corporate Design
Manual … in der Regel detaillierter und auf ein oder
mehrere spezielle Produkte fokussiert.
Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
Ein Living Styleguide enthält die gleichen Elemente
wie ein Styleguide. Er ist aber ein dynamisches
Dokument, welches sich analog zum Produkt
weiterentwickelt und ggf. sogar direkt aus dem
Produktcode generiert wird. Der Fokus ist in der Regel
weiterhin auf das Visual Design, die Grenzen zu einer
Pattern Library sind aber fließend.
Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
Eine Pattern Library ist ein dynamisches Verzeichnis
von Interaktions-Patterns, Styles und ggf. Code-
Snippets mit direktem Produktbezug. Die Inhalte
verändern sich analog zur Evolution des Produkts und
sind im Idealfall direkt in der Library erlebbar. Der
richtige Einsatz der Patterns wird über fachliche und
technische Dokumentation sichergestellt.
Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
Ebenfalls nah an der Pattern Library ist
die Component Library. Oft wird der Begriff
Synonym verwendet, … zur Abgrenzung kann die
Component Library als „grobe“ Pattern-Library
gesehen werden. Sie dokumentiert keine Atome oder
Fragmente sondern nur in sich geschlossene
Funktions- und Inhaltsblöcke aus denen dann Seiten
oder Screens zusammengesetzt werden.
Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
Design Systeme helfen dabei mehrere Produkte auf
mehreren Plattformen (auch nicht-digitalen) zu
harmonisieren und gleichzeitig Alignment innerhalb
von großen und ggf. verteilten Design-Organisationen
herzustellen. Sie bestehen aus einer oder mehrere
Pattern Libraries ergänzt durch Design Prinzipien,
Guidelines, Entscheidungsbäume, Prozesse, Vorlagen
und vielem mehr.
Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
Hierarchie der Begriffe
12
Design System
Pattern
Library
Living
Styleguide
Component
Library
Soweit die Theorie
Pattern Library =
Living Styleguide?
🤔
In the wild…
15
Warum sind Pattern Libraries so wertvoll für uns?
1. Gemeinsame Sprache
2. Single Source Of Truth
3. Vermeidung von Redundanzen
4. Unsicherheit reduzieren
5. Überblick schaffen
17
Gemeinsame Sprache
Was sieht man hier?
19
Und hier?
20
Missverständnisse kosten Zeit und Nerven
Quelle: https://www.jpattonassociates.com/user-story-mapping/
Eine Pattern Library ist eine
eindeutige Dokumentation
aller Elemente des User
Interface.
Gemeinsame Sprache finden
22
Unsicherheit
reduzieren
Projektordner aus der Hölle
24
Single Source Of Truth
Pattern Libraries erfordern Prozesse
26
Visual
Design
Pattern
Library
CMS
Redundanzen
vermeiden
Was ist hier passiert?
28
Kontrollierte Farbpalette in einer Pattern Library
29
Wiederverwendbare Komponenten durch Atomic Design
30
Quelle: http://bradfrost.com/blog/post/atomic-web-design
Unsicherheit
reduzieren
Unsicherheit: was ist der letzte Stand? à Status der Komponente
Quelle: https://fractal.build/guide/core-concepts/statuses.html#custom-statuses
Sicherheit durch Versionierung
33
Überblick Verschaffen
Atomic Design in der Praxis: Referenzierung und Suche
Werkzeuge
Werkzeuge: Visual Design
Sketch InVision Zeplin
Layout Übergabe
…and many more
- Initiiert von Brad Frost (Atomic Design)
- Open Source
- Patterns werden in HTML, CSS und JS
dokumentiert
- verschiedene Template Engines
(Mustache, Twig, Handlebars, Underscore)
- Erweiterbar nach eigenen Bedürfnissen
Werkzeuge: Pattern Libraries
39
- Initiiert von Clearleft
- Open Source
- Patterns werden in HTML, CSS und JS
dokumentiert
- Verschiedene Template Engines
(Handlebars, Mustache, Nunchucks)
- Erweiterbar nach eigenen Bedürfnissen
Fractal & Patternlab: zwei Geschmacksrichtungen bei vergleichbarer Funktionalität
41
Best Practices
klein
allgemein
einfach
Bei der Überführung von Visual Designs in die Pattern Library bewegen wir uns von…
43
groß
speziell
komplex
44
• Wir bauen atomare Komponenten so, dass sie
eigenständig funktionieren
• Danach fügen wir die Atome in molekularen
Komponenten zusammen
• Daraus werden funktional eigenständige
Module konstruiert
• Diese werden in übergeordneten Seiten
platziert
Von klein nach groß
45
• Startpunkt sollten allgemeine Dinge wie Grid,
Header/Footer sein
• Danach kommen Artikel oder Blog-Seiten
• Von dort aus bewegen wir uns zu spezielleren
Seiten (Produkt, Event, Download, …) die
unter Umständen besondere Elemente
benötigen
Von allgemein zu speziell
46
• Wenn wir uns zunächst mit den vermeintlich
einfachen Patterns zu beschäftigen
vermeiden wir es, uns zu früh mit Ausnahmen
zu beschäftigen
Von einfach zu komplex
Nicht zu viel Vorlauf
für Design
Coding Guidelines
Coding Guidelines und Namenskonventionen: beispielsweise BEM
Block: .search-results {}
Element: .search-results__item {}
Modifier: .search-results__item--download {}
Regelmäßiger
interdisziplinärer
Austausch
Eine Person hat den Hut auf
DesignOps
Worst Practices
Overengineering
Quelle: http://atomicdesign.bradfrost.com/chapter-5/
In einer perfekten Welt sieht unser
Prozess so aus.
Aber ist das ein realistisches Ziel?
Undead Styleguide
Fazit
Pro
• Vermeidung von
Redundanzen
• Single Source Of Truth
• Skalierfähigkeit
• Zeitersparnis beim
Deployment von Änderungen
• Gute Schnittstelle zwischen
Design und Development
Contra
• Initial etwas größerer
Zeitaufwand
• Neue Rolle für Pflege der
Pattern Library benötigt
(DesignOps?)
• Stärkere Restriktionen für
Visual Designer
Eure Frage?
Linkliste
• Ein Artikel von mir zum Thema
• Patternlab: patternlab.io
• Fractal: fractal.build
• Fractal Beispiel: innoq.style
• BEM: getbem.com/naming/
• adele.uxpin.com (Design Systems Repository)
• styleguides.io (Style Guide Resources)
• www.brickartist.com (Titelbild © Nathan Sawaya)
60
Thank you!
Matthias Feit
Senior UX + Strategy Consultant
m.feit@diefirma.de
@matthiasfeit
die firma . experience design
Schwalbacher Straße 78 D-65183 Wiesbaden
Tel +49 611 238 50 10
www.diefirma.de
The content of this presentation is
confidential. It must not be shared in part or in
whole with any third parties.

Weitere ähnliche Inhalte

Was ist angesagt?

So baust du dein eigenes agiles Skalierungsframework (Workshop)
So baust du dein eigenes agiles Skalierungsframework (Workshop)So baust du dein eigenes agiles Skalierungsframework (Workshop)
So baust du dein eigenes agiles Skalierungsframework (Workshop)Christoph Schmiedinger
 
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...Carsten Rasche
 
HIRSCHTEC Community Management
HIRSCHTEC Community ManagementHIRSCHTEC Community Management
HIRSCHTEC Community ManagementHIRSCHTEC
 
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Carsten Rasche
 
OKR, Ziele und Zielsysteme im Agilen
OKR, Ziele und Zielsysteme im AgilenOKR, Ziele und Zielsysteme im Agilen
OKR, Ziele und Zielsysteme im AgilenBjörn Schotte
 
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...marcus evans Network
 
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...Carsten Rasche
 
Agile und Projektmanagement - Kein entweder-oder sondern anders
Agile und Projektmanagement - Kein entweder-oder sondern andersAgile und Projektmanagement - Kein entweder-oder sondern anders
Agile und Projektmanagement - Kein entweder-oder sondern andersSteffen Thols
 
Culture & Leadership - 47 einfache Modelle
Culture & Leadership - 47 einfache ModelleCulture & Leadership - 47 einfache Modelle
Culture & Leadership - 47 einfache ModelleJoël Krapf
 
Transformationen agil gestalten – der borisgloger Change-Management-Ansatz
Transformationen agil gestalten – der borisgloger Change-Management-AnsatzTransformationen agil gestalten – der borisgloger Change-Management-Ansatz
Transformationen agil gestalten – der borisgloger Change-Management-AnsatzCarsten Rasche
 
knowtech2011-Verwaltung2.0
knowtech2011-Verwaltung2.0knowtech2011-Verwaltung2.0
knowtech2011-Verwaltung2.0TwentyOne AG
 
Technologiemanagement Agile Transformationen
Technologiemanagement Agile TransformationenTechnologiemanagement Agile Transformationen
Technologiemanagement Agile TransformationenBjörn Schotte
 
Projektmanagement professionalisieren
Projektmanagement professionalisierenProjektmanagement professionalisieren
Projektmanagement professionalisierenHagen Management
 
Einfuehrung Projektmanagement
Einfuehrung ProjektmanagementEinfuehrung Projektmanagement
Einfuehrung ProjektmanagementJürgen Bruns
 
CQ Change Management Qualification SO Beratergruppe Information
CQ Change Management Qualification SO Beratergruppe InformationCQ Change Management Qualification SO Beratergruppe Information
CQ Change Management Qualification SO Beratergruppe InformationDr. Sabine Reichelt-Nauseef
 
Wissensmanagement Strategie Workshops (KnowTech 2012)
Wissensmanagement Strategie Workshops (KnowTech 2012)Wissensmanagement Strategie Workshops (KnowTech 2012)
Wissensmanagement Strategie Workshops (KnowTech 2012)Cogneon Akademie
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017die.agilen GmbH
 
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)AGILE BEYOND BUZZWORD BINGO (MAGAZIN)
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)Marc Wagner
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
Project Management Office
Project Management OfficeProject Management Office
Project Management OfficeHeiko Bartlog
 

Was ist angesagt? (20)

So baust du dein eigenes agiles Skalierungsframework (Workshop)
So baust du dein eigenes agiles Skalierungsframework (Workshop)So baust du dein eigenes agiles Skalierungsframework (Workshop)
So baust du dein eigenes agiles Skalierungsframework (Workshop)
 
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...
Einbindung von Mitarbeitern beim Skalieren von agilen Teams – Ein Praxisberic...
 
HIRSCHTEC Community Management
HIRSCHTEC Community ManagementHIRSCHTEC Community Management
HIRSCHTEC Community Management
 
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
 
OKR, Ziele und Zielsysteme im Agilen
OKR, Ziele und Zielsysteme im AgilenOKR, Ziele und Zielsysteme im Agilen
OKR, Ziele und Zielsysteme im Agilen
 
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...
Die agile Organisation: Inhalt, Wege und Hürden aus Sicht eines CEO – der Fal...
 
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...
Meetup: Wie entkommen agile Teams der Abhängigkeitsfalle in skalierten Strukt...
 
Agile und Projektmanagement - Kein entweder-oder sondern anders
Agile und Projektmanagement - Kein entweder-oder sondern andersAgile und Projektmanagement - Kein entweder-oder sondern anders
Agile und Projektmanagement - Kein entweder-oder sondern anders
 
Culture & Leadership - 47 einfache Modelle
Culture & Leadership - 47 einfache ModelleCulture & Leadership - 47 einfache Modelle
Culture & Leadership - 47 einfache Modelle
 
Transformationen agil gestalten – der borisgloger Change-Management-Ansatz
Transformationen agil gestalten – der borisgloger Change-Management-AnsatzTransformationen agil gestalten – der borisgloger Change-Management-Ansatz
Transformationen agil gestalten – der borisgloger Change-Management-Ansatz
 
knowtech2011-Verwaltung2.0
knowtech2011-Verwaltung2.0knowtech2011-Verwaltung2.0
knowtech2011-Verwaltung2.0
 
Technologiemanagement Agile Transformationen
Technologiemanagement Agile TransformationenTechnologiemanagement Agile Transformationen
Technologiemanagement Agile Transformationen
 
Projektmanagement professionalisieren
Projektmanagement professionalisierenProjektmanagement professionalisieren
Projektmanagement professionalisieren
 
Einfuehrung Projektmanagement
Einfuehrung ProjektmanagementEinfuehrung Projektmanagement
Einfuehrung Projektmanagement
 
CQ Change Management Qualification SO Beratergruppe Information
CQ Change Management Qualification SO Beratergruppe InformationCQ Change Management Qualification SO Beratergruppe Information
CQ Change Management Qualification SO Beratergruppe Information
 
Wissensmanagement Strategie Workshops (KnowTech 2012)
Wissensmanagement Strategie Workshops (KnowTech 2012)Wissensmanagement Strategie Workshops (KnowTech 2012)
Wissensmanagement Strategie Workshops (KnowTech 2012)
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)AGILE BEYOND BUZZWORD BINGO (MAGAZIN)
AGILE BEYOND BUZZWORD BINGO (MAGAZIN)
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Project Management Office
Project Management OfficeProject Management Office
Project Management Office
 

Ähnlich wie Pattern Libraries als Schnittstelle zwischen Design & Development

Design Systeme – Werkzeug in der digitalen Marken- und Produktentwicklung
Design Systeme – Werkzeug in der digitalen Marken- und ProduktentwicklungDesign Systeme – Werkzeug in der digitalen Marken- und Produktentwicklung
Design Systeme – Werkzeug in der digitalen Marken- und ProduktentwicklungMatthias Feit
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
 
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AGCCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AGCommunardo GmbH
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUMartin Koser
 
Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013superflomo
 
Agile Ways of Working @ Migros
Agile Ways of Working @ MigrosAgile Ways of Working @ Migros
Agile Ways of Working @ MigrosJoël Krapf
 
Large Scale Scrum (LeSS) als Organisations-Design-Framework
Large Scale Scrum (LeSS) als Organisations-Design-FrameworkLarge Scale Scrum (LeSS) als Organisations-Design-Framework
Large Scale Scrum (LeSS) als Organisations-Design-FrameworkJosef Scherer
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...AKJoom
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...Stephan Volmer
 
2022-09_RPA-RoundTable_Baukasten RPA
2022-09_RPA-RoundTable_Baukasten RPA2022-09_RPA-RoundTable_Baukasten RPA
2022-09_RPA-RoundTable_Baukasten RPAFotiosKaramitsos
 
Schau, Mutti, keine Programmierzeile
Schau, Mutti, keine ProgrammierzeileSchau, Mutti, keine Programmierzeile
Schau, Mutti, keine Programmierzeilerokr
 
Theum Dokumentationen als nutzbares Wissen bereitstellen
Theum   Dokumentationen als nutzbares Wissen bereitstellenTheum   Dokumentationen als nutzbares Wissen bereitstellen
Theum Dokumentationen als nutzbares Wissen bereitstellenTheum AG
 
Moodley Session #01 - styleguides
Moodley Session #01 - styleguidesMoodley Session #01 - styleguides
Moodley Session #01 - styleguidesmariosom
 
Social Software für Unternehmen
Social Software für UnternehmenSocial Software für Unternehmen
Social Software für UnternehmenMartin Koser
 
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENT
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENTPersonal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENT
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENTdie wissenskreateurin
 
The future of social software in the enterprise lotus connections 3
The future of social software in the enterprise lotus connections 3The future of social software in the enterprise lotus connections 3
The future of social software in the enterprise lotus connections 3Klaus Bild
 

Ähnlich wie Pattern Libraries als Schnittstelle zwischen Design & Development (20)

Design Systeme – Werkzeug in der digitalen Marken- und Produktentwicklung
Design Systeme – Werkzeug in der digitalen Marken- und ProduktentwicklungDesign Systeme – Werkzeug in der digitalen Marken- und Produktentwicklung
Design Systeme – Werkzeug in der digitalen Marken- und Produktentwicklung
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 
Content Lifecycle Management
Content Lifecycle ManagementContent Lifecycle Management
Content Lifecycle Management
 
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AGCCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
CCD 2012: Wissensmanagement @MPS - Sören Krasel, Daimler AG
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMU
 
Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013
 
Agile Ways of Working @ Migros
Agile Ways of Working @ MigrosAgile Ways of Working @ Migros
Agile Ways of Working @ Migros
 
Large Scale Scrum (LeSS) als Organisations-Design-Framework
Large Scale Scrum (LeSS) als Organisations-Design-FrameworkLarge Scale Scrum (LeSS) als Organisations-Design-Framework
Large Scale Scrum (LeSS) als Organisations-Design-Framework
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
Vom Buzzword zum Service
Vom Buzzword zum ServiceVom Buzzword zum Service
Vom Buzzword zum Service
 
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...
Bottom-up anstatt Top-down: Wie man eine einheitliche Architektur bei vielfäl...
 
2022-09_RPA-RoundTable_Baukasten RPA
2022-09_RPA-RoundTable_Baukasten RPA2022-09_RPA-RoundTable_Baukasten RPA
2022-09_RPA-RoundTable_Baukasten RPA
 
Schau, Mutti, keine Programmierzeile
Schau, Mutti, keine ProgrammierzeileSchau, Mutti, keine Programmierzeile
Schau, Mutti, keine Programmierzeile
 
Theum Dokumentationen als nutzbares Wissen bereitstellen
Theum   Dokumentationen als nutzbares Wissen bereitstellenTheum   Dokumentationen als nutzbares Wissen bereitstellen
Theum Dokumentationen als nutzbares Wissen bereitstellen
 
Moodley Session #01 - styleguides
Moodley Session #01 - styleguidesMoodley Session #01 - styleguides
Moodley Session #01 - styleguides
 
Social Software für Unternehmen
Social Software für UnternehmenSocial Software für Unternehmen
Social Software für Unternehmen
 
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENT
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENTPersonal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENT
Personal Learning Environment - TOOLS FÜR (M)EIN PERSÖNLICHES WISSENSMANAGEMENT
 
The future of social software in the enterprise lotus connections 3
The future of social software in the enterprise lotus connections 3The future of social software in the enterprise lotus connections 3
The future of social software in the enterprise lotus connections 3
 
See The Light
See The LightSee The Light
See The Light
 

Mehr von Matthias Feit

Radikale Aufrichtigkeit – Vertrauen als Innovationsbeschleuniger
Radikale Aufrichtigkeit – Vertrauen als InnovationsbeschleunigerRadikale Aufrichtigkeit – Vertrauen als Innovationsbeschleuniger
Radikale Aufrichtigkeit – Vertrauen als InnovationsbeschleunigerMatthias Feit
 
JTBD Workshop Forum Kiedrich
JTBD Workshop Forum KiedrichJTBD Workshop Forum Kiedrich
JTBD Workshop Forum KiedrichMatthias Feit
 
Schontag Impulsvortrag: Job Mapping
Schontag Impulsvortrag: Job MappingSchontag Impulsvortrag: Job Mapping
Schontag Impulsvortrag: Job MappingMatthias Feit
 
Job Mapping – Das "richtige" Produkt bauen
Job Mapping – Das "richtige" Produkt bauenJob Mapping – Das "richtige" Produkt bauen
Job Mapping – Das "richtige" Produkt bauenMatthias Feit
 
Job Mapping: Der Job–To–Be–Done des Kunden als Prozess
Job Mapping: Der Job–To–Be–Done des Kunden als ProzessJob Mapping: Der Job–To–Be–Done des Kunden als Prozess
Job Mapping: Der Job–To–Be–Done des Kunden als ProzessMatthias Feit
 
Praktischer Einstieg zu Outcome-Driven Innovation
Praktischer Einstieg zu Outcome-Driven InnovationPraktischer Einstieg zu Outcome-Driven Innovation
Praktischer Einstieg zu Outcome-Driven InnovationMatthias Feit
 
UXDesign Rhein-Main Meetup: "What the j**?"
UXDesign Rhein-Main Meetup: "What the j**?"UXDesign Rhein-Main Meetup: "What the j**?"
UXDesign Rhein-Main Meetup: "What the j**?"Matthias Feit
 
JTBD: (Switch) Interviews
JTBD: (Switch) InterviewsJTBD: (Switch) Interviews
JTBD: (Switch) InterviewsMatthias Feit
 
KPIs vs. UX – ist User Experience messbar?
KPIs vs. UX – ist User Experience messbar?KPIs vs. UX – ist User Experience messbar?
KPIs vs. UX – ist User Experience messbar?Matthias Feit
 

Mehr von Matthias Feit (10)

Radikale Aufrichtigkeit – Vertrauen als Innovationsbeschleuniger
Radikale Aufrichtigkeit – Vertrauen als InnovationsbeschleunigerRadikale Aufrichtigkeit – Vertrauen als Innovationsbeschleuniger
Radikale Aufrichtigkeit – Vertrauen als Innovationsbeschleuniger
 
JTBD Workshop Forum Kiedrich
JTBD Workshop Forum KiedrichJTBD Workshop Forum Kiedrich
JTBD Workshop Forum Kiedrich
 
Schontag Impulsvortrag: Job Mapping
Schontag Impulsvortrag: Job MappingSchontag Impulsvortrag: Job Mapping
Schontag Impulsvortrag: Job Mapping
 
Job Mapping – Das "richtige" Produkt bauen
Job Mapping – Das "richtige" Produkt bauenJob Mapping – Das "richtige" Produkt bauen
Job Mapping – Das "richtige" Produkt bauen
 
Job Mapping: Der Job–To–Be–Done des Kunden als Prozess
Job Mapping: Der Job–To–Be–Done des Kunden als ProzessJob Mapping: Der Job–To–Be–Done des Kunden als Prozess
Job Mapping: Der Job–To–Be–Done des Kunden als Prozess
 
Praktischer Einstieg zu Outcome-Driven Innovation
Praktischer Einstieg zu Outcome-Driven InnovationPraktischer Einstieg zu Outcome-Driven Innovation
Praktischer Einstieg zu Outcome-Driven Innovation
 
UXDesign Rhein-Main Meetup: "What the j**?"
UXDesign Rhein-Main Meetup: "What the j**?"UXDesign Rhein-Main Meetup: "What the j**?"
UXDesign Rhein-Main Meetup: "What the j**?"
 
JTBD: (Switch) Interviews
JTBD: (Switch) InterviewsJTBD: (Switch) Interviews
JTBD: (Switch) Interviews
 
What the j**?
What the j**?What the j**?
What the j**?
 
KPIs vs. UX – ist User Experience messbar?
KPIs vs. UX – ist User Experience messbar?KPIs vs. UX – ist User Experience messbar?
KPIs vs. UX – ist User Experience messbar?
 

Pattern Libraries als Schnittstelle zwischen Design & Development

  • 1. Pattern Libraries design systems exchange | dsx #2 Eine Schnittstelle zwischen User Interface Design und Development Titelbild © Nathan Sawaya www.brickartist.com
  • 2. Wir helfen Unternehmen zu erkennen, was Menschen bewegt − und sich damit die digitale Zukunft zu erschließen. die firma . experience design – Unsere Mission www.diefirma.de
  • 3. Customer / User Insights Brand Storytelling Content Marketing Strategy User Experience / Service Design Digital Transformation / Business Models Digital Prototypes / Web Design die firma . experience design – Was wir tun
  • 4. 1. Terminologie 2. Warum 3. Werkzeuge 4. Best Practice vs. Worst Practice 4
  • 6. • (Living) Styleguide • Pattern Library • Component Library • Design System 6
  • 7. Ein Styleguide ist ein statisches und abgeschlossenes Dokument, welches … vornehmlich Aspekte des Visual Designs definiert. Der Styleguide ist damit eng verwand mit dem Corporate Design Manual … in der Regel detaillierter und auf ein oder mehrere spezielle Produkte fokussiert. Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
  • 8. Ein Living Styleguide enthält die gleichen Elemente wie ein Styleguide. Er ist aber ein dynamisches Dokument, welches sich analog zum Produkt weiterentwickelt und ggf. sogar direkt aus dem Produktcode generiert wird. Der Fokus ist in der Regel weiterhin auf das Visual Design, die Grenzen zu einer Pattern Library sind aber fließend. Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
  • 9. Eine Pattern Library ist ein dynamisches Verzeichnis von Interaktions-Patterns, Styles und ggf. Code- Snippets mit direktem Produktbezug. Die Inhalte verändern sich analog zur Evolution des Produkts und sind im Idealfall direkt in der Library erlebbar. Der richtige Einsatz der Patterns wird über fachliche und technische Dokumentation sichergestellt. Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
  • 10. Ebenfalls nah an der Pattern Library ist die Component Library. Oft wird der Begriff Synonym verwendet, … zur Abgrenzung kann die Component Library als „grobe“ Pattern-Library gesehen werden. Sie dokumentiert keine Atome oder Fragmente sondern nur in sich geschlossene Funktions- und Inhaltsblöcke aus denen dann Seiten oder Screens zusammengesetzt werden. Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
  • 11. Design Systeme helfen dabei mehrere Produkte auf mehreren Plattformen (auch nicht-digitalen) zu harmonisieren und gleichzeitig Alignment innerhalb von großen und ggf. verteilten Design-Organisationen herzustellen. Sie bestehen aus einer oder mehrere Pattern Libraries ergänzt durch Design Prinzipien, Guidelines, Entscheidungsbäume, Prozesse, Vorlagen und vielem mehr. Quelle: https://www.produktbezogen.de/bauanleitung-pattern-library-1/
  • 12. Hierarchie der Begriffe 12 Design System Pattern Library Living Styleguide Component Library
  • 14. Pattern Library = Living Styleguide? 🤔 In the wild…
  • 15. 15
  • 16.
  • 17. Warum sind Pattern Libraries so wertvoll für uns? 1. Gemeinsame Sprache 2. Single Source Of Truth 3. Vermeidung von Redundanzen 4. Unsicherheit reduzieren 5. Überblick schaffen 17
  • 19. Was sieht man hier? 19
  • 21. Missverständnisse kosten Zeit und Nerven Quelle: https://www.jpattonassociates.com/user-story-mapping/
  • 22. Eine Pattern Library ist eine eindeutige Dokumentation aller Elemente des User Interface. Gemeinsame Sprache finden 22
  • 26. Pattern Libraries erfordern Prozesse 26 Visual Design Pattern Library CMS
  • 28. Was ist hier passiert? 28
  • 29. Kontrollierte Farbpalette in einer Pattern Library 29
  • 30. Wiederverwendbare Komponenten durch Atomic Design 30 Quelle: http://bradfrost.com/blog/post/atomic-web-design
  • 32. Unsicherheit: was ist der letzte Stand? à Status der Komponente Quelle: https://fractal.build/guide/core-concepts/statuses.html#custom-statuses
  • 35. Atomic Design in der Praxis: Referenzierung und Suche
  • 37. Werkzeuge: Visual Design Sketch InVision Zeplin Layout Übergabe
  • 39. - Initiiert von Brad Frost (Atomic Design) - Open Source - Patterns werden in HTML, CSS und JS dokumentiert - verschiedene Template Engines (Mustache, Twig, Handlebars, Underscore) - Erweiterbar nach eigenen Bedürfnissen Werkzeuge: Pattern Libraries 39 - Initiiert von Clearleft - Open Source - Patterns werden in HTML, CSS und JS dokumentiert - Verschiedene Template Engines (Handlebars, Mustache, Nunchucks) - Erweiterbar nach eigenen Bedürfnissen
  • 40.
  • 41. Fractal & Patternlab: zwei Geschmacksrichtungen bei vergleichbarer Funktionalität 41
  • 43. klein allgemein einfach Bei der Überführung von Visual Designs in die Pattern Library bewegen wir uns von… 43 groß speziell komplex
  • 44. 44 • Wir bauen atomare Komponenten so, dass sie eigenständig funktionieren • Danach fügen wir die Atome in molekularen Komponenten zusammen • Daraus werden funktional eigenständige Module konstruiert • Diese werden in übergeordneten Seiten platziert Von klein nach groß
  • 45. 45 • Startpunkt sollten allgemeine Dinge wie Grid, Header/Footer sein • Danach kommen Artikel oder Blog-Seiten • Von dort aus bewegen wir uns zu spezielleren Seiten (Produkt, Event, Download, …) die unter Umständen besondere Elemente benötigen Von allgemein zu speziell
  • 46. 46 • Wenn wir uns zunächst mit den vermeintlich einfachen Patterns zu beschäftigen vermeiden wir es, uns zu früh mit Ausnahmen zu beschäftigen Von einfach zu komplex
  • 47. Nicht zu viel Vorlauf für Design
  • 49. Coding Guidelines und Namenskonventionen: beispielsweise BEM Block: .search-results {} Element: .search-results__item {} Modifier: .search-results__item--download {}
  • 51. Eine Person hat den Hut auf DesignOps
  • 54.
  • 55. Quelle: http://atomicdesign.bradfrost.com/chapter-5/ In einer perfekten Welt sieht unser Prozess so aus. Aber ist das ein realistisches Ziel?
  • 57. Fazit
  • 58. Pro • Vermeidung von Redundanzen • Single Source Of Truth • Skalierfähigkeit • Zeitersparnis beim Deployment von Änderungen • Gute Schnittstelle zwischen Design und Development Contra • Initial etwas größerer Zeitaufwand • Neue Rolle für Pflege der Pattern Library benötigt (DesignOps?) • Stärkere Restriktionen für Visual Designer
  • 60. Linkliste • Ein Artikel von mir zum Thema • Patternlab: patternlab.io • Fractal: fractal.build • Fractal Beispiel: innoq.style • BEM: getbem.com/naming/ • adele.uxpin.com (Design Systems Repository) • styleguides.io (Style Guide Resources) • www.brickartist.com (Titelbild © Nathan Sawaya) 60
  • 61. Thank you! Matthias Feit Senior UX + Strategy Consultant m.feit@diefirma.de @matthiasfeit die firma . experience design Schwalbacher Straße 78 D-65183 Wiesbaden Tel +49 611 238 50 10 www.diefirma.de The content of this presentation is confidential. It must not be shared in part or in whole with any third parties.