Corporate Design im Onlineshop konsequent umsetzen

1. Warum ein Shop mehr als Logo und Markenfarben braucht

Auf einer Unternehmenswebsite reichen einige wiederkehrende Gestaltungselemente oft aus, um ein stimmiges Gesamtbild zu erzeugen. Ein Onlineshop enthält deutlich mehr interaktive Komponenten: Filter, Varianten, Mengenfelder, Warenkorb-Hinweise, Aktionspreise, Fehlermeldungen und verschiedene Bestellschritte.

Viele Shopsysteme und Erweiterungen bringen dafür eigene Standardstile mit. Werden diese nicht bewusst aufeinander abgestimmt, können sichtbare Brüche entstehen. Ein Kaufbutton sieht dann anders aus als die übrigen Buttons, ein Gutschein-Hinweis verwendet eine fremde Farbe oder das Zahlungsformular wirkt wie ein eigener Bereich.

Das bedeutet nicht automatisch, dass Kund:innen den Kauf abbrechen. Es kann aber Orientierung und Vertrauen unnötig erschweren. Besonders problematisch wird es, wenn gleiche Farben oder Formen an verschiedenen Stellen unterschiedliche Bedeutungen haben.

2. Diese Elemente sollten im Corporate Design definiert sein

Ein brauchbares Shop-Designsystem beschreibt nicht nur einzelne Farben, sondern die Funktion der wichtigsten Elemente.

Element	Was festgelegt werden sollte	Häufiges Problem
Kaufbuttons	Farbe, Schrift, Größe, Radius und Zustände	Produktseite und Warenkorb verwenden unterschiedliche Stile
Preise	Normalpreis, Aktionspreis, Grundpreis und Steuerhinweise	Streichpreise oder Zusatzangaben wirken je nach Vorlage anders
Badges	Rollen für Sale, Neu, Ausverkauft und Hinweise	Zu viele Farben konkurrieren gleichzeitig um Aufmerksamkeit
Produktkarten	Bildformat, Abstände, Titel, Preis und Button	Uneinheitliche Bilder und Titellängen erzeugen unruhige Raster
Formulare	Eingabefelder, Labels, Fokus, Fehler und Erfolg	Fehlermeldungen sind kaum sichtbar oder passen nicht zum System
Navigation und Filter	aktive Zustände, Auswahl und Rücksetzung	Nutzer:innen erkennen nicht, welcher Filter gerade aktiv ist
Warenkorb und Checkout	Zusammenfassung, nächste Handlung und Status	Der Checkout wirkt wie eine andere Website
Icons	Stil, Größe und Bedeutung	Kreative Symbole sind nicht eindeutig verständlich

Wie Produktkarten, Produktinformationen und Kategorien inhaltlich zusammenspielen, vertieft der Guide zu Produktseiten und Kategorieseiten.

3. Farben brauchen Rollen, nicht nur Hex-Codes

Eine Markenfarbe allein beantwortet noch nicht, wie sie im Shop eingesetzt wird. Sinnvoller ist ein Farbsystem mit klaren Rollen:

• Primäre Handlungsfarbe: für zentrale Aktionen.
• Neutrale Farben: für Flächen, Rahmen und weniger wichtige Informationen.
• Textfarben: mit ausreichender Lesbarkeit.
• Statusfarben: für Fehler, Erfolg, Warnung und Information.
• Zustandsvarianten: definiert für Hover, Fokus und deaktivierte Elemente.

Wie viele Farben dafür notwendig sind, hängt von Marke, Sortiment und Oberfläche ab. Eine reduzierte Palette kann die Umsetzung erleichtern, ist aber keine allgemeine Pflicht. Wichtiger ist, dass jede Farbe eine klare Funktion hat und nicht widersprüchlich eingesetzt wird.

Markenfarben dürfen außerdem nicht zulasten der Lesbarkeit gehen. Sehr helle Akzentfarben können auf weißem Hintergrund als Text oder Button ungeeignet sein. In solchen Fällen sollte nicht die Markenfarbe aufgegeben, sondern eine passende, kontrastreichere Variante für die jeweilige Funktion definiert werden.

4. Buttons müssen in allen Zuständen funktionieren

Ein Button ist nicht nur seine normale Ansicht. Für ein vollständiges Design müssen mindestens diese Zustände bedacht werden:

• Standard
• Hover
• Tastaturfokus
• aktiv oder gedrückt
• deaktiviert
• lädt
• erfolgreich ausgeführt
• Fehler

Gerade im Warenkorb oder Checkout darf eine Ladephase nicht wie ein defekter Button wirken. Ebenso sollte ein deaktivierter Kaufbutton erklären, warum er noch nicht verfügbar ist, etwa weil zuerst eine Variante ausgewählt werden muss.

Einheitlichkeit bedeutet dabei nicht, dass jeder Button gleich aussehen muss. Eine klare Hierarchie ist hilfreicher:

• Primärer Button: für die wichtigste nächste Handlung.
• Sekundärer Button: für alternative Schritte.
• Textlinks: zurückhaltend, für ergänzende Aktionen.

Wenn auf einer Produktseite mehrere Elemente gleichzeitig wie primäre Kaufbuttons aussehen, verliert die Gestaltung ihre Orientierungskraft.

5. Produktkarten und Badges ruhig strukturieren

Produktkarten wiederholen sich häufig und prägen dadurch den Gesamteindruck des Shops. Einheitliche Bildformate, Abstände und Textstile helfen, Produkte schneller zu vergleichen.

Dabei müssen reale Inhalte berücksichtigt werden: lange Produktnamen, unterschiedliche Bildverhältnisse, fehlende Bewertungen, variable Preise oder ausverkaufte Varianten. Ein Design, das nur mit perfekten Beispieldaten funktioniert, ist noch kein belastbares Shop-System.

Auch Badges brauchen Prioritäten. Wenn „Sale“, „Neu“, „Bestseller“ und „Nur noch wenige verfügbar“ gleichzeitig um Aufmerksamkeit kämpfen, verliert jedes einzelne Signal an Klarheit. Lege daher fest, welche Hinweise kombiniert werden dürfen und welcher Status Vorrang hat.

Für eine konsistente Bildsprache im Sortiment ist außerdem der Artikel Produktbilder für den Onlineshop relevant.

6. Markenidentität endet nicht vor Warenkorb und Checkout

Ein häufiger Bruch entsteht nicht im sichtbaren Shop, sondern in späteren Schritten. Warenkorb, Gutscheinfeld, Anmeldung, Versandwahl, Zahlungsarten und Bestellbestätigung sollten deshalb in den Design-Check einbezogen werden.

Dabei gilt: Markenidentität darf sichtbar bleiben, aber vertraute Strukturen sollten nicht ohne guten Grund verändert werden. Ein erkennbares Warenkorb-Symbol, klar beschriftete Formularfelder und eine eindeutige Bestellschaltfläche sind wichtiger als eine besonders originelle Darstellung.

Die Marke kann sich weiterhin über Typografie, Farben, Bildsprache, Tonalität und Details zeigen. Bei der Grundfunktion sollten Klarheit und Erwartbarkeit Vorrang haben. Weitere Faktoren, die Orientierung und Glaubwürdigkeit unterstützen, behandelt der Beitrag Vertrauen im Onlineshop aufbauen.

7. Corporate Design im Shop richtig priorisieren

Nicht jede Abweichung ist gleich dringend. Beginne mit den Elementen, die im Kaufprozess häufig vorkommen oder Entscheidungen beeinflussen.

Priorität 1: kaufkritische Elemente

• Kaufbuttons und Variantenwahl
• Preise und Aktionspreise
• Warenkorb
• Checkout-Formulare
• Fehler- und Erfolgsmeldungen

Priorität 2: Orientierung und Vergleich

• Navigation
• Filter
• Produktkarten
• Badges
• Suchergebnisse

Priorität 3: gestalterische Feinheiten

• dekorative Icons
• Mikroanimationen
• zusätzliche Flächen und Trennelemente
• selten verwendete Sonderseiten

So lässt sich ein gewachsener Shop schrittweise vereinheitlichen, ohne zuerst jedes kleine Detail neu zu gestalten.

8. So setzen wir konsistente Shop-Gestaltung bei BSC um

Bei BSC beginnen wir mit den wiederkehrenden Komponenten und ihren Funktionen. Wir definieren, wie primäre und sekundäre Buttons, Preise, Produktkarten, Hinweise und Formulare aussehen sollen. Danach prüfen wir diese Regeln nicht nur auf der Startseite, sondern auch auf Produktseiten, Kategorieseiten, im Warenkorb und im Checkout.

Die technische Umsetzung richtet sich nach dem vorhandenen System. Je nach WordPress- und WooCommerce-Aufbau können globale Theme-Stile, wiederverwendbare Komponenten oder gezielte CSS-Anpassungen sinnvoll sein. Entscheidend ist nicht, an welcher Stelle eine Farbe eingetragen wird. Entscheidend ist, dass die Regeln zentral nachvollziehbar sind und bei späteren Änderungen nicht auf jeder Seite einzeln korrigiert werden müssen.

Vor der Freigabe testen wir die Gestaltung mit realistischen Produktnamen, unterschiedlichen Bildformaten, mobilen Ansichten und wichtigen Statusfällen. Dadurch zeigt sich, ob das Design nicht nur in einer idealen Vorschau, sondern im tatsächlichen Shop-Alltag funktioniert.

9. Praxisbeispiel: Weingut PAX

Der Webshop von Weingut PAX ist eine BSC-Referenz aus dem Weinbereich. Er kann im Artikel als Beispiel dafür dienen, wie sich Markenfarben, Typografie und wiederkehrende Produktdarstellungen über Website und Shop hinweg verbinden lassen.

10. Checkliste: Ist dein Corporate Design im Shop konsequent umgesetzt?

• Nutzen Website und Shop dieselben definierten Schriften und Farbrollen?
• Ist der wichtigste Button auf jeder Seite eindeutig erkennbar?
• Sind Hover, Fokus, deaktiviert, Laden, Fehler und Erfolg gestaltet?
• Folgen Normalpreis, Aktionspreis und Zusatzangaben einem einheitlichen Muster?
• Sind Produktkarten auch bei langen Titeln und unterschiedlichen Bildern stabil?
• Haben Badges klare Prioritäten?
• Bleiben Navigation, Filter und Warenkorb verständlich?
• Passt der Checkout optisch zur restlichen Website?
• Funktionieren Kontraste und Schriftgrößen auch auf mobilen Geräten?
• Sind die Gestaltungsregeln zentral dokumentiert und nach Updates prüfbar?