Wir ändern etwas an der Marke.
Kommt es überall an?

Wie weit kommt eine kleine Änderung an der Marke? Das haben wir im August im Designsystem des Maschinenbauers SENNEBOGEN gezählt, genauer in der Bausteinsammlung für seine Anwendungen. Es ging um den Fokusring. Wer eine Anwendung ohne Maus bedient, springt mit der Tabulatortaste von Button zu Button, und dieser Rahmen zeigt, wo man gerade ist. Er saß damals an 164 Stellen. Eine neue Hausfarbe oder Hausschrift nimmt denselben Weg durch das System, der Fokusring zeigt ihn nur besonders deutlich, weil er in fast jedem Bedienelement steckt. Kurz gesagt kommt eine solche Änderung an, aber nur dort, wo sie zentral geregelt ist.

Im August haben wir den Ring überarbeitet, damit er sich auf jedem Untergrund klar abhebt, auf Weiß, auf der grünen Markenfarbe und auf dunklen Flächen. Warum das für die Barrierefreiheit zählt, erkläre ich in einem eigenen Beitrag. Strichstärke und Deckkraft haben wir einmal in den Vorlagen des Rings geändert, alle 164 Stellen haben das übernommen. Die Farbe richtet sich aber nach dem Untergrund, und der Abstand zum Button ist an jeder Stelle eigens eingestellt. Beides haben wir deshalb Stelle für Stelle festgelegt. Die Bausteinsammlung ist die Bibliothek aller Buttons, Felder und Ringe, die wir für den Kunden in Figma pflegen. Dort kam die Änderung am Ende überall an.

Derselbe Button im Fokus, vorher und nachher, auf drei Untergründen.

Wie weit reicht eine Änderung im Designsystem?

Das Prinzip kennst du aus Word. Wer die Formatvorlage „Überschrift 1“ ändert, ändert jede Überschrift im Dokument, die an dieser Vorlage hängt. Ein Designsystem, wie ich es im ersten Teil dieser Serie beschrieben habe, macht das für alles, was an ihm hängt.

Eine Auswahl der Bedienelemente, in denen der neue Fokusring steckt.

Heißt konsistent, dass alles gleich aussieht?

Nein. Konsistent heißt für mich, dass alles denselben Regeln folgt, in der Variante, die gerade passt. Der Fokusring ist auf weißem Grund dunkelgrün, auf dunklem Grund weiß und auf grüner Fläche fast schwarz. Weil sich der Ring überall deutlich vom Untergrund abheben muss, braucht er für drei Untergründe drei Farben. Ein Kontaktblock in der E-Mail darf zum Beispiel schlichter sein als auf der Website, solange Schrift und Farben dieselben bleiben.

Kommt eine Änderung wirklich überall an?

• In der eigenen Bausteinsammlung. Hier kam die Änderung überall an.
• Bei den Entwicklungspartnern des Kunden. Die beiden Partner arbeiten mit eigenen Dateien, die an unsere Sammlung angebunden sind, und bei ihnen kommt eine Änderung erst dann an, wenn ihre Teams die neue Fassung aktiv übernehmen. Ringe, die dort jemand von Hand verändert hat, würden alt bleiben. Beim Fokusring ist der neue Ring bei beiden angekommen.
• Im Code. Die fertige Anwendung zeigt den neuen Ring erst, wenn die Entwicklung ihn umsetzt.

In diesem Projekt kommt eine Änderung also in drei Stufen an, und nur die erste haben wir selbst in der Hand. Die anderen beiden hängen an Menschen, die das Update übernehmen und umsetzen.

Nur die erste Stufe liegt in unserer Hand.

Lohnt sich der Aufwand?

Der Anfang kostet Zeit. Wir räumen auf, binden alles an die gemeinsamen Werte an und suchen die Stellen, an denen jemand von Hand etwas eingestellt hat, denn genau dort käme eine spätere Änderung sonst nicht an. Beim Fokusring hieß das, jeder Stelle die passende Farbe zuzuordnen und die von Hand veränderten Stellen zu finden. Läuft das System einmal, ändere ich Werte wie Farbe oder Strichstärke an einer Stelle, und sie kommen überall an, wo das System hängt. Ändert sich dagegen, wo ein Element sitzt oder wie ein Button aufgebaut ist, bleibt Handarbeit. Für mich ist das trotzdem eine große Erleichterung, weil ich bei der nächsten Farbe oder Strichstärke keine Stelle mehr einzeln suche.

Was übernimmt die KI dabei?

Beim Fokusring hat Corsac, unser Design-Agent, die Stellen angepasst, die wir sonst einzeln von Hand hätten bearbeiten müssen, und das hätte uns nach meiner Schätzung zwei bis drei Arbeitstage gekostet. Corsac arbeitet direkt in unseren Figma-Dateien, und wir geben ihm Aufträge wie einem Kollegen, im Chat oder per Ticket. Die KI prüft jede Stelle, ich prüfe Stichproben davon und gebe frei. Die Verantwortung dafür, dass am Ende alles stimmt, bleibt bei mir. Eine Stichprobe reicht oft, um der KI zu zeigen, was noch nicht stimmt, und sie dann alle Stellen auf denselben Fehler durchsuchen zu lassen. Beim Fokusring hatten zwei Vorlagen noch eine falsche Größe, und erst nachdem die KI daraufhin alle Stellen noch einmal geprüft hatte, habe ich die Änderung abgenommen.

Dieselben Regeln kann eine KI nutzen, um Präsentationen, Word-Dokumente oder Social-Media-Posts zu bauen, wenn sie vollständig im Designsystem stehen. Was im Designsystem fehlt, muss die KI raten. In einem eigenen Test fehlte bei uns die Schriftgröße für Aufzählungen auf Folien, und die KI-Programme kamen auf ganz unterschiedliche Werte. Und was die KI schon erstellt hat, ändert sich nicht von selbst, denn nur eine Präsentation, die du neu aus dem System baust, trägt die aktuelle Farbe, die vom letzten Monat bleibt, wie sie ist.

Was heißt das für dein Unternehmen?

Den Vorteil hast du, wenn deine Vorlagen gemeinsame Werte nutzen, ob für die Website, für Präsentationen oder für Dokumente aus der KI. Dann änderst du vieles nur noch einmal, beim Fokusring für Strichstärke und Deckkraft sechs Vorlagen statt 164 Stellen. Wo jemand von Hand formatiert, kommt keine Änderung an. Welche Medien nutzen bei dir schon gemeinsame Vorlagen, wo liegen nur Kopien, und wo formatiert dein Team noch von Hand? Mit diesen drei Fragen fängst du am besten an. In einer Bestandsaufnahme gehen wir sie gern gemeinsam mit dir durch und sehen nach, wo deine Marke heute auseinanderläuft.

Wie wir Marken aufbauen, steht auf unserer Seite zu Positionierung und Markenbild, wer die Vorlagen pflegt, beschreibe ich in einem eigenen Teil dieser Serie. Wie wir mit KI-Agenten arbeiten, beschreibt Boris im Beitrag über Agentic Marketing.

Titelbild: mit KI erzeugt (Google Gemini), gestaltet nach unserer Bildsprache.