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

Unsere Agentur plant und realisiert Design- & Code-Bibliotheken für Websites und digitale Produkte. Ob Figma-Library oder Frontend-Patterns – wir sorgen für eine durchdachte, barrierefreie Design-Systematik und behalten in komplexen Projekten den Überblick.

Unsere Agentur-Leistungen für Komponenten-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.

Component Library der Agora Energiewende-Website, dokumentiert in PatternLab

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.

Vielen Dank für die tolle Zusammenarbeit! Die Erstellung unseres Design Systems mithilfe von Adobe XD und die reibungslose Migration zu Figma verliefen optimal. Die Design-Komponenten-Bibliothek bildet eine perfekte Grundlage für zukünftige Entwicklungen und unsere neuen Projekte. Das äußerst strukturierte und effiziente Vorgehen hat nicht nur dazu beigetragen, dass wir uns bestens in die Materie eingearbeitet haben, sondern hat auch die Übernahme optimal vorbereitet und erleichtert – ganz abgesehen davon, dass es auch noch viel Spaß gemacht hat!

Als Behörde ist für uns besonders die gründliche und kontinuierliche Überprüfung im Hinblick auf Barrierefreiheit von großer Bedeutung. Auch in diesem Bereich erhielten wir stets optimale Beratung und viele wertvolle Tipps.

Wir freuen uns bereits auf die kommenden Projekte, die wir gemeinsam mit Jonas realisieren können.

November 2023, Beate Köferl, Landesamt für Finanzen – FinanzIT BAYERN

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.

Blog-Beiträge zu Komponenten-Bibliotheken