1. Design mit System

    Überlebenshandbuch für und mit Pattern Libraries

  2. Wer ist der Kerl?

    • Erste Codezeilen als 10-Jähriger
    • Websites seit 1995
    • Ausbildung im Architektur- und Designumfeld
    • Agentur seit 2000
    • Faible für Systematik

  3. Was redet der eigentlich?

    1. Design System, Pattern Library & Co.
    • Was, woher und wozu?
    • Nutzen, Herausforderungen & Anwendungsszenarien
    2. Pattern Library in der Praxis
    • Am Beispiel des Nürnberg Digital Festivals
    • Live-Anbindung TYPO3 ↔ Fractal
    • Aufbau & Nutzung

  4. Otofuke, Japan, September 2018

  5. Design System,
    Pattern Library & Co.

    Herkunft, Merkmale & Anwendungsszenarien

  6. Print

    Gestaltungsrichtlinien für die klassischen Medien

  7. Styleguide / Brand Manual

    Inhalt

    • Verwendung von Gestaltungselementen
    • Schriftart, Schriftgrad & Zeilenabstand
    • Satzspiegel & Gliederung
    • Bildsprache
    • Papiersorte & -format
    • Druckfarben, -techniken und Veredelungen

  8. Styleguide / Brand Manual

    Zielsetzungen

    • Dokumentation & Kommunikation eines Corporate Designs
    • Entwicklung einer Corporate Identity
    • medienübergreifend kohärente, konsistente Gestaltung
    • Reproduzierbarkeit, Berechenbarkeit, Vereinfachung
    • Cover of the NASA Graphics Standards Manual, 1976
    • NASA logo usage
    • NASA Grid System
    NASA Graphics Standards Manual, 1976

  10. Styleguide / Brand Manual

    Entwicklung

    • manuell in einer Designphase
    • tendenziell vor der Ableitung von Medienprodukten
    • häufig sich-selbst-belegend

  11. Digitale Medien

    Übertragung auf interaktive Inhalte

  12. Styleguide (digital)

    Zielsetzungen

    • grundsätzlich analog zu Print
    • Ausdehnung auf Interface-Module und Richtlinien zu deren Nutzung

  13. Styleguide (digital)

    Besonderheiten

    • zustandsreicher
    • kontextabhängig
      • Resonsive Design
      • unterschiedliche Ausgabeplattformen
      • Progressive Enhancement
    • potenziell schnelllebiger
    • Yahoo! Design Pattern Library Homepage
    • Module Tabs Pattern
    • Drag and Drop Pattern
    Yahoo! Design Pattern Library, 2006

  15. Styleguide (digital)

    Entwicklung

    als Arbeitswerkzeug
    parallel zum Produkt, begleitend
    zur Dokumentation
    nach Fertigstellung (analog Print)

  16. Living Styleguide

    • verändert sich mit dem Produkt
    • gibt den aktuellen Entwicklungsstand wieder
    • laufende oder möglichst zeitnahe Aktualisierung
    • toolgestützte Erzeugung

  17. Living Styleguide

    CSS-Dokumentationsparser

    • erzeugen HTML-Dokument(e) mit CSS-Stil-Inventar
    • Extraktion aus CSS-Kommentaren
    • z.B. KSS, DSS

    KSS Screenshot

  18. Living Styleguide

    Styleguide-Generatoren

    • erzeugen eine HTML-Dokumentation mit Code-Beispielen (HTML, CSS)
    • Templating-Prozess wie bei Static Site Generatoren
    • z.B. Pattern Primer, Pattern Lab

    Pattern Lab Screenshot

  19. Living Styleguide

    Styleguide-Plattformen

    • dynamische Anwendungen
    • Live-Abgleich mit dem aktuellen Entwicklungsstand
    • Dokumentation, Templating, Plugins …
    • z.B. Rizzo (Lonely Planet), SourceJS, UIengine, Fractal

    Rizzo Screenshot

  20. Komponenten

    Modulare Architektur statt Spaghetti-Websites

  21. Komponenten

    • Component-Driven Design / Development
    • Wiederverwendbare Bausteine, z.B. Menü, Tab-Navigation, Akkordeon, Karussell / Slider
      • HTML, CSS, JavaScript
      • Statische Assets (Bilder, Schriftarten, etc.)
    • konkrete Anwendung der Gestaltungsrichtlinien

  22. Patterns

    noun | pat·tern | \ˈpa-tərn\
    Modell, Struktur, Schema; Muster, Design, Ornament; Verhaltensmuster

  23. Wahrnehmungsmuster

    Perceptive Patterns

    • Stilangaben: visuell, auditiv, Ausdrucksformen
    • beschreiben die Art und Persönlichkeit eines digitalen Produkts und seiner Komponenten
    • Analogie: Adjektive, z.B. auffällig, großzügig, ruhig, untergeordnet

  24. Wahrnehmungsmuster

    Beispiele

    • Farben
    • Typographie (Schrift, Absätze, Inline-Stile, Links, Aufzählungen, Zitate, etc.)
    • Raster, Dimensionen & Abstände
    • Interaktive Zustände, Animationen, Audio
    • Fotos, Illustrationen, Ikonografie
    • Ansprache & Ausdrucksformen (Microcopy)
    • Statische Assets (Logos, Key Visuals, Claims, etc.)

  25. Wahrnehmungsmuster

    Im Web-Kontext

    • Stile (CSS)
    • Assets (z.B. Icons, Logos, Claims, etc.)

  26. Verhaltensmuster

    Functional Patterns

    • konkrete, nutzbare Bausteine eines Interfaces
    • ermöglichen oder unterstützen bestimmtes Nutzerverhalten
    • Analogie: Verben / Nomen, z.B. Informieren, Navigieren, Auswählen, Senden

  27. Verhaltensmuster

    Beispiele

    • Textdarstellungen & Abbildungen
    • Strukturelemente (Kacheln, Mehrspaltigkeit, etc.)
    • Navigation & Call-To-Actions
    • Dialoge, Formulare & Formularelemente
    • Interaktive Module (Karussell / Slider, Akkordeon)
    • Fortschritts- & Zustandsanzeigen

  28. Verhaltensmuster

    Im Web-Kontext

    • Struktur (HTML)
    • Stile (CSS)
    • Interaktion (JavaScript)

  29. Komplexe Muster

    Interaktive Abläufe

    • Formularstrecken mit Fehler- und Erfolgsmeldungen
    • domänenspezifische Abläufe, z.B. Einstellen einer Kleinanzeige, Ticketbuchung
    • E-Commerce-Abläufe

  30. Komplexe Muster

    Persuasive Patterns

    • Anmelde- bzw. Kontoeröffnungsvorgänge
    • Onboarding- und Getting Started-Strecken
    • Ongoing Engagement Patterns

  31. Komplexe Muster

    Im Web-Kontext

    • Struktur, Stile, Interaktion (HTML + CSS + JavaScript + ?)
    • User Experience (Psychologie)

  32. Prinzipien, Strategien & Leitfäden

    Motivation & Haltungsgrundlagen

  33. Design Principles

    Was bedeutet gutes Design für Produkt und Team?
    Wie wird es erreicht?

    markenbezogen
    Lucid, Animated, Unbreakable (Pinterest)
    arbeitsweisebezogen
    Do less, iterate, then iterate again (GDS)
    traditionsbezogen
    Confidence, independence, honesty (Jack Daniels)

  34. Strategien

    Konkrete Methoden zur Unterstützung & Erfüllung des Produktzwecks

    • Technologie-Mix
    • Vorgehensweisen im Detail, z.B. Font Loading, Barrierefreiheit, Testing
    • Redaktionelle Stilmittel, z.B. Ansprache, Terminologie
    • UX-Grundlagen, z.B. Personas, User Journeys

  35. Richtlinien

    • dokumentierte Handlungsweisen, z.B. Anleitungen, Tutorials
    • Leitfaden zum Umgang mit Design-Komponenten (Erzeugung, Pflege)
    • Onboarding neuer Team-Mitglieder

  36. Design System

    Sammlung aller produktrelevanten Gestaltungsgrundlagen

    • Prinzipien, Strategien & Richtlinien
    • Stile & Assets (Wahrnehmungsmuster)
    • Interface-Komponenten (Verhaltensmuster)
    • UX-Konzepte (Komplexe Muster)

  37. Pattern Library

    Tool-gestützte, mehr oder weniger umfassende
    Manifestierung eines Design Systems

    • zur Dokumentation
    • zur Entwicklung

  39. Dokumentation & Kommunikation

    Szenario

    • Umfangreiche Markenwelten mit mehreren digitalen Produkten
    • Verschiedene, ggf. verteilte Design- & Entwicklungsteams
    • Langfristige Nutzung

  40. Screenshot IBM Carbon Design System

    IBM Carbon Design System

  41. Screenshot Shopify Polaris

    Shopify Polaris

  42. Screenshot GOV.UK Design System

    GOV.UK Design System

  43. Screenshot bulb Solar Design System

    bulb Solar Design System

  44. Entwicklung & Kollaboration

    Szenario

    • als Werkbank, auch bereits in frühen Projektstadien
    • Entwicklung eines Produkts
    • Interdisziplinäre Teams (Konzept, Design, Entwicklung, Tests)
    • Agile / iterative Arbeitsweise

  45. Entwicklung & Kollaboration

    Zielsetzungen

    • Einbindung von Stakeholdern in den Entwurfs- & Entwicklungsprozess
      (Auftraggeber, Konzepter, Designer, Entwickler, Tester, Redakteure, Nutzer)
    • Kommunikation & Kollaboration
    • Validierung & Tests
    • Im Bestfall: Single Source of Truth

  46. Vorteile

    • interdisziplinäres Arbeiten, Rollenverteilung
    • Defizite werden sichtbar, Wildwuchs wird entgegengewirkt
    • Dokumentation von Anwendungsfällen & Ausnahmen
    • Führung bei der Entwicklung von Komponenten
    • Anschaulichkeit unterstützt Refactoring / Anpassungen
    • Für Agenturen: Entwicklung & Evolution von Best Practices

  47. Herausforderungen

    • komponentenorientierte Entwicklungsstruktur & Arbeitsweise
    • muss für alle Stakeholder verständlich und intuitiv nutzbar sein
    • nachträgliche Einführung bedeutet Mehraufwand
    • Style Guide Enforcer (Hausmeister)
    • Synchronizität von Produkt und Pattern Library

  48. Grenzen & Schwachstellen

    • Pattern Library ≠ Design System
    • sorgt nicht automatisch für Konsistenz, gutes Design oder ein perfektes Nutzererlebnis
    • entfaltet seine Stärke nur durch den richtigen Umgang damit
    • notwendig: Kosteneffizienz + Verbesserung des Produkts (Nutzererlebnis, Nutzerzufriedenheit)

  49. Pattern Library
    in der Praxis

    TYPO3 ⚭ Fractal → Nürnberg Digital Festival

  50. Nürnberg Web Week 2018

    • Community-Initiative zur Zusammenlegung bestehender, unabhängiger Webszene-Events in eine gemeinsame Veranstaltungswoche
    • 2012: 10 Events
    • 2017: 100+ Events / 8.000+ Teilnehmer
    • 2018: Erstmals offiziell 10 Tage, 170+ Events

  51. Nürnberg Digital Fetival 2018

  52. NUEWW-Website

    • Projektübernahme zur Web Week 2013
    • schnelle TYPO3-Website in einer Nacht-und-Nebel-Aktion
    • ehrenamtliche Betreuung & Weiterentwicklung bis heute
    • Anforderungen zusammen mit dem Format gewachsen, Generalüberholung lange überfällig
    • Lastverteilung auf breiter aufgestelltes Team

  53. Relaunch

    • Aktuelle TYPO3-Version
    • Pattern Library mit Fractal
    • Moderne, solide Webtechnologie (aber keine Raketentechnik)
    • API-Anbindung an externe Event-Management-Software
    • Interdisziplinäres Team
    • Iteratives Vorgehen

  54. Pattern Library

    • Zentrale Arbeits- und Referenzplattform für alle Gewerke
    • Single Source of Truth
    • Immer 100% synchron mit dem Entwicklungsstand
    • Dokumentationen für Redakteure
    • Perspektivisch: Auch für Printprodukte

  55. NUEWW Website Allstars

    Balatonszepezd, Ungarn, Oktober 2017

    Team am Strand von Balatonszepezd
    Ausflug in die umliegenden Weinberge
    Der Balkon als Arbeitsplatz

  56. Shared Language (1/5)

    Entwickeln eines gemeinsamen Vokabulars

  57. Shared Language

    Entwicklung

    • Produktmerkmale, -prozesse und -anforderungen
    • projekt- und domänenspezifische Begrifflichkeiten
    • muss für alle Disziplinen / Stakeholder funktionieren, sonst
      → Unverständnis
         → Fehlnutzung
            → Verwilderung / Vernachlässigung / Ablehnung der Pattern Library

  58. Shared Language

    Durchdachte Pattern-Namen

    spiegeln den Zweck wieder, nicht die Präsentationsform
    Progress toggle button statt Circle with a dot
    inspirieren zur Nutzung
    Spotlight statt Prominent header
    haben Persönlichkeit und sind einprägsam
    Boss & Minion Buttons statt Primary & Secondary Buttons

  59. Shared Language

    Konsequente Nutzung

    • Benennung neuer Patterns in Team-Meetings
    • Nutzung im täglichen Umgang
    • Pattern Library Catch-Ups & -Meetings
    • Glossar zur Shared Language
    • Pattern Wall

  60. Shared Language

    Team am Strand von Balatonszepezd
    Ausflug in die umliegenden Weinberge
    Der Balkon als Arbeitsplatz

  61. Patterns (2/5)

    Definition von Komponenten

  62. Patterns

    Ansätze

    1. Patterns First
    Ableitung aus Produktzielen, Design Principles, Corporate Design
    iterativ und parallel zum Screen-Design (und davor)
    2. Screen-Design (neu oder Bestand)
    Pattern Map, Design Inventory, Mood Boards, Collagen, etc.

  63. Patterns

    Design Inventory

    • Zerlegen von Design-Ausdrucken in visuelle Module
    • Identifikation funktionaler und ästhetischer Bausteine
    • Ermitteln wiederkehrender Muster
    • Separation nach Zweck & Funktionsweise
    • Gruppieren von Varianten

  64. Patterns

    Nürnberg Digital Festival Pattern Wall

  65. Patterns

    • Kachelvarianten
    • Inhaltsstruktur-Skizze
    Analyse der Inhaltsstruktur von Patterns

  66. Patterns

    Übertragung in Komponenten

  67. Tools (3/5)

    Kombination & Zusammenspiel

  68. Tools

    TYPO3 als CMS

    • in PHP-implementiertes Open Source Content Management System
    • vielseitige, flexible APIs
    • erweiterbar durch individuelle Extensions
    • framework- und technologieunabhängiges Frontend

    TYPO3 Logo

  69. Tools

    Pattern Library

    • Große Anzahl von Open-Source-Tools verfügbar
    • Individuelle Auswahlkriterien
      • Technologie-Stack (Node.js, PHP, React, Vue.js, etc.)
      • Schwerpunkt (Dokumentation / Entwicklung)
      • Komponenten-Workflows
      • Erweiterbarkeit
      • etc.

  70. Tools

    Fractal als Pattern Library

    • Node.js-Anwendung → Gulp-Workflow
    • flexibel und technologieunabhängig
    • Komponenten + Dokumentation
    • Webserver & statischer Export
    • erweiterbar

    Fractal Logo

  71. Tools

    Herausforderungen

    • Fractal standardmäßig auf einfaches Templating ausgelegt (Handlebars)
    • Fractal dateibasiert (JSON + Templates für Komponenten, Markdown für Dokumentation)
    • TYPO3 kombiniert HTML-Rendering-Mechanismen
      • Fluid (Templates + View Helper)
      • TypoScript (konfigurationsbasierrtes Rendering)
      • Extbase-Plugins (MVC-Architektur)
      • Form Framework, Custom Content Elements, HTTP-Requests, etc.

  72. Tools

    TYPO3 ⚭ Fractal

    • Individuelle TYPO3-Extension
      • Definition von Komponenten + Resourcen (Templates, CSS, JavaScript, etc.)
      • Export eines JSON-Komponenten-Katalogs via CLI-API
    • Individuelle Fractal-Extension
      • Konsumiert JSON-Komponenten-Katalog
      • TYPO3 als externer Template-Engine via HTTP

    Fractal Logo

  73. Struktur (4/5)

    Organisation & Navigation von Komponenten

  74. Struktur

    Organisationsansätze

    • abhängig von Team und Tool
    • Gliederung: einfache Liste, hierarchisch, etc.
    • Sortierung: nach Alphabet, Zweck, logischen Gruppierungen, etc.

  75. Struktur

    Hierarchische Gliederung in Bereiche und Sinngruppen

    Bereich Doku SVG CSS/JS HTML
    1. Principles ✓
    2. Styles & Assets ✓ ✓
    3. Elements ✓ ✓
    4. Compositions ✓
    5. TYPO3 Content Elements ✓ ✓

  76. Nutzung & Betrieb (5/5)

    Workflows in der Entwicklung

  77. Nutzung & Betrieb

    Neue Komponenten

    • Komponentendefinition im TYPO3
      • Benennung
      • Typ & Resourcen
    • Synchronisieren der Pattern Library

  78. Templates, CSS und JavaScript zu einer Resource

  79. Komponentendefinition für die Pattern Library

  80. Synchronisieren des Komponentenbestandes mit der Pattern Library

  81. Komponentendarstellung im Fractal

  82. Nutzung & Betrieb

    Entwicklung

    • Perspektiven: Template, Kontext, HTML, Dokumentation
    • Live-Rendering via TYPO3
    • Varianten

  83. Komponentenperspektiven im Fractal

  84. Nutzung & Betrieb

    Übersicht & Tests

    • Status
    • Abhängigkeiten
    • Responsives Verhalten
    • Barrierefreiheit via Tenon.io

  85. Visualisierung der Komponentenabhängigkeiten

  86. Live-Barrierefreiheitstest mit Tenon.io

  87. Potenzial

    Ausblick & Möglichkeiten

  88. Potenzial

    • Anbindung an Design-Tools (Sketch, Adobe XD, etc.)
    • Visual Regression Testing
    • Progressive-Enhancement-Stadien
    • Versionierung
    • Kommunikations-Features
    • Print-Produkte integrieren

  89. Danke!

    15. Oktober 2018, Nürnberg
    Accessibility Club Workshop: Designing and Developing Forms on the Web and Ensuring They Are Accessible — with Karl Groves (Tenon.io) — https://tollwerk.de/nueww-barrierefrei
    5. November 2018, Berlin
    Accessibility Club Conference 2018 — u.a. mit Alistair Duggin, Head of Accessibility beim Government Digital Service (GDS) / GOV.UK — https://accessibility-club.org