Hero-Images: So setzt du Bilder plakativ ein

Facebook
XING
Twitter
LinkedIn

Schauen wir doch mal auf zwei scheinbar gegensätzliche Trends im Webdesign. Einerseits werden Websites 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.

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.

wonder-woman-533667_640

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. Zum Thema der Bildauswahl haben wir an dieser Stelle ausführlicher geschrieben.

Desweiteren gilt es, eine gute Mischung aus prägnantem und präsentem Hintergrundbild und der Gestaltung des Vordergrundes zu finden.

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 den Einsatz sogenannter 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 im Beitrag “Emotionales Webdesign” gegeben. Schau 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.

(Beitragsbild: Elias Sch. / Pixabay)

Teilen macht Freude:

Facebook
LinkedIn
Twitter
XING

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

On Key

Related Posts

Ein aufgeräumtes Home Office

Organisiert ins Social Distancing: Die besten Tools fürs Home Office

Gerade ist das Thema Heimarbeit branchenübergreifend präsent wie nie. Aber auch unabhängig von Kontaktsperren in Zeiten des Coronavirus stellt einen das Home-Office für die Eigenorganisation und für die Kommunikation mit den lieben Kollegen vor ganz andere Herausforderungen als im Büro.

Maria Goeppert-Mayer Nobelpreisträgerin CSS Grid Layouts

Responsive Design mit CSS: Flexbox oder Grid? (Mit Beispielen)

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Kostenlose Bewerbungsvorlagen zum Download

Die 37 besten und kostenlosen Bewerbungsvorlagen (2020)

Eine ordentliche Bewerbung mit schick designtem Lebenslauf, der nicht mit Word zusammengestöpselt wurde, ist im Bewerbungsverfahren heutzutage mal mindestens die halbe Miete. Außergewöhnliche Gestaltung lässt eine Person in einem Licht erscheinen, in dem nicht jeder zu glänzen vermag. Im besten Falle macht die Bewerbung so viel her, dass sich potenzielle Arbeit- oder Auftraggeber prinzipiell schon vor dem Vorstellungsgespräch mit dem Herzen für Sie entschieden haben.