{"id":49,"date":"2018-09-27T14:45:02","date_gmt":"2018-09-27T12:45:02","guid":{"rendered":"http:\/\/logic-joe.com\/blog\/?p=49"},"modified":"2019-09-20T09:17:35","modified_gmt":"2019-09-20T07:17:35","slug":"ist-das-patternlab-der-digitale-styleguide-der-zukunft","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/ist-das-patternlab-der-digitale-styleguide-der-zukunft\/","title":{"rendered":"Pattern Lab der digitale Styleguide der Zukunft?"},"content":{"rendered":"

Wenn wir an einem Webprojekt arbeiten, entwickeln alle Beteiligten unterschiedliche Vorstellungen vom System. Sei es der Kunde, der sich an Referenzen orientiert. Oder der Entwickler, der eine konkrete Vorstellung hat, wie er die Anforderungen technisch umsetzen m\u00f6chte. Die Kreation bewegt sich in einem Spannungsfeld aus Analysewerten, Design- und Nutzeranspr\u00fcchen.<\/p>\n

Alle Beteiligten haben eigene Vorstellungen. Es wird viel \u2013 oft sehr viel \u2013 miteinander gesprochen. Was bleibt, sind allerdings die unterschiedlichen Bilder, die bei jedem entstanden sind. Was fehlt: ein zusammenf\u00fchrendes Element, das die unterschiedlichen Perspektiven b\u00fcndelt.<\/p>\n

In unserem Agenturalltag begegnen uns h\u00e4ufig Beispiele von inkonsistentem Design, vor allem Systeme, die \u00fcber Jahre gewachsen sind und durch immer neue Features und \u201egebastelte\u201c Elemente geschw\u00e4cht wurden. Das sind leidvolle Erfahrungen, die viel Zeit und Geld kosten und bei den kontinuierlich steigenden Anforderungen an moderne Websysteme wirklich zum Problem werden. So w\u00e4chst die Sehnsucht nach einer smarten L\u00f6sung, einem nachhaltigen System.<\/p>\n

Styleguides und Pattern Libraries\/<\/span><\/span><\/span><\/h2>\n

Die bisher favorisierte L\u00f6sung daf\u00fcr stellt ein\u00a0Styleguide<\/strong>\u00a0dar. Hier werden Branding-Richtlinien festgelegt: Farben, Typografie, der Umgang mit Bildern usw. Dem Styleguide fehlt jedoch meistens die Flexibilit\u00e4t, um auf neue Anforderungen eingehen zu k\u00f6nnen, oder er l\u00e4sst relevante Richtlinien vermissen. Dann wird eine neue Entwicklung entweder nachtr\u00e4glich in das Ger\u00fcst gepresst, oder man bricht die Regeln, wodurch wieder ein ein neuer Style entsteht. Beide Varianten sind nicht ideal, da sie entweder f\u00fcr die neuen Anforderungen unpassend oder im Gesamtdesign inkonsistent sind.<\/p>\n

Pattern Libraries<\/strong>\u00a0k\u00f6nnen hier eine L\u00fccke schlie\u00dfen. Sie beschreiben konkret einzelne Website-Elemente wie Navigation, Bild-Text-Kombinationen, Teaser, Tabellen oder Seiten-Templates. Sie bieten allen Projektbeteiligten eine \u00dcbersicht \u00fcber die wichtigsten Seitenelemente mit Einsatzbeschreibungen. Wenn nun ein neuer Bereich oder ein Feature entwickelt werden soll, steht das bestehende Website-Set in einer \u00dcbersicht zur Verf\u00fcgung. So kann schnell auf bestehende Elemente zur\u00fcckgegriffen werden oder ein neues Element angelehnt an das bestehende Set entwickelt werden.<\/p>\n

Ein Problem dabei ist, dass Styleguide und Pattern Libraries gerade bei neuen Produkten erst entstehen, wenn Design und Entwicklung abgeschlossen sind. Sie bilden also eine aufw\u00e4ndige nachgelagerte Aufgabe, die je nach Projektverlauf oft gestrichen wird, etwa aus Zeit- oder Kostengr\u00fcnden.<\/p>\n

Pattern Lab\/<\/span><\/span>Design, atomisiert<\/span><\/h2>\n

Eine sehr interessante Variante einer Pattern Library, die bereits erstellt werden kann, w\u00e4hrend das Design entwickelt wird, ist das von Brad Frost entwickelte\u00a0Pattern Lab<\/strong><\/a>. Auch das Pattern Lab versammelt und beschreibt alle Website-Elemente. Die Elemente sind dabei nach dem Atomic Design-Prinzip geclustert, das hei\u00dft: Sie werden ausgehend von ihren kleinsten Bestandteilen hin zu gr\u00f6\u00dferen Verb\u00fcnden beschrieben.<\/p>\n

\"Patternlab\"

Foto:\u00a0Wolfram Nagel, SETU GmbH; aus seinem\u00a0Artikel \u201eContent Design und UI Architektur f\u00fcr Multiscreen-Projekte\u201c<\/p><\/div>\n

Der Begriff \u201eAtomic Design<\/strong>\u201c ist der Chemie entliehen. In diesem Konzept werden als\u00a0Atome<\/strong>\u00a0die kleinsten Designeinheiten wie Farben, Schriften, Schaltfl\u00e4chen, Icons, Formularfelder oder Animationen bezeichnet.\u00a0Molek\u00fcle<\/strong>\u00a0sind die n\u00e4chstgro\u00dfe Einheit, sie entstehen jeweils durch Gruppierungen verschiedener Atome. Ein Bild mit Text und Schaltfl\u00e4che ergibt beispielsweise ein Teaser-\u201eMolek\u00fcl\u201c. Aus Molek\u00fclen und Atomen werden wiederum\u00a0Organismen<\/strong>\u00a0gruppiert, z. B. ein Teaser-Grid, ein Header oder ein Footer.<\/p>\n

In Pattern Lab werden neben Atomen, Molek\u00fcle und Organismen auch Seitentemplates und Seiten mit echtem Inhalt abgebildet. Seitentemplates (zur Erstellung strukturierter Seitenvorlagen) werden meist durch Kombination mehrerer Organismen gebildet. Der Fokus liegt dabei auf der Inhaltsstruktur, nicht auf dem tats\u00e4chlichen Inhalt.<\/p>\n

Der tats\u00e4chliche Inhalt wird in \u201eSeiten mit echtem Inhalt\u201c exemplarisch abgebildet. So wird sichtbar, ob das Designsystem \u2013 von den Atomen bis zu den Seitentemplates \u2013 stimmig ist und funktioniert; zudem bilden diese exemplarischen Seiten eine wichtige Grundlage f\u00fcr den Kunden, um intern das Design vorstellen und abstimmen zu k\u00f6nnen.<\/p>\n

\"Patternlab\"

Screenshots aus einem Pattern Lab-Prototypen<\/p><\/div>\n

Der gro\u00dfe Vorteil bei diesem Ansatz liegt darin, dass aus dem bestehenden Baukasten an Atomen, Molek\u00fclen und Organismen jederzeit neue Elemente entwickelt werden k\u00f6nnen. Eine konsistente Gestaltung wird so nicht \u00fcber Regeln geschaffen, sondern aus einem lebendigen System, das sich von innen heraus tr\u00e4gt. Auch Ver\u00e4nderungen an den einzelnen Atomen werden so unmittelbar im gesamten System \u00fcbernommen; zugleich gibt es zu jedem Zeitpunkt f\u00fcr alle beteiligten Personen die gleiche Arbeitsgrundlage.<\/p>\n

Ein wachsendes System\/<\/span><\/span><\/span><\/h2>\n

F\u00fcr die Arbeit ist entscheidend, dass das Pattern Lab bereits zum Beginn der Designentwicklung ins Spiel kommt. Es ist also nicht eine Aufgabe, die bis zum Schluss aufgeschoben wird, das Pattern Lab entsteht direkt am Anfang und w\u00e4chst best\u00e4ndig mit. Allerdings bedarf die Organisation des Design-Systems auch einiger \u00dcberlegung und Planung. Was genau soll den Atomen, Molek\u00fclen und Organismen zugeordnet werden, ohne dass das System un\u00fcbersichtlich wird?<\/p>\n

Das im Juli 2016 ver\u00f6ffentlichte Pattern Lab 2 bietet nun noch die M\u00f6glichkeit, Styleguide-Aspekte st\u00e4rker zu ber\u00fccksichtigen, etwa Code und Kommentare direkt an den Elementen zu hinterlassen, um diese genauer zu beschreiben.<\/p>\n

Fazit\/<\/span><\/span><\/span><\/h2>\n
\"Patternlab\"

Screenshot von\u00a0demo.patternlab.io\/?p=viewall-atoms-buttons<\/p><\/div>\n

Pattern Lab<\/strong>\u00a0bietet eine spannende M\u00f6glichkeit f\u00fcr einen lebendigen Styleguide. Es schafft zum einen f\u00fcr alle Projektbeteiligten Klarheit \u00fcber das Design-System. Zum anderen ist es nicht starr und w\u00e4chst anhand von Mustern mit, so dass das Grunddesign, welches eine Marke oder Produkt repr\u00e4sentiert, auch \u00fcber einen l\u00e4ngeren Zeitraum nicht verloren geht \u2013 vorausgesetzt nat\u00fcrlich, alle Projektbeteiligten arbeiten gewissenhaft und das bestehende Set wird bei der Weiterentwicklung nicht au\u00dfer Acht gelassen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pattern Lab – ein fantastisches Tool f\u00fcr Webprojekte, welches viele Vorteile bietet…<\/p>\n","protected":false},"author":5,"featured_media":225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":42,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":843,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media\/225"}],"wp:attachment":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}