Brand Basics
Display-Medien sind durch ihre extremen Größen und Formate besonders anspruchsvoll. Vor allem bei kleinen Mobile-Formaten ist es wichtig, Inhalte stark zu reduzieren und schnell auf den Punkt zu kommen.
Bannermedien sind performancegetrieben und stehen oft in direkter Konkurrenz zu anderen Medieninhalten. Deshalb müssen Botschaft, Gestaltung und CTA gut sichtbar sein und sofort verstanden werden.
Wenn der Platz knapp wird, verzichte lieber auf ein Bild- oder Illustrationsmotiv. Für mehr Inhalt eignet sich ein animierter Banner. So kannst du Informationen auf mehrere Frames verteilen, ohne das Layout zu überladen.
Prinzipien
Banner können statisch, animiert oder interaktiv eingesetzt werden. Statische Banner funktionieren z. B. wie klassische Bildformate und kommen ohne Bewegung aus. Animierte Banner, zum Beispiel HTML5-Banner, arbeiten mit bewegten Texten, Elementen oder Übergängen und können eine kurze Abfolge erzählen. Interaktive Banner erweitern diese Möglichkeiten um kleine Nutzeraktionen wie Hover-Effekte oder einfache Interaktionen. Sie sind komplexer in der Umsetzung und sollten deshalb gezielt eingesetzt werden.
Selbstverständlich stehen alle Banner auch als Templates zur Verfügung.
Mobile Banner
Standard Mobile Banner (320×50)
Standard Mobile Banner bieten eine sehr hohe Reichweite. Durch ihre geringe Größe sind sie gestalterisch aber besonders anspruchsvoll. Halte die Headline deshalb so kurz und plakativ wie möglich. Verzichte auf unnötige Informationen und konzentriere dich auf eine klare Botschaft, die schnell verstanden wird.
Größen ändern sich schnell. Informiere dich regelmäßig über die aktuellen Spezifikationen.
Das Layout der Banner ist bewusst einfach und klar aufgebaut. Vermeide unnötige Komplexität, denn je klarer die Struktur, desto schneller wird dein Banner verstanden.
Für möglichst viel Spielraum stehen dir die Standard Mobile Banner in drei Varianten zur Verfügung.
Bannermedien sind performancegetrieben. Auf kleiner Fläche müssen Headline, Informationen und CTA schnell verständlich platziert werden. Animierte Banner sind deshalb eine gute Option. Sie verteilen Inhalte auf mehrere Frames und sorgen dafür, dass das einzelne Layout klar und aufgeräumt bleibt.
Animierte Banner ermöglichen nicht nur mehr Inhalt, sondern erzeugen durch Bewegung auch zusätzliche Aufmerksamkeit.
Aufgrund der geringen Bannergröße sind Bild- oder Illustrationsmotive hier ausnahmsweise nur links angeordnet.
Auch Störer lassen sich integrieren, wenn der Platz es zulässt.
Large Mobile Banner (320×100 )
Large Mobile Banner bieten die doppelte Höhe und damit deutlich mehr Sichtbarkeit. Sie werden deshalb zunehmend bevorzugt eingesetzt. Durch die zusätzliche Fläche kannst du etwas mehr Inhalt integrieren als beim Standard Mobile Banner. Trotzdem gilt auch hier: Halte die Headline so kurz und plakativ wie möglich. Konzentriere dich auf eine klare Botschaft, die schnell verstanden wird.
Größen ändern sich schnell. Informiere dich regelmäßig über die aktuellen Spezifikationen.
Zur leichteren Gliederung sind die Banner in unterschiedliche Bereiche aufgeteilt. Der Contentbereich kann flexibel mit Headlines und Texten in unterschiedlichen Größen bespielt werden. Der Logobereich ist ausschließlich für unsere Kommunikationsmarke vorgesehen.
Der Abstand zwischen Content- und Logobereich sorgt dafür, dass unsere Kommunikationsmarke auch in kleinen Größen gut sichtbar bleibt.
Statt alle Informationen auf einmal zu zeigen, können Banner Inhalte Schritt für Schritt aufbauen. So bleibt jeder Frame übersichtlich, und Headline, Zusatzinformation und CTA bekommen jeweils genügend Raum.
Da hier mehr Platz zur Verfügung steht, kannst du auch mit unterschiedlichen Headlinegrößen arbeiten.
Bild- oder Illustrationsmotive können rechts oder links angeordnet werden. Auch Störer lassen sich integrieren, wenn der Platz es zulässt.
Spiele mit unterschiedlichen Headlines. Je nach Länge kannst du auch den Bildbereich verschieben, damit Text und Motiv gut zusammenspielen.
Desktop Banner
Medium Rectangle (300 × 250)
Medium Rectangles sind vergleichsweise einfach in der Handhabung. Nicht ohne Grund gehören sie zu den meistgebuchten Bannerformaten weltweit. Durch ihre Nähe zu klassischen Social-Media-Posts wirken sie im Aufbau vertraut und lassen viel gestalterische Freiheit: links- oder rechtsbündige Headlines, Text im oberen oder unteren Bereich und eine flexible Abstimmung auf Motiv und Aussage.
Größen ändern sich schnell. Informiert euch regelmäßig über die aktuellen Spezifikationen.
Auch gestalterisch orientieren sich diese Banner an den Social-Media-Anwendungen. Die Größe der Kommunikationsmarke entspricht der Hälfte der Save Zone. Auch die Layoutprinzipien bleiben weitgehend gleich: klare Textführung, ausreichend Abstand und eine eindeutige Hierarchie.
Die Save Zone kannst du ähnlich wie bei Social-Media-Posts ermitteln.
Gerade wenn mehrere Informationen untergebracht werden sollen, helfen animierte Banner. Sie bauen die Botschaft Schritt für Schritt auf und geben Headline, Zusatzinformationen und CTA jeweils den nötigen Raum.
Natürlich sind auch Animationen aus nur 2 Frames möglich.
Spiele mit Buttons oder Störern. Wähle dabei den CTA, der am besten zur Aussage und zum Ziel deines Banners passt.
Je nach Aussage kann eine Illustration stärker auffallen als ein Bildmotiv. Sie wirkt oft reduziert und bringt die Botschaft schneller auf den Punkt.
Leaderboard / Superbanner (728 × 90)
Superbanner sind durch ihr breites, horizontale Format etwas anspruchsvoller in der Gestaltung. Sie bieten weniger Höhe, dafür aber viel Raum in der Breite. Headlines sollten kurz, klar und schnell erfassbar sein. Besonders gut funktionieren prägnanten Botschaft oder animierte Versionen.
Größen ändern sich schnell. Informiert euch regelmäßig über die aktuellen Spezifikationen.
Leaderboard / Superbanner (728 × 90)
Das Layout der Banner ist bewusst einfach und klar aufgebaut. Vermeide unnötige Komplexität, denn je klarer die Struktur, desto schneller wird der Banner verstanden.
Größen ändern sich schnell. Informiert euch regelmäßig über die aktuellen Spezifikationen.
Bannermedien sind performancegetrieben. Auf kleiner Fläche müssen Headline, Informationen und CTA schnell verständlich platziert werden. Animierte Banner sind deshalb eine gute Option. Sie verteilen Inhalte auf mehrere Frames und sorgen dafür, dass das einzelne Layout klar und aufgeräumt bleibt.
Natürlich sind auch Animationen aus nur 2 Frames möglich.
XXXXX
XXXXX
Wide Skyscraper (160 × 600)
Skyscraper Banner nutzen die Höhe des Formats. Dadurch eignen sie sich besonders für große, plakative Headlines und eine klare vertikale Führung. Gleichzeitig ist die geringe Breite eine Herausforderung: Arbeite mit wenig Text, starken Kontrasten und vermeide lange Wörter.
Größen ändern sich schnell. Informiert euch regelmäßig über die aktuellen Spezifikationen.
Auch Skyscraper Banner orientieren sich gestalterisch an den Social-Media-Anwendungen. Auch die Layoutprinzipien bleiben dabei ähnlich: klare Textführung, ausreichend Abstand und eine eindeutige Hierarchie.
Die Save Zone kannst du ähnlich wie bei Social-Media-Posts ermitteln.
Bannermedien sind performancegetrieben. Auf kleiner Fläche müssen Headline, Informationen und CTA schnell verständlich platziert werden. Animierte Banner sind deshalb eine gute Option. Sie verteilen Inhalte auf mehrere Frames und sorgen dafür, dass das einzelne Layout klar und aufgeräumt bleibt.
Natürlich sind auch Animationen aus nur 2 Frames gut möglich.
Was die Farbe betrifft, kannst du frei variieren. Hell oder dunkel — beides ist möglich.
Entscheide selbst, ob du mit Illustrationen oder Bildern arbeitest. Wenn du Bilder verwendest, bring sie bewusst in den Anschnitt.
Do's und Don'ts
Standard Mobile Banner: Weniger ist mehr — klare Botschaften, prägnante Headlines.
Large Mobile Banner: Beachte den Contentbereich. Er hält ausreichend Abstand zur Kommunikationsmarke und sorgt dafür, dass dein Banner klar und nicht überladen wirkt.
Medium Rectangle Banner: Versuche, wenn möglich immer eine CTA oder Störer zu integrieren.
Superbanner: Sie funktionieren zwei- oder dreizeilig am besten. Achte darauf, einen CTA zu integrieren — entweder als Teil der Headline oder als Störer.
Skyscraper Banner: Verwende keine klassische Subheadline. Arbeite stattdessen mit farblichen Auszeichnungen. Achte außerdem darauf, dass deine Headline deutlich größer ist als die Kommunikationsmarke.
