Corporate Design digital umsetzen: So passen Sie Ihr gedrucktes Design für Website, Social Media und E-Mail an

Corporate Design ist das visuelle und sprachliche System einer Marke: Logo, Farben, Schriften und Tonalität. Wer ein Corporate Design aus der Druckwelt auf Bildschirme bringen will, braucht deshalb mehr als ein paar neu exportierte Dateien. In diesem Beitrag zeige ich die Fehler, die ich seit 2012 in Projekten sehe, und die Schritte, die in der Praxis funktionieren.
Wie bringen Sie ein gedrucktes Corporate Design in die digitale Welt?
Ein gedrucktes Corporate Design bringen Sie in die digitale Welt, indem Sie CMYK und Pantone Werte in RGB und HEX übersetzen, das Logo als SVG mit quadratischen Varianten neu aufbauen, die Webfont Lizenzen klären und alle Entscheidungen in einem digitalen Anhang zum Styleguide festhalten. Kurz gesagt: Es geht um ein Regelwerk, nicht um eine Dateikonvertierung.
In der Praxis teile ich die Arbeit in vier Ebenen. Zunächst kommt die Farbe: Sie legen fest, wie sich ein Ton, der auf Papier stimmt, am Bildschirm verhalten soll. Danach folgen die Dateien: Logo, Favicon, Profilbilder für Social Media und die Signatur für E-Mail brauchen jeweils eigene Ausgaben. Die dritte Ebene betrifft die Typografie, denn die Lizenz entscheidet, ob die Schrift der Visitenkarte auch auf die Website darf. Schließlich geht es um Verantwortung: Wer holt welche Datei von wo?
Dieser Beitrag ist kein Designkurs und erklärt auch nicht, wie Sie ein neues Logo entwerfen. Mein Ziel ist enger gefasst. Sie besitzen eine Identität für den Druck und möchten, dass Website, Social Media und E-Mail einheitlich aussehen. Falls die Identität selbst neu entstehen muss, beginnen Sie besser mit einem Projekt zur Markenidentität.
Warum wirkt ein Logo, das im Druck gut aussieht, am Bildschirm falsch?
Papier und Bildschirm erzeugen Farbe auf entgegengesetzten Wegen. Die Druckmaschine legt Cyan, Magenta, Gelb und Schwarz übereinander und nimmt so Licht weg. Der Bildschirm dagegen addiert rotes, grünes und blaues Licht. Deshalb sieht dieselbe Markenfarbe an beiden Orten nie exakt gleich aus. Allerdings können Sie den Unterschied mit den richtigen Werten so klein machen, dass niemand ihn bemerkt.
Das zweite Problem ist die Auflösung. Für Druckaufträge liefern Designer meist hochauflösende PDF oder EPS Dateien. Setzen Sie diese direkt auf eine Webseite, sind sie entweder viel zu schwer oder verlieren bei kleiner Größe ihre feinen Linien. Zum Beispiel wirkt eine zarte Unterzeile auf der Visitenkarte elegant. Als Symbol mit 32 Pixeln im Browsertab kann sie dagegen niemand mehr lesen.
Das dritte Problem ist der Kontext. Im Druck steht Ihr Logo meist auf weißem Papier. Digital trifft es auf Dark Mode, farbige Titelbilder, runde Zuschnitte von Profilbildern und E-Mail Programme mit eigenem Hintergrund. Also reicht eine einzige Logodatei nie aus. Sie brauchen für jeden Kontext eine vorab geplante Variante. Das Muster, das ich am häufigsten sehe: Ein Unternehmen kommt jahrelang mit einem JPG aus, und irgendwann zeigt jede Plattform eine leicht andere Marke.
Wie übersetzen Sie CMYK und Pantone Werte in RGB und HEX?
Wenn Sie Pantone Farben nutzen, ist der offizielle RGB und HEX Wert aus den digitalen Bibliotheken von Pantone der sicherste Startpunkt. Pantone veröffentlicht zu seinen Farben auch Bildschirmwerte. Haben Sie nur einen CMYK Wert, spielt das Farbprofil in Ihrer Designsoftware eine große Rolle. Derselbe CMYK Wert kann unter verschiedenen Profilen zu unterschiedlichen HEX Codes führen.
Diese Reihenfolge empfehle ich:
- Notieren Sie die Pantone oder CMYK Werte aus Ihrem Styleguide und das zugehörige Farbprofil.
- Nehmen Sie bei Pantone den offiziellen Digitalwert, sonst konvertieren Sie in der Designsoftware in den sRGB Arbeitsfarbraum.
- Vergleichen Sie den HEX Code auf mehreren Bildschirmen neben einem gedruckten Muster bei Tageslicht.
- Korrigieren Sie den Ton bei Bedarf leicht und notieren Sie den Grund im Styleguide.
- Behandeln Sie den finalen Wert als einzige verbindliche Quelle für das ganze Team.
Ein Punkt ist dabei wichtig. Eine mathematisch perfekte Umrechnung ist nicht das Ziel. Das Ziel ist vielmehr, dass Kunden Visitenkarte und Website nebeneinander sehen und sofort denken: dieselbe Marke. Daher trifft am Ende Ihr Auge im direkten Vergleich die Entscheidung, nicht ein Rechner. Zudem rate ich, sRGB als Standard für Webfarben anzunehmen, weil die meisten Browser und Displays in diesem Farbraum arbeiten.
Sind Ihre Markenfarben am Bildschirm barrierefrei, und wie prüfen Sie den Kontrast?
Helle Töne, die im gedruckten Corporate Design funktionieren, scheitern am Bildschirm oft als Textfarbe. Das WCAG Kontrastkriterium des W3C verlangt für normalen Text ein Verhältnis von mindestens 4,5:1 und für großen Text mindestens 3:1. Ein helles Orange kann zum Beispiel als große Überschrift auf Weiß bestehen. Als Fließtext reicht es dagegen meist nicht.
Deshalb empfehle ich, die digitale Palette in zwei Gruppen zu teilen: Akzentfarben und Textfarben. Akzentfarben nutzen Sie für Buttonflächen, Icons und Linien. Textfarben wählen Sie dagegen aus dunkleren Tönen, die den Kontrasttest bestehen. Fällt die Hauptfarbe durch, definieren Sie eine dunklere Version desselben Farbtons als digitale Textfarbe.
- Messen Sie das Kontrastverhältnis für jedes Farbpaar und halten Sie es im Styleguide fest.
- Prüfen Sie Buttontext und Buttonfläche separat.
- Verabschieden Sie sich bei Plattformen mit Dark Mode von der Annahme eines weißen Hintergrunds.
- Lassen Sie Farbe nie allein Informationen tragen, sondern ergänzen Sie bei Fehlermeldungen ein Icon oder Text.
Dieser Schritt zählt nicht nur für Barrierefreiheit, sondern auch für Conversions. Niemand klickt auf einen Button, den er nicht lesen kann. Denselben Punkt betone ich auch im Beitrag über conversionorientiertes Webdesign.
Welche Dateiformate brauchen Sie für das Logo?
Auf der Website ist SVG meine erste Wahl für das Logo. SVG basiert auf Vektoren, bleibt in jeder Größe scharf und ist oft leichter als PNG. Allerdings akzeptiert nicht jede Plattform SVG. Social Media Profile, manche E-Mail Programme und Marktplätze verlangen PNG oder JPG. Statt eines einzelnen Formats bauen Sie also ein Formatset auf.
| Einsatz | Empfohlenes Format | Hinweis |
|---|---|---|
| Kopfbereich der Website | SVG | Text in Pfade umwandeln, unnötigen Code entfernen |
| Social Media Profil | PNG oder JPG | Quadratisches Symbol, das einen runden Zuschnitt verträgt |
| Signatur in E-Mail | PNG | Viele Programme zeigen kein SVG |
| Favicon | ICO, PNG oder SVG | Quadratisch und schlicht |
| Druck und Beschilderung | PDF, EPS oder AI | Bleibt in CMYK oder Pantone |
| Präsentationen und Dokumente | PNG mit Transparenz | Hochauflösende Kopie behalten |
Varianten sind ebenso wichtig wie Formate. Ich empfehle mindestens vier: ein horizontales Vollogo, eine kompakte oder gestapelte Version, das Symbol allein und eine einfarbige Variante. Die einfarbige Variante rettet Sie auf dunklen Flächen und überall, wo der Kontrast knapp wird. Zudem sollte jede Datei einen klaren Namen tragen. In sechs Monaten weiß niemand mehr, was „logo_final_final2.png“ bedeutet.
Wie bereinigen Sie ein SVG Logo für das Web?
SVG Dateien aus Designprogrammen enthalten häufig überflüssige Metadaten, versteckte Ebenen und programmspezifischen Code. Dieser Ballast macht die Datei größer und sorgt manchmal für seltsame Darstellungen im Browser. Daher empfehle ich nach jedem Export eine kurze Aufräumrunde.
Zunächst wandeln Sie alle Texte im Logo in Pfade um. Sonst ersetzt der Browser die Schrift, falls sie auf dem Rechner des Besuchers fehlt, und Ihr Logo zerfällt. Danach löschen Sie versteckte Ebenen und ungenutzte Farbdefinitionen. Dann schicken Sie die Datei durch einen SVG Optimierer und prüfen das Ergebnis im Browser.
Dazu kommt ein Detail zur Barrierefreiheit. Verlinkt das Logo auf die Startseite, ergänzen Sie einen passenden Titel oder Alternativtext, damit Screenreader Ihren Markennamen vorlesen. Außerdem können Sie ein direkt im Code eingebettetes Logo über CSS Variablen steuern und im Dark Mode automatisch auf eine helle Version umschalten.
Schließlich lohnt ein Blick auf die Dateigröße. Ein einfaches Logo als SVG kommt selten über wenige Kilobyte hinaus. Ist Ihre Datei deutlich größer, steckt vermutlich ein eingebettetes Pixelbild darin, und der Vorteil des Vektors ist verloren. Warum das Seitengewicht zählt, erkläre ich im Beitrag wie die Ladezeit SEO beeinflusst.
Warum gehört das Favicon zum Corporate Design?
Das Favicon ist das kleine Symbol im Browsertab, in den Lesezeichen und neben Ihrer Website in den Google Suchergebnissen. Das heißt, viele Menschen begegnen Ihrer Marke zuerst über dieses winzige Quadrat, noch bevor sie Ihre Seite besuchen. Trotzdem fehlt es in vielen Styleguides komplett.
Die Favicon Richtlinien von Google verlangen ein quadratisches Symbol (1:1) mit mindestens 8x8 Pixeln. Zudem empfiehlt Google eine Datei größer als 48x48 Pixel, damit das Symbol auf verschiedenen Oberflächen gut aussieht. Außerdem muss Google das Symbol von Ihrer Startseite aus crawlen können.
Ein langes horizontales Logo in ein Quadrat zu pressen, funktioniert fast nie. Nutzen Sie stattdessen das Symbol, einen Anfangsbuchstaben oder ein schlichtes, aus dem Logo abgeleitetes Zeichen. Mein Praxistest ist einfach: Verkleinern Sie das Symbol auf 16 Pixel und sehen Sie es sich im Tab an. Erkennt man es noch, sind Sie auf dem richtigen Weg. Falls nicht, reduzieren Sie Details und verstärken Sie die Linien.
Bereiten Sie zudem größere PNG Versionen für die Verknüpfung auf dem Homescreen von Apple Geräten und für App Symbole unter Android vor. Somit trägt Ihre Website auf jedem Gerät dasselbe Zeichen.
Wie passen Sie das Corporate Design an Social Media Profile an?
Social Media ist der Ort, an dem ein Corporate Design am häufigsten zerbricht. Der Grund ist simpel: Jede Plattform setzt eigene Zuschnitte, eigene Größenempfehlungen und eigene Oberflächenfarben durch. Zudem ändern sich diese Maße immer wieder. Schreiben Sie deshalb keine feste Pixelliste in den Styleguide, sondern die Gewohnheit, die aktuellen Hilfeseiten der Plattformen zu prüfen.
Einige Grundsätze bleiben allerdings gleich:
- Profilbilder schneiden die Plattformen fast überall rund zu, halten Sie das Symbol also von den Rändern fern.
- Platzieren Sie Text auf Titelbildern im mittleren sicheren Bereich, denn Desktop und Mobilgeräte schneiden unterschiedlich zu.
- Nutzen Sie auf allen Plattformen dasselbe Profilbild, denn Wiedererkennung entsteht durch Konsistenz.
- Legen Sie Markenfarben und Schriften in Ihren Vorlagen fest, aber drucken Sie nicht auf jeden Beitrag ein Logo.
Ein YouTube Kanalbanner zum Beispiel belegt auf Fernseher, Desktop und Smartphone völlig unterschiedliche Flächen, deshalb gehört alles Wichtige in die Mitte. Genauso wichtig ist, dass Besucher aus Social Media auf Ihrer Website dieselbe Marke wiederfinden. Wie ich diese Brücke baue, beschreibe ich im Beitrag über Website Traffic aus Social Media.
Warum sind Linkvorschau und Open Graph Bild so wichtig?
Teilt jemand eine Seite Ihrer Website auf WhatsApp, LinkedIn oder Facebook, bestimmen die Open Graph Tags, was die Vorschaukarte zeigt. Fehlen diese Tags, wählt die Plattform irgendein Bild von der Seite, manchmal nicht einmal Ihr Logo. Folglich ist ein gebrandetes Vorschaubild ein stiller, aber sehr sichtbarer Teil Ihrer digitalen Identität.
Mein Vorgehen sieht so aus. Zuerst erstellen Sie ein Standardbild für die gesamte Website mit Markenfarben und Logo. Danach gestalten Sie für wichtige Seiten wie Leistungsseiten und Blogbeiträge eigene Bilder. So zeigt jeder geteilte Link dieselbe visuelle Sprache.
Wenn Sie die Tags nicht von Hand schreiben möchten, hilft Ihnen der Meta Tag Generator dabei, Titel, Beschreibung und Bild schnell festzulegen. Vermeiden Sie außerdem kleine Schrift auf Vorschaubildern, weil die Karte in mobilen Chat Apps winzig erscheint. Teilen Sie vor dem Livegang einen Testlink auf mehreren Plattformen und prüfen Sie den Zuschnitt. Möchten Sie Suchmaschinen Ihr Logo zusätzlich über strukturierte Daten mitteilen, lesen Sie meinen Leitfaden zu Schema Markup.
Wie gestalten Sie eine einheitliche Signatur für E-Mail?
Die Signatur ist ein Teil Ihrer Identität, den ein Unternehmen vielleicht hunderte Male am Tag verschickt. Trotzdem baut oft jeder Mitarbeiter seine Signatur nach eigenem Geschmack. Die Folge: Drei E-Mail aus derselben Firma zeigen drei verschiedene Logos und drei verschiedene Farben.
Eine gute Signatur bleibt schlicht: Name, Position, Telefon, Website und ein kleines Logo genügen. Exportieren Sie das Logo als PNG in doppelter Anzeigegröße und legen Sie die Breite im HTML fest, damit es auf hochauflösenden Displays scharf bleibt. Laden Sie das Bild von einer externen Adresse, denken Sie daran, dass manche Programme Bilder standardmäßig blockieren, und ergänzen Sie einen Alternativtext.
Außerdem empfehle ich, die Signatur mit einfachem, tabellenbasiertem HTML zu bauen. E-Mail Programme unterstützen modernes CSS sehr uneinheitlich, daher zerbrechen flexible Layouts, die auf der Website funktionieren, hier leicht. Nutzen Sie Gmail, dürfen Sie laut der Gmail Hilfeseite zur Signatur bis zu 10.000 Zeichen verwenden. Anders gesagt: Eine Signatur ist keine Broschüre.
Erstellen Sie schließlich eine einzige Vorlage, verteilen Sie diese an das ganze Team und nehmen Sie sie in den Styleguide auf. Für wechselnde Elemente wie Kampagnenbanner bestimmen Sie ebenfalls eine verantwortliche Person.
Welche Fehler bei der Signatur sollten Sie vermeiden?
Der häufigste Fehler, den ich sehe, ist eine Signatur aus einem einzigen Bild. Sie mag edel aussehen. Allerdings kann niemand die Telefonnummer antippen oder den Text kopieren, und bei blockierten Bildern sieht der Empfänger nur einen leeren Kasten. Solche Signaturen können zudem bei Spamfiltern negativ auffallen.
Der zweite Fehler besteht darin, jedes Social Media Konto aufzunehmen. Sieben Icons zerstreuen die Aufmerksamkeit, wählen Sie stattdessen die ein oder zwei Kanäle, die für Ihr Geschäft wirklich zählen. Der dritte Fehler ist das Vertrauen auf eigene Schriften. Fehlt Ihre Hausschrift auf dem Gerät des Empfängers, setzt das Programm eine andere ein. Deshalb ist eine Systemschrift, die Ihrer Marke nahekommt, in der Signatur die sicherere Wahl.
- Machen Sie die Signatur nicht zu einem Bild, sondern lassen Sie Text als Text.
- Fügen Sie Telefonnummer und Website als klickbare Links ein.
- Halten Sie rechtliche Hinweise kurz und setzen Sie diese unter die Signatur.
- Testen Sie die Signatur immer auf dem Smartphone und im Dark Mode.
Überspringen Sie den Test im Dark Mode nicht. Ein dunkles Logo auf transparentem Hintergrund verschwindet dort fast vollständig. Eine Version mit dünnem hellem Rand oder hellem Hintergrund erleichtert Ihnen deshalb vieles.
Dürfen Sie Ihre Hausschrift auf der Website verwenden?
Nicht immer. Eine Schrift, die Sie für Druckarbeiten gekauft haben, kommt oft nur mit einer Desktop Lizenz. Dieselbe Schrift auf einer Website einzubetten, also auf Ihrem Server abzulegen und an die Browser der Besucher zu senden, kann eine separate Weblizenz erfordern. Der erste Schritt ist also, herauszufinden, woher die Schrift stammt und unter welcher Lizenz sie steht.
Grob lassen sich Lizenzen in einige Gruppen teilen. Eine Desktop Lizenz deckt Printdesign und Bildproduktion ab. Die Weblizenz deckt hingegen das Einbetten auf einer Website ab, und manche Schriftanbieter berechnen sie nach monatlichen Seitenaufrufen. Eine App Lizenz gilt für mobile Anwendungen. Manche Anbieter lizenzieren zudem E-Mail und digitale Werbung separat.
Andererseits erleichtern offen lizenzierte Schriften vieles. Die Schriften bei Google Fonts stehen unter Open Source Lizenzen, und die Google Fonts FAQ bestätigt, dass Sie diese auch in kommerziellen Projekten nutzen dürfen. Ist die Weblizenz Ihrer Hausschrift zu teuer, definieren Sie eine ähnliche offen lizenzierte Schrift als digitale Partnerschrift. Entscheidend ist, dass Sie das als schriftliche Regel im Styleguide festlegen und nicht zufällig.
Wie beeinflussen Webfonts die Ladezeit?
Jede Schriftdatei ist eine zusätzliche Ressource, die der Browser laden muss. Definiert Ihre Identität vier Schriftschnitte und zwei Stile, bremst es die Seite ohne Grund, wenn Sie alle laden. Deshalb empfehle ich meist, sich digital auf zwei oder drei Schnitte zu beschränken: Regular, Bold und bei Bedarf Semibold.
Zudem liefern Sie Schriftdateien im modernen WOFF2 Format aus und laden nur die Zeichensätze, die Sie brauchen. Achten Sie darauf, dass Umlaute und das ß im Subset enthalten sind. Sonst erscheinen diese Buchstaben in einer anderen Schrift, und die Identität bricht. Das sehe ich in Projekten häufig, und oft fällt es erst spät auf.
Auch das Ladeverhalten zählt. Bleibt Text unsichtbar, bis die Schrift da ist, müssen Besucher warten. Besser ist meist, zuerst eine Systemschrift zu zeigen und dann zu wechseln. Weichen beide Schriften in der Größe stark ab, kann sich allerdings das Layout verschieben. Daher wählen Sie eine Ersatzschrift mit ähnlichen Maßen. Wie ich die Performance messe, zeige ich Schritt für Schritt im Beitrag zum Google Lighthouse Test.
Wie bleibt das Corporate Design auf mobilen Bildschirmen konsistent?
Auf dem Smartphone stehen die Regeln einer Identität vor ihrer härtesten Prüfung. Ein Handbuch für den Druck legt Schutzzone und Mindestgröße des Logos meist in Millimetern fest. Digital müssen Sie diese Regeln in Pixeln und Verhältnissen neu definieren.
Wirkt das horizontale Vollogo im mobilen Kopfbereich zum Beispiel winzig, ist die kompakte Version die bessere Wahl. Ebenso brauchen Sie für mobile Überschriften, Zeilenabstände und Buttongrößen eine eigene typografische Skala. Das heißt, der Styleguide sollte nicht nur sagen „das Logo misst mindestens 25 mm“. Er sollte auch sagen „kompaktes Logo im mobilen Kopfbereich, mindestens so hoch“.
Auch Touchflächen gehören zur Identität. Ein kleiner Link in Markenfarbe nützt nichts, wenn ihn kein Finger trifft. Somit nehmen Sie Buttonstile in den Styleguide auf und legen Mindestgrößen fest.
Warum Gestaltung auf dem Smartphone und nicht am Desktop beginnen sollte, erkläre ich im Beitrag was ist Mobile First Design, und derselbe Ansatz hilft bei der Anpassung einer Identität. Kurz gesagt: Ein System, das auf kleinen Bildschirmen funktioniert, funktioniert fast immer auch auf großen. Testen Sie außerdem auf echten Smartphones, denn ein verkleinertes Browserfenster liefert nicht immer dasselbe Ergebnis.
Was gehört in den digitalen Anhang Ihres Styleguides?
Ein Styleguide aus der Druckära ist meist ein PDF, das sich an die Druckerei richtet. Der digitale Anhang macht dieses Dokument für alle nutzbar, die am Bildschirm arbeiten. In meinen Anhängen sind diese Abschnitte Standard:
- Farbtabelle: Pantone, CMYK, RGB und HEX nebeneinander, dazu die Trennung von Text und Akzentfarben.
- Kontrastmatrix: welche Farbpaare für Text freigegeben sind.
- Logoset: Varianten, Formate, Mindestgrößen in Pixeln und Regeln für dunkle Hintergründe.
- Favicon und App Symbole.
- Typografie: Webfont, digitale Partnerschrift, Systemschrift als Ersatz, Schnitte und Größenskala.
- Social Media: Vorlagen für Profil und Titelbild sowie die Regel zum sicheren Bereich.
- Vorlage für die Signatur samt Anleitung.
- Vorschaubild und Präsentationsvorlagen.
Statt eines langen PDF legen Sie dieses Dokument besser in einen geteilten Ordner oder auf eine einfache interne Seite, die das Team leicht erreicht. So sehen nach jedem Update alle dieselbe Version. Verlinken Sie außerdem jede Datei direkt. Wenn Sie die Regeln erklären, die Dateien aber verstecken, nutzen die Leute trotzdem das alte Logo.
In welcher Reihenfolge sollten Sie die Umstellung angehen?
Nach meiner Erfahrung beginnt die gesündeste Reihenfolge mit einer Bestandsaufnahme. Listen Sie jeden Ort auf, an dem Ihre Marke erscheint: Website, Social Media Konten, Signaturen, Google Unternehmensprofil, Shops auf Marktplätzen, Präsentationsvorlagen und Angebotsdokumente. Notieren Sie dann, welches Logo und welche Farbe jeweils im Einsatz sind. Diese Liste bringt meist einige Überraschungen.
Danach treffen Sie die Grundentscheidungen: digitale Farbwerte, Logovarianten und die Lösung für die Schrift. Wer sich vorher an Titelbilder oder Signaturen macht, erledigt die Arbeit zweimal. Anschließend starten Sie mit den sichtbarsten Stellen: Kopfbereich der Website, Favicon und Profilbilder.
Signaturen, Dokumentvorlagen und Vorschaubilder kommen zuletzt. In dieser Phase empfehle ich ein kurzes Briefing für das Team. Sonst leben alte Dateien noch jahrelang auf den Desktops weiter. Steht ein Relaunch der Website an, planen Sie die Umstellung von Logo und Farben so, dass die Sichtbarkeit in der Suche erhalten bleibt. Muss die Website ohnehin neu entstehen, spart es Zeit, die Anpassung der Identität von Anfang an in das Webdesign einzubeziehen.
Worin unterscheiden sich gedruckte und digitale Identität?
Die Unterschiede beider Medien in einer Tabelle zu sehen, erleichtert die Erklärung im Team. Diesen Vergleich nutze ich in Besprechungen recht häufig:
| Thema | Druck | Digital |
|---|---|---|
| Farbmodell | CMYK, Pantone | RGB, HEX (sRGB) |
| Maßeinheit | Millimeter, Punkt | Pixel, rem, Verhältnisse |
| Logodatei | PDF, EPS, AI | SVG, PNG, ICO |
| Schriftlizenz | Desktop Lizenz | Web, App oder offene Lizenz |
| Hintergrund | Meist weißes Papier | Light Mode, Dark Mode, farbige Oberflächen |
| Qualitätsprüfung | Andruck | Tests auf Geräten und Browsern |
Die Tabelle zeigt vor allem eines: Eine digitale Identität ist kein einzelnes Ergebnis, sondern ein System, das wechselnde Bedingungen aushalten muss. Im Druck steht das Ergebnis fest, sobald Sie den Andruck freigeben. Digital erscheint dasselbe Logo jeden Tag auf hunderten Bildschirmen mit unterschiedlichen Einstellungen. Folglich müssen die Regeln flexibel, aber klar sein.
Wie verbinden QR Codes Drucksachen mit der digitalen Welt?
Die Umstellung verläuft nicht nur in eine Richtung, denn auch Drucksachen sollten eine Brücke zur digitalen Identität schlagen. Ein QR Code auf Visitenkarte, Broschüre oder Verpackung führt Kunden direkt auf Ihre Website oder eine Kampagnenseite. Damit wird der QR Code selbst zum Teil der Identität.
Sie können einen QR Code in Markenfarben erzeugen, solange er lesbar bleibt. Halten Sie einen starken Kontrast zwischen dunklen Modulen und hellem Hintergrund. Invertierte Codes mit hellen Modulen auf dunklem Grund bereiten manchen Scanner Apps Probleme. Lassen Sie zudem eine Ruhezone um den Code frei und testen Sie ihn vor dem Druck mit verschiedenen Smartphones. Für einen schnellen Versuch eignet sich der QR Code Generator.
Außerdem empfehle ich, die Zieladresse mit einem Tracking Parameter zu versehen. Dann sehen Sie in Ihrer Analyse, wie viele Besuche eine Drucksache gebracht hat. Dieser kleine Schritt bringt gedruckte und digitale Identität unter ein gemeinsames Messdach.
Wie halten Sie das Corporate Design nach der Umstellung konsistent?
Die Anpassung eines Corporate Design erledigen Sie nicht einmal und vergessen sie dann. Mit neuen Mitarbeitern, Agenturen und Plattformen schwindet die Einheitlichkeit langsam. Deshalb rate ich zum Abschluss zu einer klaren Zuständigkeit: Eine Person verantwortet die digitalen Markendateien, und die aktuelle Version liegt an genau einem Ort.
Die Routine, die ich empfehle, ist einfach. Prüfen Sie ein oder zwei Mal im Jahr alle Kanäle und aktualisieren Sie die Bestandsliste. Eröffnen Sie eine neue Plattform, schauen Sie zuerst in den Styleguide und gestalten Sie erst dann. Externe Teams erhalten den digitalen Anhang am ersten Tag. Vor allem bei Kooperationen mit Influencern, Agenturkampagnen und Shops auf Marktplätzen zahlt sich dieser Schritt aus.
Messen Sie schließlich weiter. Die Wirkung einer konsistenten Identität lässt sich schwer in einer einzigen Kennzahl fassen. Trotzdem liefern der Verlauf der Markensuchen und das Verhalten von Besuchern aus Social Media auf Ihrer Website ein brauchbares Signal. Fällt Ihnen die Anpassung mit dem eigenen Team schwer, schreiben Sie mir über die Seite Kontakt, dann starten wir mit einer Bestandsaufnahme Ihrer aktuellen Situation.




