Designtrend Hero-Images: So plakativ können Bilder eingesetzt werden

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Derzeit gibt es zwei scheinbar gegensätzliche Trends im Webdesign. Einerseits werden Website immer minimalistischer – weniger Farben, klare Schriften und einfache Formen. Auf der anderen Seite sind großformatige, fensterfüllende Bilder – sogenannte „Hero Images“ – angesagt. Was widersprüchlich aussieht, ist das aber nur auf den ersten Blick. Auf den zweiten Blick ergänzen sich beide Trends ganz wunderbar. Das gilt natürlich nur, wenn sie sinnvoll und vor allem mit einem aussagekräftigen Foto eingesetzt werden.

wonder-woman-533667_640

Einsatz von „Hero Images“ mit CSS3

Der Einsatz großformatiger Bilder ist aus zwei technischen Gründen mittlerweile kaum noch ein Problem. Zum einen ist beim mobilen Internet die Geschwindigkeit so hoch, dass auch große Bilder weitestgehend problemlos übertragen werden können. Zum anderen sorgt die CSS3-Eigenschaft „background-size“ dafür, dass eine Hintergrundgrafik immer so skaliert wird, dass sie beispielsweise einen „<div>“-Container oder auch den gesamten Viewport der Seite füllt.

div.hero {
  width: 100%;
  height: 400px;
  background-image: url("hero.img");
  background-size: cover;
}

Der Wert „cover“ im Beispiel sorgt dafür, dass die Hintergrundgrafik sich nicht wiederholt und stattdessen die gesamte Breite und Höhe des „<div>“-Elementes einnimmt. Gegebenenfalls wird die Grafik an der rechten oder unteren Seite beschnitten.

Zentriert man die Hintergrundgrafik per „background-position“, erfolgt die Beschneidung an jeweils zwei Seiten, sodass der Mittelpunkt der Hintergrundgrafik immer auch im Mittelpunkt des Elementes steht.

div.hero {
  …
  background-position: center;
}

Dank dieser Technik sind derlei Hintergrundbilder ohne größere CSS-Hürden oder den Einsatz von JavaScript realisierbar.

Gute „Heros“ nur mit aussagekräftigen Bildern

Wer als Blickfang für seine Website auf ein „Hero Image“ setzt, sollte bei der Auswahl besonders viel Wert auf die Aussagekraft und die technische Qualität des Bildes legen. Beliebte Motive derzeit sind stylische Schreibtische, auf denen vorzugsweise Apple-Geräte stehen. Auch wenn viele dieser Bilder ästhetisch durchaus ansprechend sind, so sind sie doch leider auch sehr beliebig.

Ungewöhnliche und individuelle Motive sind wesentlich besser geeignet, um dem „Hero“-Trend eine eigene Note hinzuzufügen. Desweiteren gilt es, eine gute Mischung aus prägnantem und präsentem Hintergrundbild und der Gestaltung des Vordergrundes zu finden.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Hier ist vor allem eine zurückhaltende Gestaltung gefragt. Oftmals wird der Vordergrund – bestehend aus Logo und gegebenenfalls etwas Text und der Navigation – einfarbig auf dem Hintergrund platziert. Insgesamt sollte das „Hero Image“ nicht durch den Vordergrund überladen wirken oder davon zu sehr verdeckt werden. Andererseits muss man natürlich auch dafür sorgen, dass Logo und Texte trotz der Hintergrundbildes gut lesbar sind.

hero-image-molly-and-me
Website von „Molly & Me“ aus South Carolina

Die Website von „Molly & Me“, die Produkte aus Pekannüsse vertreiben, setzt per „Hero Image“ sein Produkt sehr eindrucksvoll und präsent in Szene. Logos, Schrift und Link-Button werden komplett weiß dargestellt. Man sieht hier auch sehr schön einen weiteren Trend der jüngsten Zeit, nämlich den Einsatz der sogenannten Ghost-Buttons .

Statt Produkte groß in Szene zu setzen, kann man auch die Mitarbeiter, beziehungsweise das Team eines Unternehmens als „Image Hero“ darstellen.

hero-image-honest-folks
Agentur „Grain & Mortar“

Die Designagentur „Grain & Mortar“ aus Nebraska hat sich auf ihrer Website über „Hero Images“ als bodenständiges und sympathisches Team in Szene gesetzt – inklusive rustikalem Holztisch, Tischdekoration und Bier.

Im Gegensatz zu vielen anderen Websites besticht die Agentur aus Nebraska durch Individualität und verzichtet auf klassische Schreibtischmotive, die durchaus üblich in der Designbranche sind. Dafür nehmen sie allerdings in Kauf, dass man nicht auf Anhieb erkennt, was einen auf dieser Website erwartet. Grain & Mortar könnte auch ein Bauunternehmen sein.

„Heros“ gehen auch dezent

Wer es dann doch etwas dezenter mag, kann „Hero Images“ weniger präsent einsetzen. Mit kontrastarmen Fotos oder solchen, die farblich sehr zurückhaltend sind, lassen sich durchaus prägnante Websites gestalten.

hero-image-syke
Websites des Designers Jamie Syke

Die Website des Designers Jamie Syke zeigt zwar das klassische Schreibtischset, wirkt aber aufgrund der Perspektive und der Ausstattung sehr viel individueller. Durch die Farbgebung und die Kontrastärme  ist das Bild nicht so präsent wie bei anderen Beispielen zuvor.

hero-image-alto-labs
Agentur „Alto Labs“

Auch die Agentur „Alto Labs“ setzt auf ein eher zurückhaltendes „Hero Image“. In gedeckten Sepiafarben gehalten kommt der Hintergrund vor allem dank der pinkfarbenen grafischen Elemente im Vordergrund gut zum Ausdruck. Von der Bildaussage her ist der Entwurf allerdings schwierig. Was bedeutet “Yeah, we can do that”? Ja, wir können an den Strand gehen?!

Je präsenter das Foto, desto besser muss es sein

Wie viel Präsenz man einem Foto auf einer Website einräumen möchte, hängt auch davon ab, wie hochwertig das Foto ist. Belichtung, Schärfe, Perspektive und Farbgebung müssen stimmen und sehr präzise sein. Wer, wie die kanadische „Tatamagouche Brewing Company“ fast ausschließlich auf ein „Hero Image“ setzt, kann das nur mit einem brillianten Foto machen.

hero-image-tatabrew
Tatamagouche Brewing Company“

Hier ist das „Hero Image“ neben einem kleinen Navigations-Icon das einzige, was man als Besucher der Website zu sehen bekommt. Würde das Foto in diesem Fall nicht wirken, hätte man auch vom „Hero“-Trend nichts.

Die Beispiele zeigen, wie unterschiedlich man „Hero Images“ einsetzen kann und wie unterschiedlich die Navigation in die Website integriert ist. Einige Websites setzen auf eine Off-Canvas-Navigation, andere setzen die Navigation ins „Hero Image“ oder erst darunter. Im letzteren Fall muss also erst etwas nach unten gescrollt werden, um die Navigation zu sehen.

Fazit

„Hero Images“ sind eine schöne Sache. Es ist aber vor allem Individualität gefragt. Stockfotos haben als „Hero Image“ eigentlich keine Berechtigung. Auch klassische, im Sinne von beliebig wirkende Schreibtischansichten sollte man vermeiden. Setzt man auf fertige Mock-ups, sollte man diese individualisieren, indem man beispielsweise die Farben an die Website angleicht oder andere Bildelemente mit einbringt.

Fotos oder Grafiken  müssen qualitativ sehr gut sein und dem Design der Website entsprechen. Tonwertanpassungen können verwendet werden, um das „Hero Image“ farblich in die Website einzubinden. Auch mit Unschärfen, Verlaufs- und Musterüberlagerungen kann man einem Bild nützliche Effekte hinzufügen, die für einen eigenen Stil sorgen.

Der Vordergrund sollte zurückhaltend und auf das Bild abgestimmt sein. Hat das „Hero Image“ einen inhaltlichen Schwerpunkt, sollte der Vordergrund daneben oder drum herum angeordnet sein. Ein paar weitere Tipps haben wir Ihnen gestern im Beitrag “Emotionales Webdesign” gegeben. Schauen Sie da auch mal rein…

Bevor ich gehe: einen ganzen Haufen Templates, Bilder und sonstigen Support für Hero-Bereiche haben wir in diesem Beitrag im Angebot.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.