Über viele Jahre wuchsen die Bildelemente auf Websites etwa proportional zu den gängigen Monitorgrößen. Seit die Auflösungen und Proportionen unserer Ausgabegeräte extrem variieren, setzt sich im Webdesign ein neues Prinzip durch: „Hero Images“.
Sie füllen den Bildschirm einfach komplett aus – ob Desktop-Monitor, Tablet oder Smartphone – ob bei Ansicht im Quer- oder auch im Hochformat.

Für gestaltungsorientierte Unternehmen wie das Architekturbüro „vision4venue“ stellt die Fullscreen-Darstellung längst den neuen Maßstab dar.

Web-Techniken

Was macht große Bilder zum „Hero Image“?

Hero Images sind große Bilder oder Banner, die direkt am oberen Rand des Browser-Fensters oder unter einer Navigationsleiste anschließen und sich über den gesamten Bildschirm erstrecken. Gerade auf Startseiten sorgen sie für einen „Wow-Effekt“. Um auch in dieser Dimension vollends zu überzeugen, müssen die Fotografien, Renderings oder Grafiken natürlich über höchste technische und gestalterische Qualität verfügen. Ergänzt wird die mit dem Bild gelieferte Information meist mit kurzen Texten, welche das Motiv dezent überlagern. Nach dem Motto „wenn schon, denn schon“, werden oft eine Reihe von Motiven in eine automatische Slideshow eingebunden.

Technische und gestalterische Herausforderungen

Weder bei Bildern noch bei Texten kann eine Fullscreen-Darstellung dadurch erfolgen, dass die Proportionen völlig verzerrt werden. Alle Bildmotive müssen also über ausreichend Randbereich verfügen. Schließlich sollen bei der Darstellung in extremen Proportionen keine wichtigen Bildinhalte, wie Gesichter oder Produktdarstellungen abgeschnitten werden.
Getrennt von der Anzeige der Bildmotive wird die von überlagerten Texten gesteuert. Bei kleinen Auflösungen und im Hochformat passen sich diese meist einfach der Breite des Fensters an.

Am breitformatigen Desktop-Monitor, vor allem bei Größen oberhalb der Full-HD-Auflösung, macht ein Fullscreen Hero Image den imposantesten Eindruck.
Am breitformatigen Desktop-Monitor, vor allem bei Größen oberhalb der Full-HD-Auflösung, macht ein Fullscreen Hero Image den imposantesten Eindruck.
Aber auch bei kleinere Displays, beispielsweise bei einem Tablet im 4:3 Format, ist das Bild weitestgehend gut erkennnbar.
Aber auch bei kleinere Displays, beispielsweise bei einem Tablet im 4:3 Format, ist das Bild weitestgehend gut erkennnbar.
Auf Smartphones mit stark hochformatigen Display ist das Hero Image stark angeschnitten. Hier wird nur noch der „sichere“ Bereich um die Bildmitte ausgegeben.
Auf Smartphones mit stark hochformatigen Display ist das Hero Image stark angeschnitten. Hier wird nur noch der „sichere“ Bereich um die Bildmitte ausgegeben.

Blickfang durch individuelle Bilder

Beim Aufruf von www.vision4venue.com, die neue Website unseres Kunden, öffnet sich ein freier Blick auf die Slideshow, die den ganzen Bildschirm einnimmt. Sie präsentiert Darstellungen von einigen eindrucksvollen Projekten aus der Planung von internationalen Sportstätten. Neben Fotografien kamen bei vision4venue auch computergenerierte Darstellungen zum Einsatz. Natürlich könnten genauso Grafiken oder Illustrationen zur Verwendung kommen. Das Wichtigste ist, dass Individualität im Fokus steht. Stockphotos werden schnell als solche erkannt und als „Fake“ eingeordnet.

Reduzierte Navigation

Die typische Navigationsleiste haben wir bei vision4venue durch ein Burger-Menü ersetzt. Das wirkt dezenter und gibt den Bildern Raum zur Wirkung. Zudem passen Hero Images sehr gut mit dem Flat Design und „Cards“ zusammen. Auch diese haben wir bei vision4venue integriert. Scrollt man nach dem Aufrufen der Seite nach unten, werden die aktuellsten Projekte mithilfe der Cards dargestellt. Die „Vorderseiten“ der Karten zeigen jeweils ein Bild des Projekts. Fährt man mit dem Mauszeiger über eine der Karten dreht sich diese, und auf der „Rückseite“ werden kurze Informationen zum jeweiligen Projekt geboten.

Bei Schmitt Engineering wird auf eine klassische Navigation gesetzt und auch das Hero Image tritt vielmehr in der Hintergrund, um Platz für weitere Content-Elementen zu schaffen.
Bei Schmitt Engineering wird auf eine klassische Navigation gesetzt und auch das Hero Image tritt vielmehr in der Hintergrund, um Platz für weitere Content-Elementen zu schaffen.
Anders bei vision4venue: Das Bild steht im Fokus und wird nur durch eine dezente Subline ergänzt. Die Navigation wird durch ein sogenanntes Burger Icon symbolisiert …
Anders bei vision4venue: Das Bild steht im Fokus und wird nur durch eine dezente Subline ergänzt. Die Navigation wird durch ein sogenanntes Burger Icon symbolisiert …
… und bei Klick darauf öffnet sich die eigentliche Navigation mit Links zu Sprachwechsel und Unterseiten. Das Prinzip ist den meisten Nutzer von Apps bekannt.
… und bei Klick darauf öffnet sich die eigentliche Navigation mit Links zu Sprachwechsel und Unterseiten. Das Prinzip ist den meisten Nutzer von Apps bekannt.

Verschiedene Einsatz- und Kombinationsmöglichkeiten

Für Schmitt Engineering hatten wir 2016 eine neue Onlinepräsenz unter www.schmitt-engineering.de gestaltet. Auch diese Website verfügt über eine Slideshow mit Hero Images. In der gemeinsamen Abwägung zwischen Bildwirkung und Benutzerführung entschied sich das Ingenieurbüro allerdings für einen Header mit der gewohnten Navigationsleiste.

Hero Images wirken ästhetisch und aufmerksamkeitsstark. Gleichzeitig bringen sie Klarheit und Übersichtlichkeit in das Webdesign von Onepagern oder Seiten mit klassischer Struktur. Der Trend zum großen Bild wurde bereits in vielen Branchen zum Maßstab – Think Big!