Agentur für die Erstellung von Design- & Code-Bibliotheken

Was ist eine Komponenten-Bibliothek?

Komponenten-Bibliotheken (Component Libraries) sind Sammlungen von wiederverwendbaren Design- und/oder Code-Komponenten für die Entwicklung digitaler Produkte wie Websites und Apps.

Sie umfassen alle UI-Elemente (Buttons, Teaser, Formulare etc.), aus denen sich das jeweilige Projekt zusammensetzt. Die Bibliothek ist ein großer Baukasten, der maßgeschneidert für ein Produkt oder eine Marke entwickelt wurde, damit konsistent und effizient am Projekt weitergearbeitet werden kann. Die Entwicklung von Component Libraries ist eng mit dem Aufkommen moderner Web-Technologien und Designprinzipien verbunden.

Bestandteile einer Komponenten-Bibliothek

Wie granular eine Bibliothek aufgebaut ist und was sie beinhaltet, hängt von der Komplexität des Projekts und dem Praxisnutzen der Bibliothek ab.

• Immer enthalten sind Farben, Typografie und übergreifende Elemente wie Buttons.
• Für kleine bis mittlere Website-Projekte wird meist ein gröberer Ansatz gewählt. Alle Sinnabschnitte werden in Form sog. Patterns gestaltet. Ein Seitentyp (Template) setzt sich aus verschiedenen Pattern zusammen. Auch WordPress nutzt dieses Konzept.
• Umfangreiche Websites, Shops oder Webanwendungen nutzen überwiegend eine sehr kleinteilige Systematik im Sinne von Atomic Design. Neben Farbe und Schrift werden auch Abstände, Schatten und Abrundungen in sog. Design Tokens systematisiert. Komponenten werden verschachtelt und existieren in zahlreichen Varianten, um flexible und robuste Oberflächen zu ermöglichen.

Figma-Bibliotheken (UI-Kits)

Figma hat sich als Design-Tool gegenüber anderen Programmen wie XD oder Sketch klar durchgesetzt. Die Software ermöglicht das Erstellen von Komponenten und Varianten sowie eine sehr detaillierte Organisation und Dokumentation. Ziel ist es, mit der Figma-Library im UX/UI Design effizienter Prototypen erstellen zu können. Neben der Figma-Library existiert meist auch noch die Code-Bibliothek aller Komponenten, die auf Grundlage der Figma-Komponenten umgesetzt wird. Der Figma Dev Mode optimiert die Übergabe der Design-Dateien an die Entwicklung.

Wir setzen Figma in allen Design-Projekten ein, beraten Design- und Development-Teams im Umgang und haben sehr umfangreiche Figma-Libraries erstellt.

Code-Bibliotheken (Component Libraries)

Code-Bibliotheken zeichnen sich dadurch aus, dass alle Komponenten in produktiver Form vorliegen. Im Gegensatz zu einer Design-Bibliothek können die gecodeten Komponenten und Patterns getestet und benutzt werden. Aspekte wie Barrierefreiheit, Performance und Browser-Kompatibilität liegen folglich in unserem Verantwortungs- und Einflussbereich. Wir schätzen dieses Vorgehen sehr, da unser Verständnis von digitalem Design die Gestaltung mit Code im Frontend einschließt.

Wir arbeiten nah am Webstandard und entwickeln größtenteils Framework-unabhängige Frontend-Komponenten. Zur Dokumentation nutzen wir eine spezialisierte Software wie PatternLab, Fractal oder Storybook – je nachdem, welche Technologien zum Einsatz kommen. Das Ergebnis wird auch Frontend-Styleguide genannt. Jede Komponente wird mit einer stufenlos responsiven Vorschau und dem notwendigen Quellcode dokumentiert. Zusätzlich werden alle Seitentypen abgebildet, die sich aus den Komponenten zusammensetzen.

Zusammenarbeit zwischen Design & Development

Wir haben Design- & Code-Bibliotheken in zahlreichen Projekten erfolgreich umgesetzt. Besonders effizient war das Vorgehen, wenn unsere Agentur den gesamten visuellen Part übernommen hat (Responsive Design, Frontend-Code & Barrierefreiheit) und die Implementierung des jeweiligen CMS oder JavaScript-Frameworks durch einen anderen Dienstleister realisiert wurde. Wir haben so erfolgreich Projekte mit Typo3, Drupal oder Contao sowie mit Angular oder React realisiert. Wenn es sich um ein WordPress-Projekt handelt, übernehmen wir die CMS-Implementierung gerne selbst.

Weiterentwicklung zum Design System

Bibliotheken – sowohl im Code als auch im Design – dokumentieren lediglich den Baukasten, aus dem sich eine digitale Benutzeroberfläche zusammensetzt. Ein Design-System (DS) zeichnet sich dadurch aus, dass es zusätzlich Regeln zur Nutzung dieses Baukastens beinhaltet. Das Design System stellt sicher, dass ein konsistentes Produkt entwickelt wird, dass die Menschen im Sinne des Unternehmens anspricht. Es beinhaltet beispielsweise Informationen zu User-Flows, Sprache oder Taxonomien. Die Herausforderung bei einem Design System liegt vorrangig darin, dass es genutzt und weiterentwickelt wird. Die Erstellung der Design- und Code-Bibliotheken ist eher eine Fleißaufgabe.