Hero Image

Was ist ein Hero Image?

Der Begriff „Hero Image“ im Webdesign bezieht sich auf ein großes, aufmerksamkeitsstarkes Bild mit Text, das in der Regel im „Above The Fold“-Bereich der Webseite, direkt unter dem Header der Website, angezeigt wird.

Normalerweise nimmt ein Hero Image praktisch den gesamten Bereich vor dem Scrollen in voller Breite auf der Seite ein. Die anderen Layoutkomponenten (Call-to-Action-Schaltfläche, Text usw.) werden in der Kopfzeile und auf oder neben dem Hero Image platziert, um eine einheitliche und harmonische visuelle Komposition zu schaffen.

Das Hero Image kann entweder stationär oder interaktiv (Videos und Animationen) sein. Es kann ein technisches Thema, ein Bauwerk, eine Landschaft oder sogar ein abstraktes Modell oder Kunstwerk sein. Das grundlegende Ziel ist es, durch ein Bild, das sofort die Aufmerksamkeit des Verbrauchers auf sich zieht, eine schnelle visuelle, emotionale und lehrreiche Verbindung zum Verbraucher herzustellen. Dabei geht es nicht darum, das gesamte Thema zu erklären, sondern es so einzuführen, dass die Leser aufhören zu scrollen und klicken, um mehr zu lesen.

Das Hero Image dient als Einleitung für:

• Online-Publikationen aller Art, einschließlich Nachrichten, Unterhaltung und Sport.
• Produktwebseiten für alles von Surfbrettern bis zu Software.
• Marketing für Film, Fernsehen oder Musikaufnahmen.
• Websites zum Thema Hotels und Gastgewerbe.
• Veranstaltungsorte.
• Leben und Stil-Blogs.
• Berater und Werbefirmen.

Die Bedeutung des Hero Images

Das Hero-Bild ist eine wichtige Komponente des Webdesigns und hat mehrere Funktionen und Vorteile auf einer Website.

Beeindrucken und Besucher anziehen

Die Stärke der visuellen Wahrnehmung wird von der ersten Sekunde an aktiviert, denn es bleibt nur wenig Zeit, um das Interesse eines Website-Besuchers für neue Angebote zu wecken oder einen wiederkehrenden Besucher zu überraschen. Die Möglichkeit, die Aufmerksamkeit der User schnell zu gewinnen, bietet das Hero Image.

Wissen und Informationen

Im Allgemeinen verarbeiten und interpretieren Menschen visuelle Bilder wesentlich schneller als Worte. Dies bedeutet, dass das Hero Image nicht nur ein Aspekt der Attraktivität ist, sondern auch als pädagogische Komponente der Seite dient, indem es eine kurze visuelle Botschaft über den Inhalt vermittelt.

Verbesserte Navigation

Ein angemessen komponiertes Hero Image kann die Navigation verbessern und die Aufmerksamkeit auf die Schaltfläche für die Aufforderung zur Handlung lenken.

Gefühle bei den Besuchern wecken

Der emotionale Kontext des User-Erlebnisses spielt eine wichtige Rolle und erhöht die Menschlichkeit der Interaktion zwischen der Webseite und ihrem Besucher. Hero Images sind eine bewährte Methode, um durch Bilder, Formen und Farben die richtigen Gefühle beim Betrachter hervorzurufen und schon in den ersten Momenten eines Gesprächs die richtige Stimmung zu erzeugen.

Ästhetisches Vergnügen

Zweifellos stehen die Dienste und die Performance der Website an erster Stelle. Aber die Menschen wollen auch etwas, das dem Auge schmeichelt. Angesichts des harten Online-Wettbewerbs und der wachsenden Beliebtheit von Ästhetik als Bestandteil eines guten User-Erlebnis ses, das mit Hilfe eines Hero Images befriedigt wird, spielt Ästhetik eine große Rolle.

Verschiedene Grafiken, die für Hero Images verwendet werden

Das Bildmaterial, das für das Hero Image verwendet wird, und die Erzählung, die es vermittelt, werden durch die Ziele der Homepage und die Art der Website als Ganzes bestimmt. Es kann sich um aktuelle Nachrichten handeln, die die Kunden sofort sehen müssen, um eine Grafik, die das Wesentliche oder die Vorteile eines Geschäfts oder einer Information einfängt, um eine neue Veröffentlichung, die größte Aufmerksamkeit erfordert, und so weiter. Hero Images werden häufig auf E-Commerce-Websites verwendet, um die meistverkauften Artikel, Preisnachlässe und Sonderangebote, wichtige Dienstleistungen oder besonders günstige Angebote hervorzuheben.

Das Hero Image kann einen der folgenden Grafiktypen verwenden

Fotos

Der Hauptvorteil von Fotos besteht darin, dass sie den Usern helfen, eine Verbindung zwischen den Inhalten, die sie online sehen, und den physischen Objekten und realen Menschen, die sie bewohnen, herzustellen.

Wenn sie auf einer Website verwendet werden, wecken sie starke Assoziationen und können die gewünschte Stimmung in einem für das Publikum angemessenen Stil ausdrücken. Fotos in Ihrer Online-Useroberfläche ermöglichen es Ihnen, Realität und Ästhetik zu vereinen, indem Sie den wesentlichen Stil beibehalten und gleichzeitig die Emotionen Ihrer Zielgruppe ansprechen.

Auf E-Commerce-Websites, bei denen das Konzept „Sie bekommen, was Sie sehen“ entscheidend für den Erfolg ist, sind Fotos das wichtigste visuelle Darstellungsmittel für die Artikel.

Illustrationen

Userdefinierte Grafiken sind heute ein beliebter Webdesign-Trend für eine Reihe von Website-Zwecken, darunter auch Hero-Bilder. Userdefinierte Grafiken, die in einer Vielzahl von Designs erstellt werden können, helfen effizient dabei, die Informationen auf einer Website oder einem Bildschirm schnell zu verstehen. Außerdem stärken sie die visuelle Einzigartigkeit und verbessern die Ästhetik und Eleganz von Websites, Blogs und Landing Pages.

3D-Grafiken

3D-Grafiken, die durch die Conversion von 3D-Drahtgittermodellen in 2D-Bilder erzeugt werden, sind eine weitere Art von Online-Grafiken, die immer beliebter werden. Einer ihrer größten Vorteile für das Webdesign ist, dass viele von ihnen lebensechte Effekte bieten. Gut gemachte 3D-Grafiken sind sehr ansprechend, modern und überzeugend, so dass sie einen bedeutenden Einfluss auf das Erscheinungsbild und die Conversion Rates von Websites haben können, auch wenn die Herstellung von Bildern dieser Art spezielle Fachkenntnisse erfordert, teuer ist und viel Zeit in Anspruch nimmt. Aus diesem Grund werden sie jetzt häufig für Hero-Bilder verwendet.Diese

Website zeigt einige inspirierende Beispiele für die Verwendung verschiedener Grafiken in den Hero Imagesn.

Verfügbare Arten von Hero Imagesn

Es kann schwierig sein, sich für das ideale Hero Image für Ihre Website zu entscheiden. Das Bannerbild, das Sie wählen, hängt davon ab, ob Sie ein Produkt, eine Dienstleistung oder nur Inhalte bewerben. Auch Videos können verwendet werden, um umfassende Informationen über Ihr Unternehmen zu vermitteln.

Es ist schwer, mit Sicherheit zu sagen, welches Format am besten funktioniert, aber am besten ist es, einige Alternativen auszuschließen und dann A/B-Tests durchzuführen, um zu sehen, welches Format am besten funktioniert. Damit Sie verstehen, was Sie mit den verschiedenen Hero-Bildformaten erreichen können, finden Sie hier ein paar Beispiele:

Betonung auf dem Produkt

Manchmal ist die beste Wahl für ein Hero Image ein einfaches, hochauflösendes Foto Ihres Produkts in Verbindung mit einer kurzen Beschreibung. Die Website von Apple ist ein gutes Beispiel dafür, wie man mit Produktfotos Besucher anlockt. Zusätzlich wird ein Slider verwendet, um verschiedene Produkte zu zeigen.

Vorteile hervorheben

Für Unternehmen, die Dienstleistungen anbieten, ist ein Hero Image, das einen USP oder ein Wertversprechen hervorhebt, eine kluge Wahl. UXPin beispielsweise bietet seinen Usern auf seiner Website die Möglichkeit, sofort mit der Nutzung seiner Dienstleistung zu beginnen, indem es den USP über ein dynamisches Hero Image einblendet.

Grundlegende Darstellung

Sie können den Besuchern das Angebot Ihres Unternehmens mit einem einfachen, simplen Bild erklären, ohne sie mit Details zu überladen. Sie können das Ganze mit einem klaren CTA und einem klaren Text ergänzen. Schauen Sie sich die Homepage von Buffer an, um dies in Aktion zu sehen.

Das menschliche Element

Es versteht sich von selbst, dass die Einbeziehung realer Personen in Ihr Bildmaterial dazu beiträgt, Glaubwürdigkeit und Vertrauen bei den Betrachtern aufzubauen.

Emotionen erzeugen

Die Wahrscheinlichkeit, dass Besucher Ihrer Aufforderung zu einer bestimmten Handlung nachkommen, ist größer, wenn Sie Ihr Hero Image nutzen können, um ihnen ein Gefühl zu vermitteln. Eine gemeinnützige Organisation namens Charity: Water verwendet Spenden, um sauberes Trinkwasser in verarmten Ländern bereitzustellen. Ihre Hero-Illustrationen veranschaulichen eindrucksvoll die positiven Auswirkungen einer Spende.

Best Practices für Hero Images

Trends sind nur eine kleine Komponente bei der Entwicklung eines starken Heldenimages. Der Rest der Magie basiert auf bewährten Designprinzipien. Sie können ein Hero Image erstellen, das bei Ihrem Publikum Anklang findet, wenn Sie sich an diese bewährten Verfahren halten

Größe und Platzierung

Beachten Sie die unten aufgeführten Tipps:

1. Das Hero Image muss zentriert sein.
2. Der Text muss einfach zu lesen sein.
3. Es muss auf allen Arten von Bildschirmen fantastisch aussehen.
4. Das Bild sollte das Fenster ausfüllen.
5. Beachten Sie die folgenden Größenrichtlinien
   • Die optimale Größe für ein bildschirmfüllendes Hero-Bild ist: 1.200 Pixel breit und mit einem Seitenverhältnis von 16:9
   • Die optimale Auflösung für ein Banner-Hero Image ist 1600 x 500 Pixel.
   • Die optimale Auflösung für ein mobiles Hero Image ist: 800 x 1.200 Pixel
6. Testen Sie JPG- und PNG-Dateien, um zu sehen, welche schneller lädt.

Gleichgewicht und Harmonie

Wenn das Hero-Bild nicht zum Rest des Stils passt, werden die Besucher schnell durch ein schlechtes Design abgelenkt und verlassen die Website sofort. Die ästhetische Kohärenz lässt sich aufrechterhalten, wenn Sie genau auf Schriftarten, Größen, Farben, Navigation, Grafiken und Inhalte achten.

Wenn Sie eine Idee für ein Hero Image entwickeln, sollten Sie sich mit Ihrer Markenidentität und Ihren Prinzipien auseinandersetzen. Es wäre keine gute Idee, wenn die Besucher uninteressiert werden, bevor sie zum wichtigen Teil des Inhalts kommen.

Logische Organisation

Eine effiziente Organisation ist ein notwendiger Bestandteil eines harmonischen Designs. Der Inhalt Ihres Hero-Bildes sollte in einer logischen Struktur angeordnet sein, wobei jedes Element auf dem vorhergehenden aufbaut. Dies ist wichtig für die Synchronisierung von Fotos mit Kopien.

Stellen Sie sicher, dass Ihre Botschaft verstanden wird und dass Ihre Grafiken sie unterstützen. Es ist nützlich, ein Grundgerüst zu erstellen, wie Ihr Hero Image auf der Seite angeordnet werden soll.

Originalgrafiken

Obwohl Stock-Fotos ein wesentlicher Bestandteil des Content-Marketings sind, ist es ideal, einzigartiges Bildmaterial einzubinden, da es dazu beitragen kann, die Marketingziele erfolgreicher zu erreichen. Sie können Ihrer Fantasie freien Lauf lassen, indem Sie Canva verwenden, um einzigartige Hero Images zu erstellen, oder indem Sie auf Behance nach Ideen suchen.

Kontinuität und Konsistenz

Was ist die größte Herausforderung bei der Erstellung von ansprechendem Bildmaterial? Marketingexperten sagen, dass es die konsequente Erstellung ist. Legen Sie einen Zeitplan für die Erstellung von Bildmaterial fest und fügen Sie diese Kosten Ihrem Marketingbudget hinzu, wenn es nötig ist.

Die Neugestaltung Ihrer veralteten Grafiken kann eine gute Option sein, wenn die Zeit drängt. Es ist eine innovative Technik, um Dinge schnell, effektiv und effizient zu erledigen.

Fazit

Ein beeindruckendes Hauptbild zieht die Besucher an und verleitet sie zum Verweilen und Stöbern auf der Website.

Hero-Bilder haben einen erheblichen Einfluss darauf, wie Ihre Marke wahrgenommen wird, auf den Internetverkehr und auf die Konversion, denn sie sind der primäre Punkt der Interaktion, den Kunden mit Ihrer Marke haben. 

Zusammenfassend lässt sich sagen, dass Hero-Bilder ein vielseitiges und umfangreiches Toolkit für Website-Designer darstellen. Sie haben ein erhebliches Potenzial, die Userfreundlichkeit und Attraktivität der Website zu verbessern und die Besucher zu motivieren, mehr zu erfahren. Jetzt ist es an der Zeit, Ihr neu erworbenes Wissen in die Tat umzusetzen und ein Hero Image zu erstellen, das die Aufmerksamkeit der Betrachter sofort fesselt. Um sicher zu sein, dass Ihr Hero Image funktioniert, können Sie mit VWO schnell und einfach einige A/B-Tests durchführen. Nutzen Sie eine kostenlose Testversion von VWO, um loszulegen.