Wie sich eine Pattern Library basteln lässt
In Interface Design, Tools, Workflow Posted
Wiederkehrende Muster bewirken unweigerlich ein Wohlbefinden seitens des Betrachters. Bekannte Schemata werden erkannt und lösen in Sekundenschnelle ein Gefühl der Sicherheit aus. Aus produktbezogener Sicht macht es nun natürlich nur Sinn, wenn sich auch eine Anwendung über konsistente Elemente definiert. Wem die Optimierung des User Experience Designs also am Herzen liegt, macht mit dem Anlegen einer Pattern Library bereits einen großen Schritt auf der Zielgeraden.
Atomic Design – Der Baukasten für Einsteiger
Der wohl bekannteste Ansatz für die Erstellung einer Pattern Library ist das Atomic Design nach Brad Frost. Im Fokus stehen dabei die kleinsten Details einer Website – unsere Atome. Eines wird bereits jetzt deutlich: wer in Chemie aufgepasst hat, ist minimal im Vorteil. Grundkenntnisse im Umgang mit LEGO sind aber auch nicht zu verachten. Kommen wir aber zurück zu den Atomen. Diese können zum Beispiel HTML-Tags oder Suchfelder sein, zeichnen sich durch einen einzigartigen Zweck aus und erweisen sich dadurch als unteilbar.
Doch welche Atome sind beispielsweise Bestandteil eines Suchfelds? Brad Frost zerteilt dieses essentielle Element in ein Label, also die Suche nach einer spezifischen Seite oder einem Thema, das Input des Users in Form der Suchanfrage sowie (ganz klar) den finalen Button. Wer nun ein bisschen des UX-Designs kundig ist, weiß natürlich: eine Ansammlung von verschiedenen Elemente bildet auf der nächsten Stufe ein funktionierendes Tool – das Molekül. Dieser Erkenntnis folgend, entsteht also aus den zuvor genannten Elementen das Resultat in Form eines kompletten Suchfelds.
Eine Website zeichnet sich aber natürlich durch weit mehr als durch einen singulären Baustein aus. Vielmehr lebt eine Anwendung von der Kombination mehrerer Komponenten. Suchfeld, Menüleiste und Logo formen so den Header. Im Gegensatz zu den Atomen zählen ebensolche Organismen zu den komplizierteren Bestandteilen innerhalb des UX-Designs. Nun aber zu der guten Nachricht: ähnlich einer Gattung definieren sich Organismen in einem Großteil der Fälle durch eine ähnliche Struktur. Steht die Architektur von Header, Footer und Co. also erst einmal fest, kann diese auch auf weitere Projekte übertragen werden. Die Website wächst so mit jedem Schritt und die verschiedenen Organismen konglomerieren zu einem repräsentativen Template, welches wiederum der Anwendung auf verschiedenen Pages dient.
Über den Mehrwert einer Pattern Library
Der Ansatz des Atomic Designs brilliert durch seine Einfachheit und ist ein geeigneter Einstieg für die Entwicklung von Design Patterns. Überzeugende Argumente bestehen en masse. Hier also eine kleine Übersicht der wichtigsten Fakten:
1. Designs verinnerlichen
Pattern Libraries sollten vom Team für das Team entwickelt werden. Es beginnt bei der gemeinsamen Ausarbeitung der verschiedenen Patterns und gipfelt in einer Art Public Library für alle Interessierten. Durch die aktive Zusammenarbeit und Integration der verschiedenen Abteilungen besteht nicht nur die Möglichkeit, das komplette Team in den Prozess einzubinden. Auch die Verinnerlichung der Designkonzepte wird sehr viel einfacher fallen.
2. Stets Up-To-Date sein
Sobald die Pattern Library angelegt ist, besteht eine solide Grundlage für die konsistente Umsetzung typischer Designs. Nichtsdestotrotz spielt der moderne Zeitgeist eine nicht unbedeutende Rolle. Sollte also die bestehende Library renovierungsbedürftig sein, gilt auch hier, ein Auge auf die technologischen und gestalterischen Entwicklungen zu werfen. Regelmäßige Check-Ups, welche Designs aktuell sind und welche nicht, helfen außerdem, dass Wirrwarr innerhalb der Bibliothek auf ein Minimum zu reduzieren.
3. Designmuster zugänglich machen
Die Grundintention der Erstellung einer Pattern Library liegt im Anlegen einer Datenbank, die immer und überall für jeden zugänglich ist. Sie soll nicht nur Antworten auf verschiedenste Fragen, wie in Sachen Codierung, geben. Vielmehr verhilft das gemeinsame Erarbeiten und Verwenden der Patterns auch Teammitgliedern, die nicht unbedingt in der Entwicklung tätig sind, die User Experience aus einer neuen Perspektive zu betrachten. Zahlreiche Pattern Libraries, beispielsweise von Mailchimp, sind mittlerweile sogar öffentlich zugänglich und bieten wertvolles Input für Interessierte.
Und das passende Tool: Pattern Lab
Die Erstellung einer Pattern Library kann je nach Gusto in Eigenregie oder mit entsprechenden Hilfsmitteln erfolgen. Pattern Lab ist das Tool Nr. 1, das nach den genauen Regeln des Atomic Designs arbeitet. Als Produkt des Gründervaters Brad Frost verfolgt es die klassische Clusterung der Elemente – nach Atom, Molekül, Organismus, Template und Page. Ziel des Baukastens ist es, eine Pattern Library zu erstellen, der stetig neue Elemente hinzugefügt werden können. Der große Vorteil: Veränderungen an nur einem einzelnen Atom werden direkt für das komplette Projekt übernommen.
Zusammenfassend bietet sich das Atomic Design also besonders aufgrund der simplen Umsetzung von grundlegenden Ideen hin zu optimierten Elementen an. Das Anlegen einer Pattern Library ermöglicht es so, konsistente Designs innerhalb sämtlicher Entwicklungsprozesse zu integrieren und final den Wiedererkennungswert einer Anwendung zu steigern.
- How to create a pattern library and why you should bother boagworld.com am 11.07.2017
- Atomic Design bradforst.com 2020
- Meine Erfahrung mit Atomic Design – und warum du damit arbeiten solltest massiveart.com am 26.02.2015
