Dr. Web Digital Experts-Logo
  • Alle Experten auf einen Blick
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Mein Konto
  • Agentur eintragen →
  • × 🍔 vertilgen
  • ☰ Menu
Hier das Dr. Web Icon-Set herunterladen.

Hero-Images: So setzt du Bilder plakativ ein

Lade Dir jetzt das Icon-Set kostenlos herunter

Übersicht

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; oftmals günstig und mit kaum Aufwand bei diversen Bilderdatenbanken bezogen. 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.

Kurztipp: The Hero Generator

Howard Harper-Barnes - Zu aller Ehre

Wer nur ein Hero Image auf die Webseite einbauen möchte, ist beim (kostenlosen) Hero Generator goldrichtig. Mit diesem können Sie eine Vielzahl von Optionen wie den Verlauf, das Bild und die Positionierung von Elementen ganz individuell anpassen. Stockfoto ausgewählt, im Hero Generator eingegeben, fertig. Fast wie beim Thermomix. 😅

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)

Denis Potschien

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.

Schreibe einen Kommentar Antworten abbrechen

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

Passende Beiträge

Lizenzfreie, kostenlose Bilder und Illustrationen für alle! - Eine Nahaufnahme von einer Blume - Illustration
Fotografie

Lizenzfreie, kostenlose Bilder und Illustrationen für alle!

Kostenlose Fotos kann man immer gebrauchen. Sie zu finden, ist nicht ganz so einfach, denn häufig musst du doch zahlen, oder teils abstruse Lizenzen einhalten. Tust du das nicht, kann es schnell zur Abmahnung kommen.

Weiterlesen »
Farben und Farbverläufe finden und kombinieren mit Neumorphism - Produktdesign
Webdesign

Passende Farben finden: 14 Tools für Farbkombinationen und Farbverläufe

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

Weiterlesen »
Eine animierte Karte, die sich bewegt, wenn man auf der Website nach unten scrollt.
Webdesign

UX Design: diese Grundlagen sollten Sie kennen

Beim UX-Design geht es vor allem um die Anwenderfreundlichkeit von Websites und Produkten. UX-Design ist weit mehr als nur Webdesign, sondern beinhaltet die ganzheitliche Gestaltung aller Berührungspunkte mit dem Kunden, einschließlich Branding, Design, Benutzerfreundlichkeit und Funktion.

Weiterlesen »
Lade Dir jetzt das Icon-Set kostenlos herunter

  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN