Hero Image: Die Oberfläche ist tief

Ein Bild erregt augenblicklich Aufmerksamkeit. In Sekundenbruchteilen werden Informationen vermittelt und Assoziationen geweckt. Die Kraft der Bilder im Webdesign einzusetzen, bietet jede Menge Möglichkeiten, Interesse zu wecken und den Besucher zu einem bestimmten Verhalten zu bewegen. Ein gutes Bild verleiht der Fläche des Bildschirms Tiefe und leitet gleichsam in die Tiefe des Contents. Kein Wunder also, dass der Trend zu Hero Images – großflächigen und bildschirmfüllenden Bildern – ungebrochen anhält.

Was bezeichnet “Hero Image” genau und welche Formen gibt es?

In der Regel werden Bilder als “Hero Images” bezeichnet, die den gesamten Bildschirm füllen. Klassisch befinden sie sich dort, wo die meisten Webseitenbesuche ihren Anfang nehmen: Ganz oben auf der Startseite. Manchmal findet man die Bezeichnung “Hero Image” auch bei Bildern, die einfach größer sind als die üblichen 60.000-Pixel-Bilder. Einsetzen kann man sie natürlich überall auf einer Webseite, auch auf Unterseiten, beispielsweise als Hintergrund von Text oder mit Parallax-Effekt.

Es muss nicht immer ein Foto sein – Hero Image von august.com.au

Statisches und dynamisches Hero Image

Sie können ein einzelnes Bild einsetzen; Sie können aber genauso einen Slider mit mehreren Bildern verwenden: ein dynamisches Hero Image. Eine besondere Form des dynamischen Hero Images ist die Verwendung von Videos – eine Form die eindeutig auf dem Vormarsch ist.

Attribute

Hero Images stellen Kombinationen aus Bild und Text dar. Viel Bild, wenig Text – um es genau zu sagen. Es kann außerdem das Menü eingefügt werden: Entweder als klassische Navigationsleiste oder in Form eines Hamburger Menüs. Besonders beliebt ist auch ein Call-to-action Button im Hero Image. Aber der Fantasie des Webdesigners sind wie immer kaum Grenzen gesetzt. Eingebettet werden auch Videos und andere Medien und alle Elemente, die man auf Webseiten sonst noch finden kann.

Hero Image mit eingebettetem Video – mirkawagner.de

Umgebung

Es gibt Webseiten mit Hero Image, die nicht scrollbar sind. Hier muss also alles Wichtige im Hero Image integriert werden, um den Besucher weiter in die Tiefe der Seite zu führen. Wichtig ist hier, dass das Hero Image dennoch nicht grafisch überfrachtet wird. Wer eine scrollbare Webseite verwendet, macht es sich generell leichter.

Übrigens: Wegen der Erhöhung der Ladezeit durch großflächige Bilder braucht sich heutzutage niemand mehr Sorgen zu machen: Datenkomprimierung und schnelles Internet haben dazu beigetragen, dass Hero Images ihr heldenhaftes Dasein voll ausspielen können.

Welche Qualitäten müssen Hero Images aufweisen?

Qualität ist das Stichwort. Selbstverständlich müssen Hero Images kristallklar, gestochen scharf – es sei denn, man spielt mit dem Blur-Effekt – und kontrastreich sein. Wer eine Fotografie verwenden möchte, der kommt kaum daran vorbei, eine professionelle Arbeit zu wählen. Ein kostenloses Stockfoto zu verwenden, ist nicht ratsam. Ein richtiger Hero Shot sollte möglichst einzigartig sein und nicht an allem möglichen Ecken des Internets auftauchen. Fotos werden übrigens am häufigsten als Hero Image verwendet. Sie sprechen Betrachter am stärksten an, weil sie wie kein anderes Medium in der Lage sind, Emotionen zu transportieren und Geschichten zu erzählen.

Bildauswahl

Besonders gerne werden Fotos von Menschen gewählt: Der bereits erwähnte emotionale und narrative Bezug zum Betrachter prädestiniert Fotos dieser Art. Wählen Sie jedoch niemals unpersönliche Bilder à la “Schüttelnde Hände”, “lächelnde Gesichter”, “Daumen hoch” und ähnliches.

Fotos von Menschen können auch zur gezielten Lenkung der Aufmerksamkeit eingesetzt werden. Betrachter folgen automatisch dem Blick oder der Geste einer Person und “finden” dadurch schneller Elemente wie Call-to-action Buttons und ähnliches.

TIPP: Menschen, die den Betrachter genau anschauen, ziehen am meisten Aufmerksamkeit auf sich. Der direkte Blick – selbst in einem Foto – signalisiert Kontaktaufnahme ergo Kommunikation.

Hero Image von matterofform.com

Hero Images müssen aber mitnichten Fotos sein. Verwendung finden ebenfalls Grafiken, Illustrationen und sogar Gemälde. Die Bildauswahl ist selbstverständlich von der Branche abhängig. Dabei müssen Bilder nicht zwangsläufig einen thematischen Bezug zum Inhalt der Internetseite, zum angebotenen Produkt oder der beworbenen Dienstleistung besitzen. Oft ist ein assoziativer Bezug sogar besser. Unter Umständen kann man mit dem Bild eines prächtigen Blaubeerkuchens riskante Aktien verkaufen…

Bildkomposition

Hero Image als Publikumsliebling trifft auf einen anderen Liebling des Internets: die großzügige und schön gestaltete Typografie. Bei der Komposition beider Elemente müssen Akzente gesetzt werden. Das Hero Image darf auf keinen Fall überfrachtet wirken; hier wie andernorts ist heut- und sicher auch morgenzutage minimalistisches Design angesagt. Die verschiedenen grafischen und textlichen Elemente dürfen optisch nicht gleichwertig erscheinen, ansonsten ruft selbst ein Hero Image Langeweile hervor.

Hero Image mit integrierten Buttons, Text und Hamburger Menü von matterofform.com

Bildkontrast

Bilder, die besonders interessant wirken, haben eines gemeinsam: Sie bieten ausreichende Kontraste. Selbstverständlich muss zwischen Hintergrundbild und Schrift ein ausreichender Kontrast bestehen, damit die Schrift gut lesbar ist und ihr gutes Aussehen hinreichend Betonung findet. Aus diesem Grund kann nur selten schwarze Schrift verwendet werden: Sie kann nur dann zum Einsatz kommen, wenn das Hintergrundbild sehr hell ist. Wer den Kontrast erhöhen möchte, kann die Schrift wahlweise mit einem farbigen Feld hinterlegen oder das Bild selbst an den entsprechenden Stellen aufhellen oder nachdunkeln. Das Bild selbst muss natürlich ebenfalls hinreichend kontrastreich sein – sonst wirkt es flach und leblos.

Wer sich viele Webseiten anschaut, die auf Hero Image setzen, wird schnell feststellen: State of the webdesign art ist im Moment der Gebrauch von kontrastreichen Fotos in Kombination mit weißer Schrift.