Zum Inhalt springen

Online-Banner - vom Design zum fertigen Produkt

|
3. September 2020
Inhalt

Banner, oder auch Display-Advertising, sind eine Form der Internet-Werbung, welche eine ähnliche Funktion erfüllt wie klassische Anzeigen in Zeitungen oder Zeitschriften. Sie generieren Aufmerksamkeit, Neugierde, lenken das Interesse auf ein aktuelles Angebot, dienen der Markenbildung und wenn gut gestaltet, prägen sie sich nicht nur in die Erinnerung des Seitenbesuchers ein, sondern verleiten auch zum direkten Handeln. Das könnte der Abschluss eines Kaufes, die Buchung einer Dienstleistung, der Eintrag eines Newsletters oder Ähnliches sein. Somit ist neben dem Banner als Anreiz auch die Qualität der Landingpage von Wichtigkeit. Diese macht letztendlich den Unterscheid zwischen Handlung und Absprung.

Was macht ein gutes Banner aus?

Ein gut gestaltetes Banner kann den potentiellen Kunden entlang der ganzen Customer Journey begleiten, vom ersten Moment wo ein Bewusstsein für das Produkt oder Angebot geweckt wurde, bis zum gewünschten Abschluss. Der Anspruch hierbei ist, mit wenig Bild und Textinformation genug Interesse zu generieren, um den potentiellen Kunden dazu zu bringen, zu handeln. Dabei gilt es, den schmalen Grad zu treffen zwischen auffallen, aber nicht überfordern.

Zielgruppengerechte Ansprache, sowie das Einhalten der Corporate Identity des zu bewerbenden Unternehmens sind hier wichtig. Nicht jedes Design funktioniert für jedes Unternehmen. Je harmonischer und in sich geschlossener Animation, grafische Gestaltung und Ansprache am Ende sind, desto eingeladener fühlt sich der Kunde. Daher ist es wichtig, vor Beginn der Gestaltung die Grundelemente jedes Banners zu kennen und auf die Marke sowie die Zielgruppe auszurichten.

Screenshot Banner Heinz von Heiden

Screenshot Banner Heinz von Heiden

Bildnachweise: Screenshots Banner von Heinz von Heiden Massivhäuser

Was
solltest du vor Beginn der Gestaltung wissen?

Vor Beginn der Gestaltung solltest du dich eingehend mit dem Ziel der Bannerwerbung beschäftigten.

Um deine Banner auf entsprechenden Websites zu platzieren, solltest du also wissen:

  • wo genau sich deine Zielgruppe aufhält
  • was sie motiviert und interessiert
  • wie du sie ansprichst.

Je genauer die Zielgruppe definiert ist, desto besser kann sie später in der Designphase angesprochen werden.

Die Schwerpunkte sind dabei so vielfältig wie die Zielgruppen selbst. Dabei sind Alter, Geschlecht und Lebenssituation genauso entscheidend wie Wünsche, Ziele und Motivationen. Verhält sich deine Zielgruppe eher impulsiv oder bedacht? Dies wirkt sich womöglich auf die potentielle Kaufentscheidung aus. Solltest du am Anfang eher unentschlossen sein, kann es helfen die Gruppen genaueren Kategorien zuzuordnen. Dabei kann eine Limbic Map von Nutzen sein.

Oft lässt sich durch das Produkt schon eine grobe Richtung einordnen. So kannst du zum Beispiel davon ausgehen, dass ein Abenteuerurlaub eher einen wagemutigen und dominanten Typ anspricht, während ein klassischer Familienwagen in die Zielgruppe des Balance- und sicherheitsliebenden Typen fällt. Diese Informationen helfen dir in der Gestaltung eine passende Bild und Textsprache zu finden.

Unsere Tipps für eine effiziente Designphase

Ist die Zielgruppe definiert, beginnt die Designphase. Online-Banner benötigen eine starke Bildsprache, welche schon auf dem ersten Blick vermittelt worum es geht, wer die Marke ist und was angeboten wird. Hier wird die Corporate Identity des Produktes wichtig. Bei bekannten Marken reichen möglicherweise die CI-Farben in Kombination mit dem Logo, um bei dem Betrachter ein Wiedererkennen auszulösen und die Aufmerksamkeit auf das Banner zu lenken.

Weniger bekannte Marken profitieren davon, durch starke und emotionale Bildsprache eine Assoziation mit ihrem Produkt oder ihrer Dienstleistung zu wecken.

Jedes Banner setzt sich aus den Grundelementen Hintergrundbild, Logo, Text/Slogan und Call to action zusammen.

  • Ein aussagekräftiges und emotionales Hintergrundbild weckt Verlangen und unterstützt
    die Botschaft des Textes. Aber Achtung! Große Bildformate mit vielen
    unterschiedlichen Farbabstufungen lassen die Dateigröße enorm ansteigen und
    können in manchen Formaten nicht richtig dargestellt werden. Außerdem sollte
    das Bild unterstützen, aber nicht von den eigentlichen Informationen ablenken.
    Daher gilt es dieses mit besonderem Bedacht zu wählen. Verwendet werden
    vorzugsweise PNG und JPG. 

  • Das Logo des Unternehmens sollte entweder von Anfang an deutlich zu sehen sein, oder als erste Animation eingeblendet werden. Die Markenidentität ist die erste wichtige Information, die der Betrachter sich einprägt und ihm auch, sollte er nicht weitergeleitet werden, in Erinnerung bleiben wird.

  • Der Text soll das Interesse des Users festhalten. Ist die Aufmerksamkeit des Users auf das Banner gelenkt, entscheidet der Text darüber, ob das Angebot für ihn von Relevanz ist. Daher gilt, weniger ist mehr!
    • Ein gut formulierter Text fasst in wenigen Punkten die wichtigsten Informationen einprägsam zusammen. Dieser Text kann die Unternehmens-Philosophie beinhalten, die Dienstleistung tiefer erläutern oder den User direkt in seinen Bedürfnissen ansprechen.
    • Schriftart und Animation sollten hier mit Bedacht gewählt wählen. So muss der Text sich deutlich vom Hintergrund abheben und eine etwaige Animation unterstreichen, nicht ablenken.
    • Serifenlose Schriften sind in Bannerwerbung meist die bevorzugte Wahl, da sie auf Bildschirmen besser gelesen werden können.
    • Von zu schrillen Farben und blinkenden, sich überlappenden Animationen solltet ihr besser absehen. Diese irritieren und schlimmstenfalls nerven sie nicht nur den User, sondern werden auch oft nicht von Google freigegeben. Generell sollten Animationen nicht länger als maximal 30 Sekunden bei standardmäßig 24 Frames pro Sekunde betragen.
  • Der Call to action(CTA) ist das Element, auf das es am Ende ankommt. Er fordert den User zur Handlung auf und bringt ihn auf die Landingpage. Das sollte sich auch in seiner Platzierung und Gestaltung wiederspiegeln. Ein guter CTA ist auf den ersten Blick als ein solcher zu erkennen, indem er sich optisch eindeutig von dem restlichen Text abhebt.

Dies lässt sich erreichen, indem er einen Farbton hat, welcher sonst nicht im Banner vorkommt und gut lesbar sowie möglichst zentral platziert ist. Um den User direkt die Informationen zu vermitteln, die er braucht, um an das Ziel zu kommen, muss er in wenigen Zeichen erklären, welche die von ihm notwendige Handlung ist. Das könnte ein Angebot sein, welches er durch den Klick erreicht, der Download einer Datei oder auch weitere Beratung. Je klarer die Handlungsanweisung, desto kleiner die Wahrscheinlichkeit, dass der Customer sich falsch informiert fühlt und die Seite nach einem Aufruf direkt wieder verlässt.

Gängige Bannergrößen und ihre
Performance

Die Größen der Banner geben an, wo auf der Seite sie später ausgespielt werden. Einen Standard gibt es dafür zwar nicht, aber Google selbst hat Empfehlungen herausgebracht, welche Bannergrößen im Durchschnitt besonders gut performen.

Dazu gehören folgenden Größen:

Medium Rectangle 300 x 250
Halbseitig 300 x 600
Wide Skyscraper 160 x 600
Leaderboard 728 x 90
Billboard 970 x 250

mobil optimiert:
Mobile Content Ad 6:1 #1 320 x 50
Mobile Content Ad 6:1 #2 300 x 50
Mobile Interstitial 320 x 480

Weitere Informationen zu den gängigen Bannergrößen findet ihr in diesem Artikel: Banner-Formate: mit diesen Größen erreichen deine Display-Anzeigen mehr potentielle Kunden

Welche Datei-Typen werden in der Bannererstellung
bevorzugt?

Banner lassen sich in vielen verschiedenen Dateitypen erstellen. Generell ist es immer empfehlenswert, dabei zuerst an HTML5 zu denken. Da einige Netzwerke derzeit noch nicht auf das Ausspielen von HTML Banner umgerüstet sind, wird in diesen Fällen auf GIF zurückgegriffen. GIF-Banner können in fast in jedem Umfeld ausgespielt werden, kommen aber mit einigen Nachteilen. So sind sie zum Beispiel aufgrund ihrer begrenzten Farbpalette deutlich limitiert. Bei Verwendung von GIFs wird also auf hochauflösende Bilder und aufwendige Animationen verzichtet, während es bei HTML5 Bannern bei sämtlichen Endgeräten nicht zu Verlust in Schärfe und Darstellung kommt. Das liegt unter anderem daran, dass GIF-Banner, anders als die HTML5 Variante, aus Pixeln bestehen und so beim skalieren Verluste entstehen können. Auch die Animationen laufen in HTML5 flüssiger, mit 24 Frames pro Sekunde. GIF-Banner kommen dabei auf 5 Frames pro Sekunde und steigen bei aufwändigeren Animationen auf riesige Dateigrößen. Der Standard der erlaubten Dateigröße bei Google liegt bei 150KB. Generell gilt dabei, je kleiner die Größe, desto besser die Ladezeiten. Natürlich sollte die Qualität des Banners darunter nicht leiden.

Ein weiterer großer Vorteil von HTML5 ist ihre Interaktivität.
Ein Link kann zwar auf einem GIF-Banner platziert werden, dies ist jedoch die
einzige Möglichkeit des Costumers mit ihm zu interagieren, während es beim
HTML5 Banner eine Vielzahl von Möglichkeiten gibt. Ein anderer Vorteil der
HTML5 Banner ist, das sie Web Fonts unterstützen, welche auch in kleinen Größen,
bis circa 15px noch gut leserlich bleiben und somit auf sämtlichen
Bildschirmumgebungen gut funktionieren.

In manchen Fällen wünscht der
Kunde statische Banner. Diese haben den Vorteil, durch die Abwesenheit von
Animation mehr Platz für aussagekräftige Bilder zu haben und den Anspruch, alle Informationen die sonst
auf mehreren Frames ausgespielt werden könnten, kompakt auf eine Fläche zu
bringen. Die gängigen Formate sind hier HTML5, PNG und JPG.

APNG kann genutzt werden, um einfache Animationen ins Web zu bringen. Im Gegensatz zu GIF, kann hier auch ein Transparenzverlauf da gestellt werden und es können beliebig viele Farben verwendet werden. Jedoch sind APNGs nur in wenigen Browsern abspielbar, ansonsten werden sie als unanimiertes PNG angezeigt.

Fazit

Abschließend kann man also sagen,
dass es bei der Gestaltung des perfekten Online-Banners auf viele verschiedene
Faktoren ankommt. Wie gut dein Banner am Ende ankommt, zeigt dir jedoch die
Praxis. Mithilfe von Tools wie zum Beispiel Google Analytics lässt sich genau ermitteln,
ob der Banner so wie gewünscht ankommt und falls er nicht funktioniert,
solltest du noch Änderungen vornehmen.

Viel Erfolg!

Linda


Kostenlose Online-Marketing Webinare

Das nächste Webinar zum Thema Design ist am 10. Septemer. Kevin und Lisa zeigen den Unterschied zwischen individuellem Design und Kauf-Templates.

kostenlose webinare design
Kostenloses Webdesign Webinar am 10. September. Bildnachweis: web-netz


Bildnachweis Titelbild: Alice Dietrich on Unsplash

Gefallen? Dann einfach teilen!

Autor/in

webnetz GmbH

Webinare

Kommende Webinare passend zum Thema

Newsletter

Online-Marketing-News direkt ins Postfach

Blogs, Podcasts, Webinare zu aktuellen Themen:
Melden Sie sich jetzt für unseren Newsletter an.

Kommentare

Noch sind keine Kommentare vorhanden. Das ist deine Chance dies zu ändern!