Erfolgreiches Banner Design für 2023: Alles auf einen Blick (2024)

Es gibt sie in allen möglichen Farben, Formaten und Größen. Statisch oder dynamisch. Jeder kennt sie unddie meisten Onlinepräsenzen nutzen sie: Werbebanner. Meist entscheidet sich innerhalb von Sekunden, obein Webseitenbesucher ein potentieller Kunde wird oder wieder in den Weiten des Internets verschwindet.Denn so interessant der Inhalt der Seite bei näherem Betrachten auch sein mag, die Mehrheit derSeitenbesucher schaut sich eine Webseite mit der sogenannten Skimming-Methode an, das heißt: alles wirdüberflogen. Inhalte werden nicht gelesen. Meist werden dabei nur Header, Navigation und Fettgedruckteswahrgenommen. Wie schafft man es also, in nur ganz kurzer Zeit, das Interesse und die Lust auf mehr zuwecken?

Trotz Ad-Blocker ist der Banner dafür immer noch ein sehr beliebtes Mittel. Damit dieser allerdings einenguten Eindruck hinterlässt und die gewünschte Reaktion erreicht, gilt es einiges bei der Erstellung einesBanners zu beachten.

Erfolgreiches Banner Design für 2023: Alles auf einen Blick (1)

Die Fakten

Zunächst einmal ein paar trockene Fakten über die beliebtesten Standardformate, die es in diesem Bereichgibt:

BezeichnungPixelGrößeFormate
Full Banner468 x 6040 kbGIF, JPG, PNG, Flash
Super Banner728 x 9040 kbGIF, JPG, PNG, Flash
Rectangle180 x 15040 kbGIF, JPG, PNG, Flash
Medium Rectangle300 x 25040 kbGIF, JPG, PNG, Flash
Standard Skyscraper120 x 60040 kbGIF, JPG, PNG, Flash
Wide Skyscraper200 x 60040 kbGIF, JPG, PNG, Flash
Flash LayerIndividuell40 kbFlash
Button< 234 x 60< 20 kbGIF, JPG, PNG, Flash

Quelle: Online-Vermarkterkreis im Bundesverband Digitale Wirtschaft (BVDW)
URL: http://www.werbeformen.de/ovk/ovk-de/werbeformen/digitale-werbeformen/in-page/standardwerbeformen.html

Darüber hinaus gibt es noch weitere, vom IAB (Interactive Advertising Bureau), geregelte Größen. Vor allemdurch den vemehrten Internetzugriff über das Smartphone, werden auch für den mobilen Bereich immermehr neue Formate entwickelt. Hierbei ist zu beachten, dass Flash häufig auf mobilen Endgeräten nichtangezeigt wird.

Positionierung und Größe

Laut BVDW (Bundesverband Digitale Wirtschaft) wird für den Kopf einer Webseite meist der Full Banner eingesetzt. Seitlich findet manüblicherweise den Skyscraper. Rectangles dagegen erscheinen meist im Inhaltsbereich und Layer finden ihre Verwendung, indem sie sich direkt über eben diesen Inhalt legen. Die maximale Dateigröße sollte lautGoogle 150 kb nicht überschreiten, während der BVDW mit 40 kb dabei weitaus niedriger liegt. Generell giltaber: je geringer die Dateigröße, desto schneller wird der Banner geladen.

Unter einer hohen Dateigröße leidet zudem nicht nur der Banner, sondern die gesamte Webseite und keinSeitenbesucher wartet gerne, bis alle Inhalte geladen sind. Die meisten verschwinden wieder, oder habenbereits nach unten gescrollt, ohne den Banner je wahrgenommen zu haben. Darum gilt hier: weniger istmehr. Darunter sollte aber auch die Qualität nicht leiden!

Bilder und Farben

Jeder kennt das Sprichwort: „Ein Bild sagt mehr als tausend Worte.“ und dies trifft ebenso auf Werbebannerzu, denn ein Bild kann schnell erfasst werden. Material mit einer guten Qualität ist besonders effektiv, dennje höher die Qualität, desto höher die Aufmerksamkeit. Vermieden werden sollten dabei beliebtesStockmaterial, das die Konkurrenz vielleicht verwendet, oder noch schlimmer: das in Werbebannern miteiner gegenteiligen Aussage bereits auftaucht! Je einzigartiger, desto besser. Jedoch gilt auch hier: wenigerist mehr. Auch was die Dateigröße betrifft.

Bei dem Einsatz von Bildern, kann man ein paar psychologische Tricks anwenden, zum Beispiel in Bezugauf Farben. Bestenfalls sollten die Farben der Webseite in den Banner einfließen, damit das Vertrauen derNutzer in die Werbung gesteigert wird, oder aber Farben die damit harmonieren, ansonsten kann diesirritierend wirken. Es kann nicht schaden, sich mit der Farbpsychologie auseinanderzusetzen, umvorauszusehen, welche Farben welche Emotionen auslösen und diese dann, soweit das Corporate Designes zulässt, im Banner entsprechend einzusetzen.

Natürlich gibt es Farben, die die Aufmerksamkeit erregen, zum Beispiel ein leuchtendes Rot. Sind dieseFarben aber zu aufdringlich, haben sie meist die gegenteilige Wirkung und schrecken den Betrachter eherab. Ein etwas dunkleres, dezenteres Rot tut es in diesem Falle auch und wird positiver aufgenommen. Diesgilt sowohl für den Hintergrund als auch für die Schrift. Aggressive Farben wirken schnell unseriös. Sosollten also Farben verwendet werden, die zwar auffallen, nicht zu aufdringlich wirken und dabei einen gutenKontrast erreichen. Zu beachten ist hierbei auch, dass Weiß sich oft nicht als Hintergrundfarbe eignet, da eszu unauffällig und langweilig wirkt. Natürlich gibt es Ausnahmen. Auf jeden Fall muss sich der Banner vomsonstigen Hintergrund der Webseite unterscheiden, da dies gesetzlich geregelt ist. Banner und Inhaltmüssen sich voneinander abheben, sonst könnte dies als Verschleierung von Werbung angesehen werden,welches ein Verstoß gegen das Gesetz gegen unlauteren Wettbewerbs darstellt. Dies sollte man bei derGestaltung stets im Hinterkopf behalten.

Ein weiterer psychologischer Trick lässt sich beim Einsatz von Personen im Bildmaterial anwenden. Es wirktdabei besonders einladend, wenn diese den Betrachter anschauen. Aber auch ein abgewandter Blick hatVorteile: so bestimmt die Blickrichtung, wohin der Seitenbesucher als nächstes hinsehen wird. Mit leichtenMitteln, kann man den Betrachter also beeinflussen, ohne dass es ihm wirklich bewusst ist.

Erfolgreiches Banner Design für 2023: Alles auf einen Blick (2)

Bestandteile

Diese drei Elemente sollte der Banner beinhalten:

  • Logo
  • Nutzenversprechen
  • Call-to-action / Handlungsaufforderung

Das Logo dient dazu ein gewisses Markenbewusstsein zu schaffen. Der Nutzer soll sofort wissen, mit wemer es zu tun hat und erinnert sich im Optimalfall später wieder an das Unternehmen oder das Produkt.Welchen Nutzen hat der potenzielle Kunde allerdings von diesem Produkt, wenn er sich dafür entscheidet?Was auch immer hier versprochen wird, es ist äußerst wichtig, dass dieses Versprechen unbedingt gehaltenwird. Ansonsten wirkt es unseriös und schreckt den potenziellen Kunden ab, der sich das Produkt oder diegewünschte Leistung dann doch lieber bei der Konkurrenz holt.Die Handlungsaufforderung ist meist auf kurze Phrasen wie „Zum Shop“, „Hier klicken“, oder „Weitere Infos“beschränkt und fordert den Besucher dazu auf, den nächsten Schritt zum Erhalt der Leistung einzuleiten.Buttons sind dabei ein gutes Signal an den Besucher, dass dieser auch auf die Werbung klicken kann. Aberauch hier muss darauf geachtet werden, nicht mit aufdringlichen Farben, Formen oder Positionenabzuschrecken. Ein Button der den Betrachter förmlich mit „KLICK MICH!!!“ anschreit, wird eher nichtgeklickt.

Der Inhalt

Ebenso sollte man es vermeiden, den Banner mit Inhalt vollzustopfen, da dieser nur ganz kurz registriertwird und dabei sofort verstanden werden sollte, worum es geht. Andernfalls guckt der Betrachter woandershin. Der Inhalt muss also schnell erfasst werden können und Lust auf mehr wecken. Dies klappt ganz gutdurch den Einsatz von grafischen Effekten, mit geschickt eingesetzem Text, oder Stichworten, die dasThema beschreiben. Auch ein knapper Slogan wirkt Wunder. Wichtig ist es, sich kurz zu halten, besondersbeim Nutzenversprechen. Denn lange Texte werden nicht gelesen, kurze Fomurlierungen dagegen, könnenschnell aufgefasst werden und bleiben besser im Gedächtnis. Sie helfen Dir, sofort die Aufmerksamkeit zubekommen und darüber hinaus klarzustellen, worum es eigentlich geht – sei es um ein neues Produkt, oder20% Rabatt auf ein Müsli.
Je weniger Worte, desto größer ist allerdings auch die Gefahr, die falschen zu wählen. Daher sollte man sichhier die Zeit nehmen, herauszufinden, welche bei der Zielgruppe am besten ankommen.

Worauf musst Du bei der Font achten?

Achte darauf, dass die Schrift nicht zu klein gewählt ist, damit der Betrachter nicht mit der Nase amBildschirm kleben muss. Da sowieso mit kurzen Texten gearbeitet wird, können diese auch entsprechendgrößer dargestellt werden. Dabei sollte bevorzugt eine serifenlose Schrift eingesetzt werden. Sie wirkt nichtnur moderner, sondern kann auf Bildschirmen auch besser gelesen werden. Hier eignen sich gängige Fontswie: Arial, Helvetica, Verdana.

Erfolgreiches Banner Design für 2023: Alles auf einen Blick (3)

Statisch oder lieber dynamisch?

Eine Frage, die man sich bei der Gestaltung eines Online-Banners stellen sollte, lautet: Animation ja, odernein? Generell kann man festhalten, dass Bewegung Aufmerksamkeit auf sich lenkt. Ein klarer Pluspunkt fürdynamische Banner. Zu viel Dynamik jedoch, kann den Betrachter verärgern und einen eher negativenEindruck hinterlassen. Blinkende und zappelnde Werbebanner sind daher zwar auffällig, aber bewirkenmeist nicht den gewünschten Effekt. Bedeutend bei animierter Werbung ist außerdem eines: die wichtigstenBotschaften zuerst! Sonst ist der Besucher wieder verschwunden, bevor an ihn heran getragen wurde,worum es eigentlich geht.
Die Animation sollte eine Dauer von ca. 30 Sekunden nicht überschreiten, auch eine Endloschleife solltevermieden werden, um den Seitenbesucher nicht zu stören. Zwei bis drei Wiederholungen der Animationgenügen schon. Dynamische Banner sind also eine gut Idee, solange man es nicht übertreibt.

Hierfindet man einige tolleBeispiele, was in diesem Bereich alles möglich ist und wie man es schafft sich nicht nur die Aufmerksamkeitdes Besuchers zu sichern, sondern dabei auch etwas für Spaß zu sorgen und mit Spielereien im Gedächtniszu bleiben.

Fazit:

Wer sich an gewisse Gestaltungsregeln hält, kann einen 1A Banner gestalten. Ob dieser dann in der Praxistatsächlich wirklich gut funktioniert, zeigt allerdings nur die Erfahrung. Aber dann ist es kein Problem, andereFarben oder Bilder zu testen und den Banner immer weiter zu verbessern. Wichtig ist allgemein: Nicht mitInhalt überladen, einzigartige Bilder, wenig Worte und es mit der Dynamik nicht übertreiben.

Du benötigst ein individuelles Banner-Design?

Starte einen eigenen Designwettbewerb auf designenlassen.de und erhalte zahlreiche individuelle Vorschläge von unterschiedlichen Designern. Du hast kein Risiko durch Preisgeld-zurück-Garantie.
Jetzt startenMehr erfahren

Erfolgreiches Banner Design für 2023: Alles auf einen Blick (4)

Patrick Schady

Erfolgreiches Banner Design für 2023: Alles auf einen Blick (2024)
Top Articles
Latest Posts
Article information

Author: Sen. Emmett Berge

Last Updated:

Views: 6566

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Sen. Emmett Berge

Birthday: 1993-06-17

Address: 787 Elvis Divide, Port Brice, OH 24507-6802

Phone: +9779049645255

Job: Senior Healthcare Specialist

Hobby: Cycling, Model building, Kitesurfing, Origami, Lapidary, Dance, Basketball

Introduction: My name is Sen. Emmett Berge, I am a funny, vast, charming, courageous, enthusiastic, jolly, famous person who loves writing and wants to share my knowledge and understanding with you.