Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Patterns Design
    Konzept
    Entwicklung
    Fachseite
    Redaktion
    Teil der Kommunikation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Namenskonventionen
    werden etabliert!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Photoshop und andere
    Bildbearbeitungsprogramme
    skizzieren nur Ideen!

    View full-size slide

  11. Die Wahrheit liegt
    in den Browsern.

    View full-size slide

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

    View full-size slide

  13. Aber zurück zu Pattern Libraries

    View full-size slide

  14. Eine Pattern Library ist aktuell eine
    technische Sackgasse.

    View full-size slide

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

    View full-size slide

  16. Gleiches gilt für Design Systeme

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Reine Pattern Ablage
    oder Living Styleguide?

    View full-size slide

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

    View full-size slide

  23. http://styleguides.io/

    View full-size slide

  24. Die alte Garde

    View full-size slide

  25. http://warpspire.com/kss/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. https://patternlab.io/

    View full-size slide

  29. Selbstgemacht

    View full-size slide

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

    View full-size slide

  31. https://fractal.build/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. https://malvid.io/

    View full-size slide

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

    View full-size slide

  40. Mein Testprojekt

    View full-size slide

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

    View full-size slide

  42. Die sichtbare Struktur wird
    konfiguriert!

    View full-size slide

  43. uiengine.config.js

    View full-size slide

  44. ‣ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Mein Testprojekt

    View full-size slide

  50. https://storybook.js.org/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. Einige wichtige Grundbestandteile

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. ‣ 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 full-size slide

  63. Einfacher Zugriff auf die Module

    View full-size slide

  64. ‣ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  67. ‣ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Herausforderung

    View full-size slide

  71. Akzeptanz bei der Einführung schaffen

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide