Banner-Design: die Regeln für wirksame Werbebanner

Ein Banner wird nicht gelesen, es wird gestreift. Deshalb braucht jedes Motiv eine feste Rangfolge, die der Blick in Bruchteilen einer Sekunde abarbeiten kann: erst der Absender, dann das Angebot, dann die Handlung. Logo, Headline, optional eine Subline, ein Button — mehr Ebenen verträgt die Fläche nicht.

Das Logo gehört an eine feste Position, in der Regel oben links oder oben rechts, und behält diese Position über alle Formate. Wer es mal oben, mal unten platziert, zerstört die Wiedererkennung, die genau der Grund für ein einheitliches Set ist. Die Headline ist das größte Element und trägt die eine Aussage, um die es geht. Der Button ist das einzige Element, das aus der Farbwelt ausbrechen darf, weil er sonst untergeht.

Was nicht ins Banner-Design gehört: zwei Angebote nebeneinander, ein zweiter Handlungsaufruf, Fließtext, Preisangaben im Kleingedruckten. Jedes zusätzliche Element verlängert die Zeit bis zum Verstehen — und die hat niemand.

Der häufigste Fehler im Banner-Design ist Text direkt auf einem Foto. Was auf dem Designer-Monitor noch lesbar wirkt, verschwindet auf einem hellen Notebook-Display im Sonnenlicht. Als Untergrenze gilt ein Kontrastverhältnis von 4,5:1 zwischen Textfarbe und Untergrund — derselbe Wert, den auch die Barrierefreiheits-Richtlinien für Fließtext verlangen.

Praktisch löst man das mit einer Fläche unter dem Text, einem abgedunkelten Verlauf über dem Bildbereich oder einem ruhigen Bildausschnitt, der genug freie Fläche lässt. Auch Markenfarben helfen nicht immer: Ein helles Gelb aus dem Corporate Design trägt weißen Text nicht. Dann bekommt der Button die Markenfarbe und der Text eine dunkle Variante davon.

Eine feste Schriftgröße für alle Banner funktioniert nicht. In 300×600 hat eine Headline reichlich Platz, in 320×50 bleiben knapp fünfzig Pixel Höhe für Logo, Text und Button zusammen. Die Schriftgröße muss deshalb aus zwei Werten abgeleitet werden: der verfügbaren Fläche und der Länge des Textes.

Für die Praxis heißt das: In den großen Formaten wie 300×600, 336×280 oder 1080×1350 darf die Headline zwei bis drei Zeilen laufen. In den mittleren Formaten wie 300×250 oder 728×90 sind es maximal zwei Zeilen, und die Subline entfällt oft. In den schmalen mobilen Formaten 320×50 und 320×100 bleibt nur eine kurze Zeile plus Button. Wer denselben Text überall unterbringen will, bekommt entweder unleserlich kleine Schrift oder abgeschnittene Wörter.

Die konsequente Lösung ist ein Layout pro Formfaktor statt eines Layouts für alle: gestapelt bei quadratischen und hohen Bannern, streifenförmig bei den breiten Leaderboards, kompakt bei den mobilen Größen. Innerhalb eines Formfaktors bleibt die Optik gleich, zwischen den Formfaktoren ändert sich die Anordnung, nicht die Marke.

Nicht jede Fläche eines Banners ist sicher. Bei responsiven Google-Ads-Assets beschneidet das System die Ränder je nach Platzierung — wichtige Bildinhalte und Logos gehören deshalb in die Mitte, nicht an den Rand. Bei Instagram- und Facebook-Stories überlagern Profilzeile oben und Interaktionselemente unten das Motiv; die oberen und unteren Bereiche des 1080×1920-Formats bleiben besser frei von Text.

Für klassische Display-Banner gilt umgekehrt: Ein sichtbarer Rand oder eine farbige Fläche ist Pflicht, wenn das Motiv überwiegend weiß ist. Sonst verschwimmt die Anzeige mit der Publisher-Seite, und viele Netzwerke lehnen sie deshalb ab. Innenabstand sollte durchgehend vorhanden sein — Text, der an der Kante klebt, wirkt unfertig und wird bei Skalierung als Erstes beschnitten.

Banner-Design endet nicht am Bildrand, sondern bei der Datei. Für Bildanzeigen in Display-Netzwerken gilt in der Regel eine Obergrenze von 150 KB; Google Ads lehnt größere Dateien ab. Das ist bei fotografischen Motiven schnell erreicht, weshalb die Wahl des Dateiformats zur Gestaltungsentscheidung wird.

PNG eignet sich für Motive mit klaren Flächen, Logos und viel Text, weil Kanten scharf bleiben. JPG ist die bessere Wahl, sobald ein Foto den Großteil der Fläche einnimmt. GIF lohnt nur für sehr einfache Animationen, WebP und SVG werden von vielen Adservern und Mail-Clients nicht angenommen. myfeedr liefert deshalb jedes Format sowohl als PNG als auch als JPG, dazu eine Variante in doppelter Auflösung für Retina-Displays.

Der kürzeste Weg zu einem besseren Motiv führt nicht über zusätzliche Gestaltung, sondern über Weglassen. Nimm ein typisches erstes Ergebnis in 300×250: oben der Firmenname, darunter ein Claim, rechts ein freigestelltes Produktfoto, unten drei Aufzählungspunkte mit Vorteilen, in der Ecke ein dekorativer Pfeil und am Rand noch der Hinweis auf versandkostenfreie Lieferung. Inhaltlich stimmt jedes einzelne Element. Zusammen ergeben sie eine Fläche, auf der nichts heraussticht.

Der Nachher-Zustand entsteht durch vier Streichungen. Die drei Vorteile fallen weg, weil in der halben Sekunde ohnehin nur einer ankommt — der stärkste wird zur Headline befördert. Der Claim verschwindet, weil er an dieser Stelle niemanden zum Klicken bewegt. Der Versandhinweis wandert auf die Zielseite, wo er ohnehin noch einmal auftaucht. Und der Pfeil wird zur Schaltfläche mit einem Verb, denn ein Pfeil zeigt zwar eine Richtung, sagt aber nicht, was danach passiert.

Übrig bleiben vier Elemente, und die frei gewordene Fläche ist kein Verlust: Sie ist der Grund, warum die Headline jetzt deutlich größer stehen kann und das Produktfoto atmen darf. Diese Übung macht man einmal pro Kampagne, nicht einmal pro Format — und genau ab diesem Punkt lässt sich eine Aussage überhaupt sinnvoll in zwanzig Seitenverhältnisse übertragen. Ein überfrachtetes Motiv wird in 320×50 nicht kleiner, sondern unbrauchbar.

Manche Fehler haben nichts mit Können zu tun, sondern damit, dass am Bildschirm alles größer wirkt als im ausgelieferten Werbeplatz. Diese fünf begegnen einem in fast jedem ersten Entwurf:

Alle genannten Regeln sind berechenbar — und genau deshalb muss sie niemand pro Format von Hand umsetzen. Wenn du deine Adresse einträgst, liest myfeedr Logo, Farbwerte, Schriften, Texte und Produktbilder aus deiner Website und leitet daraus das Design ab: Es prüft den Kontrast der Markenfarben gegeneinander, wählt bei Bedarf eine dunklere oder hellere Variante für Text, berechnet die Schriftgröße aus Boxmaß und Textlänge, hält Innenabstände ein und entscheidet je Seitenverhältnis über gestapeltes, kompaktes oder streifenförmiges Layout.

Was dir bleibt, sind die inhaltlichen Entscheidungen: Headline, Button-Text, Farbe, Produkt oder Motiv, Bildausschnitt — und drei Layout-Varianten, zwischen denen du umschalten kannst. Jede Änderung wirkt auf alle 38 Formate gleichzeitig. Die Vorschau mit Wasserzeichen ist kostenlos, das komplette Set gibt es ab 79 € einmalig.