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.

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