Wie du deine Marke mit KERN zusammenbringen kannst

Die Marken von Bund, Ländern und Kommunen haben wichtige Funktionen. Sie dienen der öffentlichen Verwaltung als Vertrauensanker, da Bürger:innen und Unternehmen sie bereits kennen. KERN möchte diese Marken deshalb ausdrücklich schützen, gleichzeitig aber auch die Wiedererkennbarkeit staatlicher Angebote fördern. Um diesen Spagat zwischen Wiedererkennbarkeit und Markenidentität hinzubekommen, wurde gemeinsam mit der Community in einem Co-Creation-Prozess ein Markenkonzept erarbeitet, das sowohl der Dachmarke als auch der individuellen Markenidentität gerecht wird. So ergibt sich eine Vertrautheit der verschiedenen Anwendungen im öffentlichen Bereich bei gleichzeitig klarer Unterscheidbarkeit für den Ausdruck der eigenen Marke.

Beispiele

Die folgenden Abbildungen zeigen links eine Originalseite und rechts eine Seite mit KERN und der Dachmarke.

infoHinweis

Die gezeigten Beispiele sind keinen offiziellen Beispiele, sondern dienen ausschließlich dazu, das Konzept anhand starker Marken zu veranschaulichen. Ziel ist die anschauliche Darstellung der Markenwirkung. Die Inhalte können deshalb auch voneinander abweichen.

Agentur für Arbeit

Ludwigslust

Deutsche Rentenversicherung

Was zeigen diese Beispiele? Die Marken lassen sich auf den ersten Blick voneinander unterscheiden. KERN erfüllt hierbei funktionale Anforderungen und führt gleichzeitig die Dachmarke mit. Dazu gehören Typografie, Abstandslogik und Farbgebung. Diese drei Elemente sind präzise aufeinander abgestimmt.Die Typografie spielt eine zentrale Rolle. Sie wurde bewusst mit einer barrierefreien Schrift besetzt und sollte nicht verändert werden. Die Buchstabenformen sind klar unterscheidbar und erleichtern damit Personen mit Leseschwierigkeiten den Zugang. Dies ist nicht bei allen Schriftarten gegeben. Eine Veränderung der Schrift würde zudem Anpassungen der Abstandslogik erforderlich machen.

Die Abstandslogik gewährleistet ausreichend Abstand zwischen den Elementen. Damit lassen sich Informationen gut strukturieren und Komplexität reduzieren.

Die Farben stellen sicher, dass alle interaktiven Elemente als solche erkennbar und dank der hohen Kontraste gut lesbar sind. Auch Warn- und Informationsmeldungen folgen einem klaren Schema.

Alles weitere kann frei gestaltet werden: Hintergründe, Formsprache, Maske, Accent-/Brandfarben in Schmuckelementen (wie bspw. der rote Balken mit der eineckigen Abrundung auf der Beispielseite für die Bundesagentur für Arbeit) oder Hintergründen, Illustrationen, Bildsprache, Tonalität und Wording, etc.

Eigene Markenidentiät

Anhand der gezeigten Beispiele lässt sich auch auch ohne ausgereiftes Markenkonzept eine eigene Markenidentiät mit wenigen Mitteln erstellen. Hier ein fiktives Beispiel, in welchem schlicht mit Illustrationen und einem Formelement gearbeitet wird:

Die eigene Marke gewinnt somit an einem funktionalen Unterbau, den KERN zur Verfügung stellt. Die UX der eigenen Seite steigert sich durch die vertrauten Patterns. Vertrautes kann von Nutzenden immer leichter bedient werden, als völlig neues.Zudem greift Jakob's Law: „Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know." / „Nutzer verbringen den größten Teil ihrer Zeit auf anderen Webseiten. Das bedeutet, dass Nutzer es bevorzugen, wenn Ihre Webseite genauso funktioniert wie alle anderen Webseiten, die sie bereits kennen.“ (lawsofux)

KERN lässt sich mit geringem Aufwand visuell an die eigenen Bedürfnissen anpassen. Wir möchten an dieser Stelle jedoch dazu plädieren, Typographie, Farben und Abstände von KERN so zu belassen wie sie sind. Das entwickelte Konzept erlaubt die Marke mit dekorativen Elementen zu bedienen. Alle funktionalen Elemente sollten bei allen behördlichen Diensten und Seiten einheitlich sein, um Vertrautheit und Konsistenz in der Bedienung zu gewährleisten. Damit schaffen wir einen UX/UI Standard für die deutsche Verwaltung.

infoHinweis

Wir arbeiten intensiv weiter daran, dass ihr eure Marke einfach und mühelos in KERN integrieren könnt. Euer Feedback ist uns an der Stelle sehr wichtig, also meldet euch gerne zum Beispiel in unserem Mattermost Kanal KERN/Produkt.

Wir dürfen an dieser Stelle schon einmal ankündigen, dass demnächst ein paar Dinge bei KERN veröfentlicht werden, die das Theming weiter vereinfachen:

• KERN-Farbpalettengenerator: Wir arbeiten für euch an einem KERN konformen OKLCH-Farbgenerator, der euch automatisch eine Farbtabelle mit einem (oder mehreren) Hex-Werten aus eurem Styleguide zur Verfügung stellt. Das Tool erstellt euch eine (modifizierbare) Palette mit WCAG Kontrastangaben und einem Hinweis, wo auf dem Spektrum sich eure eingegebene Brand-Color befindet und welche Abstufung sich für welche UI Elemente eignen (Hierzu auch noch ein spannender Kommentar von Zach Whitehurst). Die Palette lässt sich dann sowohl für die Entwicklung, als auch für Figma exportieren.

• Separation of concerns: Um das Updaten in Figma zu vereinfachen, trennen wir das „ Figma Design Kit” in zwei Dateien auf: „UI-Library” und „Foundation”. Dadurch könnt ihr ohne Probleme ein eigenes Farb-Theme anlegen und ungestört das UI-Kit bei Neuerungen aktualisieren, ohne ständig die Variablen tauschen zu müssen.

• Vereinfachtes Produkt-Setup: Wir werden euch eine „Produkt-Start-Datei” zur Verfügung zu stellen, in der ihr eure für das Produkt relevanten Komponenten und eventuelle Overrides der KERN-UI Komponenten anlegen könnt. Die Datei ist optional und soll lediglich helfen, eure Projekte etwas schneller aufsetzen zu können.

Alle drei Themen helfen euch schneller ein skalierfähiges und leicht zu updatendes Projekt mit KERN aufzusetzen und zu entwickeln. Auch hier wieder: Bitte gebt uns Rückmeldungen (auf KERN/Produkt), damit wir KERN weiter und zielgerichtet für euch verbessern können.