Welche Vorteile Styleguides und Pattern Libraries in der Shopentwicklung bringen

Die Erstellung eines Styleguides und der zugehörigen Pattern Library verursacht zunächst einmal Mehraufwand bei der Entwicklung eines Onlineshops und somit einen zusätzlichen Kostenposten im Angebot. Warum sich dieser Mehraufwand für Shopbetreiber letztendlich rechnet und die Arbeit des Entwicklungsteams vereinfacht, erklärt der heutige Beitrag.

Bei der Shopentwicklung effizienter zusammenarbeiten

Als motivierter Shopadministrator und Webentwickler versucht man immer Wege zu finden, um seinen Arbeitsprozess zu verbessern. So setzen Administratoren häufig auf Monitoring, um Prozesse zu überwachen und Optimierungsmaßnahmen abzuleiten. Entwickler verwenden Codestandards und automatische Tests, um eine höhere Codequalität sicherzustellen. Aber wie sieht das bei einer teamübergreifenden Zusammenarbeit mit Webdesignern aus, die häufig als Dritte an der Shopentwicklung beteiligt sind?

Fangen wir mit einem kleinen Szenario an, das bestimmt nicht unbekannt sein dürfte: Die Agentur erhält neue Designanpassungen vom Designer. Der Webentwickler ist aber noch unerfahren und neu im Team. Er beginnt mit der Umsetzung, so wie es nach seiner Vorstellung der beste Weg ist. Als Vorlage dient ihm (oder ihr), wie oft üblich, ein PDF, Screendesign oder einfach nur eine Beschreibung.

Die Anforderung ist am Ende erfolgreich umgesetzt. Bei der Überprüfung vor dem Deployment fällt aber auf, dass die Änderungen auf anderen Seiten als der geänderten Produktdetailseite Auswirkungen haben. Die Überschriften sind kleiner, die Textlinks sind plötzlich in einer anderen Farbe, die Animationen funktionieren nicht mehr. Nur die Produktdetailseite ist im gewünschten neuen Design. Die Änderungen werden nachgearbeitet und aus zwei Stunden werden acht Stunden. Würde man dieses kleine Szenario auf ein Team von mehreren Beteiligten oder auf mehrere Teams ausweiten, können schnell Unmengen an Inkonsistenzen und Doppelarbeiten aufkommen.

Diese Probleme lassen sich vermeiden, wenn Designer und Webentwickler einen Styleguide sowie eine Pattern Library erstellen. Hierdurch entsteht ein zentraler Ort, an dem die Designs und Elemente des Onlineshops definiert werden und zur Verfügung stehen. Aus diesem Bereich können fertige Elemente entnommen und beliebig oft an den benötigten Stellen im Shop eingesetzt werden.

Weil die Pattern Library auf dem Styleguide aufbaut und diesen somit quasi beinhaltet, findet bei der konkreten Umsetzung meist nur noch die Pattern Library Anwendung.

Was ist ein Styleguide?

Der Styleguide ist die Vorstufe zur Pattern Library. Hier finden sich Grundlagen für das Design wieder. In der Regel werden in den meistens Styleguides folgende Bereiche festgehalten:

  • verwendete Farben
  • Typographie, wie z.B. Schriftart, Schriftgröße, Zeilenabstand
  • Logo, Icons

Bei der Verwendung eines Frameworks, wie SCSS, würden hier schon die zu verwendenden Werte in Variablen gespeichert. Auch globale Abstände und Größen sind hier abgelegt.

Was ist eine Pattern Library?

Elemente einer Pattern Library

In einer Pattern Library werden Aussehen und Verhalten der Elemente festgelegt. Dabei orientiert man sich an der Methodik des 'Atomic Designs':

  • Atome: Button, Textlink, Text, ...
  • Moleküle: Blockkachel, Formularsuchfeld, Navigation, ...
  • Organismen: Header, Footer, Formular, ...
  • Vorlagen/Templates: Layout einer Seite ohne realen Inhalt
  • Seiten: Login, Kontakt – komplette Seiten mit allen dazugehörigen Elementen

Beispiele von Pattern Libraries

Je nach Anwendungsfall und Vorliebe für bestimmte Frameworks gibt es mittlerweile eine große Auswahl von Styleguides und Pattern Libraries im Internet.
Um einige der häufig zitierten Pattern Libraries zu nennen:

Primer Pattern Library
Bootstrap Pattern Library
Mailchimp Pattern Library
Lonely Planet Pattern Library
Pattern Lab Pattern Library

Pattern Lab - http://patternlab.io/

Vom Nutzen eines Styleguides und der Pattern Library

Dadurch, dass der Styleguide und die Pattern Library eine zentrale Anlaufstelle für das Aussehen von Elementen und Patterns in einem Onlineshop sind, ergeben sich eine Fülle an Vorteilen: 

  • Konsistenz:
    a) Ein einheitliches Layout der Elemente im Shop ist sichergestellt
    b) Neue Elemente lassen sich auf den vorhandenen Elementen bequem aufbauen.
  • Es gibt einen zentralen Ort für die Pflege des Designs, das Suchen nach Elementen entfällt.
  • Neue Mitarbeiter finden einen leichteren Einstieg, indem sie einen Einblick über alle verfügbaren Elemente erlangen. Dadurch ergibt sich eine schnellere Einarbeitung für Administratoren, Entwickler und Designer ohne Aufwand für bisher Verantwortliche.
  • Verbesserte Kommunikation: Der Einsatz einer Pattern Library erzeugt eine gemeinsame Sprache, von der vor allem Designer und Entwickler profitieren, indem beispielsweise Abstimmungsprozesse für Nacharbeiten unnötig oder reduziert werden. Das spart Entwicklungszeit und setzt Ressourcen für andere Anforderungen frei.
  • Code Qualität: Da die Umsetzung bereits im Styleguide stattgefunden hat, ist der Code bereits getestet und robust, unliebsame Überraschungen werden vermieden.
  • Das Entfernen von veralteten Zuständen kann schneller an einer Stelle durchgeführt werden.
  • Wiederverwendbarer Code: Ist eine Anpassung einmal im Styleguide bzw. der Pattern Library definiert, kann sich jeder Webentwickler das Element von dort nehmen und in die gewünschten Stellen der Templates einfügen. Mehrfachentwicklungen bereits vorhandener oder sehr ähnlicher Elemente werden vermieden.

Der Einsatz von Styleguide und Pattern Library spart also langfristig Zeit und Entwicklungskosten bei gleichzeitig höherer Umsetzungsqualität.

Wann macht dieses Tooling Sinn?

Der Einsatz der Systeme ist sicherlich kein MUSS in der Webentwicklung, in unseren Augen aber insbesondere in den folgenden Fällen sehr sinnvoll:

  • Wenn der Internetauftritt eine Menge an Inhalt liefert und dieser auf verschiedene Art dargestellt werden soll.
  • Wenn die Seite regelmäßig aktualisiert wird oder neue Anforderungen erhält.
  • Wenn mit großen oder wechselnden Teams gearbeitet wird, ist der Einsatz von Styleguide und Pattern Library sehr hilfreich. Vor allem neue Mitglieder profitieren von ausgearbeiteten, funktionierenden Strukturen und haben dadurch geringere Einstiegshürden.

Da ein Onlineshop in der Regel reichlich Inhalt liefert und ein konsistentes, seriöses Design ein wichtiges Vertrauensmerkmal für den potentiellen Kunden ist, sprechen die genannten Gründe insbesondere für den Einsatz bei professionell betriebenen Shops. Vor dem Hintergrund der vielen Möglichkeiten an Endgeräten, den damit zusammenhängenden Gestaltungsvarianten inklusive der Vielzahl von Elementen und einer angestrebten Weiterentwicklung, ist der Einsatz von Styleguide und Pattern Library im E-Commerce aber prinzipiell ratsam.

Wir werden dem Thema Styleguide und Pattern Library hier im Tudockblog weiter treu bleiben. Im nächsten Teil dieser Serie werden wir konkreter auf die Erstellung und Verwendung einer Pattern Library und ihrer einzelnen Komponenten eingehen.

Autor: Kategorie: Webentwicklung
Schlagwörter: Wissen

1. Klick aktiviert Social Button

2. Klick führt entsprechende Funktion aus (Empfehlen, Tweet)

YTo2OntzOjY6ImZldXNlciI7aTowO3M6MzoicGlkIjtpOjk3O3M6MzoiY2lkIjtpOjEwOTcxMjQzMjM7czo0OiJjb25mIjthOjEwOntzOjEwOiJzdG9yYWdlUGlkIjtpOjEyNDtzOjE0OiJleHRlcm5hbFByZWZpeCI7czoxMToidHhfbmV3c19waTEiO3M6MTM6IlVzZXJJbWFnZVNpemUiO2k6MTg7czo5OiJhZHZhbmNlZC4iO2E6MTp7czoyMToic2hvd0NvdW50Q29tbWVudFZpZXdzIjtpOjA7fXM6ODoic2hhcmluZy4iO2E6MTp7czoxMjoidXNlU2hhcmVJY29uIjtOO31zOjg6InJhdGluZ3MuIjthOjM6e3M6MTY6InJhdGluZ0ltYWdlV2lkdGgiO2k6MTE7czoxNjoicmV2aWV3SW1hZ2VXaWR0aCI7aToxNjtzOjg6Im1vZGVwbHVzIjtzOjQ6ImF1dG8iO31zOjY6InRoZW1lLiI7YTo3OntzOjI2OiJib3htb2RlbFRleHRhcmVhTGluZUhlaWdodCI7aTozMDtzOjI0OiJib3htb2RlbFRleHRhcmVhTmJyTGluZXMiO2k6NDtzOjE1OiJib3htb2RlbFNwYWNpbmciO2k6MTA7czoxODoiYm94bW9kZWxMaW5lSGVpZ2h0IjtpOjIwO3M6MTg6ImJveG1vZGVsTGFiZWxXaWR0aCI7aToxMzQ7czoyNjoiYm94bW9kZWxMYWJlbElucHV0UHJlc2VydmUiO2k6MTtzOjIyOiJib3htb2RlbElucHV0RmllbGRTaXplIjtpOjM1O31zOjE3OiJwcmVmaXhUb1RhYmxlTWFwLiI7YToxMDp7czoxNDoidHhfYWxidW0zeF9waTEiO3M6MTc6InR4X2FsYnVtM3hfaW1hZ2VzIjtzOjE1OiJ0eF9jb21tZXJjZV9waTEiO3M6MjA6InR4X2NvbW1lcmNlX3Byb2R1Y3RzIjtzOjEyOiJ0eF9pcmZhcV9waTEiO3M6MTA6InR4X2lyZmFxX3EiO3M6MTU6InR4X21pbmluZXdzX3BpMSI7czoxNjoidHhfbWluaW5ld3NfbmV3cyI7czo5OiJ0eF90dG5ld3MiO3M6NzoidHRfbmV3cyI7czoxMToidHRfcHJvZHVjdHMiO3M6MTE6InR0X3Byb2R1Y3RzIjtzOjI0OiJ0eF93ZWNzdGFmZmRpcmVjdG9yeV9waTEiO3M6MjU6InR4X3dlY3N0YWZmZGlyZWN0b3J5X2luZm8iO3M6MTI6InR4X2NvbW11bml0eSI7czo4OiJmZV91c2VycyI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czo4OiJmZV91c2VycyI7czoxMToidHhfbmV3c19waTEiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO31zOjExOiJzaG93VWlkTWFwLiI7YTo1OntzOjk6InR4X3R0bmV3cyI7czo3OiJ0dF9uZXdzIjtzOjExOiJ0dF9wcm9kdWN0cyI7czo3OiJwcm9kdWN0IjtzOjEyOiJ0eF9jb21tdW5pdHkiO3M6NDoidXNlciI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czoyNToiYWN0aW9uPWdldHZpZXdwcm9maWxlJnVpZCI7czoxMToidHhfbmV3c19waTEiO3M6NDoibmV3cyI7fXM6MTI6IlJlcXVpcmVkTWFyayI7czoxOiIqIjt9czo0OiJsYW5nIjtzOjI6ImRlIjtzOjM6InJlZiI7czoyOToidHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18zMjMiO30%3DYTo0OntzOjQ6ImNvbmYiO2E6MzU6e3M6MTc6InVzZVdlYnBhZ2VQcmV2aWV3IjtzOjE6IjEiO3M6MjI6InVzZVdlYnBhZ2VWaWRlb1ByZXZpZXciO3M6MToiMSI7czoyMDoid2VicGFnZVByZXZpZXdIZWlnaHQiO3M6MjoiNzAiO3M6MjA6Im1heENoYXJzUHJldmlld1RpdGxlIjtzOjI6IjcwIjtzOjMxOiJ3ZWJwYWdlUHJldmlld0Rlc2NyaXB0aW9uTGVuZ3RoIjtzOjM6IjE2MCI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvbk1pbmltYWxMZW5ndGgiO3M6MjoiNjAiO3M6Mjc6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lUGFnZSI7czozOiIxODAiO3M6MzM6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lVGVtcEltYWdlcyI7czoyOiI2MCI7czozMDoid2VicGFnZVByZXZpZXdDYWNoZUNsZWFyTWFudWFsIjtzOjE6IjAiO3M6Mjg6IndlYnBhZ2VQcmV2aWV3TnVtYmVyT2ZJbWFnZXMiO3M6MjoiMTAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbmltYWxJbWFnZUZpbGVTaXplIjtzOjQ6IjE1MDAiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbkltYWdlU2l6ZSI7czoyOiI0MCI7czozMDoid2VicGFnZVByZXZpZXdTY2FuTWF4SW1hZ2VTaXplIjtzOjM6IjQ1MCI7czoyOToid2VicGFnZVByZXZpZXdTY2FuTWluTG9nb1NpemUiO3M6MjoiMzAiO3M6MzE6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnMiO3M6MjoiNDAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnNGb3JMb2dvIjtzOjI6IjU1IjtzOjQwOiJ3ZWJwYWdlUHJldmlld1NjYW5NYXhIb3J6aXpvbnRhbFJlbGF0aW9uIjtzOjI6IjU7IjtzOjM3OiJ3ZWJwYWdlUHJldmlld1NjYW5tYXh2ZXJ0aWNhbHJlbGF0aW9uIjtzOjE6IjMiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2NhbkxvZ29QYXR0ZXJucyI7czoxMDoibG9nbyxjcmdodCI7czozODoid2VicGFnZVByZXZpZXdTY2FuRXhjbHVkZUltYWdlUGF0dGVybnMiO3M6NTc6InBpeGVsdHJhbnMsc3BhY2VyLHlvdXR1YmUscmNsb2dvcyx3aGl0ZSx0cmFuc3BhLGJnX3RlYXNlciI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvblBvcnRpb25MZW5ndGgiO3M6MjoiNDAiO3M6MjU6IndlYnBhZ2VQcmV2aWV3Q3VybFRpbWVvdXQiO3M6NDoiNzAwMCI7czoxMjoidXNlUGljVXBsb2FkIjtzOjE6IjAiO3M6MTI6InVzZVBkZlVwbG9hZCI7czoxOiIwIjtzOjEzOiJwaWNVcGxvYWREaW1zIjtzOjM6IjEwMCI7czoxNjoicGljVXBsb2FkTWF4RGltWCI7czozOiI4MDAiO3M6MTY6InBpY1VwbG9hZE1heERpbVkiO3M6MzoiOTAwIjtzOjIyOiJwaWNVcGxvYWRNYXhEaW1XZWJwYWdlIjtzOjM6IjQ3MCI7czoyMzoicGljVXBsb2FkTWF4RGltWVdlYnBhZ2UiO3M6MzoiMzAwIjtzOjIwOiJwaWNVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIyNTAwIjtzOjIwOiJwZGZVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIzMDAwIjtzOjE4OiJzb3VuZGNsb3VkQ2xpZW50SUQiO3M6MDoiIjtzOjIyOiJzb3VuZGNsb3VkQ2xpZW50U2VjcmV0IjtzOjA6IiI7czoyMDoidXNlVG9wV2VicGFnZVByZXZpZXciO3M6MDoiIjtzOjI0OiJ0b3BXZWJwYWdlUHJldmlld1BpY3R1cmUiO2k6MDt9czoxMToiYXdhaXRnb29nbGUiO3M6Mjg6IldhcnRlIGF1ZiBBbnR3b3J0IHZvbiBHb29nbGUiO3M6ODoidHh0aW1hZ2UiO3M6MTM6IkJpbGQgZ2VmdW5kZW4iO3M6OToidHh0aW1hZ2VzIjtzOjE1OiJCaWxkZXIgZ2VmdW5kZW4iO30%3DYTowOnt9YTowOnt9YTo3OntzOjE2OiJjb21tZW50TGlzdEluZGV4IjthOjE6e3M6MzI6ImNpZHR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzIzIjthOjE6e3M6MTA6InN0YXJ0SW5kZXgiO2k6MTU7fX1zOjE0OiJjb21tZW50c1BhZ2VJZCI7aTo5NztzOjE2OiJjb21tZW50TGlzdENvdW50IjtpOjEwOTcxMjQzMjM7czoxMjoiYWN0aXZlbGFuZ2lkIjtpOjA7czoxNzoiY29tbWVudExpc3RSZWNvcmQiO3M6Mjk6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzIzIjtzOjEyOiJmaW5kYW5jaG9yb2siO3M6MToiMCI7czoxMjoibmV3Y29tbWVudGlkIjtOO30%3D YTo1OntzOjExOiJleHRlcm5hbFVpZCI7aTozMjM7czoxMjoic2hvd1VpZFBhcmFtIjtzOjQ6Im5ld3MiO3M6MTY6ImZvcmVpZ25UYWJsZU5hbWUiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO3M6NToid2hlcmUiO3M6MTcwOiJhcHByb3ZlZD0xIEFORCBleHRlcm5hbF9yZWY9J3R4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzIzJyBBTkQgcGlkPTEyNCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmRlbGV0ZWQ9MCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmhpZGRlbj0wIEFORCBwYXJlbnR1aWQ9MCI7czoxMDoid2hlcmVfZHBjayI7czoxMzk6ImV4dGVybmFsX3JlZj0ndHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18zMjMnIEFORCBwaWQ9MTI0IEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuZGVsZXRlZD0wIEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuaGlkZGVuPTAiO30%3D YToyOntpOjA7czoxNDk6IjxpbWcgc3JjPSIvdHlwbzNjb25mL2V4dC90b2N0b2NfY29tbWVudHMvcmVzL2Nzcy90aGVtZXMvdHVkb2NrL2ltZy9wcm9maWxlLnBuZyIgY2xhc3M9InR4LXRjLXVzZXJwaWMgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjtpOjk5OTk5O3M6MTUxOiI8aW1nIHNyYz0iL3R5cG8zY29uZi9leHQvdG9jdG9jX2NvbW1lbnRzL3Jlcy9jc3MvdGhlbWVzL3R1ZG9jay9pbWcvcHJvZmlsZWYucG5nIiBjbGFzcz0idHgtdGMtdXNlcnBpY2YgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjt9
Bitte bestätigen Sie
Nein
Ja
Information
Ok
Vorschau wird geladen ...
* Pflichtfeld
Ihr Kommentar ist eine Antwort auf den folgenden Kommentar

E-Commerce & Webentwicklung: Wir realisieren und optimieren Internetprojekte. Unser Fachgebiet sind Onlineshops, Rich Internet Applications und anspruchsvolle Onlineauftritte. Über unsere Arbeit schreiben wir. Hier im Blog von TUDOCK.