Markenmuster und grafische Elemente: Wie entwickeln Sie eine Bildsprache jenseits des Logos?

Wir bei Talha Aslan und Team sehen eine Situation immer wieder. Das Logo ist stark, doch jeder Beitrag auf Social Media nutzt eine andere Form, einen anderen Iconstil und einen anderen Bildton. Folglich wirkt die Marke zerstreut, obwohl das Logo selbst stimmt. Genau diese Lücke schließt eine durchdachte grafische Sprache.

Dieser Leitfaden zeigt Ihnen, wie Sie unterstützende Elemente auswählen, Markenmuster ableiten, den Iconstil und die Bildsprache festlegen, Regeln schreiben und alles in den Styleguide aufnehmen. Denken Sie zusätzlich über eine Figur nach, lesen Sie auch unseren Beitrag zum Thema Markenmaskottchen gestalten.

Aus welchen Bausteinen besteht eine grafische Sprache?

Viele Teams verstehen unter grafischer Sprache ein einzelnes Muster. In der Praxis besteht das System allerdings aus mehreren Ebenen, und jede Ebene hat eine eigene Aufgabe. Nutzen Sie die folgende Liste als Bestandsaufnahme.

• Grundformen: Geometrische oder organische Formen aus Logo oder Markengeschichte.
• Muster: Flächen, die durch Wiederholung dieser Formen entstehen.
• Linien und Rahmen: Strichstärke, Eckenradius, durchgehende oder gestrichelte Linien.
• Iconstil: Gemeinsame Regeln für Symbole in Oberflächen und Druck.
• Bildsprache: Prinzipien für Licht, Farbe, Ausschnitt und Motiv.
• Komposition und Raster: Die Anordnung der Elemente auf der Fläche.

Nicht jede Ebene brauchen Sie sofort. Eine reine Onlinemarke für Dienstleistungen stellt zum Beispiel Iconstil und Bildsprache vor Verpackungsmuster. Anders gesagt zeigt die Bestandsaufnahme auch, wo Sie zuerst investieren sollten.

Stellen Sie dabei für jede Ebene zwei Fragen: Wo nutzen wir diese Ebene heute, und wer produziert sie? Die Antworten zeigen, welche Ebene am dringendsten Regeln braucht. Erstellt Ihr Team für Social Media täglich Vorlagen, dann stehen Kompositionsregeln und Markenmuster ganz oben.

In welcher Reihenfolge bauen Sie die grafische Sprache auf?

Die Reihenfolge zählt, denn jede Ebene baut auf der vorherigen auf. Teams, die mit einem zufälligen Muster starten, zwingen danach Icons und Fotos in dieses Muster. Deshalb empfehlen wir diese Abfolge:

1. Quelle wählen: Ein Detail im Logo, ein Merkmal der Schrift, das Produkt oder ein Gegenstand aus der Markengeschichte.
2. Grundformen ableiten: Zwei oder drei einfache Formen aus der Quelle gewinnen.
3. Linienregeln setzen: Strichstärke, Ecken und Linienenden.
4. Muster entwickeln: Formen durch Wiederholung, Skalierung und Drehung vervielfachen.
5. Iconstil festlegen: Die Linienregeln auf ein Iconraster übertragen.
6. Bildsprache beschreiben: Licht und Ausschnitt passend zu Palette und Formen.
7. Regeln testen: Alles in echten Vorlagen ausprobieren und dann in den Styleguide aufnehmen.

So stützt sich jede Entscheidung auf die vorherige. Das System hat dann immer eine Antwort auf die Frage, warum etwas so aussieht. Zudem fällt die Einarbeitung neuer Designer leichter, weil jede Regel auf eine frühere verweist.

Wie leiten Sie unterstützende grafische Elemente aus dem Logo ab?

Die stärksten Systeme wachsen aus einem Detail im Logo. Denn durch diese Verbindung deuten die Formen auf die Marke hin, auch wenn das Logo nicht sichtbar ist. Zum Beispiel kann der geschwungene Abschluss eines Buchstabens, ein Eckenschnitt oder eine Negativform zum unterstützenden Element werden.

Eine praktische Methode: Betrachten Sie das Logo sehr groß und markieren Sie drei auffällige Details. Danach übersetzen Sie jedes Detail in eine einfache Form, die ohne Logo funktioniert. Schließlich prüfen Sie, welche dieser Formen in der Wiederholung einen angenehmen Rhythmus erzeugt.

Bietet das Logo kein brauchbares Detail, suchen Sie in der Markengeschichte. Routenlinien für eine Spedition, ein Tassenring für ein Café oder Datenpunkte für ein Softwareunternehmen sind sinnvolle Ausgangspunkte. Abstrahieren Sie die Quelle allerdings, damit kein Klischee entsteht. Eine Ringform wirkt eleganter als eine wörtlich gezeichnete Tasse.

Achten Sie außerdem darauf, dass die abgeleiteten Formen nie mit dem Logo konkurrieren. Ein unterstützendes Element unterstützt, wie der Name sagt. Ist es so dominant wie das Logo, schwächen sich beide gegenseitig.

Wie entwickeln Sie Markenmuster und welche Mustertypen eignen sich?

Ein Markenmuster ist eine Grundform, die sich nach einer Regel wiederholt. Diese Regel müssen Sie aufschreiben, sonst erfindet jeder Designer eine eigene Wiederholung. Die Tabelle fasst gängige Mustertypen und ihre Einsatzorte zusammen.

Nutzen Sie die Tabelle zunächst als Ausgangspunkt. Für die meisten Marken genügen zwei Mustertypen: einer für lebhafte Flächen und einer für ruhige Bereiche. Dann weiß das Team immer, welches Muster passt.

Hilfreich ist zudem eine ruhige Fassung jedes Musters, also eine kontrastarme und vereinfachte Variante. Sie funktioniert gut hinter textlastigen Layouts.

Was müssen die Nutzungsregeln für Markenmuster festlegen?

Wie Sie ein Markenmuster einsetzen, zählt ebenso viel wie das Muster selbst. Ohne schriftliche Regeln erscheint dasselbe Muster auf jeder Fläche in anderer Dichte, Farbe und Drehung. Nehmen Sie daher diese Festlegungen in den Styleguide auf:

• Größenbereich: Die kleinste und größte erlaubte Darstellung.
• Dichte: Abstand zwischen den Formen und Anteil an der Fläche.
• Farbpaare: Freigegebene Kombinationen aus Hintergrund und Musterfarbe.
• Anschnitt: An welchen Rändern das Muster auslaufen darf.
• Verhältnis zum Text: Ob Text auf dem Muster stehen darf und auf welcher Fläche.
• Falsche Nutzung: Drehen, Verzerren, beliebige Farben und Überlagerung mit dem Logo.

Vor allem die Textregel ist entscheidend. Eine unlesbare Überschrift auf einem Muster ist die häufigste Falle. Ein dichtes Muster nur am Rand zu nutzen, entlastet zum Beispiel die Textfläche in der Mitte. Muss Text auf dem Muster stehen, legen Sie eine einfarbige Fläche dahinter. So bleiben Lesbarkeit und Muster gleichzeitig erhalten.

Wie begrenzen Sie den Farbeinsatz in der grafischen Sprache?

Ihre Palette existiert meist schon. Trotzdem legt die grafische Sprache fest, wie sich diese Palette verteilt. Ein System, in dem jede Form jede Farbe tragen darf, gerät schnell außer Kontrolle. Bestimmen Sie daher freigegebene Farbpaare für Muster und Formen.

Bewährt hat sich die Aufteilung in drei Rollen: Hintergrundfarben, Elementfarben und eine Akzentfarbe. Setzen Sie den Akzent sparsam ein, dann behält er seine Wirkung. Berücksichtigen Sie zudem den Unterschied zwischen Bildschirm und Druck. Ein leuchtender Ton auf dem Bildschirm kann auf Papier matt wirken. Warum das so ist, erklärt unser Beitrag dazu, warum die Markenfarbe im Druck anders aussieht.

Auch Barrierefreiheit gehört zu dieser Entscheidung. Die Hinweise des W3C zum Kontrast grafischer Elemente verlangen für bedeutungstragende Grafiken mindestens ein Verhältnis von 3:1 zu angrenzenden Farben. Trägt also ein Icon oder eine Form eine Information, messen Sie den Kontrast.

Wie verbinden Sie den Iconstil mit der grafischen Sprache?

Icons sind der sichtbarste und zugleich am wenigsten geplante Teil der grafischen Sprache. Oft wählen Teams eine fertige Bibliothek, ohne sie mit den Linienregeln der Marke abzugleichen. Dann tauchen spitze Icons in einer weichen, abgerundeten Identität auf.

Entscheiden Sie beim Iconstil diese Punkte:

• Gefüllt, als Kontur oder gemischt?
• Passen Strichstärke und Eckenradius zu den Grundformen?
• Welches Raster und welcher Innenabstand gelten?
• Mehrfarbig, einfarbig oder einfarbig mit einem Akzentpunkt?
• In welchen Größen nutzen Sie die Icons, und wie stark vereinfachen Sie Details in der kleinsten Größe?

Nutzen Sie eine Bibliothek, dann wählen Sie sie anhand dieser Regeln. Fehlende Icons lassen Sie anschließend nach denselben Regeln zeichnen. Einen ausführlichen Auswahlprozess beschreibt unser Beitrag zum Thema Icon Set für die Website auswählen. Somit wirken Ihre Icons wie aus derselben Familie wie Ihre Markenmuster.

Wann lohnt sich fachliche Unterstützung beim Aufbau der grafischen Sprache?

Bestandsaufnahme, Sammlung vorhandener Materialien und eine Liste der Brüche schafft Ihr eigenes Team. Bedeutsame Formen aus dem Logo abzuleiten, sie mit Mustern, Icons und Bildregeln zu verbinden und das ganze System zu testen, verlangt allerdings Erfahrung im Identitätsdesign. Bleibt das System lückenhaft, kehren Teams zu ihren eigenen Deutungen zurück.

Deshalb behandeln wir die grafische Sprache als eine Ebene der Markenidentität und nicht als nachträgliche Dekoration. Muster, Icons und Bildsprache folgen dann derselben Logik wie Logo und Typografie. Wir bei Talha Aslan und Team sichten zuerst Ihre vorhandenen Materialien und trennen, was bleiben sollte. Danach ergänzen wir die fehlenden Ebenen. Die meisten Marken müssen nicht bei null anfangen, denn die richtigen Regeln machen vorhandene Elemente wieder wertvoll.

Arbeiten Sie intern weiter, dann halten Sie wenigstens Quelle und Grundformen schriftlich fest. Jede spätere Ebene hängt von diesen beiden Entscheidungen ab.

Wie legen Sie die Bildsprache einer Marke fest?

Fotografie ist die emotionalste Ebene der grafischen Sprache und oft die zerstreuteste. Nutzen verschiedene Kampagnen verschiedene Fotografen, Stockbilder und Filter, wechselt die Marke jedes Mal die Stimmung. Begrenzen Sie die Bildsprache deshalb auf wenige klare Prinzipien.

Diese Punkte empfehlen wir für den Styleguide:

1. Licht: Tageslicht oder Studiolicht, weich oder hart?
2. Farbe: Töne nahe der Palette oder neutral und gedämpft?
3. Ausschnitt: Nahes Detail, weite Umgebung oder Menschen im Fokus?
4. Motiv: Echte Mitarbeitende, Produkt, Ort oder ein Moment der Nutzung.
5. Vermeiden: Gestellte Stocklächeln, schwere Filter und Symbole ohne Bezug zur Marke.

Beschreiben Sie außerdem, wie Fotos und Muster zusammenwirken. Eine Grundform als Rahmen oder Maske über einem Foto verbindet zum Beispiel beide Ebenen. Dann bleibt die Marke vertraut, auch wenn die Motive wechseln.

Ein Beispielszenario: Eine Marke für handgefertigte Produkte bevorzugt warmes Tageslicht und nahe Aufnahmen arbeitender Hände. Auch mit mehreren Fotografen bleibt ihr Auftritt dank dieser zwei Prinzipien einheitlich.

Warum sind Regeln für Linien, Ecken und Rahmen so wichtig?

Kleine Entscheidungen prägen die Geschlossenheit eines Systems oft stärker als große. Nutzen alle Karten Ihrer Marke denselben Eckenradius, fällt eine Vorlage mit spitzen Ecken sofort auf. Definieren Sie Linien und Rahmen deshalb mit Zahlen.

Die wichtigsten Maße sind Strichstärke, Eckenradius, Innenabstand von Rahmen und Stil der Trennlinien. Notieren Sie zudem, wie sich diese Maße zwischen Bildschirm und Druck übertragen. Eine Linie, die am Bildschirm mit zwei Pixeln gut aussieht, wirkt auf einem kleinen Druckstück womöglich zu dünn.

Diese Regeln helfen auch im Webdesign. Denn Eckenradius, Strichstärke und Abstände lassen sich direkt in Komponenten der Oberfläche übernehmen. Wie Sie ein Identitätssystem auf die Website bringen, zeigt unser Beitrag zum Thema Styleguide auf der Website umsetzen.

Wie arbeiten Typografie und Formen zusammen?

Stammen Schrift und Formen aus verschiedenen Familien, entsteht ein leiser Widerspruch. Eine spitze geometrische Schrift neben weichen, welligen Mustern lässt das Auge zum Beispiel ratlos. Schauen Sie daher beim Ableiten der Formen auch auf Ihre Schrift.

Machen Sie zunächst einen schnellen Test. Betrachten Sie einige Buchstaben Ihrer Überschriftenschrift sehr groß. Sind die Ecken rund oder spitz? Ist die Strichstärke gleichmäßig oder wechselnd? Sind die Buchstaben schmal oder breit? Suchen Sie dann dieselben Merkmale in Ihren Grundformen. Stimmen sie überein, wirkt das System geschlossen.

Legen Sie außerdem eine Rangfolge zwischen Text und Muster fest. Die Überschrift gewinnt immer, sonst geht die Botschaft verloren. Auf einem Plakat darf das Muster den größten Teil der Fläche füllen, doch die Überschrift braucht Luft. Kurz gesagt arbeiten Typografie und Formen wie zwei Hälften desselben Satzes.

Wie skalieren Markenmuster über Größen und Flächen hinweg?

Ein Markenmuster, das auf einem Plakat beeindruckt, kann auf einem App Icon zum Rauschen werden. Gestalten Sie Markenmuster deshalb für eine Bandbreite an Größen, nicht für eine einzige. Die Logik der Logovarianten gilt auch hier.

Wir empfehlen drei Stufen. Auf großen Flächen wie Plakaten, Schildern und dem Startbereich der Website nutzen Sie das vollständige Muster. Danach folgen mittlere Flächen wie Beiträge und Folien, für die eine vereinfachte Fassung oder ein angeschnittenes Einzelelement passt. Kleine Flächen wie Favicons, Profilbilder und Abzeichen brauchen schließlich nur eine Grundform oder eine schlichte Farbfläche.

Dieser gestufte Ansatz entspricht dem Gedanken des responsiven Logos. Details finden Sie im Beitrag zu responsiven Logo Varianten. Zeigen Sie dann jede Stufe als Tabelle im Styleguide, mit je einem Beispielbild. Somit muss niemand raten.

Wie bereiten Sie Muster und Formen für den digitalen Einsatz vor?

Die technische Vorbereitung entscheidet, ob das System im Alltag besteht. Ein Markenmuster, das am Bildschirm des Designers perfekt aussieht, wirkt im falschen Format unscharf oder schwer. Planen Sie das Lieferpaket deshalb von Anfang an.

• Speichern Sie jede Form und jedes Muster als SVG Originaldatei.
• Bereiten Sie wiederholte Muster für das Web als kleine, kachelbare Stücke vor.
• Erstellen Sie Vorlagen in den gängigen Formaten für Social Media.
• Ergänzen Sie für den Druck Farbwerte und Beschnittzugabe.
• Nutzen Sie eine einheitliche Regel für Dateinamen, damit das Team die richtige Version findet.

Auch zur Barrierefreiheit ein Hinweis. Die Anleitung des W3C zu dekorativen Bildern empfiehlt für Bilder ohne Information ein leeres Alt Attribut und, wo möglich, die Einbindung als CSS Hintergrund. Muster gehören meist in diese Gruppe. Folglich hören Nutzer eines Screenreaders keine überflüssigen Beschreibungen.

Wie setzen Sie die grafische Sprache in Bewegung ein?

Videos für Social Media, Webanimationen und Folienübergänge sind die Orte, an denen sich die grafische Sprache bewegt. Ohne Bewegungsregeln wählt jeder Editor eigene Übergänge, eigenes Tempo und eigene Effekte. Dann wirkt eine Marke, die auf statischen Flächen einheitlich ist, im Video zerstreut.

Legen Sie daher einige Grundprinzipien fest:

• Wie erscheinen und verschwinden Formen: gleitend, wachsend oder einblendend?
• Welches Tempo gilt: ruhig und langsam oder energisch und schnell?
• In welche Richtung fließt ein bewegtes Muster?
• Welche Grundform dient in Übergängen als Maske?

Respektieren Sie auf der Website zudem die Einstellung für reduzierte Bewegung, denn manchen Menschen bekommt Bewegung nicht. So transportiert Bewegung die Energie der Marke, ohne jemanden zu ermüden. Derselbe Übergang in allen Videos hilft dem Publikum außerdem, Ihre Inhalte schon vor dem Logo zu erkennen.

Wie nehmen Sie Markenmuster und grafische Elemente in den Styleguide auf?

Leben Regeln nur im Kopf eines Designers, zerfällt das System beim ersten Teamwechsel. Deshalb braucht die grafische Sprache ein eigenes Kapitel. Für den Gesamtaufbau bietet unser Beitrag zu Inhalt und Vorlage für ein Markenhandbuch einen guten Rahmen.

Wir empfehlen diese Unterkapitel:

• Herkunft: Woher stammen die Formen und wofür stehen sie?
• Grundformen und Linienregeln mit Maßen.
• Mustertypen, Größen und Dichtebereiche sowie freigegebene Farbpaare.
• Iconstil und Raster.
• Bildsprache mit Beispielen für richtig und falsch.
• Eine Tabelle der Größenstufen.
• Beispiele für falsche Nutzung.
• Dateiliste und Speicherort.

Richtige und falsche Beispiele nebeneinander wirken stärker als lange Erklärungen. Denn ein Teammitglied sieht auf einen Blick, was akzeptabel ist. Ergänzen Sie das Kapitel zudem mit Vorlagen zum Herunterladen. Wer mit der richtigen Vorlage startet, statt Regeln zu lesen, macht weniger Fehler.

Was gehört in ein fertiges Vorlagenpaket?

Wie gut Sie die Regeln auch schreiben, die meisten Menschen lesen den Styleguide nie vollständig. Regeln in fertige Vorlagen einzubauen, ist deshalb der praktischste Weg zur Einheitlichkeit. Eine Vorlage macht die richtige Entscheidung zur Voreinstellung.

Ein Startpaket enthält:

• Vorlagen für Social Media im Quadrat, Hochformat und Storyformat.
• Eine Präsentationsvorlage mit Titel, Kapitel und Inhaltsseiten.
• Briefbogen, Angebotsdeckblatt und Kopfbereich für jede E-Mail.
• Beispiele für Startbereich der Website und Kampagnenbanner.

Fixieren Sie in jeder Vorlage die Position von Muster, Textfläche und Logo, damit das Team nur Text und Foto tauscht. Bauen Sie Vorlagen außerdem in den Programmen, die Ihr Team bereits nutzt. Dann muss niemand Dateien umwandeln und Einstellungen zerstören. Schließlich legen Sie alle Vorlagen in einen gemeinsamen Ordner, ergänzen eine Versionsnummer im Dateinamen und verschieben alte Fassungen ins Archiv.

Welche Fehler schwächen Markenmuster und grafische Sprache?

Nach unserer Erfahrung entstehen Probleme meist durch fehlende Regeln. Nutzen Sie diese Liste daher zur Prüfung Ihres Systems.

• Ein modisches Muster ohne Bezug zum Logo aufnehmen.
• Größen und Dichteregeln für Muster auslassen.
• Eine Iconbibliothek ohne Abgleich mit den Linienregeln wählen.
• In jeder Kampagne andere Filter nutzen, weil keine Bildsprache feststeht.
• Unlesbaren Text auf Muster setzen.
• Nur für Plakate gestalten und kleine Größen vergessen.
• Beispiele für falsche Nutzung im Styleguide weglassen.
• Das System nur mit dem Designteam teilen.

Ein modisches Markenmuster wirkt einige Monate reizvoll. Ist der Trend vorbei, wirkt allerdings auch die Marke veraltet. Kurz gesagt sollte die Quelle Ihrer grafischen Sprache die Marke selbst sein, nicht der Trend des Augenblicks. Vertrieb, Personalabteilung und Kundendienst erstellen ebenfalls Folien und Dokumente, also geben Sie auch ihnen einfache Vorlagen.

Wie bringen Sie die grafische Sprache einer bestehenden Marke in Ordnung?

Starten Sie nicht bei null, dann beginnen Sie mit einer Bestandsaufnahme. Sammeln Sie Beiträge, Folien, Verpackungen und Webseiten des letzten Jahres auf einer Tafel. Diese Tafel macht Brüche sofort sichtbar.

Danach sortieren Sie alles in drei Gruppen: behalten, korrigieren, streichen. Nutzt das Team bereits eine Form, die zur Marke passt, ist Behalten klüger als Neuerfinden. Elemente, die jedes Teammitglied anders einsetzt, kommen dagegen in die Gruppe zum Korrigieren.

Schließlich planen Sie den Übergang. Alles über Nacht auszutauschen, ist selten realistisch. Beginnen Sie deshalb mit den sichtbarsten Flächen wie dem Startbereich der Website und den Vorlagen für Social Media. Dann zeigt sich das neue System schnell, und andere Materialien aktualisieren Sie im natürlichen Erneuerungszyklus.

Wie testen Sie, ob Ihre Markenmuster wirklich funktionieren?

Ein einfacher und wirksamer Test: Verdecken Sie das Logo. Erkennen Menschen die Marke auf einem Beitrag oder einer Verpackung trotzdem, funktionieren Ihre Markenmuster und Ihre grafische Sprache. Andernfalls sind die unterstützenden Elemente nicht unverwechselbar genug.

Ein zweiter Test: Geben Sie mehreren Teammitgliedern dasselbe Briefing und lassen Sie jeweils eine Vorlage erstellen. Ähneln sich die Ergebnisse, sind die Regeln klar. Unterscheiden sie sich stark, hat der Styleguide eine Lücke. Nutzt zum Beispiel jeder das Muster in anderer Dichte, dann schreiben Sie die Dichteregel mit Zahlen neu.

Der dritte Test ist die Zeit. Sammeln Sie nach einigen Monaten erneut Materialien auf einer Tafel und prüfen Sie die Einheitlichkeit. Keiner dieser Tests garantiert ein Ergebnis. Dennoch zeigen sie früh, wo das System schwächelt, also planen Sie sie als Gewohnheit und nicht als einmalige Aktion.

Wie machen Sie die grafische Sprache zum festen Teil Ihrer Identität?

Dieses System hält nur, wenn es denselben Regeln folgt wie Logo, Farbe und Typografie. Gestalten Sie Muster, Icons, Fotos und Linien als Teile eines Systems, muss Ihr Team nicht bei jedem Inhalt neu anfangen, und Ihre Marke bleibt auch ohne Logo im Gedächtnis.

Möchten Sie dieses System gemeinsam aufbauen, können Sie Ihr Corporate Design entwickeln lassen und die grafische Sprache als eine der Kernebenen behandeln. Wir sichten Ihre Materialien, behalten, was funktioniert, ergänzen fehlende Ebenen und nehmen sie in Ihren Styleguide auf.

Arbeiten Sie lieber intern, dann nutzen Sie Mustertabelle, Entscheidungen zum Iconstil, Prinzipien der Bildsprache und Checklisten aus diesem Leitfaden als Arbeitsdokumente. Prüfen Sie das System zudem einmal im Jahr. So reift Ihre grafische Sprache zusammen mit Ihrer Marke.