Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Webdesign » Hero Images: So setzt du Bilder plakativ ein

Hero Images: So setzt du Bilder plakativ ein

Artikel weiterempfehlen

  • Aktualisiert am 20. Juli 2022
  • Jetzt kommentieren
  • Denis Potschien von Denis Potschien
Lesedauer: 5 Minuten

Inhaltsverzeichnis

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
Hero Images: So setzt du Bilder plakativ ein 1

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 kann man über CSS background-image die Hintergrundgrafik immer so skalieren, 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. Stockfotosimp?type(inv)g(22913592)a(3165909)%epi%%epi2% Hero Images: So setzt du Bilder plakativ ein 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.

Lust auf mehr?

  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Oktober 2022

Was kostet eine Website?

Eine gut gestaltete und übersichtliche Internetpräsenz ist das digitale Aushängeschild deines Unternehmens. Ob Freelancer, Start-Up oder mittelständisches Unternehmen – an einer professionellen Onlinepräsenz führt heute kein Weg vorbei. Dabei steigt auch der Anspruch an rein privat genutzte Websites. Wir stellen in diesem Artikel die Kosten vor, die beim Erstellen einer Website zu beachten sind.
  • Webdesign

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑