Tipps, Tricks und Best Practices für Hero Bilder und dein Hero-Section Design

Was ist ein Hero Image?

Als Hero Image bezeichnen Webdesigner*innen übergroße Inhalte am oberen Rand einer Webseite. Dieser Inhalt fällt in den umfassenden „Hero Bereich“: jeder visuelle Inhalt oder Text, der oberhalb des Falzes liegt („above the fold“ geladen wird (wörtlich aus dem Zeitungsdruck kommend „oberhalb des Falzes“).

Die Aufgabe eines Hero Bildes?

Die Aufgabe eines Hero Bildes ist es, den Besucher*innen bei seinem ersten Blick auf dein Unternehmen oder deine Organisation willkommen zu heißen. Die Fülle an Hero Image Typen in der Web Erstellungs Toolbox macht es einfach, sich vorzustellen, warum es so viele Gründe gibt, ein Hero Section in deine Website einzubauen. Lass uns die wichtigsten Vorteile verstehen, die sich daraus ergeben, und warum How to Design a Hero Image: Best Practices und Beispiele Diese Techniken haben sich zu einem wichtigen Webdesign Trend unter Webentwicklern entwickelt.

Im Sinne der Tugend des „guten ersten Eindrucks“ haben Hero Bilder in der Regel eine oder mehrere der folgenden Eigenschaften:

• Ein hochwertiges Foto
• Ein fesselndes Video
• Ein Bild Slider oder Medienkarussell
• Eine animierte oder statische Illustration
• Überschriften und Beschreibungen neben oder vor dem visuellen Inhalt.

In Bezug auf das Styling sind die üblichen Designdetails, die du bei Hero Bildern sehen wirst, sind:

• Hintergrundbilder oder Videos mit Hintergrundüberlagerungen
• Feste oder klebrige Positionierung

Effekte, die die Transparenz oder Überlagerung Kontrastelemente verändern , die das Bild von der darüber liegenden Kopfzeile oder vom nachfolgenden Inhalt abheben.
Das Neue an Hero Bildern Webdesign ist, dass man einerseits mit einem ganz bestimmten, definierten Raum auf der Webseite arbeitet. Andererseits sind die Möglichkeiten des Stylings, der Effekte und der Techniken, die du bei der Gestaltung dieses Teils deines Seiteninhalts verwenden kannst, absolut endlos.

Warum solltest du ein Hero Bild verwenden?

Wenn das Design und die Funktionalität deine Hero Images ein hohes Niveau hat, erlangst du automatisch Glaubwürdigkeit und das Vertrauen der Nutzer. Dein Hero Image und der dazugehörige Hero Content stellen oft die erste Gelegenheit dar, das Alleinstellungsmerkmal deines Unternehmens zu vermitteln und sind der wichtigste Touchpoint für die Konversion. Wenn du ein bestimmtes Nutzerverhalten auslösen möchtest, ist ein leistungsstarkes, erstklassiges Hero Image, das einen starken ersten Eindruck bei deinen Besuchern*innen hinterlässt, der richtige Weg, damit zu beginnen.

Du kannst einen bleibenden ersten Eindruck hinterlassen

Der erste Eindruck ist in vielen Bereichen des Lebens wichtig, vor allem aber, wenn es darum geht, wie Benutzer*innen mit der Ästhetik einer Website umgehen.
Die Ergebnisse der Experten für Human Computer Interaction (HCI) und Visualisierung bei Google Research belegen den Einfluss von Hero Bildern auf den Erfolg einer Website:
Die Studie „The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments“ untersucht, wie sich visuelle Komplexität und Prototypizität auf das Design einer Website und den ersten Eindruck der Nutzer*innen auswirken.
Die Autoren zeigten ihren Studienteilnehmern 119 reale Website Screenshots und fanden heraus, dass visuelle Komplexität und Prototypizität die ästhetische Wahrnehmung des Nutzers innerhalb der ersten 50ms der Exposition beeinflussen, manchmal sogar innerhalb von 17ms.
Für uns als Webentwickler sind diese Ergebnisse ziemlich eindeutig: Das Hero Bild, das wir wählen, und die Art und Weise, wie wir es auf unserer Seite präsentieren, beeinflusst die Stimmung und das Verhalten der Nutzer in erheblichem Maße.

So holst du das Beste aus deinem Above the Fold Inhalt heraus:

Der „Above the Fold“ Bereich einer Webseite kann in einfachen Worten definiert werden: der Inhalt, der den Bildschirm ausfüllt bzw. über dem unteren Rand des Webbrowser Fensters erscheint, sobald die Seite geladen ist. Wenn der Inhalt gescrollt werden muss, um ihn zu sehen, bedeutet das, dass er sich „below the fold“ befindet.
Das „above the fold“ Konzept stammt aus dem Printdesign und dem Verlagswesen, lange vor den Tagen der digitalen Medien. Wir alle wissen, wie es ist, etwas auf der oberen Hälfte einer Titelseite sofort zu bemerken und man kann sogar mit Sicherheit sagen, dass der Inhalt der Titelseite oft ausschlaggebend dafür ist, ob wir eine Zeitung kaufen oder einfach am Kiosk stehen bleiben.
Das ist genau der Grund, warum dein Above the Fold Inhalt ein entscheidender Faktor für den Erfolg deiner Website sein kann.

Was meinen wir damit?

Wenn ein Website Besucher*in von deinem Above the Fold Inhalt und deiner Bildsprache verwirrt ist, wird er deine Website möglicherweise schnell wieder verlassen. Wenn dein Hero Bild und der umgebende Inhalt klar, ansprechend und gut repräsentativ für dein Wertversprechen sind, ist er eher geneigt, zu bleiben.
Je mehr du in dein Hero Image und den Inhalt investierst, desto geringer ist die Wahrscheinlichkeit, dass der Nutzer*innen die Seite schnell wieder verlassen.

Vergiss nicht das Responsive Design

Denke daran, dass die Position der Faltung eines Bildschirms subjektiv von der Bildschirmgröße des Geräts abhängig ist. Dies ist eine wichtige Überlegung beim Responsive Design, da der Inhalt oberhalb des Falzes so gestaltet und konfiguriert werden muss, dass er für mehr als eine Gerätegröße geeignet ist.
Webdesigner*innen und Entwickler*innen verwenden oft gerätespezifische Breakpoints, um diese Responsivität zu gewährleisten. So hast du die volle Kontrolle über die Anpassungsfähigkeit deines Website Designs an die jeweiligen Bildschirmgrößen und vermeiden, dass das Erscheinungsbild oder die Wirkung deines Hero Bildes beeinträchtigt wird.

So formulierst du Leistungsversprechen ohne Informationsüberflutung:

Vielleicht kennst du das Konzept der „Informationsüberlastung“ bei der Gestaltung von Websites und der Benutzererfahrung: Wir wollen vermeiden, zu viel Inhalt, insbesondere geschriebenen Inhalt, zu verwenden, wenn wir unsere Marke und unseren Unternehmenswert darstellen.
In diesem Sinne ist die Verwendung eines Bildes, einer Illustration oder eines Videos mehr wert als 1.000 Worte. Wenn du dich auf effektive Markenbilder konzentrierst, kannst du deine gesamte Geschichte in einem visuellen Medium einfangen. Anstatt deine Markengeschichte und dein Angebot zu verbalisieren, kannst du die kognitive Belastung des Benutzers auf einfache und benutzerfreundliche Weise verringern.
Der Screenshot oben stammt von Millbrook Construction, einem in Perth ansässigen Bauunternehmen, das sich auf „Wohnungsbau mit High End Finish und Liebe zum Detail“ spezialisiert hat. Für deine Elementor Site nutzt das Homepage Hero Bild die „above the fold“ Oberfläche perfekt aus.
Die Wahl des Hintergrundbildes in voller Höhe und in „Cover“ Größe geht noch einen Schritt weiter und verdeutlicht das große Talent des Unternehmens für die Gestaltung luxuriöser Wohnimmobilien. Das Wertversprechen ist so klar wie das Wasser des Pools und die Nutze*innen nehmen alle notwendigen Informationen bequem auf.

Deine Hero Bilder können helfen, Leads zu konvertieren

Fesselnde, sichtbare Touchpoints sind ein grundlegender Bestandteil für einen konversionsfördernden Nutzerfluss. Aus diesem Grund kann die Beziehung zwischen der Handlungsaufforderung des Hero Abschnitts und deinem Hero Bild selbst über das Erreichen deiner Website Ziele entscheiden.
Unabhängig davon, ob deine CTA Texte „jetzt anmelden“, „mehr erfahren“, „Kontaktiere uns“ und dergleichen lauten, muss dein Hero Bild in allen Bereichen nahtlos aufeinander abgestimmt sein: Sichtbarkeit, Messaging, Farbschema, Aussehen und Haptik und mehr.
Glaubwürdige, effektive Gespräche mit potenziellen Kunden sind auf eine angenehme, natürliche Atmosphäre angewiesen; eine visuell ansprechende Bildsprache ist der Weg, um dies zu erreichen.
Genau das sehen wir auf der Elementor Website, die von Caricature STL erstellt wurde, einem Team von Karikaturisten, die Unterhaltungsdienste für Veranstaltungen anbieten. Die animierte Überschrift (Hero Texten) berücksichtigt die glücklichen Kunden in ihren Hero Bildern und zeigt, was die Karikaturisten für jede Person bieten.

Die 4 Arten von Hero Bildern

Wenn du also die Ärmel hochgekrempelt hast und dich mit den praktischen Aspekten befasst, was geht in den Entscheidungsprozess ein, welche Art von Hero Bild verwendet werden soll?
Schauen wir uns die vier verschiedenen Arten von Hero Bildern an und wie du herausfindest, welches am besten zu deiner Website passt.

1. Produkt Hero Bild

• Ein Produkt Hero Bild ist ein großes, hochauflösendes Bild des Produkts der Marke. Diese Bilder können statisch oder in Bewegung/Aktion präsentiert werden, solange sie das Wertversprechen des Produkts visualisieren.
• Beliebte Möglichkeiten unter Webentwicklern, ihre Produktheldenbilder zu präsentieren und zu gestalten, können sein:
• Ein Screenshot einer digitalen Produktschnittstelle, wie z. B. ein Dashboard.
• Produkt Hero Bilder sind häufig auf E-Commerce Seiten zu finden. Potenzielle Käufer erwarten, dass sie echte Produktbeispiele sehen, um eine fundierte Entscheidung über die Relevanz des Shops für ihre Einkaufsbedürfnisse zu treffen.
• Avo lover hat Elementor verwendet, um seine E-Commerce Site zu erstellen.
• Der Kundenstamm von Avo lover ist ein Nischenmarkt innerhalb eines eng definierten Interessensbereichs und so macht die Wahl des Produktheldenbildes durchaus Sinn.

Beste Praktiken:

Investiere in die Qualität der Hintergrundbilder. Unabhängig davon, ob dein Hintergrundbild ein Foto, ein Video, eine Illustration usw. ist, sollte die Bilddatei so leicht wie möglich sein und eine kristallklare Auflösung haben.

Achte auf die Kontrastebene

Wenn du Text vor deinem Hero Bild  einfügst, stellst du sicher, dass der Kontrast zwischen den Website Elementen stark und gut sichtbar ist. Hier können Hintergrundüberlagerungen und Filtereffekte sehr hilfreich sein.

2. Kunden Hero Bild

Die nächste Art von Hero Bildern, die von Online Unternehmen verwendet wird, verfolgt einen alternativen Ansatz, um ihren Mehrwert zu zeigen: du zeigst deinen Kunden, der das Produkt verwendet. Diese Perspektive ist ein strategischer Weg, um mit deinen Online Besuchern*innen mitzufühlen und kurz und bündig zu zeigen, dass du ihren Schmerzpunkt verstehst und ihre Bedürfnisse befriedigen kannst.

Best Practices:

Vermittle deine Use Cases und Kundenerfahrungen

Differenziere dein Produkt, indem du seinen wichtigsten Anwendungsfall zeigst. Ein Bild, das deine Geschäftsziele und deinen Wert vermittelt, zeigt, wie der Besucher von deinem einzigartigen Angebot profitieren wird.

Beziehe dich auf dein Zielpublikum

Stelle sicher, dass deine Zielgruppe berücksichtigt wird, wenn du die Art von Person auswählst, die in deinem Bild dargestellt werden soll. Wähle ein Bild, das dein Verständnis des Fachgebiets und deine Fähigkeit, deine Kunden zu begeistern, kommuniziert.

3. Gründer*innen Hero Bild

Gründer*innen von Hero Bildern sind ein großes Bild des Gründers oder Geschäftsinhaber, das im Hero Bereich platziert wird, um den Website Besucher*innen bei seiner Ankunft zu begrüßen.
Gründer*innen Hero Bildern werden oft in unabhängigen Portfolio Websites, einzelnen Geschäftsinhabern wie einem Psychologen, Make up Künstlern oder Musikern verwendet.
Der größte Vorteil eines Gründer*in Hero Bilder ist, dass es dem Namen ein Gesicht gibt; es verbindet den Website Besucher*innen mit dem Dienstleister und schafft eine sympathische Dynamik zwischen den beiden Personen.
Die Auswahl des Bildmaterials für dein Gründer*in Hero Bild sollte mit Bedacht getroffen werden. Bei den vielen Möglichkeiten, die zur Auswahl stehen, kommt es darauf an: Was vermittelt deine Markenbotschaft am stärksten? Ist es ein Bild des Gründer*in, der direkt in die Kamera schaut und lächelt, oder vielleicht in eine andere Richtung schaut? Oder wäre ein Schnappschuss des Geschäftsinhabers bei der Arbeit besser geeignet?

Best Practices:

Achte auf die Größe und Abmessungen

Verwende ein klares Bild (oder Video) in der richtigen Größe, das den Besuchern genau die Details zeigt, die sie sehen müssen. Wenn nötig, kannst du dich auf wichtigere Bereiche in deinen Bildern konzentrieren, indem du sie zuschneidest und weniger wichtige Inhalte entfernst.

Konzentriere dich darauf, was dein Bild vermitteln soll

Die Rolle des Hintergrunds sollte darin bestehen, die Person vor ihm zu betonen, nicht umgekehrt. Die wirkungsvollsten Gründer*innen Hero Bilder zeigen den Geschäftsinhaber lächelnd, was seine Leidenschaft für die Zufriedenheit der Kunden impliziert.

4. Kontextloses Hero Bild

Nicht kontextuelle Hero Bilder sind, wie der Name schon sagt, Aufnahmen, die etwas zeigen, das scheinbar „keinen Bezug“ zum Produkt oder zum Geschäftsinhaber hat. Das Ziel eines nicht kontextuellen Hero Bildes ist es, durch visuelle Assoziationen oder unterschwellige Botschaften einen Eindruck beim Besucher*innen zu hinterlassen. Das Betrachten des nicht kontextuellen Bildes zeigt dem Nutzer*innen, worum es bei dem Produkt oder der Marke geht, allerdings auf indirekte Art und Weise.
Baue ein Unternehmen auf und sehe zu, wie es wächst, so hoch wie die höchsten Bürotürme der Stadt.

Best Practices:

Stelle sicher, dass die Besucher*innen verstehen, warum das Bild relevant ist

Auch wenn du kein direktes Bild von deinem Produkt selbst zeigst, stelle sicher, dass die Verbindung zwischen deinem Produktwert und deinem nicht kontextuellen Hero Bild dennoch leicht zu erkennen ist. Benutzer*innen sollten keine Zeit damit verbringen müssen, über seine Relevanz nachzudenken.

Stelle eine klare Verbindung zwischen Hero Bild und Hero Text her

Der Hero Text, den du in Verbindung mit deinem Bild platzierst, muss in direktem Zusammenhang mit seinem visuellen Inhalt stehen. Dies ist eine Notwendigkeit, auch wenn es mehrere Iterationen deines Textes und der Wahl der Formulierung erfordert.

Erstelle ein kohärentes Designschema

Die Farben, die du für Schaltflächentexte und Hintergründe, Überschriften oder Beschreibungen wählst, sollten auf das Hero Bild oder die Illustration abgestimmt sein. Dies gilt auch für die klickbaren Akzente deiner Website: die Navigationsmenüpunkte, das Logo usw.
Wir alle wissen, wie wichtig eine konsistente visuelle Sprache für das Prestige unserer Website, die Markenpräsenz und die professionelle Glaubwürdigkeit ist. An dieser Stelle können Design Styleguides wirklich hilfreich sein, insbesondere um sicherzustellen, dass deine Hero Bilder mit deinem Website Design übereinstimmen.

Wie du dein Hero Bild testest: Methoden, die wir lieben

Sobald du mehrere Optionen für dein Hero Image getestet hast, kannst du sofort feststellen, welche Option zu mehr Engagement führt und Erkenntnisse darüber gewinnen, welches Design effektiver ist und schließlich bei diesem bleiben.
Hier sind einige Testmethoden, die einfach einzurichten sind und eine Fülle von Erkenntnissen liefern, um sicherzustellen, dass du das bestmögliche Hero Image verwendest.

A/B Test deines Hero Bildes

A/B Tests erfordern, dass der Designer zwei oder mehr Optionen für den Hero Abschnitt erstellt (seien es zwei Versionen der Überschriften und ihrer Texte, das Hero Bild selbst, das Layout des Abschnitts, die Schriftgröße oder alles andere, was dir einfällt) es liegt ganz bei dir. Stelle dir vor, du hast dich entschieden, einen Überblendungsmodus zu verwenden, wenn Benutzer*innen mit dem Mauszeiger über dein Hero Bild fahren, aber du bist dir nicht sicher, welcher Modus das Benutzererlebnis am meisten verbessern wird. Wenn du einen A/B Test zwischen zwei verschiedenen Modi durchführst (es gibt immerhin 13 Überblendungsmodus Optionen), kannst du mehr als einen Modus ausprobieren, um zu sehen, welcher Modus mehr Hovering, Klicks und letztendlich mehr Engagement erzeugt.
Einer der häufigsten und wichtigsten Schritte beim A/B Testing deines Hero Abschnitts ist es, auch mindestens zwei CTA Schaltflächenoptionen zu testen um herauszufinden, welche Schaltfläche die meisten Conversions generiert.
Genauer gesagt ist das Testen der Farbe eines CTA Buttons immer ein hilfreiches Experiment, mit dem du herausfinden kannst, welche Button Farbe die Nutzer am meisten anzieht und einbindet. A/B Tests der Button Farbe sind bei Webentwicklern sehr beliebt, da sie schnell und einfach durchzuführen sind und kaum zusätzliche Design Ressourcen erfordern.

Verwende Heatmap Tools, um das Benutzerverhalten zu entdecken

Heatmap Tools identifizieren und analysieren, wo Benutzer*innen auf einer Webseite klicken. Mit diesen Tools können Website und Landing Page Besitzer*innen genau sehen, wie die Benutzer*innen aktiv durch den Inhalt navigieren. Dies wird erreicht, sobald das Tool identifiziert, ob und wie die Nutzer*innen mit den wichtigsten Elementen wie Links, Schaltflächen, Opt Ins und natürlich CTAs interagieren.
Einige Erkenntnisse, die Website Besitzer*innen aus der Verwendung von Heatmap Tools ableiten können, sind:

• Nicht anklickbare Elemente lenken die Nutzer*innen ab.
• Buttons sind zu groß oder zu klein.
• Button Farben sind nicht sichtbar.

Sei der Hero deiner Website

Die Gestaltung des Hero Bereiches und deines Hero Bildes ist eine der wichtigsten und einflussreichsten Entscheidungen in deinem Webdesign Prozess. Webentwickler bezeichnen den Hero Bereich einer Website oft als den „Eröffnungsakt“ deiner Website Präsentation, im Wesentlichen deine Willkommensgeste.
Website Trends entwickeln sich ständig weiter und fügen neue Funktionen zu den Möglichkeiten der Webgestaltung hinzu. Es ist immer wichtig, den Hero Bereich in den Vordergrund deiner Designüberlegungen zu stellen um sicherzustellen, dass er immer sein Potenzial erreicht, um deine Website der breiten Masse vorzustellen.
Wir sind immer auf der Suche nach Inspiration und Ideen für aussagekräftige Hero Bilder und wie man sie auf einzigartige Weise gestalten kann.
Zeige uns deine Beispiele in den Kommentaren!

Übersetzt von Nata Uchava
Von Website Freiburg

Quellen, unsere Websoftware Partner Elementor Pro:
www.elementor.com/blog/hero-image/