Ein neues Logo ist für viele Unternehmen der erste sichtbare Schritt ihrer eigenen Marke. Auf Visitenkarte und Briefpapier wirkt es meist genau so, wie es gedacht war. Auf der Website sieht das oft anders aus: Das Signet ist im mobilen Menü kaum zu erkennen, die Farbe wirkt am Bildschirm blasser als im Druck, und die Schrift, die man sich so sorgfältig ausgesucht hat, darf online gar nicht verwendet werden.
Warum Print und Screen unterschiedlich funktionieren
Print arbeitet mit festen Formaten: Ein Flyer hat eine bestimmte Größe, Farben werden in CMYK oder als Pantone-Ton gedruckt, und das Logo steht immer an der gleichen Stelle. Eine Website wird dagegen auf Displays zwischen rund 320 und weit über 2.500 Pixeln Breite angezeigt. Wir sehen heute Logos nicht mehr nur auf Briefpapier, sondern viele tausend Mal am Tag, mal auf einem kalibrierten Monitor im Büro, mal auf einem alten Smartphone in der Sonne. Daraus ergeben sich eigene Anforderungen: Farben brauchen RGB und HEX-Werte, Schriften eine Weblizenz, das Logo muss auch in sehr kleinen Größen funktionieren.
Egal, ob diese Website nun eine Webagentur aus der Schweiz, ein Studio in Hamburg oder ein freier Entwickler baut, die erste Phase eines jeden Projekts dient meist genau dieser Übersetzung. Vorhandene Markenelemente werden gesichtet, auf digitale Tauglichkeit hin geprüft und um fehlende Varianten ergänzt. Wer sich diese Fragen bei der Logoentwicklung gleich mitbedacht, ist später auf der sicheren Seite und spart sich Arbeitszeit und Korrekturschleifen.
Das Logo in mehreren Varianten denken
Ein Logo reicht für das Web nicht aus. Qualitativ bewährt hat sich ein responsives Logosystem mit abgestuften Varianten:
- Hauptlogo: die vollständige Version mit Wort-Bild-Marke und ggf. Claim, für Desktop-Header und Startseite
- Kompakt-Variante: ohne Claim, oft in horizontaler Anordnung, für schmale Header und mobile Ansichten
- Bildmarke allein: das Signet ohne Schriftzug, für App-Icons oder Social-Media-Profile
- Favicon: stark vereinfachte Form, die im Browser-Tab noch bei 16 × 16 und 32 × 32 Pixeln erkennbar bleibt
- Für Apple-Geräte wird zusätzlich ein Touch-Icon mit 180 × 180 Pixeln benötigt, für installierbare Web-Apps ein Icon mit 512 × 512 Pixeln
Das bevorzugte Dateiformat für Logos im Web ist SVG. Vektorgrafiken bleiben auf hochauflösenden Bildschirmen gestochen scharf und sind meist nur wenige Kilobyte groß. Eine einfarbige und eine negative Version gehören ebenfalls zum Paket. Spätestens wenn die Website einen Dark Mode bietet, wird sie benötigt. Mindestgröße und Schutzzone sollte im Styleguide nicht nur in Millimetern, sondern auch in Pixeln angegeben werden.
Farben und Kontraste nach WCAG
Das Umrechnen von CMYK auf RGB ist kein linearer Prozess. Manchen Pantone-Tönen kommt man am Monitor nur nahe, umgekehrt sind im Druck die strahlenden RGB-Grüntöne kaum zu erreichen. Sauber definiert ist eine Hausfarbe erst, wenn für sie Pantone-, CMYK-, RGB- und HEX-Werte festgelegt und am Monitor geprüft wurden.
Nicht zu vergessen: die Barrierefreiheit. Die Web Content Accessibility Guidelines (WCAG) verlangen auf Konformitätsstufe AA ein Kontrastverhältnis von mindestens 4,5:1 zwischen normalem Text und Hintergrund, für großen Text und für Bedienelemente und informationstragende Grafiken 3:1. Helle Markenfarben wie Gelb, Mint oder Hellblau verfehlen diese Werte auf weißem Grund fast immer.
Die übliche Lösung: Die Originalfarbe bleibt Flächen, Illustrationen und Akzenten vorbehalten. Für Texte und Buttons muss eine dunklere Abstufung eingestellt werden, die der Kontrastforderung genügt.
Typografie: Lizenzen, Formate & Lesbarkeit
Eine gekaufte Desktop-Lizenz gestattet in aller Regel nur die Verwendung auf dem eigenen Rechner, also etwa für Drucksachen. Die Einbindung auf einer Webseite erfordert eine gesonderte Webfont-Lizenz, die meist nach Seitenaufrufen pro Monat abgerechnet wird. Auf diesen Punkt wird bei der Gestaltung oft nicht geachtet, er ärgert dann bei der Umsetzung.
Technisch hat sich WOFF2 als Format durchgesetzt, weil es die Schriftdateien stark komprimiert. Kostenlose Schriften wie Google Fonts sollten besser lokal auf dem eigenen Server liegen, da das Landgericht München 2022 entschieden hat, dass die dynamische Einbindung über Google-Server ohne Zustimmung gegen die DSGVO verstößt, weil dabei die IP-Adressen übermittelt werden.
Für die Lesbarkeit haben sich einige Richtwerte herausgebildet:
- Grundschriftgröße für Fließtext ab 16 Pixeln
- Zeilenlänge von etwa 60 bis 75 Zeichen
- Zeilenabstand um das 1,5fache der Schriftgröße
Variable Fonts fassen mehrere Schriftschnitte in einer Datei zusammen und senken damit die Ladezeit.
Vom Styleguide zum Designsystem
Ein klassischer Styleguide als pdf beschreibt Logo, Farben und Schriften. Wesentliche Bausteine fehlen, wenn man den Inhalt einer Webseite betrachtet. Digitale Oberflächen bestehen aus immer wiederkehrenden Komponenten, aus Buttons, Formularfeldern, Karten, Navigationselementen. Jede hat mehrere Zustände: normal, hover, fokus, disabled, faulty.
Ein Designsystem hält all diese Komponenten mit ihren Zuständen fest, häufig direkt aus dem Gestaltungsprogramm wie Figma. Abstände orientieren sich meist an einem festen Raster, häufig in 8er-Schritten. Farben, Schriftgrößen und Abstände lassen sich als sogenannte Design Tokens definieren, also als benannte Variablen, die Designer und Entwickler gleichermaßen verwenden. Ändert sich ein Wert, wird er an einer Stelle geändert, und er ist an unzähligen anderen Stellen im ganzen Auftritt geändert.