Selbst wenn dir der Begriff Hero Image nichts sagt, weißt du sehr wahrscheinlich, was das ist. Das Hero Image ist das große, auffällige Bild, das du als Erstes siehst, wenn du eine Website besuchst. Es ist eine Art Kombination aus Banner und Willkommensmatte.

Beinahe jede Website hat ein Hero Image. Auf manchen Seiten ändert sich das Hero Image regelmäßig, wohingegen es auf anderen Seiten jahrelang gleich bleibt. Viele Webseiten nutzen Slider, eine Reihe rotierender Bilder und Überschriften als Hero Images.

Ein Hero Image soll Markenbindung erzeugen. Da es das Erste ist, das die Leute sehen, wenn sie auf eine Website gehen, spielt es oftmals eine bedeutende Rolle bei der Entscheidung, ob man auf der Website bleibt oder sie wieder verlässt. Wenn du also eine einladende Website erstellen möchtest und willst, dass das Engagement deiner Besucher:innen durch die Decke geht, solltest du ein perfektes Hero Image für deine Marke designen.

Illustration: Frau mit website hero image für ein kuchenunternehmen
Sei dein eigener Held, von OrangeCrush

Wie du das perfekte Hero Image für deine Website erstellst:

Was ist ein Hero Image?

Du siehst sie jeden Tag. Hero Images sind die großen Bilder, die man auf Homepages sieht. Sie sind das Erste, was du auf einer Website siehst; eine große, auffällige Vorstellung der Marke (selbst wenn deine Marke an sich nicht besonders auffällig ist).

Hier sind ein paar Beispiele für Hero Images auf Webseiten:

hero image showing a child’s hand holding a pink teddy bear
Webdesign von Vilius Balciunas
warm-toned hero image featuring people running away from the viewer
Webdesign von patrykb
weiß-rote Website mit zwei Jack-Russell-Terriern
Webdesign von Orangedan

Hero Images sind so platziert, das du sie als Erstes siehst, wenn du eine Website besuchst. Daher sind sie so designt, dass sie dein Interesse wecken und dafür sorgen, dass du dir die Website anschaust. Hero Images werden zwar oft genutzt, um bestimmte Angebote oder Inhalte zu bewerben, doch das ist nicht immer der Fall. Was aber immer der Fall ist: Ein gutes Hero Image Design präsentiert die Marke einer Website klar und deutlich.

Schwarz-Weiß Hero Image mit Kettlebells und weißem Text
Webdesign von Vilius Balciunas

Ein Hero Image ist häufig das größte Bild einer Homepage und auf manchen Seiten ist es das einzige Bild. Sie können anklickbar sein, müssen es aber nicht. Genauso können sie Text enthalten, müssen es aber nicht. Das Ziel besteht darin, ein Hero Image Design zu kreieren, welches eine Bindung zu den Besuchenden aufbaut und sie lange genug auf der Website hält, um das zu tun, was sie tun sollen, sei es ein Produkt kaufen, sich deinen Content anschauen, etwas herunterladen oder mit anderen auf der Seite interagieren.

Was zeichnet ein gutes Hero Image aus ?

Ein gutes Hero Image erzählt nicht, es zeigt.

Es zeigt deine Marke in einem Bild, aber nicht auf die Art, wie es ein Logo tut. Ein Logo fasst deine Marke symbolisch zusammen, wohingegen ein Hero Image ein Schnappschuss des Erlebnisses ist, das die Besucher:innen deiner Website erwartet.

illustration of a man sitting, facing a storm of COVID clouds
Webdesign von MNoriega
white website with images of the bottled product and bowls of coffee beans
Webdesign von Prismonline

Ein gutes Hero Image Design besteht aus verschiedenen Komponenten. Auch wenn Hero Images so einzigartig wie die Webseiten sind, auf denen man sie findet, enthalten sie alle dieselben wohlüberlegten Designentscheidungen, die die Aufmerksamkeit der Besucher:innen erregen und aufrechterhalten sollen. Diese Designentscheidungen sind:

  • Ein Bild, das zur Überschrift passt
  • Ein Bild, das zur Marke der Website und ihrem Zweck passt
  • Ein klarer Call-to-Action
  • Hochwertige Bilder
  • Responsivität
  • Klares Branding, das zum Rest deines Webdesigns passt

Das klingt nach einer Menge, aber vertraue uns, ein effektives Hero Image Design folgt denselben Prinzipien wie das Designen anderer Teile einer Website. Lies weiter, um mehr über all die Elemente zu erfahren, die ein gutes Hero Image Design ausmachen.

Mit der Überschrift zusammenarbeiten

Ein gutes Hero Image muss mit der Überschrift zusammenarbeiten. Selbst der cleverste Text kann nicht allein die Aufmerksamkeit der Besucher:innen erregen, genauso wenig wie das beste Bild. Aber zusammen ergeben eine starke Überschrift und ein starkes Bild das perfekte dynamische Duo für das Hero Image deiner Seite.

Website-Design im Illustrationsstil, das einen Jungen und einen Mann auf einem Hummerboot zeigt, während ein anderer Mann eine Hummerfalle vorstellt
Webdesign von DSKY

Schau dir an, wie das Bild und der Text im Design von DSKY zusammenarbeiten. Bevor man überhaupt den Abschnitt liest, in dem erklärt wird, dass Stillwater Investing eine Investmentfirma in Maine ist, verrät das Hero Image eine Menge über die Marke. Es zeigt, dass sie in New England sitzen, dass sie dir versprechen, finanzielle Unabhängigkeit zu erreichen, und dass du, wenn du ihnen dein Geld anvertraust, den im Bild gezeigten Lifestyle erreichen kannst: Zeit mit deinen Liebsten verbringen und Hobbys in malerischer Umgebung nachgehen und das nur, weil du die finanzielle Sicherheit dafür hast.

blau-weißes Website-Design mit einem halbflachen Bild von Menschen, die mit Bildschirmen arbeiten
Webdesign von MNoriega

MNoriegas Hero Image Design tut genau dasselbe: Es macht Besucher:innen Zweck und Versprechen der Website in dem Moment deutlich, in dem die Seite fertig geladen ist. Die Illustration visualisiert das komplexe Thema auf ansprechende und leicht verständliche Weise.

Relevante Bilder

Es mag offensichtlich klingen, aber sollte trotzdem erwähnt werden: Das Bild für dein Hero Image muss zu deiner Website und Marke passen.

Das bedeutet nicht, dass ein abstraktes Bild nicht funktionieren kann. Das kann es absolut, sofern es zum Rest deines Designs passt. Dabei kann es sich zum Beispiel um ein geometrisches Muster handeln, das eine spannende visuelle Textur erzeugt, oder ein Meer aus Swooshes in der Farbpalette deiner Marke.

schwarzes Website Hero Image mit blauen Kringeldrähten hinter weißem Text
Websdesign von MercClass

Die besten Bilder passen nicht einfach nur zu deiner Marke – sie sind auch von hoher Qualität. Gib dich nicht mit weniger als hochauflösenden Bildern zufrieden. Die Leute werden es bemerken und das wird Auswirkungen darauf haben, wie sie deine Marke wahrnehmen.

Dein Hero Image muss nicht statisch sein. Viele Marken wie fivefootsix nutzen animierte Hero Images auf ihren Seiten.

fivefootsix hero gif

Ein animiertes Hero Image kann für dich genau die richtige Wahl sein, wenn deine Marke dynamisch, skurril oder witzig ist. Wenn du Animator oder eine Kreativagentur bist, die sich auf Animation spezialisiert hat, sollte diese Art Hero Image für dich selbstverständlich sein. Wenn du Videographer bist oder Videos auf sonstige Weise ein wichtiger Bestandteil deines Unternehmen sind, könnte ein Live-Video das perfekte Hero Image sein, um die Besucher:innen deiner Website in den Bann zu ziehen.

Doch Folgendes kann ein animiertes Hero Image schwierig machen: Animationen können die Ladezeit einer Website verlangsamen. Ein langsame Website hat eine höhere Absprungrate und wird in Suchmaschinen weiter unten gelistet. Aber wie sehr eine Animation deine Website verlangsamt, hängt von weiteren Faktoren ab, und wenn du dafür sorgen kannst, dass sich die Verlangsamung in Grenzen hält, überwiegen die Vorteile eines animierten Hero Images die Nachteile.

Ein Weg, um zu verhindern, dass eine Animation deine Seite verlangsamt, besteht darin, sie mit CSS statt Javascript zu erstellen. Du kannst die Seite auch beschleunigen, indem du alle gleichzeitig laufenden Animationen ausschaltest und/oder die Animation um einen Sekundenbruchteil verzögerst. Mit der zweiten Lösung gibst du dem Rest der Seite genügend Zeit, die Leistung des Browsers zu nutzen, um schnell genug zu laden, ohne die Besucher:innen warten zu lassen.

Wenn deine Animation ein GIF ist, kannst du die Datei komprimieren, um die Ladezeit deiner Seite zu optimieren.

Ein klarer CTA

Ein Call-to Action (CTA) ist der Text, der sich häufig auf einem Button oder in der Nähe eines Buttons befindet und den Leuten sagt, etwas Bestimmtes zu tun. Dein Hero Images begrüßt deine Besucher:innen auf deiner Website und leitet ihre Reise mit dir ein, aber ihre Reise endet dort nicht. Dein Hero Image sollte den Besucher:innen den nächsten Schritt verdeutlichen und das macht man mit einem klaren CTA.

colorful website featuring a smiling woman
Webdesign von Prismonline
website design showing a man and a red CTA button
Webdesign von MercClass

Denke beim Designen deines Hero Images an die Hierarchie und Balance des Designs. Balance bedeutet einfach, Bild und Text so anzuordnen, dass sie sich, nun ja, ausbalanciert anfühlen. Sie dürfen nicht zu nah beieinander oder zu weit von einander entfernt sein; sie dürfen sich nicht nur auf einer Seite befinden, während auf der anderen Seite nichts ist.

Hierarchie bedeutet, dass es einen klaren Verlauf gibt, dem der Blick folgt, und dass in diesem Verlauf Informationen logisch präsentiert werden. Die Besucher:innen deiner Seite sollten zuerst deine Überschrift lesen, dann deine Zwischenüberschrift, dann ergänzenden Text und schließlich deinen Call-to-Action. Und deine Bilder sollte diesen Verlauf fördern.

Website-Design, das einen Mann mit Text zeigt
Webdesign von Dmitrij

Wenn deine Hierarchie nicht klar ist, verwirrt das die Leser:innen und schreckt sie ab, da die von dir präsentierten Informationen in falscher Reihenfolge verarbeiten. Es könnte zum Beispiel sein, dass sie den Call-to-Action sehen, bevor sie wissen, was sie tun sollen, oder den Slogan lesen, bevor sie den Namen deiner Marke kennen. Es könnte sogar sein, dass ihnen die Überschrift komplett entgeht.

Responsives Hero Image

Heutzutage kommt mehr als die Hälfte des Website-Traffics von Mobilgeräten. Das bedeutet, dass eine responsive Website – und ein responsives Hero Image – Pflicht ist, wenn du eine Bindung zu deiner Zielgruppe aufbauen willst. Responsives Design ist Design, das auf die Nutzer:innen reagiert. In der Regel bezieht sich dieser Begriff auf Webdesigns, die sich an die Geräte anpassen, auf denen sie angezeigt werden.

Teste bei der Wahl deines Hero Images, wie es auf verschiedenen Bildschirmen aussehen wird. Werden irgendwelche wichtigen Teile des Bildes abgeschnitten? Sind bestimmte Details oder Texte schwer zu erkennen/lesen? Dein Hero Image muss wirksam bleiben und dieselbe Botschaft vermitteln, egal welches Gerät deine Besucher:innen nutzen.

gelb-graue Website mit gelb-weißem Text auf unterschiedlich großen Bildschirmen
Webdesign von Mike Barnes

Wenn du dir ein Hero Image designen lässt, arbeite mit jemandem, der Erfahrung damit hat, responsive Bilder zu kreieren, und Hero Images für verschieden Bildschirmgrößen kreieren kann.

Kaffee-Website auf unterschiedlich großen Bildschirmen
Webdesign von Mike Barnes

Den richtigen Ton für den Rest deiner Website treffen

Website-Besucher:innen verbringen im Schnitt weniger als 15 Sekunden auf einer Seite, bevor sie sie wieder verlassen. Im Fachjargon spricht man von „abspringen“. 15 Sekunden ist gerade lang genug, um irgendwie sinnvoll mit deiner Seite zu interagieren. Deshalb ist es so wichtig, dass dein Hero Image sofort die Aufmerksamkeit der Besucher:innen erregt und ihnen vermittelt, dass deine Website und deine Marke genau das sind, wonach sie suchen.

Dies ist der erste Schritt deiner Besucher:innen auf dem Weg durch deine Website. Design, das mit diesem Weg in Zusammenhang steht, wird User Experience Design (UX) genannt. Wirkungsvolles UX Design nimmt Besucher:innen an die Hand und führt sie durch die Website zu einem logischen Schluss. Es gibt ihnen das Gefühl, dass jeder Schritt dieses Weges logisch war und einem natürlichen Verlauf gefolgt ist. Wenn du dir deine Website von einem UX Designer erstellen lässt, wird das Hero Image Teil des Designplans sein.

Das richtige Hero Image für deine Marke designen

Wie oben bereits erwähnt, spielt das Hero Image deiner Website eine wichtige Rolle: Betrachte es als Aushängeschild deiner Marke. Wenn es nicht zur Ästhetik deiner Marke passt, deine Markenpersönlichkeit nicht akkurat widerspiegelt oder Dinge verspricht, die der Rest deiner Website nicht einhalten kann, werden die Besucher:innen deiner Marke nicht besonders vertrauen.

website featuring a girl in a dress, greyed out with a filter
Landingpage-Design von Powder Point Designs
website featuring three colorful 3D rendered monsters
Webdesign von VisualMedia

Beziehe dich beim Designen deines Hero Images zunächst auf deine Markenidentität. Weshalb hast du dich für die Farben, Formen, Schriftarten und Ästhetik entschieden, für die du dich ursprünglich entschieden hast? Schau dir diese Designentscheidungen als Inspiration für dein Hero Image an. Während du mit deiner Markenidentität arbeitest, um die richtige Richtung für dein Hero Image zu finden, solltest du auch Marktforschung betreiben.

Marktforschung beinhaltet auch, verschiedene Hero Images zu testen. Genau wie bei anderen Teilen des Webdesigns werden auch bei Hero Images häufig A/B-Test genutzt, um sie zu testen. Bei einem A/B-Test sieht eine Hälfte deiner Website-Besucher:innen eine Version deiner Homepage und die andere Hälfte eine andere. Dann analysierst du die Absprungrate, Klickrate und andere Statistiken für jede Version und entscheidest, welche besser bei deiner Zielgruppe funktioniert.

Rette den Tag mit einem fantastischen Hero Image Design

Ein halbgares Hero Image kann zu kürzeren Besuchen, weniger Klicks, weniger Engagement und weniger Conversions führen. Schmälere nicht den Erfolg deiner Marke, indem du ein minderwertiges oder schlecht gebrandetes Hero Image auf deiner Website nutzt. Arbeite mit erfahrenen Webdesigner:innen zusammen, um das perfekte Hero Image für deine Marke zu kreieren.

Du benötigst ein fantastisches Hero Image Design?
Unsere Design-Community kann dir dabei behilflich sein.