Unser web-netz Blog

News, Interviews & Fachartikel aus der Welt des Online-Marketings
Mann mit bunt bemalten Händen

Online-Banner – vom Design zum fertigen Produkt

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

Kommentar verfassen