Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 11. Februar 2015

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

Kein Beitragsbild

Derzeit gibt es zwei schein­bar gegen­sätz­li­che Trends im Webdesign. Einerseits wer­den Website immer mini­ma­lis­ti­scher – weni­ger Farben, kla­re Schriften und ein­fa­che Formen. Auf der ande­ren Seite sind groß­for­ma­ti­ge, fens­t­er­fül­len­de Bilder – soge­nann­te „Hero Images“ – ange­sagt. Was wider­sprüch­lich aus­sieht, ist das aber nur auf den ers­ten Blick. Auf den zwei­ten Blick ergän­zen sich bei­de Trends ganz wun­der­bar. Das gilt natür­lich nur, wenn sie sinn­voll und vor allem mit einem aus­sa­ge­kräf­ti­gen Foto ein­ge­setzt wer­den.

wonder-woman-533667_640

Einsatz von „Hero Images“ mit CSS3

Der Einsatz groß­for­ma­ti­ger Bilder ist aus zwei tech­ni­schen Gründen mitt­ler­wei­le kaum noch ein Problem. Zum einen ist beim mobi­len Internet die Geschwindigkeit so hoch, dass auch gro­ße Bilder wei­test­ge­hend pro­blem­los über­tra­gen wer­den kön­nen. Zum ande­ren sorgt die CSS3-Eigenschaft „background-size“ dafür, dass eine Hintergrundgrafik immer so ska­liert wird, dass sie bei­spiels­wei­se einen „<div>“-Container oder auch den gesam­ten 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 wie­der­holt und statt­des­sen die gesam­te Breite und Höhe des „<div>“-Elementes ein­nimmt. Gegebenenfalls wird die Grafik an der rech­ten oder unte­ren Seite beschnit­ten.

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 die­ser Technik sind der­lei Hintergrundbilder ohne grö­ße­re CSS-Hürden oder den Einsatz von JavaScript rea­li­sier­bar.

Gute „Heros“ nur mit aussagekräftigen Bildern

Wer als Blickfang für sei­ne Website auf ein „Hero Image“ setzt, soll­te bei der Auswahl beson­ders viel Wert auf die Aussagekraft und die tech­ni­sche Qualität des Bildes legen. Beliebte Motive der­zeit sind sty­li­sche Schreibtische, auf denen vor­zugs­wei­se Apple-Geräte ste­hen. Auch wenn vie­le die­ser Bilder ästhe­tisch durch­aus anspre­chend sind, so sind sie doch lei­der auch sehr belie­big.

Ungewöhnliche und indi­vi­du­el­le Motive sind wesent­lich bes­ser geeig­net, um dem „Hero“-Trend eine eige­ne Note hin­zu­zu­fü­gen. Desweiteren gilt es, eine gute Mischung aus prä­gnan­tem und prä­sen­tem Hintergrundbild und der Gestaltung des Vordergrundes zu fin­den.

Hier ist vor allem eine zurück­hal­ten­de Gestaltung gefragt. Oftmals wird der Vordergrund – bestehend aus Logo und gege­be­nen­falls etwas Text und der Navigation – ein­far­big auf dem Hintergrund plat­ziert. Insgesamt soll­te das „Hero Image“ nicht durch den Vordergrund über­la­den wir­ken oder davon zu sehr ver­deckt wer­den. Andererseits muss man natür­lich auch dafür sor­gen, dass Logo und Texte trotz der Hintergrundbildes gut les­bar sind.

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

Die Website von „Molly & Me“, die Produkte aus Pekannüsse ver­trei­ben, setzt per „Hero Image“ sein Produkt sehr ein­drucks­voll und prä­sent in Szene. Logos, Schrift und Link-Button wer­den kom­plett weiß dar­ge­stellt. Man sieht hier auch sehr schön einen wei­te­ren Trend der jüngs­ten Zeit, näm­lich den Einsatz der soge­nann­ten Ghost-Buttons .

Statt Produkte groß in Szene zu set­zen, kann man auch die Mitarbeiter, bezie­hungs­wei­se das Team eines Unternehmens als „Image Hero“ dar­stel­len.

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

Die Designagentur „Grain & Mortar“ aus Nebraska hat sich auf ihrer Website über „Hero Images“ als boden­stän­di­ges und sym­pa­thi­sches Team in Szene gesetzt – inklu­si­ve rus­ti­ka­lem Holztisch, Tischdekoration und Bier.

Im Gegensatz zu vie­len ande­ren Websites besticht die Agentur aus Nebraska durch Individualität und ver­zich­tet auf klas­si­sche Schreibtischmotive, die durch­aus üblich in der Designbranche sind. Dafür neh­men sie aller­dings in Kauf, dass man nicht auf Anhieb erkennt, was einen auf die­ser Website erwar­tet. Grain & Mortar könn­te auch ein Bauunternehmen sein.

„Heros“ gehen auch dezent

Wer es dann doch etwas dezen­ter mag, kann „Hero Images“ weni­ger prä­sent ein­set­zen. Mit kon­trast­ar­men Fotos oder sol­chen, die farb­lich sehr zurück­hal­tend sind, las­sen sich durch­aus prä­gnan­te Websites gestal­ten.

hero-image-syke
Websites des Designers Jamie Syke

Die Website des Designers Jamie Syke zeigt zwar das klas­si­sche Schreibtischset, wirkt aber auf­grund der Perspektive und der Ausstattung sehr viel indi­vi­du­el­ler. Durch die Farbgebung und die Kontrastärme  ist das Bild nicht so prä­sent wie bei ande­ren Beispielen zuvor.

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

Auch die Agentur „Alto Labs“ setzt auf ein eher zurück­hal­ten­des „Hero Image“. In gedeck­ten Sepiafarben gehal­ten kommt der Hintergrund vor allem dank der pink­far­be­nen gra­fi­schen Elemente im Vordergrund gut zum Ausdruck. Von der Bildaussage her ist der Entwurf aller­dings schwie­rig. Was bedeu­tet “Yeah, we can do that”? Ja, wir kön­nen an den Strand gehen?!

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

Wie viel Präsenz man einem Foto auf einer Website ein­räu­men möch­te, hängt auch davon ab, wie hoch­wer­tig das Foto ist. Belichtung, Schärfe, Perspektive und Farbgebung müs­sen stim­men und sehr prä­zi­se sein. Wer, wie die kana­di­sche „Tatamagouche Brewing Company“ fast aus­schließ­lich auf ein „Hero Image“ setzt, kann das nur mit einem bril­li­an­ten Foto machen.

hero-image-tatabrew
Tatamagouche Brewing Company“

Hier ist das „Hero Image“ neben einem klei­nen Navigations-Icon das ein­zi­ge, was man als Besucher der Website zu sehen bekommt. Würde das Foto in die­sem Fall nicht wir­ken, hät­te man auch vom „Hero“-Trend nichts.

Die Beispiele zei­gen, wie unter­schied­lich man „Hero Images“ ein­set­zen kann und wie unter­schied­lich die Navigation in die Website inte­griert ist. Einige Websites set­zen auf eine Off-Canvas-Navigation, ande­re set­zen die Navigation ins „Hero Image“ oder erst dar­un­ter. Im letz­te­ren Fall muss also erst etwas nach unten gescrollt wer­den, 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“ eigent­lich kei­ne Berechtigung. Auch klas­si­sche, im Sinne von belie­big wir­ken­de Schreibtischansichten soll­te man ver­mei­den. Setzt man auf fer­ti­ge Mock-ups, soll­te man die­se indi­vi­dua­li­sie­ren, indem man bei­spiels­wei­se die Farben an die Website angleicht oder ande­re Bildelemente mit ein­bringt.

Fotos oder Grafiken  müs­sen qua­li­ta­tiv sehr gut sein und dem Design der Website ent­spre­chen. Tonwertanpassungen kön­nen ver­wen­det wer­den, um das „Hero Image“ farb­lich in die Website ein­zu­bin­den. Auch mit Unschärfen, Verlaufs- und Musterüberlagerungen kann man einem Bild nütz­li­che Effekte hin­zu­fü­gen, die für einen eige­nen Stil sor­gen.

Der Vordergrund soll­te zurück­hal­tend und auf das Bild abge­stimmt sein. Hat das „Hero Image“ einen inhalt­li­chen Schwerpunkt, soll­te der Vordergrund dane­ben oder drum her­um ange­ord­net sein. Ein paar wei­te­re Tipps haben wir Ihnen ges­tern im Beitrag “Emotionales Webdesign” gege­ben. Schauen Sie da auch mal rein…

Bevor ich gehe: einen gan­zen Haufen Templates, Bilder und sons­ti­gen Support für Hero-Bereiche haben wir in die­sem Beitrag im Angebot.

(dpe)

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

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