Vom Logo zum Marken-Designsystem für Website und Panel

Das Markenzeichen muss in vereinbarten Größen und Umgebungen funktionieren. Eine Website benötigt zusätzlich Regeln für Navigation, Inhalte und Interaktion. Ein Admin-Panel stellt andere Informationsmengen dar, braucht aber eine erkennbare Verbindung zur öffentlichen Marke.

Diese Verbindung entsteht durch wiederkehrende Grundentscheidungen. Typografie, Farbrollen und Formensprache können gemeinsam sein, während Dichte und Komponenten je nach Oberfläche variieren. Gleichheit ist dafür nicht erforderlich.

Definieren Sie Farben nach Funktion: Hintergrund, Text, Linie, Akzent, Erfolg und Fehler.

Benennen Sie Schriftgrößen nach Rolle und legen Sie eine begrenzte Abstandsfolge fest. Radien und Schatten erhalten ebenfalls feste Werte, sofern die Marke sie verwendet.

Solche Tokens machen Änderungen nachvollziehbar. Wenn eine Textfarbe angepasst wird, sollte sie an den relevanten Stellen aus einer Quelle stammen. Einzelne Farbwerte in vielen Dateien führen dagegen schnell zu sichtbaren Abweichungen.

Beginnen Sie mit Navigation, Schaltflächen, Links, Formularfeldern, Hinweisen und Inhaltskarten. Dokumentieren Sie Normal-, Fokus-, Fehler- und deaktivierte Zustände. Der Fokuszustand ist dabei eine Bedienanforderung und kein optionales Detail.

Testen Sie Komponenten mit realistischen Inhalten. Lange deutsche Überschriften, Fehlermeldungen und leere Datensätze decken Schwächen auf, die in einer idealisierten Musteransicht verborgen bleiben.

Die öffentliche Website priorisiert Angebot, Belege und Kontakt. Ein internes Panel priorisiert Datendichte, wiederkehrende Aufgaben und Rückmeldung zum Systemstatus. Beide können dieselbe Schriftfamilie und Farbsemantik verwenden, ohne dieselbe Seitenstruktur zu kopieren. Teilen Sie deshalb nur Bausteine, deren Verhalten tatsächlich übereinstimmt. Ein öffentlicher Projektteaser und eine interne Datentabelle haben unterschiedliche Aufgaben.

Sammeln Sie Screenshots aus Website, Panel, E-Mail und Social Media. Markieren Sie unterschiedliche Schaltflächen, Schriftgrößen und Farbbedeutungen. Prüfen Sie anschließend, welche Abweichung sachlich begründet ist und welche nur historisch gewachsen ist.

Erstellen Sie aus den häufigsten, gut funktionierenden Mustern einen kleinen Kern. Versionieren Sie diesen zusammen mit den Oberflächen und ergänzen Sie kurze Anwendungsbeispiele. Ein nutzbares System beantwortet Fragen der täglichen Produktion.

METEK Digital entwickelt projektbezogene Tokens und Komponenten für Websites und interne Oberflächen. Einige Screenshots und eine Beschreibung der wiederkehrenden Inkonsistenzen helfen, den notwendigen Umfang einzugrenzen.