1920 × 1080 px
JPG im RGB- oder sRGB-Farbraum, angelegt im Seitenverhältnis 16:9. Text und Logo sollten nicht bis an die Motivkanten laufen.
Banner-Spezifikationen
Homepage Spotlight responsive denken und sicher gestalten.
Das Motiv wird auf Desktop, Tablet und Smartphone unterschiedlich gerahmt. Gute Banner planen deshalb sichtbare Pflichtbereiche und flexible Randbereiche von Anfang an mit.
Das hier gezeigte Bannerbeispiel zeigt ein nahezu optimales Setup: starke Bildwirkung, zentrale Botschaft, klare Lesbarkeit und genug Ruheflächen, damit die Bühne auf allen Viewports funktioniert.
Grundformat
Liefern Sie ein Motiv, das mehr kann als nur 16:9.
Die Datei wird im Querformat angelegt, aber nicht jeder Viewport zeigt jeden Bereich gleich. Entscheidend ist, dass die zentrale Aussage auch dann erhalten bleibt, wenn die Bühne schmaler wird oder die Navigation Teile der Fläche überlagert.
Wichtige Inhalte zentral halten
Headline, Logo, Datum und Hauptmotiv gehören in den dauerhaft sichtbaren Bereich der Vorlage. Randbereiche funktionieren besser für Atmosphäre, Muster oder Bildverlängerung.
Oben Abstand lassen
Die Navbar kann den oberen Bereich überdecken. Dort sollten keine Pflichtinformationen, Gesichter, Logos oder feinen Typografieelemente liegen.
Nur Bild liefern, Text von uns setzen lassen
Alternativ können Sie nur ein starkes Bildmotiv liefern. Headline, Subline und Button-Text setzen wir dann in unserem Designsystem auf die Fläche. Das wirkt redaktioneller, bleibt responsiv kontrollierbar und passt besonders gut, wenn kein fertiges Anzeigenlayout vorliegt.
Vorlage
Die Hilfsdatei zeigt sichtbare und kritische Zonen.
Nutzen Sie die Vorlage als Orientierung beim Layout. Sie markiert Bereiche, die auf allen Geräten sichtbar bleiben, Zonen mit möglicher Navbar-Überdeckung und Flächen, die auf Tablet oder Smartphone aus dem sichtbaren Ausschnitt fallen können.
- Pflichtinformationen in den immer sichtbaren Bereich setzen
- oberen Sicherheitsabstand für die Navigation einhalten
- Randbereiche nur für Hintergrund, Stimmung oder Anschnitt verwenden
- Motiv zusätzlich in schmalen Viewports prüfen
Responsive Beispiele
So verändert sich dasselbe Motiv je nach Viewport.
Die Screenshots zeigen, warum ein Banner nicht nur als große Desktopgrafik gedacht werden darf. Das Motiv muss in mehreren Ausschnitten funktionieren.
Design-Checkliste
Vor der Abgabe einmal gegenprüfen.
Diese Punkte verhindern die häufigsten Probleme bei responsiven Spotlight-Bannern.
Text groß und kurz halten
Headline, Datum und Ort müssen auch auf Smartphone-Screens lesbar bleiben. Lange Copy gehört nicht in das Banner.
Kontrast bewusst planen
Text braucht eine ruhige Fläche, Abdunklung oder klare Farbtrennung. Unruhige Bildstellen reduzieren die Lesbarkeit sofort.
Ränder als flexible Zone behandeln
Links, rechts und oben sollten nur Inhalte liegen, die ohne Bedeutungsverlust angeschnitten oder verdeckt werden können.
Motiv nicht überladen
Ein klares Key Visual, eine zentrale Aussage und ein Logo funktionieren besser als viele gleich wichtige Elemente.
Navbar-Zone freihalten
Im oberen Bereich keine Gesichter, Logos, Sponsorenzeilen, Datumstexte oder wichtige Bilddetails platzieren.
Mit Vorlage final prüfen
Die Hilfsdatei zeigt, welche Bereiche dauerhaft sichtbar sind und welche Bereiche auf mobilen Viewports verschwinden können.
Call-to-action einplanen
Ein klarer Handlungsimpuls erhöht die Wirkung deutlich. Nutzen Sie einen kurzen Button-Text wie Tickets sichern, Mehr erfahren, Jetzt anmelden oder Angebot ansehen.
Nur Bild nutzen
Wenn kein fertiges Bannerlayout vorliegt, liefern Sie nur das Bild. Wir ergänzen Headline, Subline und Call-to-action im passenden kulturgehtweiter-Look.
Abgabe
Banner fertig? Wir prüfen den responsive Fit.
Senden Sie das finale Motiv zusammen mit der Ziel-URL. Wir kontrollieren vor der Veröffentlichung, ob wichtige Inhalte auf Desktop, Tablet und Smartphone sichtbar bleiben.
Was this article helpful?