Zukunftssichere und pflegeleichte Website-Entwicklung dank Design Tokens
Bei der Website-Entwicklung kosten Missverständnisse zwischen Designer:innen und Entwickler:innen viel Bugdet. Design Tokens schaffen hier Abhilfe – dank neuem Level an Automatisierung, Robustheit, Konsistenz, Skalierbarkeit und beim Einsatz von KI.
Design Tokens entwickeln Brad Frosts Atomic-Design-Ansatz weiter, der sich Atome, die kleinsten Grundbausteine des Periodensystems, zum Vorbild nimmt: Atome fügen sich zu Molekülen und immer komplexer werdenden Systemen zusammen. Analog dazu entsteht nach dem Atomic-Design-Ansatz aus kleinsten Designelementen sukzessive ein größeres System. Design Tokens setzen sogar noch einen Schritt vor dem Atom an. Jedes atomare Designelement setzt sich aus mehreren Design Tokens zusammen. Einmal definiert, bleiben diese immer gleich, einmal geändert, ändert sich das Atom und damit das gesamte System. Beispiele für Design Tokens sind Werte für Farben, Schriftarten oder Abstände. Ein Atom ist beispielsweise ein Button.
Eine Brücke zwischen Design und Entwicklung
Design Tokens rücken den Entwicklungsprozess klarer in den Fokus des Designprozesses – und das ist sinnvoll. Denn auch wenn für die User Experience das Design einer Seite eine fundamentalere Rolle spielt, müssen Designer:innen technische Aspekte wie Modularität, Wiederverwendbarkeit und Skalierbarkeit im Blick haben. Nur so können sie robuste, zukunftssichere Systeme bauen.
Die Design Tokens bilden also eine Brücke zwischen Design und Code und erfüllen alle Anforderungen, auf die sich Designer:innen und Entwickler:innen geeinigt haben. Beide Parteien tauschen sich ausschließlich über eine json-Datei, das Gehirn und gemeinsamer Speicherort all dieser Tokens, aus. Das sorgt dafür, dass Designer:innen und Entwickler:innen die gleiche Sprache sprechen und keine Synchronisierungsaufwände oder -fehler entstehen. Jeder Design Token enthält Werte wie Farben, Abstände und andere Designanforderungen aus dem Frontend. Diese Werte werden so strukturiert, dass sie von Entwickler:innen einfach in den Code integriert werden können.
Effiziente, konsistente und sichere Website-Entwicklung
Diese neue Kommunikationsebene zwischen Design und Development eröffnet ein revolutionäres Level an Skalierungsmöglichkeiten: Design Tokens stehen „open source“ zur Verfügung. Aus ihren Bausteinen lassen sich immer mehr Erweiterungen entwickeln. Theoretisch können damit nicht nur einzelne Marken oder Website-Typen durchdekliniert werden, sondern gleich das ganze Web: eine einheitliche Design-Basis für das Internet, das globalen, aktuellen Standards wie beispielweise WCAG-Vorgaben folgt und konsistent eine klare Zuordnung von Design und Funktion ermöglicht.
Design Tokens erfordern beim initialen Setup viel Sorgfalt: Es gilt, einheitliche Regeln zu definieren und eine genaue Struktur zu schaffen. Gerade deswegen schrecken manche Marketingverantwortliche davor zurück. Doch der Vorteil der Tokens liegt auf der Hand: Einmal definiert, sinkt der Pflegeaufwand des Systems sukzessive, Änderungen landen mit wenigen Schritten direkt im Livesystem und sie sind technologie-agnostisch. Das macht Projekte kosteneffizienter als zuvor, bei gleichbleibender Qualität des Outputs. Automatisierte Tests gewährleisten zusätzlich ein robustes System.
Design Tokens erleichtern KI-Einsatz
Durch die definierte Struktur der Design Tokens wird der Einsatz von Künstlicher Intelligenz enorm erleichtert. Schließlich lassen sich Befehle, die das Design betreffen, ganz eindeutig dem entsprechenden atomaren Baustein zuordnen. Gibt man in Zukunft per Sprachbefehl eine Änderung des Designs vor, bearbeitet die KI jede betreffende Position automatisch. So können neue Konzepte, zum Beispiel ein barrierefreier Website-Zugang, ein emissionsreduzierendes Design oder schlicht CI-Anpassungen, in Kurzzeit implementiert werden. Das funktioniert auch bei Headless CMS, also Content-Management-Systemen, bei denen Content und Front-End voneinander entkoppelt sind. Das ist extrem effizient, stellt jeden anfänglichen Aufwand ganz klar in den Schatten und macht Design Tokens zum mächtigsten Design Tool, das es aktuell gibt.
Zuerst erschienen bei Internet of Things.
