$30 off During Our Annual Pro Sale. View Details »

Pattern Libraries im Zentrum von Entwicklung und Design

Pattern Libraries im Zentrum von Entwicklung und Design

Ich diskutiere in diesem einenhalbstündigen Vortrag die Vorteile und Herausforderungen, die mit einer Einbindung einer Pattern Library in den Entwicklungsprozess einer Webseite kommen. Tools werden vorgestellt, aber der Fokus liegt auf der Kommunikation im Team.

Jens Grochtdreis

June 04, 2019
Tweet

More Decks by Jens Grochtdreis

Other Decks in Design

Transcript

  1. Pattern Libraries im
    Zentrum von Entwicklung
    und Design
    Jens Grochtdreis

    View Slide

  2. Eine Website besteht aus vielen
    Einzelteilen, die oft beliebig
    miteinander kombiniert werden
    können.

    View Slide

  3. View Slide

  4. Pattern Libraries helfen bei der
    Kommunikation und bringen
    Übersicht!

    View Slide

  5. Patterns Design
    Konzept
    Entwicklung
    Fachseite
    Redaktion
    Teil der Kommunikation

    View Slide

  6. Eine Pattern Library kann Teil eines
    umfassenderen Design Systems sein.

    View Slide

  7. ‣ Farben
    ‣ Schriften
    ‣ Voice and Tone
    ‣ Patterns
    ‣ Coding Guidelines
    ‣ Animations-Richtlinien
    Design System?

    View Slide

  8. Namenskonventionen
    werden etabliert!

    View Slide

  9. ‣ Collapse
    ‣ Klappmodul
    ‣ Toggle
    ‣ Aufklapper
    ‣ FAQ
    ‣ …
    Wie heißt das Ding?

    View Slide

  10. Farbnamen
    https://atlassian.design/guidelines/brand/color

    View Slide

  11. Photoshop und andere
    Bildbearbeitungsprogramme
    skizzieren nur Ideen!

    View Slide

  12. Die Wahrheit liegt
    in den Browsern.

    View Slide

  13. Deshalb die Ideen
    möglichst schnell
    in HTML und CSS
    wandeln.

    View Slide

  14. Aber zurück zu Pattern Libraries

    View Slide

  15. Eine Pattern Library ist aktuell eine
    technische Sackgasse.

    View Slide

  16. Wer hat den Lead
    und pflegt die Pattern Library ?

    View Slide

  17. Gleiches gilt für Design Systeme

    View Slide

  18. Eine Pattern Library ist ein Tool, nicht
    notwendigerweise ein eigenes
    Produkt.

    View Slide

  19. Eine Pattern Library kann für sich
    selbst stehen, kann aber auch Teil des
    genutzten CMS sein.

    View Slide

  20. Die Pattern Library sollte immer auf
    dem aktuellen Stand sein und
    „die letztgültige Wahrheit“
    repräsentieren.

    View Slide

  21. Die Pattern Library soll helfen. Dafür
    muss sie konfiguriert werden.

    View Slide

  22. Reine Pattern Ablage
    oder Living Styleguide?

    View Slide

  23. Es gibt viele unterschiedliche Arten
    von Pattern Libraries
    (Styleguides)

    View Slide

  24. http://styleguides.io/

    View Slide

  25. Die alte Garde

    View Slide

  26. http://warpspire.com/kss/

    View Slide

  27. View Slide

  28. Maintainer gesucht https://styleguide.sc5.io/

    View Slide

  29. View Slide

  30. http://trulia.github.io/hologram/

    View Slide

  31. View Slide

  32. View Slide

  33. Patternlab

    View Slide

  34. https://patternlab.io/

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Selbstgemacht

    View Slide

  43. https://github.com/jensgro/Initialize

    View Slide

  44. View Slide

  45. Fractal

    View Slide

  46. https://fractal.build/

    View Slide

  47. https://components.designsystem.digital.gov/components/detail/graphic-list.html

    View Slide

  48. https://styleguide.liip.ch/components/detail/expertises-tiles.html

    View Slide

  49. https://style.eurostar.com/components/detail/basket-total.html

    View Slide

  50. https://stijlgids.stad.gent/components/detail/button-drop.html

    View Slide

  51. https://github.com/tollwerk/fractal-typo3

    View Slide

  52. https://tollwerk.de/blog/show/Post/fischer-automobile-barrierefreies-typo3-mit-living-styleguide/

    View Slide

  53. Malvid

    View Slide

  54. https://malvid.io/

    View Slide

  55. View Slide

  56. View Slide

  57. Neues Modul erstellen
    ‣ Einfach einen neuen Ordner in das
    Arbeitsverzeichnis kopieren.

    View Slide

  58. Mein Testprojekt

    View Slide

  59. UI Engine

    View Slide

  60. Quickstart
    https://github.com/dennisreimann/uiengine

    View Slide

  61. View Slide

  62. Die sichtbare Struktur wird
    konfiguriert!

    View Slide

  63. uiengine.config.js

    View Slide

  64. ‣ Die Konfiguration von UI Engine ist bequem und sehr flexibel.
    ‣ Es ist möglich, in der Navigation Unterordner zu erzeugen und
    die Module so zu strukturieren. Das hat nichts mit der
    Dateistruktur zu tun.
    ‣ Das Handling externer Dateien oder das Building von Sass- und
    JS-Dateien wird von UI-Engine nicht übernommen. Dafür muss
    man selber sorgen, bspw. per Grunt oder Gulp.
    ‣ UI-Engine will also eher ein Dokutool sein, weniger ein Tool, in
    dem gearbeitet wird.

    View Slide

  65. Ausgebautes Beispiel
    https://uiengine-sample-react.uix.space/design-system/
    https://github.com/dennisreimann/uiengine-sample-react

    View Slide

  66. Neues Modul erstellen
    https://github.com/jensgro/uiengine-test

    View Slide

  67. Die Einzeldateien und Varianten in
    Unterordern müssen selber erstellt
    werden. Eine README.md ist
    vorgeschlagen.

    View Slide

  68. Die Konfigurationsdatei ist leider
    nicht vorausgefüllt. Ihr Inhalt muss aus
    der Doku oder einem Beispiel kopiert
    werden.

    View Slide

  69. Mein Testprojekt

    View Slide

  70. Storybook

    View Slide

  71. https://storybook.js.org/

    View Slide

  72. Vorteile

    View Slide

  73. Aktuelle Übersicht über alle Module
    kann unnötige Designtätigkeit
    verhindern.

    View Slide

  74. ALLE Projektbeteiligten bekommen
    einen Überblick über die Formen der
    Inhaltspräsentation.

    View Slide

  75. Alle Module können immer aktuell
    sein, wenn sie mit dem CMS
    gekoppelt sind.

    View Slide

  76. Die Pflege ist einfacher als beim
    traditionellen PDF-Styleguide.

    View Slide

  77. Nachteile

    View Slide

  78. Es gibt bislang keine Plattform, die
    eine einfache Zusammenarbeit
    zwischen Designern und Entwicklern
    problemfrei gestaltet.

    View Slide

  79. Keine einfache PDF-Produktion für
    die Leitungsebene.

    View Slide

  80. Einrichtungsaufwand ist größer als
    beim traditionellen PDF-Styleguide.

    View Slide

  81. Jede bisherige Form eines Styleguides
    oder Pattern-Library ist auf ein
    bestimmtes Gewerk fokussiert.

    View Slide

  82. Einige wichtige Grundbestandteile

    View Slide

  83. ‣ Buttons für unterschiedliche Mediaqueries.
    ‣ Diese sollten leicht editierbar sein.
    Skalierungshilfen

    View Slide

  84. Modul in extra Fenster öffnen
    Isoliert auf einer Seite sind Tests mit dem Browser und dessen
    Entwicklertools einfacher, als innerhalb der Pattern Library.

    View Slide

  85. ‣ Möglichst ein einblendbares Menü für alle Module
    ‣ Strukturierung nach Kategorien
    ‣ Schneller Wechsel ohne Umweg über eine Startseite
    ‣ Interne Benamung und Namensvergabe in der Pattern Library
    müssen nicht identisch sein (.o-mein-tolles-modul), denn die
    Library richtet sich nicht nur an Entwickler
    Einfacher Zugriff auf die Module

    View Slide

  86. Einfacher Zugriff auf die Module

    View Slide

  87. ‣ Nicht jede Applikation ermöglicht eine einfache individuelle
    Anpassung der Sortierung.
    ‣ Gerne wird die Atomic Design-Methodologie genommen.
    ‣ Die Sortierung muss für das Projekt passen und für die
    Projektbeteiligten einfach verständlich sein.
    Sortierung der Module

    View Slide

  88. Wenn das Projekt
    nicht allzu komplex
    ist, kann man auch
    auf eine Sortierung
    verzichten.

    View Slide

  89. ‣ Beispielcode sollte direkt kopierbar sein.
    ‣ Gerne als HTML und als Template bzw. JS-Komponente
    Codedarstellung

    View Slide

  90. ‣ Welche Optionen hat das Modul? Was ist einstellbar?
    ‣ Was tut es und wo?
    ‣ Existieren Abhängigkeiten?
    ‣ Hinweise für Nicht-Entwickler nicht vergessen!
    Dokumentation

    View Slide

  91. http://fractal.clearleft.com/components/detail/banner--notice.html

    View Slide

  92. https://kanbasu.liip.ch/2/components/detail/table-responsive.html

    View Slide

  93. View Slide

  94. Herausforderung

    View Slide

  95. Akzeptanz bei der Einführung schaffen

    View Slide

  96. Lohnt sich ein eigenes Team für
    das Design System/
    die Pattern Library?

    View Slide

  97. Kann die Pattern Library als globales
    Tool für mehrere Projekte fungieren?

    View Slide

  98. Verknüpfung zwischen
    Pattern Library und (mehreren) CMS

    View Slide

  99. Angst, Pattern könnten
    die Kreativität einschränken?!

    View Slide

  100. Erst in die Pattern Library schauen,
    dann konzipieren, dann designen.

    View Slide

  101. Wie flexibel können/müssen
    Patterns sein?

    View Slide

  102. Workflow zum
    Informationsaustausch etablieren.
    Wer kann welche Informationen wie zugänglich machen?
    Wie werden neue Inhalte beworben?

    View Slide

  103. Wie geht man mit verschiedenen
    Versionen eines Patterns um?
    Weiterentwicklung des Patterns bei gleichzeitiger
    Einfrierung des Entwicklungsstandes in Produktion

    View Slide

  104. Wir konzentrieren uns auf
    einzelne Module und vergessen
    das Zusammenspiel der Module
    auf einer Seite.

    View Slide

  105. Immer mal wieder Beispielseiten mit
    den isolierten Modulen erstellen.

    View Slide

  106. Wünschenswert wäre eine einfache
    Möglichkeit, aus einer Pattern Library
    Einzelteile zu einer Seite zu
    kombinieren.

    View Slide

  107. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://github.com/jensgro
    http://webkrauts.de
    https://speakerdeck.com/flocke

    View Slide