Werbebanner richtig gestalten – der Anfänger Guide

Guten Tag, mein Name ist Lennart Prange, ich bin der Autor von daswebdesignblog.de und habe mich bereit erklärt hin und wieder einen Gastbeitrag auf blogschrott.net zu schreiben.

Ich beschäftige mich seit geraumer Zeit mit dem Design von Werbebannern. Nach und nach wird einem klar, wie viel man falsch machen kann und wie viel Potenzial im Internet verschenkt wird. Wer erfolgreich auf anderen Internetseiten Werbung machen will, muss sich mit den Gestaltungsprinzipien auskennen oder Profis engagieren.
Dieser Beitrag soll euch dabei helfen, einen wirklich guten Banner zu gestalten. Ich veranschauliche fast alle Richtlinien an einem Beispiel.
Natürlich ist mir eure Kritik wichtig und eventuell habt ihr ja auch noch ein paar Tipps parat? Zögert nicht zu kommentieren!

Allgemeine Gestaltungsrichtlinien

1. Die Farben
Ganz allgemein gesehen kann man sagen, dass aggressive Hintergrundfarben und Schriftfarben zwar Aufmerksamkeit erregen, aber kaum Klicks erhalten. Es wirkt unseriös, wenn einem der Banner geradezu ins Auge springt.
Die Kunst ist es, Farben zu wählen, die zwar herausstechen, aber nicht aufdringlich wirken. Die Message “Klick Mich!!!!!!!!!” sollte nicht durch die Farben vermittelt werden.
Weiterhin ist zu sagen, dass ihr versuchen solltet einen guten Kontrast zu erreichen. Solche Banner bekommen wohl am meisten Klicks. Aber Achtung: Benutzt nicht weiß als Hintergrundfarbe. Sowas ist unauffällig und normalerweise vollkommen langweilig. Wenn man mit einem weißem Hintergrund viele Klicks erreichen will, muss man schon wirklich ein Händchen für Bannerdesign haben.
Vielleicht ist es auch nicht schlecht, Farbwirkung und Farbverwendung zu büffeln. Ich habe hier (externer Link) einen Beitrag darüber geschrieben.

2. Ruft zur Aktion auf!
Ein simples “Hier klicken” kann schon Wunder bewirken. Man muss den User zur Aktion aufrufen. Dann hat man auch große Chancen, dass das passiert. Wichtig ist auch hier, dass man nicht zu aufdringlich wird. Es sollte dezent, aber auffällig verpackt sein. Mein Beispiel wird zeigen wie das geht.

3. Das Logo
Die Frage ist, wie man das Logo einbauen sollte. Ich bin der Meinung, dass das Logo normalerweise nicht so wichtig ist, da der Besucher wegen des Logos in den meisten Fällen nicht auf den Banner klicken wird. Wenn es sich nicht um bekannte Marke handelt, braucht man das Logo eigentlich nicht sehr groß abzubilden. Ich denke, dass die Meinungen hier weit auseinander gehen und wäre an eurer interessiert.

4. Interessante Gestaltung
Der Banner muss die Lust auf mehr wecken. Das kann man mit speziellen grafischen Effekten tun oder mit dem geschicktem Einsatz von Text. Am besten ist ein stichwortartige Beschreibung, die das Thema der Internetseite erklärt. Ein Slogan ist auch nicht schlecht.

5. Nicht überladen
Wer seinen Banner zuknallt, hat verloren. Man muss bedenken, dass ein Besucher den Banner nur ganz kurz ins Auge fassen wird und wenn er nicht sofort etwas entdeckt was ihm gefällt, kann man es vergessen. Wenn der Banner vollkommen zugeballert ist, kann der Nutzer nicht schnell genug registrieren, worum es geht und guckt woanders hin.

6. Spielereien
Flash, Farbveränderungen beim Rollover Effekt und auch noch ein paar andere Spielereien sind möglich. Diese können alle Aufmerksamkeit auf sich ziehen, aber ich kann sagen, dass ich animierte Banner fast nie an klicke. Warum weiß ich auch nicht. Ihr könnt ja mal euer Surfverhalten analysieren und hier erzählen, was ihr für Erfahrungen macht.

7. Dateigröße
Niemand wird darauf warten, bis ein Banner fertig geladen ist. Man sollte darauf achten, dass der Banner extrem schnell lädt. 25kb müsste als Dateigröße reichen.

8. Interaktive Banner
Bestimmt kennt ihr alle diese Banner, die kleine Mini Spielchen, wie zum Beispiel Billiard oder Wettsaufen mit dem Weihnachtsmann, enthalten. Solche Banner können sehr wirkungsvoll sein und viele Klicks generieren.

Mein Beispiel

Nun zu meinem Beispiel. Ich werde einen Werbebanner für eine fiktive Seite erstellen. Es geht darum ein freies Ebook zu vermarkten. Das Ebook beschreibt, wie man im Internet leicht Geld verdienen kann. Die Bannergröße Beträgt 125px*125px. Ich muss mich also mit engstem Raum begnügen.

Ich habe mich für einen dunklen Hintergrund und helle Schrift entschieden. Außerdem möchte ich in kleinen Mengen die sehr aggressive Farbe rot verwenden. Ich habe das Rot etwas dunkler gemacht, damit es nicht zu sehr heraussticht. Außerdem habe ich den Hintergrund einen kleinen Verlauf mitgegeben. Das wirkt etwas frischer und moderner.

werbebanner1

Wie ich oben beschrieben habe, soll man zu Aktion aufrufen. Hierfür verwende ich das rot um mit einer kleinen Reflektion einen Button im Banner darzustellen.

werbebanner2

Das Logo lasse ich einfach weg, da es völlig irrelevant ist. Es geht nur um das Ebook.

Jetzt zur interessanten Gestaltung. Ich habe eine aufgerollte Ecke hinzugefügt. Das sollte bei der kleinen Fläche reichen.

werbebanner3

Ich werde den Banner natürlich nicht überladen und habe mir gedacht ein paar Wörter einzubauen, auf die der Mensch einfach positiv reagiert und welche die Aufmerksamkeit auf den Banner ziehen. Die Wörter “Rich” und “Free” werden den Besucher hoffentlich positiv beeinflussen.

werbebanner4

Fertig. Flash usw. werde ich jetzt nicht einbauen. Ich kann mir vorstellen, dass so ein Banner recht viele Besucher anzieht.

Ergänzung: Es wäre für diesen Zweck (Vermarktung eines Ebooks) wahrscheinlich besser gewesen, wenn ich ein Buch als Hintergrund verwendet hätte. Denn ein Bild sagt mehr als tausend Worte und kann schnell erfasst werden. Ich wollte aber eher eine universal Lösung.

Was sagt ihr dazu? Habt ihr Verbesserungsvorschläge? Ich bin gespannt.

18 Gedanken zu „Werbebanner richtig gestalten – der Anfänger Guide“

  1. 1. ich bin nicht sicher, ob sich ein Schreibfehler “Klick here” positiv auswirkt – kann aber durchaus Interesse wecken.

    2. wenn ein Buch im Hintergrund abbilden (würde ich unbedingt), dann nicht einfach platt von vorne, sondern etwas schräg, damit man auch sieht, wie dick es ist (obwohl es ja eigentlich ein PDF ist und keine Dicke hat). So kriegt man das Gefühl, was für sein Geld zu kriegen (was auch durchaus stimmen mag).

  2. Prinzipiell ein guter Artikel. Jedoch würde ich sagen, dass animierte Banner immer noch besser ankommen als statische. Man sollte natürlich darauf achten es nicht zu übertreiben, dafür muss man ein Händchen haben.

    Ich denke der Trend geht klar in Richtung interaktive Banner, dafür muss man sich einfach mal die Banner auf großen Internetseiten wie Bild.de oder Msn.de angucken.

  3. Super Anleitung! Das einzige was mich abgeschreckt hat, war die Überschrift “Allgemeine Gestaltungsrichtlinien” was für mich anfangs wirkte wie “Allgemeine Geschäftsbedingungen” 🙂

  4. Pingback: hype.yeebase.com
  5. Wer mit Bannern arbeiten will sollte mehr auf Text setzen als auf Grafik ;-).

    @Flo

    Interaktive Banner laufen _immer_ schlechter als gut gemachte statische Banner. Der “Trend” geht eher in Richtung interaktiv und überladen – aber jeder der ein bisschen Ahnung von Marketing hat bevorzugt lieber die Old School lösung ala roter Rahmen, roter Text auf weißem Hintergrund – fertig. CTR Raten von 3-5% sind auch in der heutigen Zeit absolut kein Problem =).

    Marketing ist halt doch zu wichtig um es der Marketing Agentur zu überlassen…

    Ach und bitte keine Flash Banner – bei Klicks auf einen Flash Banner wird ein PopUp ausgelöst, hat der Benutzer einen Blocker (haben ja inzwischen eh alle) ist die Chance groß, dass er nochmal bestätigen muss, dass er wirklich die Werbung selbstständig angeklickt hat. Ein absoluter Hemmer!

  6. @Stefan:

    Ich bin kein Marketingprofi – nur Flasher. 😉 Ich frage mich jedoch, warum große Firmen wie McDonald’s dann animierte Banner benutzten. Die Marketingabteilung von denen ist doch auch nicht ganz doof?

  7. Danke für Lob und Kritik.

    Zu Flo: Natürlich ist die Marketingabteilung von McDonald’s nicht dumm. Ich denke, dass Flash Banner für bekannte Marken besser sind, da sie aufjedenfall ins Auge fallen. Man sieht das M und das ist gut für McDonald’s. Außerdem haben die McDonald’s Banner häufig die momentanen Angebote integriert und ich glaube sie zielen gar nicht darauf ab angeklickt zu werden.
    Allgemein gesehen denke ich (auch wenn mir da viele wiedersprechen werden) nicht, dass animierte Banner mehr Klicks erhalten.

  8. Hallo Thomas,

    ich schlage vor, dass du meinen Blog liest, wenn du gerne solche Effekte lernen möchtest. Dort veröffentliche ich bestimmt demnächst ein Tutorial, dass auch so eine Ecke behandelt.

  9. Ungeachtet deines Vorschlages hatte ich den Rss Feed von deinem Blog schon in meinen Reader genommen. Ich bin gespannt und würde mich freuen wenn du das Behandelst.

Schreibe einen Kommentar