Den perfekten Website-Hin­ter­grund gestalten

Auf den ersten Eindruck kommt es an – auch beim Website-Hin­ter­grund. Dieser sollte die Website-Aussage dezent her­vor­he­ben, ohne sie zu über­de­cken. Beim Design des Hin­ter­grunds zählen daher Faktoren wie Farb­kom­po­si­ti­on, Bildgröße, Motiv, Les­bar­keit und aktuelle Trends.

Be­su­che­rin­nen und Besucher einer Website benötigen rund 50 Mil­li­se­kun­den, um sich eine erste, ent­schei­den­de Meinung über eine Website zu bilden. Dabei spielen in­halt­li­che Argumente oder Angebote noch keine große Rolle, denn das Un­ter­be­wusst­sein reagiert schneller auf Farben, Formen, Motive und Kom­po­si­tio­nen als das logische Denken. Ein wichtiger Faktor für den ersten Eindruck ist der Website-Hin­ter­grund. Da Hin­ter­grün­de bzw. Hin­ter­grund­bil­der einer Website zu den größten Elementen gehören, be­ein­flus­sen sie auch in hohem Maß die Wahr­neh­mung.

Auf gute Bild­qua­li­tät und stimmiges Design kommt es also an. Schlechte Auflösung, beißende Farben, un­pas­sen­de Motive oder lange La­de­zei­ten können dazu führen, dass Ihre Sei­ten­be­su­che­rin­nen und -besucher schon nach wenigen Sekunden wieder gehen.

Ein häufiger Fehler beim Website-Erstellen ist der falsche Hin­ter­grund. Was ist aber ein richtiger Hin­ter­grund und wie finden Sie ihn? Zunächst sollten Sie wissen, welchen Inhalt er trans­por­tiert und welche Funktion er für die Seite spielt. Ganz gleich, ob Lifestyle-Blog, On­line­shop, Fir­men­web­site oder Künstler- bzw. Kar­rie­re­sei­ten – der Hin­ter­grund sollte Ihren An­for­de­run­gen und den Er­war­tun­gen der Ziel­grup­pe ent­spre­chen. Bedenken Sie zudem, dass Emotional Marketing und Emotional Branding für das Website-Design besonders wichtig sind. Emo­tio­na­le Inhalte passen jedoch nicht zu jeder Website.

Der Hin­ter­grund einer Website wirkt im Idealfall dezent und un­auf­dring­lich, nutzt aber zugleich wert­vol­les Design- und Mar­ke­ting­po­ten­zi­al. Stellen Sie sich bei der Wahl des Website-Hin­ter­grunds daher folgende Fragen:

• Welches Motiv oder Muster passt zum Inhalt und zum Ziel der Website, der Marke, der Branche oder des On­line­shops?
• Welche Farb­ge­bung und Bild­spra­che soll sich durch das gesamte Website-Design ziehen?
• Be­vor­zu­gen Sie einen abstrakt-mi­ni­ma­lis­ti­schen oder einen farb­in­ten­si­ven Hin­ter­grund?
• Passen Bilder, Fotos, Zeich­nun­gen oder ein­ge­bet­te­te Videos als Hin­ter­grund?
• Re­prä­sen­tiert der Hin­ter­grund die Aus­sa­ge­ab­sicht der Website bzw. die Marke?
• Lassen sich Texte und Sei­ten­ele­men­te, die über dem Hin­ter­grund liegen, pro­blem­los lesen?
• Ent­spricht die jeweilige Farb­wir­kung dem ge­wünsch­ten Effekt?

In der Regel bieten sich für den Hin­ter­grund einer Website drei Mög­lich­kei­ten an, die natürlich auch in in­di­vi­du­el­ler Kom­bi­na­ti­on zum Einsatz kommen können:

• Hin­ter­grund­bild: Weit­ver­brei­te­te Hin­ter­grün­de bestehen aus hoch­wer­ti­gen Fo­to­gra­fien, die Personen, Land­schaf­ten, Produkte, Ge­gen­stän­de, Tiere oder eben Motive umfassen, die zur Website passen und meist auch für emo­tio­na­le Wirkung sorgen. Auch Zeich­nun­gen können hier zum Einsatz kommen.
• Hin­ter­grund­vi­deo: Modern und originell sind ein­ge­bet­te­te Videos, die Be­su­che­rin­nen und Besucher mögliche Inhalte in kurzer Zeit ver­mit­teln. Gerade bei Videos ist jedoch darauf zu achten, dass sie zur Website passen, pro­fes­sio­nell sind und nicht au­to­ma­tisch mit Ton abspielen, um Be­su­che­rin­nen und Besucher nicht ab­zu­schre­cken.
• Hin­ter­grund­far­be/-muster/-textur: Sehr ver­brei­tet sind ein- oder mehr­far­bi­ge Sei­ten­hin­ter­grün­de, Farb­ver­läu­fe, voll­flä­chi­ge Farben oder auch kreative Muster und Texturen, die auch das Fir­men­lo­go enthalten können und sich elegant und zugleich dezent dem vor­der­grün­di­gen Text un­ter­ord­nen.

Ebenso wichtig wie die viel­fäl­ti­ge Hin­ter­grund­ge­stal­tung sind in­di­vi­du­el­le Arten der Hin­ter­grund­kom­po­si­ti­on. Hierbei un­ter­schei­det man zwischen zwei we­sent­li­chen Arten:

• Body-Hin­ter­grund: Diese Art von Hin­ter­grund füllt den gesamten oder fast den gesamten Bild­schirm bzw. die Fläche der Website. Dazu können oben genannte Ge­stal­tungs­mög­lich­kei­ten einzeln oder in Kom­bi­na­tio­nen aus Bild, Video, Farb­ver­läu­fen, Mustern oder Zeich­nun­gen zum Einsatz kommen.
• Content-Hin­ter­grund: In dieser Variante füllt der gewählte Hin­ter­grund nicht die gesamte Website-Fläche. Statt­des­sen betont er die wich­tigs­ten aus­ge­wähl­ten Inhalte und Sei­ten­ele­men­te und lenkt den Blick durch bewusste Akzente.

Wie Sie die Ge­stal­tung des Hin­ter­grunds angehen, hängt davon ab, ob Sie mit einem Website-Baukasten oder einem CMS wie WordPress arbeiten. Website-Baukästen stellen Ihnen für ein an­spre­chen­des Design ver­schie­de­ne hoch­wer­ti­ge und ab­wechs­lungs­rei­che Hin­ter­grund­vor­la­gen zur Verfügung.

Wer eine Website selbst pro­gram­miert, muss Hin­ter­grund­bil­der, Designs oder Videos im CSS der Seite in­te­grie­ren. Dank Ge­stal­tungs­tools wie CSS Flexbox oder CSS Grid fällt die manuelle Hin­ter­grund­ge­stal­tung in­zwi­schen deutlich leichter aus. Per CSS lassen sich ori­gi­nel­le Designs wie ein Full-Screen-Landing an­fer­ti­gen. Be­su­che­rin­nen und Besucher sehen damit auf den ersten Blick nur das Full-Screen-Hin­ter­grund­bild und erst beim Wei­ter­scrol­len alle weiteren, hoch­wer­ti­gen Website-Elemente. Auch ori­gi­nel­le Parallax-Websites mit be­ein­dru­cken­den Scrolling-Effekten lassen sich auf diese Weise erzeugen.

Die Frage, welcher Website-Hin­ter­grund am be­lieb­tes­ten oder er­folg­reichs­ten ist, lässt sich nicht pauschal be­ant­wor­ten. Je nach Kategorie, Branche, Ziel­pu­bli­kum oder per­sön­li­chem Geschmack bieten un­ter­schied­li­che Website-Hin­ter­grün­de ganz eigene Vorteile. Sie können sich von folgenden Trends und Best Practices für den idealen Hin­ter­grund in­spi­rie­ren lassen:

Indem Sie eine Website in un­ter­schied­li­che Bereiche un­ter­tei­len, struk­tu­rie­ren Sie Ihre Inhalte und Elemente. Ordnen Sie die Seite zum Beispiel durch farblich ver­schie­de­ne Ab­schnit­te und Trenn­li­ni­en, äs­the­ti­sche Pro­dukt­bil­der, Logos oder andere Sei­ten­ele­men­te an.

Die Farben im Hin­ter­grund bilden im besten Fall eine Einheit mit Ihren Mar­ken­far­ben. Legen Sie also Wert darauf, dass auch hoch­wer­ti­ge Bilder, Il­lus­tra­tio­nen sowie Videos mit den Mar­ken­far­ben und Vor­der­grund­far­ben von Buttons und Menüs har­mo­nie­ren.

Je nach Produkt und Branche lässt sich die „Ge­schich­te“ Ihrer Marke mit viel­sa­gen­den Hin­ter­grund­bil­dern für Webseiten auf einen Blick ver­an­schau­li­chen. Ganz gleich, ob Sie hierzu Land­schafts­bil­der, Porträts oder Il­lus­tra­tio­nen nutzen: Optimal ist ein Vor­der­grund­text, der in den Hin­ter­grund ein­ge­bet­tet wird und somit ein har­mo­ni­sches Sto­rytel­ling er­mög­licht. Durch eine Slideshow für Fotos lässt sich Ihr Sto­rytel­ling vertiefen und die Vielfalt Ihrer Angebote ver­an­schau­li­chen.

Weniger ist manchmal mehr. Das wissen auch große Un­ter­neh­men wie Tesla oder Coca-Cola. Mit Full-Screen-Landing­pa­ges stellen sie das jeweilige Produkt in den Mit­tel­punkt und lassen Bilder für sich sprechen.

Eine Kom­bi­na­ti­on aus moderner, an­spre­chen­der Ty­po­gra­fie im Vor­der­grund und ori­gi­nel­len Farb­ak­zen­ten, Il­lus­tra­tio­nen oder geo­me­tri­schen Elementen im Hin­ter­grund – das wirkt nicht nur er­fri­schend, sondern auch struk­tu­rie­rend. Mit abs­trak­ten Hin­ter­grund­de­signs in Ver­bin­dung mit kunst­vol­ler Text­ge­stal­tung stechen Sie aus der Masse hervor.

Rahmen und Raster eignen sich dazu, Website-Inhalte über­sicht­lich an­zu­ord­nen und den Blick der Be­su­che­rin­nen und Besucher zu lenken. In Ver­bin­dung mit Fo­to­gra­fien und Il­lus­tra­tio­nen lässt sich auf diese Weise der Fokus gezielt auf Produkte und wichtige Un­ter­sei­ten ver­schie­ben.

Durch Hin­ter­grund-Videos und Ani­ma­tio­nen kann eine Website in­ter­es­san­ter und le­ben­di­ger wirken. Das erhöht die Auf­merk­sam­keit und wirkt un­ter­hal­tend. Eine solche Ge­stal­tung darf jedoch nicht zu Lasten der Website-Per­for­mance gehen. Sorgen Hin­ter­grund­vi­de­os oder Ani­ma­tio­nen für lange La­de­zei­ten, springen Nut­ze­rin­nen und Nutzer schneller ab.

Bei der Suche nach einem passenden Hin­ter­grund helfen nicht nur die Vorlagen von Website-Buildern oder pro­fes­sio­nell an­ge­fer­tig­te Fo­to­gra­fien und Videos. Auch ver­schie­de­ne Stockfoto-Galerien stellen kostenlos und kos­ten­pflich­tig eine große Auswahl an Bildern, Mustern und Grafiken zur Verfügung. Besonders beliebt sind:

• iStock­pho­to
• Pexels
• Pixabay
• Shut­ter­stock
• Adobe Stock
• get­ty­images

Folgende Tipps und Regeln helfen Ihnen bei der Wahl und Ge­stal­tung des Hin­ter­grunds für eine Website.

Farben sind selbst eine Botschaft. Bewusst gewählte Farb­kom­po­si­tio­nen und Farb­ak­zen­te wecken Gefühle und lösen Re­ak­tio­nen aus. So wirkt Blau be­ru­hi­gend und pro­fes­sio­nell, im falschen Kontext jedoch erscheint es kühl und abweisend. Rot wiederum strahlt Wärme und Leb­haf­tig­keit aus und wirkt als Si­gnal­far­be besonders emotional. Sehr beliebt für das Hin­ter­grund­de­sign einer Website sind auch Farb­ver­läu­fe, mit denen sich mehrere Farben graduell kom­bi­nie­ren und mischen lassen. Ver­schie­de­ne Sät­ti­gun­gen wiederum erzeugen eine in­di­vi­du­el­le Optik und Farb­in­ten­si­tät.

Gestalten Sie Ihren Website-Hin­ter­grund, indem Sie gezielt für ein­far­bi­ge, voll­flä­chi­ge, kon­trast­rei­che oder als Farb­ver­lauf auf­ein­an­der ab­ge­stimm­te Farb­kom­po­si­tio­nen einbauen. Auch eine Kom­bi­na­ti­on aus hoch­wer­ti­gen Fo­to­gra­fien, ein­ge­bet­tet in passende Farb­mus­ter und Farb­ver­läu­fe, struk­tu­riert Ihren Website-Hin­ter­grund. Beachten Sie hierzu aktuelle Farb­trends von In­sti­tu­tio­nen wie dem Pantone Color Institute oder auch dem AkzoNobel Global Aesthetic Center (Dulux).

Ein guter Homepage-Hin­ter­grund lenkt nicht von Vor­der­grund-Elementen wie Texten, Bildern oder Pro­dukt­fo­tos ab. Der Text im Vor­der­grund sollte stets gut lesbar sein, d. h. sich deutlich vom Hin­ter­grund abheben. Hin­ter­grund­far­ben und etwaige Übergänge dienen dazu, die Les­bar­keit der Seite zu un­ter­strei­chen. Zu beachten ist in diesem Zu­sam­men­hang auch, dass die Dar­stel­lung im Dark Mode ebenso funk­tio­niert. Denn der dunkle Modus wird ten­den­zi­ell beliebter.

Ob Foto, Video, Muster, Texturen oder voll­flä­chi­ge Farben – ein pro­fes­sio­nel­ler Hin­ter­grund passt zum Ge­samt­ein­druck der Seite. Er ergänzt sie, ohne sie zu do­mi­nie­ren. Durch eine Full-Screen-Seite mit markantem Hin­ter­grund­bild bei­spiels­wei­se lässt sich ein erster positiver Eindruck erzeugen, der an­schlie­ßend wieder den ei­gent­li­chen Inhalt der Seite in den Vor­der­grund rückt.

Für die Ge­stal­tung und Pflege Ihrer Website empfiehlt es sich, aktuelle Webdesign-Trends im Blick zu behalten. So lernen Sie, welche Er­folgs­mo­del­le es derzeit gibt, was gut ankommt und welche Elemente und Designs auch zu Ihrer Website passen. Lassen Sie sich auch von den Hin­ter­grün­den er­folg­rei­cher Websites in­spi­rie­ren und lernen Sie von Best Practices.

Im Idealfall bilden Farb­kom­po­si­ti­on und Bild­spra­che des Hin­ter­grunds eine Einheit mit dem gesamten Website-Design. Zu den Prio­ri­tä­ten beim Hin­ter­grund-Design zählt daher, dass der Hin­ter­grund Ihrer Marke, der je­wei­li­gen Branche und dem Ziel­pu­bli­kum gerecht wird. Wählen Sie eine Farb­pa­let­te bzw. Mar­ken­far­ben aus wenigen Farbtönen und behalten Sie diese über die gesamte Seite hinweg bei. Stimmen Sie für den Wie­der­erken­nungs­wert und die per­sön­li­che Note auch Bilder, Il­lus­tra­tio­nen und Fo­to­gra­fien darauf ab.

Da viele Be­su­che­rin­nen und Besuchern Ihre Seite über Mo­bil­ge­rä­te ansteuern, ist die mobile Website-Op­ti­mie­rung besonders wichtig. Hin­ter­grün­de in zu großen Da­tei­grö­ßen oder im falschen Format be­ein­träch­ti­gen Dar­stel­lung und La­de­ge­schwin­dig­keit von mobilen Webseiten. Dies kann sich negativ auf die Bewertung durch Such­ma­schi­nen und auf die Plat­zie­rung in den Such­ergeb­nis­sen auswirken. Befassen Sie sich daher mit Mobile SEO und setzen Sie Tools für einen Re­spon­si­ve-Test ein. So prüfen Sie, ob die Website samt Hin­ter­grund auf mobilen End­ge­rä­ten optimal dar­ge­stellt wird und ein gutes User Ex­pe­ri­ence Design bietet.

Folgende Tipps helfen Ihnen bei der mobilen Op­ti­mie­rung:

• Ver­zich­ten Sie auf Flash-Elemente.
• In­te­grie­ren Sie Re­spon­si­ve Webdesign durch ska­lier­ba­re Hin­ter­grund­bil­der für Webseiten.
• Kom­pri­mie­ren Sie große Bilder und CSS.
• Nutzen Sie an­ge­mes­sen große und an­spre­chen­de Schrift­grö­ßen.
• In­for­mie­ren Sie Browser mit dem Viewpoint Meta Tag über Bild­schirm­grö­ßen und Ska­lie­rung.
• Prüfen Sie Ihre Mobile SEO mit dem Google Mobile Friendly Test, dem W3C Mobile Checker oder dem IONOS Website-Checker.
• Nutzen Sie mit einem CMS Plug-ins wie WPTouch zur mobilen Website-Op­ti­mie­rung.

Für eine optimale Dar­stel­lung kommt es auf die Bildgröße, die Ab­mes­sun­gen und das Da­tei­for­mat an. Bilder bzw. Videos sollten stets eine hohe Auflösung aufweisen. Mit zu großen Dateien besteht jedoch die Gefahr, dass sich die La­de­ge­schwin­dig­keit Ihrer Website ver­schlech­tert. Diese können sich nämlich negativ auf die La­de­ge­schwin­dig­keit auswirken. Bilder sollten daher nicht größer als 600 KB sein. Weit ver­brei­tet ist das Bild­for­mat 1.920 x 1.080 Pixel. Letztlich hängen die optimale Werte jedoch von der je­wei­li­gen Website und den End­ge­rä­ten ab.

Testen Sie, welche Größen und Formate am besten zur Website passen. Hoch­for­ma­te wirken auf mobilen End­ge­rä­ten in der Regel besser, während sich Quer­for­ma­te eher für Desktops eignen. Als Da­tei­for­ma­te empfehlen sich vor allem .png und .jpg. Während sich PNG-Bilder mit vielen Details und Trans­pa­renz­ef­fek­ten dar­stel­len lassen, sind JPGs sehr gut kom­pri­mier­bar. Zur Ein­bin­dung von Website-Grafiken greifen Sie am besten zum SVG-Format.

Ein an­spre­chen­der Website-Hin­ter­grund lädt Ihre Be­su­che­rin­nen und Besucher zum Verweilen ein. Gleich­zei­tig re­prä­sen­tiert er Ihre Marke, Ihr Produkt oder Ihr Un­ter­neh­men und un­ter­streicht durch Farb­ge­bung und Bild­spra­che wichtige Website-Elemente. Indem Sie Zeit und Liebe in die Ge­stal­tung eines pro­fes­sio­nel­len Website-Hin­ter­grunds in­ves­tie­ren, nutzen Sie wert­vol­les Marketing-Potenzial sowie kreative Mög­lich­kei­ten für Emotional Branding und Corporate Designs.