Wenn ein Unternehmen wächst, entstehen meist mehrere digitale Produkte, gebaut zu unterschiedlichen Zeiten, von unterschiedlichen Teams, manchmal mit unterschiedlichen Technologien. Das gehört zum Wachstum dazu. Es führt aber auch zu einem häufigen Problem: Buttons, die nicht ganz zusammenpassen, Farben, die leicht variieren, und eine Marke, die von Produkt zu Produkt uneinheitlicher wirkt.

Bei Tuix haben wir dieses Problem kommen sehen, bevor es überhaupt zu unserem eigenen wurde. Da wir wussten, dass mehrere unserer Produkte gleichzeitig entstehen würden, haben wir es von Anfang an gelöst: Wir haben einen gemeinsamen Satz visueller Bausteine entwickelt, den jedes Produkt nutzen kann, egal wie es im Hintergrund gebaut wurde.

Tuix Web Komponenten ist ein fertiger Satz visueller Bausteine, Buttons, Formulare, Karten, Menüs und weitere alltägliche Oberflächenelemente, die sich in jedem digitalen Produkt wiederverwenden lassen. Stell es dir wie eine gemeinsame Kiste mit Bausteinen vor: Ist ein Baustein einmal entworfen und getestet, lässt er sich in jede Website oder Anwendung einsetzen, unabhängig von der Technologie, mit der sie gebaut wurde.

Möglich ist das, weil diese Bausteine auf einer Technologie basieren, die jeder Webbrowser bereits von Haus aus versteht. In der Praxis heißt das: Derselbe Button, dasselbe Menü oder dasselbe Formular sieht überall gleich aus und verhält sich überall gleich, egal in welchem Produkt er eingesetzt wird, ohne dass ihn jemand jedes Mal neu bauen muss.

Damit die Bibliothek leicht wächst und sich pflegen lässt, haben wir sie nach einem in der Softwarebranche bekannten Ansatz namens Atomic Design aufgebaut: Du beginnst mit den kleinsten Bausteinen, wie einem einzelnen Button oder Icon, und kombinierst sie zu größeren, vollständigeren Bausteinen, wie einem ganzen Formular oder einer Navigationsleiste. Uns auf eine bewährte Methode zu verlassen, statt zu improvisieren, gehört mit dazu, wie wir sicherstellen, dass das Ergebnis stabil und langfristig leicht zu pflegen ist.

Dieser Ansatz ist auch für Design-Teams ein großer Vorteil. Genau wie Entwickler:innen dieselben getesteten Bausteine wiederverwenden können, statt sie erneut zu programmieren, können Designer:innen beim Entwerfen neuer Anwendungen oder digitaler Produkte auf dieselben Bausteine zurückgreifen. Das macht es deutlich schneller, etwas Neues zu gestalten, und sorgt gleichzeitig dafür, dass Look and Feel im gesamten Unternehmen exakt gleich bleiben.

Jeder Baustein passt sich automatisch an den hellen oder dunklen Modus an sowie an jedes Gerät, Computer, Tablet oder Smartphone, ganz ohne zusätzlichen Aufwand. Alle Farben und Stile werden zentral gesteuert, wodurch es viel einfacher wird, alles visuell einheitlich zu halten, sogar über Marketingmaterialien hinweg, die außerhalb des digitalen Produkts selbst liegen.

Damit jedes Team die Bibliothek einfach nutzen kann, auch wenn es sie nicht selbst gebaut hat, gibt es einen visuellen, interaktiven Katalog. Darin kann sich jeder Baustein direkt im Browser ansehen und ausprobieren lassen, ähnlich wie beim Durchblättern einer bebilderten Anleitung.

Jede Verbesserung an der Bibliothek durchläuft eine automatische Qualitätsprüfung, ähnlich wie eine Qualitätskontrolle am Fließband, bevor sie zur Nutzung freigegeben wird. Das geschieht vollständig automatisch, sodass jedes Team immer Zugriff auf die neueste, zuverlässigste Version hat, mit weniger Risiko für Fehler oder Verzögerungen.

Was als Lösung für unser eigenes Konsistenzproblem begann, ist heute ein Service, den wir Unternehmen anbieten, die vor derselben Herausforderung stehen: mehrere Teams, mehrere Technologien und der Wunsch nach einer visuellen Identität, die sich überall gleich anfühlt.