Eine Pattern Library enthält typischerweise folgende Elemente:
- Navigationselemente – Menü, Brotkrumenpfad
- Formularelemente, Kalender, Zeitauswahl, Checkboxen, Dropdown-Menüs, Slider etc.
- Tabellen, Listenelemente (Artikel, Bilder, Videos)
- Fortschrittsbalken, Animationen, Warnhinweise, Bestätigungen etc.
Was ist ein Design-System?
Kurzgesagt ist ein Design-System eine komplexe Dokumentation für größere Unternehmen und komplexe Anwendungen. Das Design-System unterstützt die Unternehmen dabei das jeweilige Auftreten über mehrere Produkte, Anwendungen und Plattformen hinweg zu vermeintlichen. Es enthält in den meisten Fällen die allgemeinen Gestaltungsrichtlinien, einen Styleguide, eine Pattern Library sowie übergreifende Design-Prinzipien und Prozesse. Es bietet den Angestellten eine Basis mit der jedes Teammitglied arbeiten kann.
Warum braucht man solche Standards?
Will man eine Anwendung oder ein Produkt konsistent halten, kommt man um die Ausarbeitung von Standards kaum herum. Das trägt zu einer besseren Usability bei und verhindert Probleme wie im Beispiel aus der Einleitung. Darüber hinaus sind Styleguides und Pattern Librarys das Handwerkszeug und Fundament für jedes Projektteam. Gerade bei Agilen Prozessen machen Standards den Workflow effizienter. Aus diesem Grund sollte ein Styleguide oder eine Pattern Library digital umgesetzt werden. Es ermöglicht allen Teammitgliedern und Angestellten einen schnellen Zugriff und erleichtert die Recherche und Weiterentwicklung.
Meiner Meinung nach braucht es jedoch nicht in jedem Fall eine solche ausführliche Dokumentation. Bei einer sehr schlanken Anwendung z.B. einem One Pager oder einer Landing Page reicht es in den meisten Fällen aus, einen kleinen Styleguide anzulegen und den Fokus eher auf Nutzertests zu legen, um abzuwarten bis das Design ausgereift ist.
Beispiele und Inspiration
Die folgenden User Interface Guidelines solltest du immer griffbereit haben, wenn du an einer Anwendung oder einem Produkt für das entsprechende Betriebssystem arbeitest:
Drei Beispiele für firmeneigene Styleguides und Pattern Librarys sind jene von IBM Design Language, Audi CI und die Otto Pattern Library diese sind frei öffentlich einsehbar und dienen gut als Inspiration. Auf der Webseite styleguides.io findet sich eine Sammlung bestehender Sytleguides und Pattern Librarys.