EINFÜHRUNG
Irgendwann in ihrer Karriere muss fast jeder Designer eine Reihe von Bannerwerbung entwerfen. Inspiriert von jemandem, der mir erzählte, dass er seine erste Bannerwerbung gemacht hatte, dachte ich, es wäre gut, dieses Design-Subgenre zu untersuchen, da ich im Laufe der Jahre Tausende von Bannerwerbung entworfen und Tausende weitere gestaltet habe.
In diesem Beitrag werde ich nicht auf die Probleme eingehen, z. B. auf welchen Seitentypen die Anzeigen erscheinen, oder auf die Klickraten, da Designer diese nicht ändern können. Ich werde mich ausschließlich mit dem Entwerfen von Bannern befassen, um sie ansprechender (und hoffentlich anklickbarer) aussehen zu lassen.
Bannerwerbung sollte die Seite kennzeichnen, mit der sie verbunden sind
DIE BANNERWERBUNG LANDSCHAFT
Die drei häufigsten Online-Bannerwerbung sind die MPU (Messaging Plus Units), die Rangliste und der Wolkenkratzer, was ich als die heilige Dreifaltigkeit der Bannerwerbung bezeichne. Sie erscheinen überall im Web, da die Formen über die Breite der Webseite (Bestenlisten) oder innerhalb einer einzelnen Spalte (MPUs und Wolkenkratzer) passen. Bestenlisten werden entweder mit einer MPU oder einem Wolkenkratzer platziert, aber alle drei erscheinen nie zusammen.
Banner-Anzeigen werden in der Regel Teil einer bestehenden Kampagne sein, so dass ihre Zutaten vom Kunden zur Verfügung gestellt werden können, dh Logo (s), Bilder, Kopierrichtung. Der Schlüssel besteht darin, diese Zutaten auf eine Weise zu kombinieren, die für den Benutzer der Website in den 2 Sekunden oder so interessant ist, dass er die Anzeige scannt (noch weniger, wenn er die Anzeige peripher scannt). Es ist wichtig, ihre Aufmerksamkeit mit einem überzeugenden Bild / einer überzeugenden Botschaft zu erregen und deutlich zu machen, was sie als nächstes tun sollen. Wenn Sie Ihre Augen schielen und es keinen offensichtlichen Schwerpunkt in der Anzeige gibt, ist es unwahrscheinlich, dass dies funktioniert.
Ich bin der festen Überzeugung, dass Banner deutlich darauf hinweisen sollten, worauf der Webbenutzer klickt. Auf diese Weise gelangt der Benutzer zu einer Seite, die wie die Anzeige aussieht, die ihn dorthin geschickt hat. Wenn dies nicht der Fall wäre, wären sie natürlich enttäuscht oder aufgeschreckt, wenn es nicht so aussähe, wie sie es erwartet hatten.
Daher schaue ich mir beim Entwerfen von Bannerwerbung normalerweise zuerst die Zielseite an und arbeite von dort aus rückwärts. Als nächstes geht es darum, die richtige Hierarchie der verschiedenen Bestandteile der Anzeige zu erarbeiten (z. B. Logo zuerst, aber klein, Überschrift als nächstes, aber dominant usw.). Fügen Sie danach einen geeigneten Call-to-Action (CTA) hinzu, der in die Kopie eingebunden ist und die gewünschte Aktion / Antwort beschreibt. Sobald die Hierarchien der Nachrichten sortiert sind, können sie auf die drei Banneranzeigengrößen einzeln angewendet werden.
Elemente konkurrieren in den meisten MPUs aufgrund der quadratischen Form miteinander
MPUs (300×250)
Die MPU (Messaging Plus Unit) befindet sich normalerweise in der schmaleren rechten Spalte der Seite und ist daher ungefähr quadratisch und kleiner, um über der Falte zu erscheinen. Das quadratische Format stellt ein kompositorisches Problem dar, da das menschliche Auge Bilder mag, die etwas horizontaler (Querformat) oder tiefer (Hochformat) sind.
Ich habe das Gefühl, dass die Mischung aus Logo, Bild, Überschrift und CTA in MPUs oft nicht viel Raum lässt, damit einer der vier einen Schwerpunkt der Anzeige bildet. Dies ist leicht in den HP- und X-Factor-MPUs oben zu sehen, wo sich alle Elemente gegenseitig um die Aufmerksamkeit des Webbenutzers kämpfen. In beiden Fällen dient der Hintergrund lediglich als Tablet, auf dem Elemente platziert werden können.
Im Gegensatz dazu hat die obige CSI-MPU das Hintergrundbild verwendet, um die Elemente zusammenzubringen, indem sie aus den Schatten hervorgegangen sind. Die eingekreiste Waffe, die gelbe Beweiskarte und die Hände an den Füßen treten ebenfalls aus den Schatten, um einen Ton anzugeben und andere visuelle Informationen für das Auge bereitzustellen, wenn die Kopie nicht gelesen wird.
Schlagzeilen sind das zentrale Element in Bestenlisten
BESTENLISTEN (728×90)
Die lange horizontale Form der Rangliste kann zu Designs führen, bei denen die Elemente wie im obigen HP-Beispiel als eine Reihe gleicher Teile verwendet werden. Ich habe jedoch festgestellt, dass Bestenlisten mehr Einfluss haben, wenn die Überschrift viel größer ist als in den anderen beiden Bannerwerbeeinheiten. Dies wird deutlich in der X-Factor-Anzeige oben gezeigt, wo selbst wenn Sie die Anzeige schnell scannen, der Schlüssel zum Mitnehmen ist: „Haben Sie es?“
Da Bestenlisten normalerweise ganz oben auf der Seite platziert werden, eignet sich ein Fokus auf Überschriften für die bereits bestehende Psychologie, wie wir Webseiten verarbeiten – eine restliche Erinnerung an das Lesen von Zeitungen und Zeitschriften.
Mit zunehmender Größe der Bildschirmauflösungen nehmen auch die Webseitenbreiten zu, wodurch die vorherigen 728 x 90 zunehmend redundant werden (ursprünglich für eine Auflösung von 1024 × 768 ausgelegt). Als Ergebnis dieser CBS Interactive bewegt sich alle 728x90s auf seinem Netzwerk von Standorten mit 970x66s (genannt Super Leader) zu ersetzen. Diese neuen Anzeigen sind für den Benutzer einer Website weniger aufdringlich und passen besser zu den verschiedenen Seiten, die jetzt alle 970 Pixel breit sind. Die zusätzliche Länge und flachere Tiefe eines Superleaders eignet sich noch mehr für eine schlagzeilengetriebene Iteration einer Kampagne.
Die Falte schneidet Wolkenkratzer in zwei Hälften, bis der Benutzer nach unten scrollt
Der lange und schlanke Wolkenkratzer hat kleine Schlagzeilen und große Bilder
WOLKENKRATZER (160×600)
Während MPUs und Bestenlisten normalerweise auf einer Seite oberhalb der Falte platziert werden, wird der Wolkenkratzer durch die Falte der Seite halbiert (normalerweise etwa 600 Pixel nach unten – siehe Diagramm oben). Daher sollten wichtige Informationen wie Logo, Überschrift und CTA in der oberen Hälfte stehen. Die Enge des Wolkenkratzers bedeutet auch, dass ihre Schlagzeilen eher klein sind.
Nach meiner Erfahrung habe ich festgestellt, dass Wolkenkratzer dazu neigen, auf Seiten platziert zu werden, die viel Information und wenig Bilder enthalten. Dies ist ideal für Wolkenkratzer, da sie viel mehr Platz für Bilder haben als MPUs und Bestenlisten.
In den drei 160 × 600-Beispielen über den Wolkenkratzern wurde mit zunehmender Berücksichtigung der Falte von links nach rechts entworfen. Im HP Skyscraper wurden alle oben genannten Elemente gleich hervorgehoben, sodass kein Fokus für das Auge besteht. Die X-Factor-Anzeige hat die Moderatoren größer als in anderen Iterationen der Kampagne, aber die kleine Überschrift wurde von allen anderen Elementen überwältigt – die Schlüsselinformationen sind alle unter der Falte und machen die Anzeige zu schwer. Im CSI Skyscraper bringt das größere Bild die Elemente zusammen, während das zweite Logo oben für eine kleine Überfüllung gesorgt hat.
Vergleichen Sie diese 728 × 90-Version der Anzeige mit der 300 × 250 unten (siehe die animierte Anzeige hier)
Animation hilft, die Elemente im Laufe der Zeit aufzuteilen
ANIMATION
Es versteht sich von selbst, dass das Hinzufügen von Animationen zu einer Banneranzeige das Auge darauf lenkt. Eine Flash-Version eines Banners hilft auch, diese Elemente im Laufe der Zeit aufzubrechen. In der obigen 728 × 90-Version ist der volle Stift weniger überzeugend als in der 300 × 250-Version, in der das Auge darauf wartet, was als nächstes passiert.
In letzter Zeit sehe ich viel mehr Wiedergabetasten für animierte Anzeigen – zweifellos, weil die Anzeige bereits abgespielt wird, wenn die Seite geladen wird. Statische Versionen von Anzeigen sind wieder relevanter geworden, da sie in Umgebungen, in denen Flash nicht abgespielt wird, wie Tablets und Smartphones, als Standard-JPEG geladen werden.
Animation allein reicht nicht aus, um eine Anzeige gut zu machen. Es muss immer noch etwas Überzeugendes in der Anzeige geben, sonst neigt sie dazu, wie all diese billigen aufmerksamkeitsstarken Kredit-Score-, Diät- und Remortgage-Anzeigen zu sein. Ich hatte ursprünglich die beiden oben genannten Ally-Anzeigen in animierte GIFs für diesen Beitrag umgewandelt, aber mein Auge hat sie automatisch abgeschirmt, da ich (und wahrscheinlich die meisten Leute im Web) es gewohnt bin, übereinander gestapelte animierte Anzeigen zu ignorieren.
BANNER-DESIGN-TIPPS
Da ich so viele Banner-Anzeigen gemacht habe, sind hier einige Tipps, die ich im Laufe der Jahre aufgenommen habe. Entschuldigung, wenn sie offensichtlich erscheinen, Ich sage sie, weil ich sehe, dass sie ständig nicht angewendet werden:
Kopieren
• Vermeiden Sie alle Großbuchstaben, da dies das Lesen für den Benutzer erschwert
• Überschriften und Textkörper sollten unterschiedlich groß sein, um das Scannen für den Leser zu erleichtern
• Überschriften und / oder Textkörper sollten nicht mehr als drei Zeilen lang sein
• Bewahren Sie Hierarchien von Nachrichten auf und der gesamte Text sollte konsistent ausgerichtet sein (links, rechts, Mitte)
• Erwägen Sie, interessante Typografie als Bildmaterial zu verwenden, um Platz zu sparen, indem Sie ein Element weniger
Call-to-Action (CTA)
• Sollte kurz und auf den Punkt wie „Go Now“ oder „Check It Out“
• Sollte für 160 × 600- und 300 × 600-Einheiten über der Falte liegen (ungefähr in der Mitte der Einheit)
• Sollte am Anfang jedes Wortes Großbuchstaben stehen, um das Scannen zu erleichtern
Tasten
• Sollte in kontrastierenden Farben sein, ohne knallig auszusehen
• Sollte gegen Ende der Kopie und / oder unten rechts positioniert sein
• Sollte in der Mitte größe einer Reihe von Banneranzeigen
• Anscheinend erhalten Sie mehr Klicks als nur Textlinks in Banneranzeigen (obwohl letztere eleganter aussehen)
Verschiedenes
• Fügen Sie Anzeigen einen grauen Rand von 1 Pixel hinzu mit weißem Hintergrund – es kann auf einer weißen Seite platziert werden
• Für die Genehmigung der ersten Runde verwandle ich manchmal die einzelnen Photoshop-Frames in ein animiertes GIF
• Vor der endgültigen Einreichung stehe ich zurück und blinzele auf die Anzeige, um zu überprüfen, ob sie leicht gescannt werden kann
• Sparen Sie wie bei allen Designs Zeit, indem Sie die Frames der
Eine Seite Haut bringt die Bannerwerbung zusammen, indem sie die Seite Wrapping oder Framing
FAZIT
Da Web-Nutzer so zu sehen, Bannerwerbung verwendet werden (und Anzeigen im Allgemeinen) gibt es eine Menge Änderungen vor. Obwohl die heilige Dreifaltigkeit von MPU, Leaderboard und Skyscraper die Banneranzeigenlandschaft dominiert, habe ich gesehen, dass andere Größen immer häufiger werden, wie 640 × 480 Interstitials (wenn Videos vorherrschen) und die 300 × 600 ‚Half Page‘ Anzeigen, die eine tiefere MPU haben, um die rechte Spalte zu dominieren. Eine vollständige Liste neuerer Geräte, die in Zukunft wahrscheinlich das Internet bevölkern werden, finden Sie auf der IAB-Seite zu diesem Thema, indem Sie hier klicken.
Für ein umfassenderes und harmonischeres Branding-Erlebnis werden Seitenhäute (oder ‚Hintergrundbilder‘) im Internet (insbesondere in der IMDB) viel häufiger verwendet, da sie die Bannerwerbung zusammenfassen. Wir machen ungefähr 900 Skins pro Jahr bei CBS Interactive (laden Sie dieses PDF herunter, um mehr zu lesen). Da auch Skins immer zahlreicher werden, gibt es auch eine Zunahme von maßgeschneiderten Rich-Media-Übernahmen, die besonders in RFPs gefragt sind (um mehr darüber zu lesen, siehe meinen Beitrag hier). Sowohl für Skins- als auch für Rich-Media-Übernahmen besteht jedoch immer noch die Notwendigkeit, dass die Anzeigenerfahrung in Verbindung mit den Standard-Banneranzeigen auf der Seite und der Benutzererfahrung mit ihnen funktioniert.
ANHANG
Die Geschichte der Bannerwerbung: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) Standards:
http://www.iab.net/guidelines/508676/508767/displayguidelines
Die Falte: http://en.wikipedia.org/wiki/Above_the_fold
Banner-Anzeigen für bestimmte Marken nachschlagen: http://www.moat.com
Bildschirmauflösung: http://en.wikipedia.org/wiki/Display_resolution
DIY-Anzeigenerstellung: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Banner-Anzeigen von Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Einige Crowdsourcing-Banner-Ad-Seiten:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Einige billige (und überfüllte) Web-Banner-Design-Sites:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
