Gestaltungsanweisungen und Corporate Identity

Der Grünton stimmt nicht

Freitag, 14:30 Uhr im E-Commerce-Büro. Du hast gerade die neue Aktionsseite für den Sommersale fertiggestellt. Grüner Aktionsbutton, große Überschrift, Produktbilder mit weißem Hintergrund. Sieht gut aus, findest du. Dann die Nachricht deiner Teamleitung: "Der Grünton stimmt nicht, und die Schrift ist falsch. Bitte nochmal." Du hattest die Farbe per Augenmaß gewählt und die Schriftart genommen, die dir am besten gefiel.

Die Seite erwartet 12.000 Besucher:innen pro Woche. Wenn sie nicht zum Rest des Shops passt, wirkt sie wie eine fremde Website. Jeder Prozentpunkt weniger Conversion kostet direkt Umsatz. Aber woran hättest du dich orientieren müssen?

Produktkategorisierung klärt, wo Produkte im Shop erscheinen. Jetzt geht es darum, wie sie dort aussehen. Die Antwort liegt in den Gestaltungsanweisungen: einem verbindlichen Regelwerk, das festlegt, wie die Marke visuell auftritt.

Drei Säulen der Corporate Identity im Shop

Die Corporate Identity (CI) eines Onlineshops besteht aus verbindlichen Vorgaben. Drei Bestandteile sind zentral:

1. Farbpalette - Jede Markenfarbe ist als exakter Code definiert (z.B. HEX #1A7F3C). "Ungefähr grün" reicht nicht. Schon ein leicht abweichender Farbton wirkt auf Kundenseite wie ein anderer Shop.
2. Typografie - Schriftart, Schriftgröße und Zeilenabstand sind festgelegt. Wenn die Aktionsseite plötzlich eine andere Schrift zeigt als die Produktseiten, entsteht ein Bruch im Erscheinungsbild.
3. Bildsprache - Hintergrundfarbe, Belichtung, Perspektive und Bildausschnitt folgen einheitlichen Regeln. Produktfotos mit weißem Hintergrund neben Lifestyle-Bildern mit buntem Hintergrund wirken zusammengewürfelt.

Alle drei Bestandteile sind in einem Styleguide dokumentiert, dem Nachschlagewerk für jede Gestaltungsentscheidung.

🎬 Vorstellung: Stell dir die Startseite deines Ausbildungsbetriebs-Shops vor. Welche Farbe hat der Kaufen-Button, welche Schriftart siehst du in der Navigation?

Fünf Prüfpunkte im Abgleich

Die Prüfung einer Shopseite gegen den Styleguide funktioniert wie eine Qualitätskontrolle. Du vergleichst Element für Element:

1. Farbcode des Aktionsbuttons: Rechtsklick, Farbwert über die Browser-Entwicklertools auslesen, mit dem HEX-Code im Styleguide abgleichen. #1A7F3C ist nicht dasselbe wie #2B9E4D.
2. Schriftart der Überschrift: Im Quellcode oder per Inspektor prüfen, ob der korrekte Font-Name hinterlegt ist. "Open Sans" und "Arial" sehen ähnlich aus, sind aber nicht austauschbar.
3. Schriftart des Fließtexts: Gleiche Prüfung, zusätzlich Schriftgröße und Zeilenabstand kontrollieren.
4. Logo-Platzierung - Der Styleguide definiert eine Schutzzone (Mindestabstand in Pixeln) um das Logo. Wird sie unterschritten, wirkt das Logo eingequetscht.
5. Bildsprache - Stimmt die Belichtung mit den Vorgaben überein? Haben alle Produktfotos denselben Hintergrund?

Jede Abweichung dokumentierst du mit Screenshot, Ist-Wert und Soll-Wert.

Warum dein Augenmaß nicht reicht

Im Aktionsseiten-Fall hattest du den Grünton "nach Gefühl" gewählt. Das Problem: Das menschliche Auge kann ähnliche Farbtöne auf unterschiedlichen Bildschirmen nicht zuverlässig unterscheiden. Deshalb arbeiten Styleguides mit exakten Codes statt mit Farbbeschreibungen. "Unser Grün" ist keine Anweisung. #1A7F3C schon.

Dasselbe gilt für Schriftarten: "Eine moderne Schrift" ist subjektiv. Der Styleguide gibt den exakten Font-Namen vor, damit jede Person im Team zum gleichen Ergebnis kommt.

🤔 Frage dich: Wie würdest du vorgehen, wenn du eine Aktionsseite für einen anderen Kanal gestalten sollst, z.B. eine Instagram-Story statt einer Shopseite? Gelten dort dieselben CI-Vorgaben?

Drei CI-Brüche, drei Vertrauensverluste

Denk nochmal zurück an die zurückgeschickte Aktionsseite. Angenommen, sie wäre mit allen drei Fehlern live gegangen: falscher Grünton, fremde Schrift, Logo ohne Schutzzone. Was hätten die 12.000 Besucher:innen pro Woche gesehen?

Zwei Argumente erklären den Vertrauensverlust:

Wiedererkennung bricht ab. Kundschaft, die den Shop kennt, erwartet ein bestimmtes Erscheinungsbild. Weicht die Aktionsseite davon ab, entsteht Unsicherheit: "Bin ich noch im richtigen Shop?" Gerade bei Bezahlvorgängen führt diese Unsicherheit zu Kaufabbrüchen.

Phishing-Assoziation entsteht. Gefälschte Websites imitieren Marken oft mit leicht abweichenden Farben und Schriften. Eine Aktionsseite mit CI-Brüchen löst unbewusst dasselbe Warnsignal aus. Die Folge: Kundschaft gibt keine Zahlungsdaten ein.

Kein Rätselraten, kein Umsatzverlust

Hätte die verantwortliche Person im Aktionsseiten-Fall vor dem Gestalten den Styleguide geöffnet, wären alle drei Fehler vermeidbar gewesen. Der HEX-Code hätte den richtigen Grünton geliefert, der Font-Name die korrekte Schrift, die Schutzzone das richtige Logo-Layout.

CI-Vorgaben sind keine Geschmacksfrage. Sie sind ein Qualitätsstandard, der dafür sorgt, dass jede Seite im Shop wie ein Teil derselben Marke aussieht. Und dass 12.000 Besucher:innen pro Woche keinen Grund zum Zweifeln haben.

📝 Fasse mental zusammen: Welche drei CI-Bestandteile prüfst du vor dem Go-Live einer Shopseite, und warum ist "sieht ungefähr richtig aus" keine ausreichende Prüfung?