Wie Sie eine Pattern-Bibliothek erstellen und warum Sie sich überhaupt damit beschäftigen sollten

Sicherzustellen, dass eine Webpage konsistent wirkt und leicht zu managen ist, kann für Organisationen zur einer großen Herausforderung werden. Glücklicherweise kann eine Pattern-Bibliothek dabei helfen.

Wenn wir mit großen Unternehmen oder Organisationen zusammenarbeiten, dann greifen wir immer auf eine Pattern-Bibliothek zurück, um die typischen Probleme, mit denen große Webseiten konfrontiert werden, zu lösen. Aber was sind Pattern-Bibliotheken und warum sollten Sie sich mit diesen befassen?

Was sind Pattern-Bibliotheken?

Eine Pattern-Bibliothek ist eine Sammlung von User-Interface-Designelementen (UI). Diese UI-Elemente können für wiederkehrende Design-Probleme verwendet werden. Hier werden bestimmte Bestandteile des Designs gesammelt, die mehrere Male auf einer Webpage benötigt werden. Das können beispielsweise Navigationselemente sein, aber auch Slideshows, Social Media Features, Listen, News-Anzeigen usw. Eine Pattern-Bibliothek dokumentiert all diese Muster (auch Module genannt) und definiert, wie diese aussehen, wie sie codiert und eingesetzt werden können. Beispiele für Pattern-Bibliotheken, die wir Ihnen empfehlen können, sind: Mailchimp, Starbucks oder BBC Gel. Natürlich entstehen solche Pattern-Bibliotheken nicht einfach von allein, sondern müssen erstellt werden. Das benötigt Zeit und Aufwand. Warum sollten Sie sich dann die Mühe machen, eine solche Bibliothek zu erstellen?

Vorteile der Pattern-Bibliotheken

Sobald eine Webpage eine bestimmte Größe und Komplexität erreicht hat, insbesondere mit vielen Unterseiten, dann spricht vieles für eine gute Pattern-Bibliothek. Die Bibliothek sorgt für eine einheitliche Benutzeroberfläche. Große Websites werden von verschiedenen Personen über einen längeren Zeitraum entwickelt und regelmäßig überarbeitet. Das führt fast immer zu einer fragmentierten Benutzeroberfläche - es sei denn, es ist etwas vorhanden, das die Konsistenz gewährleistet. Betrachten Sie einige große Pages und achten Sie auf Anzeichen der Inkonsistenz. Die Formatelemente sind vielleicht unterschiedlich oder die Typografie unterscheidet sich auf einzelnen Unterseiten, die Navigation verschiebt die Position von Elementen und manchmal erkennen sie sogar, dass es früher ein anderes Design gab. Eine Pattern-Bibliothek schafft hier Abhilfe und sorgt dafür, dass Sie das bestehende Design und die gewünschten Funktionalitäten auf jeder Unterseite duplizieren können. Die Bibliothek setzt Standards für die gesamte Webpage.

Eine Pattern-Bibliothek erleichtert das Wiederverwenden von Modulen

In großen Unternehmen arbeiten mehrere Abteilungen an der Webpage und verwalten dort jeweils eigene Informationen. Diese Teams arbeiten oft unabhängig voneinander und daher kann sich die erledigte Arbeit ungewollt doppeln. Wenn Sie eine zentrale Pattern-Bibliothek nutzen, die in Zusammenarbeit zwischen diesen Teams erstellt wurde, dann entstehen solche Doppelungen nicht und das reduziert Ihre Kosten. Wenn ein Web-Entwickler ein neues Muster für eine bestimmte Anforderung in Ihrem Verantwortungsbereich erstellt, kann dies jetzt mit der ganzen Gruppe geteilt werden und ist für zukünftige Projekte dauerhaft zugänglich. Sie kombinieren dann einfach die bestehenden Muster, wenn Sie eine neue Unterseite erstellen möchten.

Eine Pattern-Bibliothek erleichtert die Wartung

Eine einheitliche Pattern-Bibliothek erleichtert die Wartung Ihrer Webpage enorm. Wenn alle Codes vereinheitlicht sind, kann ein Entwickler viel einfacher mit diesen arbeiten. Neue Entwickler können sich in die bestehende Bibliothek leicht einarbeiten.

Tipps zum Erstellen einer Pattern-Bibliothek

Im Wesentlichen besteht die Pattern-Bibliothek aus einer Sammlung von Elementen, den dazugehörigen Codes und ein paar Notizen. Denken Sie aber bereits von Anfang an die Pattern-Bibliothek. Die Versuchung ist groß, die Pattern-Bibliothek erst dann zu erstellen, wenn die Webpage fertig ist. Setzten Sie stattdessen früher an, um von den Vorteilen der Bibliothek zu profitieren. Schon während sich die neue Homepage noch in der Entstehung befindet, können sie Muster und Codes in der Pattern-Bibliothek festhalten. Wenn der Entwickler dann damit beginnt, den endgültigen Code Ihrer Page zu schreiben, kann das endgültige Design mit dem dazugehörigen Code konkretisiert werden. Die Muster können dann gleich für die Unterseiten wiederverwendet werden.

Stellen Sie dabei sicher, dass die Muster auch auf verschiedenen Endgeräten funktionieren. Achten Sie darauf, dass das Muster auf verschieden Displays wie gewünscht reagiert - etwa auf mobilen Endgeräten, aber auch wenn ein Design-Element in einer Vorschau als Miniaturbild angezeigt wird.

So definieren Sie die Komponenten eines Musters

Viele Muster bestehen aus mehreren Komponenten, etwa bei einem News-Beitrag: Titel, Beschreibung, Thumbnail, Datum und Autor. In Ihrem Muster sollten Sie diese Komponenten auflisten, auch wenn sie gar nicht immer erforderlich sind. Bedenken Sie aber, was mit dem Design passiert, wenn ein Element des Musters nicht benötigt wird. Gibt es dann einen Platzhalter? Oder wird der Bereich einfach ausgelassen?

Beschreiben Sie, wie Ihr Muster funktioniert

Beim Erstellen der Pattern-Bibliothek sollten Sie auch daran denken, wo die Daten herkommen, mit denen die im Muster definierten Felder gefüllt werden sollen. Was passiert, wenn ein Nutzer auf einen Link oder eine Schaltfläche klickt? Wie funktioniert die Bedienung auf mobilen Endgeräten. Diese praktischen Fragen sind wichtig, wenn es darum geht, die Muster zu implementieren. Stellen Sie ebenso sicher, dass Ihre Muster zugänglich sind. Das Muster sollte etwa durch Tastatureingaben angesprochen werden können oder durch den Header interpretierbar sein. Zudem sollten Sie sich darüber Gedanken machen, wo Sie den Code speichern. Wir empfehlen Ihnen einen zusätzlichen Speicherort für Ihre Pattern-Bibliothek, der von einem Verantwortlichen verwaltet wird. Denn den Code auf verschieden Speicherorte aufzuteilen (z.B. verschiedene Abteilungen) erfordert Koordinationsaufwand und kann schnell dazu führen, dass falsche Codeschnipsel verwendet werden. Eines der Tools, das Sie zum Sichern des Codes nutzen können, ist Astrum. Das Tool zeigt den Code in der Bibliothek an und speichert ihn dennoch extern.

Ihre Bibliothek anpassen

Es kann passieren, dass Sie Muster anpassen müssen. Dies wird davon abhängen, ob Sie Ihre Marke und Ihr Design verändern möchten. Wenn Sie mehrere Marken führen, kann es erforderlich sein, verwendete Muster je nach Anwendungszweck zu adaptieren. Eine Pattern-Bibliothek sollte verschiedene Designs für unterschiedliche Marken aufnehmen.

Sie sind auf der Suche nach einer UI Design Agentur oder wollen zum Thema Pattern-Bibliothek beraten werden? Über eine Kontaktaufnahme würden wir uns sehr freuen.