Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Hero Images: So setzt du Bilder plakativ ein

Hero Images: So setzt du Bilder plakativ ein

  • Aktualisiert am 3. August 2023
  • von Denis Potschien
  • Webdesign
  •  

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
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.

Inhaltsverzeichnis

Agenturpartner in München

Edit Content

WebOptimizer

Kunden kommen nicht von selbst – auch nicht im Internet. Wir arbeiten schnell und effektiv: Während andere noch reden, erobern wir für Sie schon neue Kunden.

— Dr. Heiner Etzler,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

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