Geschrieben vonKerry A. Thompson
[Aktualisiert im September 2022 mit einigen weiteren Empfehlungen.]
Die Auswahl des Hauptbannerbilds auf der Startseite Ihrer Website hat Auswirkungen auf die Farben, Stimmung und Schriftarten Ihrer gesamten Website. Designer berücksichtigen viele Dinge, einschließlich Farben, Größe und Anordnung, bevor sie sich für ein sogenanntes „Heldenbild“ entscheiden. Um das richtige Bild für Ihre Website zu finden, treffen Sie vier Faktoren: das Thema, die Farben, den für Ihre Nachricht verfügbaren Platz und wie das Foto aussehen wird, wenn es auf einem Mobiltelefon zugeschnitten wird.
Finden Sie das richtige Thema
Ein Bannerbild kann eine Sammlung Ihrer Produkte, ein Bild von Ihnen oder den physischen Standort Ihres Unternehmens zeigen. Es kann auch eine Szene dargestellt werden, die die Emotionen hervorruft, die Kunden bei der Nutzung Ihres Produkts oder Ihrer Dienstleistung empfinden sollen, oder den Wert demonstriert, den sie erhalten. Das Bild muss nicht unbedingt ein Foto sein; Es könnte sich auch um eine Illustration handeln, die Sie finden oder mit deren Erstellung Sie einen Künstler beauftragen.
Sie können gerne Ihre eigenen Fotos für ein Bannerbild verwenden
Scheuen Sie sich nicht, Ihre eigenen Fotos für ein Bannerbild aufzunehmen. Mobiltelefone machen qualitativ hochwertige Fotos und Ihre persönlichen Fotos sind authentisch und einzigartig für Ihr Unternehmen. Erstellen Sie das Foto als horizontales Bild mit genügend Platz um das Foto herum, um es bei Bedarf zuzuschneiden. Entfernen Sie störende Hintergründe, die für das Foto nicht relevant sind. Stellen Sie sicher, dass die Beleuchtung gut ist und der Fokus kristallklar ist. Denken Sie daran, dass nur der mittlere Teil des Bildes angezeigt wird, wenn Ihre Website auf einem Mobiltelefon angezeigt wird. Achten Sie daher darauf, was der mittlere Teil des Bildes ist, und stellen Sie sicher, dass er gut als Bannerbild funktioniert.
Verwenden Sie Archivfotos, wenn Sie keine eigenen Fotos haben
Die meisten Bannerbilder, die ich für Websites verwende, stammen aus meinen Lieblingsquellen für kostenlose Stockfotos:UnsplashUndPixabay. Wenn ich dort kein Foto finde, habe ich auch bei gekauftShutterstock.com, das niedrige Preise für einmalige Projekte und eine größere Vielfalt bietet.
Wählen Sie die richtigen Farben
Die Farben eines Bannerbildes sind sehr wichtig. Sie sollten die Farben Ihres Logos (falls Sie ein Logo haben) sowie die Farben von Überschriften, Schaltflächen und Hintergründen auf Ihrer Website ergänzen oder mit diesen übereinstimmen. Wenn ich eine neue Website entwerfe, finde ich oft zuerst das Bannerbild und dieses bestimmt die Auswahl der Farben.
Passen Sie die Bildfarben an die Farben Ihrer Website an
Wenn Sie nach einem Stockfotos suchen, können Sie Farbnamen als Schlüsselwörter verwenden, z. B. „Türkis“, „Fuchsia“ oder „Grün“. Es gibt auch einige unterhaltsame Farbpalettengeneratoren, mit denen Sie ein Bild hochladen und dann eine Farbpalette sehen können, mit der Sie es an die Farben der Website anpassen können.
Hunde inspirierten die Website-Farben fürSweetbriar Kennel. Für die Banner haben wir ihre eigenen Heimfotos verwendet, da ihre Hunde sehr fotogen sind und ihr Fell in den vorherrschenden Farben Braun und Beige gehalten ist. Bei der Betrachtung einiger verschiedener Farbpalettengeneratoren für diesen Blogbeitrag habe ich das Bild der Startseite hochgeladen und eine Palette von Farben generiert, die im Bild zu finden sind. Obwohl ich die Farben für die Website von Hand ausgewählt hatte, waren die Ergebnisse andersColormind.iowaren sehr ähnlich. Die Farbergebnisse werden als Hexadezimalwerte angezeigt, dem Standard für Webfarben. Wenn Sie diese in Ihren Designstilen verwenden, werden sie zuerst mit einem Hashtag verwendet, z. B. #EID5C2 für die in der Palette unten gezeigte Beigefarbe.
Lassen Sie Raum für Ihre Nachricht
Das Bannerbild ist das erste Bild, das die Leute sehen, wenn sie Ihre Website öffnen. Daher ist es der perfekte Ort, um Ihre Botschaft und einen Aufruf zum Handeln hervorzuheben. Wenn Sie das Bannerbild als Hintergrund für Text und andere Designelemente verwenden, möchten Sie sicherstellen, dass die von Ihnen hinzugefügten Texte, Schaltflächen oder E-Mail-Anmeldeformulare so angezeigt werden, dass sie sowohl auf dem Desktop- als auch auf dem Mobiltelefondisplay funktionieren. Beachten Sie, dass das Hinzufügen von Text zu Ihrem Bannerbild nicht zwingend erforderlich ist, wenn Sie möchten, dass es eine eigene Aussage macht. Für Besucher ist es jedoch hilfreich, sofort zu wissen, was Sie tun, wenn sie die Website öffnen.
Auf meiner Squarespace-Website ist die Navigation Teil des Bannerbilds. Die Hauptnachricht und eine Schaltfläche (Link zur Seite „Dienste“) werden oben auf dem Bild platziert. Zur Vereinfachung zeige ich oben auf der Website auch Social-Media- und E-Mail-Symbole an.
Denken Sie an das Handy-Display
Sowohl Squarespace als auch Weebly bieten responsives Design, eine automatische Größenanpassung Ihres Website-Designs, damit es auf verschiedene Geräte, einschließlich Laptops, Tablets und Mobiltelefone, passt. Bei Mobiltelefon-Displays wird das Bannerbild zugeschnitten, sodass nur der mittlere Teil des Fotos angezeigt wird. Sie sollten bei der Gestaltung Ihrer Website die mobile Vorschaufunktion nutzen, um sicherzustellen, dass der automatische Zuschnitt sowie der Text und andere Designelemente auf dem Foto weiterhin gut aussehen.
Wie Sie sehen können, zeigt das Bannerbild meiner Website nur den mittleren Bereich des Bannerbildes.
Optimieren Sie Ihr Bannerbild, bevor Sie es hochladen
Beachten Sie diese Best Practices für die endgültige Version des Bannerbilds, das Sie auf Ihre Website hochladen.
Schneiden Sie das Bild zu, um nicht relevanten Hintergrund zu entfernen, und stellen Sie sicher, dass der mittlere Teil des Bildes für die Anzeige auf Mobiltelefonen gut aussieht.
Wenn Sie ein Foto von einer Stock-Foto-Website herunterladen, können Sie eine Größe von etwa 1.920 Pixel Breite x 1.280 Pixel Höhe wählen (die mittlere Downloadgröße auf Unsplash oder die große Downloadgröße auf Pixabay). Ein Seitenverhältnis von 3:2 scheint sinnvoll ein gutes Ziel sein. Ändern Sie die Größe von Originalbildern auf eine Breite von bis zu 2.000–2.500 Pixeln für Squarespace oder 1.500–2.000 Pixeln für Weebly (und nicht weniger als 1.000 Pixeln). Die Höhe ist flexibel, aber normalerweise erhalte ich ein Homepage-Banner mit einer Höhe zwischen 1.000 und 1.500 Pixeln. Beachten Sie, dass der obere und untere Rand des Bannerbilds bei den meisten Anzeigen wahrscheinlich abgeschnitten wird. Sehen Sie sich das Bild daher in Ihrem Website-Editor in der Vorschau an, um sicherzustellen, dass es gut aussieht.
Speichern Sie das Bild erneut als JPG-Datei mit der niedrigsten Qualität, die immer noch klar und scharf aussieht. Dies reduziert die Dateigröße und erhöht die Geschwindigkeit, mit der die Website geladen wird. Ich versuche es mit Dateigrößen von 100 KB bis 200 KB, wenn das Bild immer noch gut aussieht.
Sie können sich nicht entscheiden, welches Bannerbild Ihnen gefällt?
Designer und Vermarkter von Agenturen verwenden das sogenannte A/B-Testing. Das ist eine schicke Art zu sagen, dass sie verschiedene Versionen eines Designs ausprobieren, um herauszufinden, welche ihre Kunden bevorzugen. Wenn Sie ein paar Bannerbilder ausgewählt haben und sich nicht entscheiden können, welches Sie verwenden möchten, können Sie eines eine Weile ausprobieren und sehen, ob Ihre Website von mehr Leuten gesehen wird und diese mehr Seiten Ihrer Website besuchen. Sie können auch sehen, ob Ihr Call-to-Action erfolgreich ist (konvertiert er Besucher?). Probieren Sie dann das andere Bild aus, das Ihnen gefällt, und vergleichen Sie die Ergebnisse, um zu entscheiden, welches Bild Ihren Kunden am besten gefällt.
Was ist mit Bannern auf anderen Seiten?
Ich habe mich in diesem Blogbeitrag auf die Auswahl eines Bannerbilds für Ihre Homepage konzentriert, aber viele Websites haben auf jeder Seite Bannerbilder. Es liegt an Ihnen, ob Sie auf jeder Seite dasselbe Bannerbild wiederholen oder auf jeder Seite ein anderes Bannerbild haben möchten. Ich habe beide Ansätze auf meiner Website durch verschiedene Neugestaltungen ausprobiert und festgestellt, dass ich nicht wirklich eine Präferenz habe. Wenn Sie sich für unterschiedliche Bannerbilder für jede Website-Seite entscheiden, stellen Sie sicher, dass jedes Bild den gleichen Stil, das gleiche Aussehen und die gleichen Farben wie das Bannerbild hat, das Sie für die Startseite ausgewählt haben. Zusammen sollten sie ein passendes Set bilden. Beachten Sie außerdem, dass die Banner auf anderen Website-Seiten normalerweise etwas weniger hoch sind als die Startseite, selbst wenn sie dasselbe Bannerbild verwenden. Dadurch kann das Bild der Startseite eine größere Wirkung erzielen.
Mit diesen Best Practices kann die Suche nach einem Bannerbild für Ihre Website ein unterhaltsamer und kreativer Prozess sein. Und das richtige Bannerbild kann auch Gelegenheitsbesucher zunächst zu interessierten Lesern machen, was wiederum dazu führt, dass sie Maßnahmen ergreifen, z. B. eine kostenlose Beratung buchen, eine E-Mail-Liste abonnieren oder Ihr Produkt kaufen.
Mein dazugehöriger Blogbeitrag
7 Profi-Tipps für ein perfektes Bannerfoto, auf dem Menschen zu sehen sind
Artikel anderer Autoren
Heldenbilder, die die Conversions steigern
Bilder, die nicht stinken
So wählen Sie Farben für Ihre Website aus
Weitere Blogbeiträge (klicken Sie auf das Bild, um mehr zu lesen)
BilderStartseiteBannerbildQuadratraumMittelpunktsich anpassendes Designsich anpassendes DesignStockfotosFotosHeldenbild
Sie brauchen keine große Agentur, um Ihre Website zu erstellen. Sie brauchen nur die richtige Person. ich bieteSquarespace-Dienstleistungen für Website-Design und Inhaltsentwicklungfür Kreative, Coaches und Heiler. Erfahren Sie mehr in aKostenlose 30-minütige Beratung.
