Website-Hintergründe sind ein wenig wie atmen. Sie sind Teil unseres täglichen Lebens, aber wir schenken ihnen nie Beachtung bis etwas schiefläuft. Und genau wie jeder Atemzug auch, sind Website-Hintergründe wichtiger Bestandteil des Erfolgs und Lebens deiner Website; sie sorgen dafür, dass jeder andere Teil deiner Seite besser funktioniert.

Illustration: Frau hält verschiedene Website-Hintergründe hoch
Illustration von OrangeCrush

Was sind Website-Hintergründe?

Website-Hintergründe sind die Bilder, Farben oder Designs, die deine Website füllen. Sie sind oftmals auch der erste Eindruck, den ein Besucher von deiner Website, deiner Marke und deinem Unternehmen hat, daher ist es wichtig, sie richtig zu machen. Der perfekte Hintergrund vermittelt deine Markengeschichte, während der falsche Hintergrund deine Botschaft verwaschen kann. Dein Website-Hintergrund ist wie das Outfit, das du zu einem Bewerbungsgespräch oder ersten Date trägst. Setzt du auf einen entspannten und aufgeschlossenen Look oder eher auf etwas Eleganteres und Exklusiveres?

Tatsächlich steckt noch viel mehr hinter diesem scheinbar einfachen Teil des Webdesigns. Es reicht für deinen Website-Hintergrund nicht, einfach gut auszusehen. Genauso wie du zu einem ersten Date oder Bewerbungsgespräch gehst, musst du deine Geschichte erzählen, sicherstellen, dass der Treffpunkt gut zu erreichen ist, und dafür sorgen, dass die Person, zu der du sprichst, eine positive Erfahrung macht. Ebenso wird von Website-Hintergründen erwartet, eine gute User Experience (UX) zu bieten und gut lesbar zu sein.

holziger Website-Hintergrund mit Backutensilien für Kuchen Company
Ein eindrucksvoller Website-Hintergrund von DSKY

Grundlagen für Website-Hintergründe

Bevor wir uns auf die Tipps stürzen, musst du dich mit den Grundlagen auseinandersetzen.

Die zwei Arten der Website-Hintergründe

Der Body-Hintergrund

Der Body-Hintergrund ist der Bereich, der den Großteil des Bildschirms ausmacht. Dort findest du Hintergründe, die aus Illustrationen, Texturen, einem ganzen Bild oder Farbverläufen bestehen. Oftmals ist er auch einfach nur weiß.

Der Content-Hintergrund

Der Content-Hintergrund umfasst nicht den gesamten Bildschirm, sondern umgibt eher den Bereich um andere Abschnitte, wie beispielsweise einem Bild oder Text. Er verleiht Struktur und hilft dabei, verschiedene Bereiche der Website hervorzuheben und voneinander zu trennen.

Beer brand body background
Ein auffälliger Body-Hintergrund für eine Biermarke von DSKY
Real estate content background
Ein ansprechender Content-Hintergrund von astuaris

Nutze Header für das gewisse Etwas

Dein Header ist der oberste Teil deiner Seite und ein wichtiger Weg, um die Persönlichkeit deiner Website zu zeigen. Dort lassen sich gut aufsehenerregende Elemente wie Illustrationen oder Farbspritzer platzieren, da sie dort wahrscheinlich nicht vom Content ablenken.

Kiteboarding website-hintergrund header mit wasser und surfboard
Ein aufsehenerregender Website-Hintergrund von Design Monsters

Achte auf Kontrast

Achte auch auf deinen Kontrast. Der falsche Kontrast kann es schwierig machen, den Content deiner Website zu erkennen und ihn so für Besucher unzugänglich machen, also kontrolliere dein Kontrastverhältnis. Das gilt für Farbflächen und für Bilder.

Nutze Grafiken

Grafiken zu nutzen gibt deiner Website etwas Unverwechselbares und erzählt nur mithilfe von Bildern eine Geschichte. Aber stelle sicher, dass der Stil der verwendeten grafischen Elemente zur Stimmung deiner Website passt, um Nutzern ein einheitliches Erlebnis zu bieten.

Website-Hintergrund mit grafischen Elementen in harmonischen Farben
Ein schicker Website-Hintergrund mit grafischen Elementen von DSKY

Peppe deinen Hintergrund auf

Weiße Website-Hintergründe sind eine simple und zeitlose Wahl. Doch Body-Hintergründe mit Farbverläufen, Bildern oder einer bestimmten Farbe können eine große Wirkung erzielen, wenn sie richtig umgesetzt werden. Achte darauf, dass das Bild nicht zu hell ist oder dunkle Stellen hat, um sicherzustellen, dass es nicht von deinem Content ablenkt. Du willst, dass die Nutzer problemlos lesen können, worum es bei deinem Unternehmen geht.

Full body website-hintergrund
Website-Hintergrund von 2ché

Sag Hallo zu Highlights

Highlights (sehr dünne Linien, die aus verschiedenen Farben bestehen, um die Abschnitte deiner Website zu unterteilen) helfen dabei, Bereiche mit Farben aufzulockern und die Lesbarkeit zu erhöhen.

Website-Hintergrund mit highlights
Interessanter Website-Hintergrund von DSKY

8 Tipps, um den perfekten Website-Hintergrund zu kreieren

1. Nutze clevere Farben

Farben und Farbkombinationen sind bei Website-Hintergründen wichtig, da sie zur Lesbarkeit deiner Seite beitragen. Farben im Webdesign können Aufmerksamkeit erregen, Emotionen hervorrufen, Verlangen erzeugen, Conversions steigern und das Vertrauen der Nutzer gewinnen.

Erfahre hier mehr über Farbenlehre.

roter website-hintergrund mit Weingut
Rote Website-Hintergründe mit Leidenschaft. VonAneley

2. Mache dein Hintergrundbild lesbar

Das perfekte Hintergrundbild muss gut aussehen, doch noch wichtiger ist, dass es deinen Content gut aussehen lässt. Es macht keinen Sinn, ein wunderschönes Website-Hintergrundbild zu wählen, wenn man darauf den Text nicht lesen kann. Wenn du das perfekte Bild gefunden hast, aber der Text darüber nicht lesbar ist, versuche es mit einem Bildbearbeitungsprogramm oder CSS, um Dinge wie Kontrast und Deckkraft anzupassen oder sogar Ebenenmasken hinzuzufügen. Wenn das nicht hilft, versuche die richtige Schriftart und Schriftgröße für den Content selbst zu finden.

Webdesign auf Laptop, Telefon und Tablet mit lesbarem Fotohintergrund von einem Apfelbaum
Website-Hintergrundbild von Cidery mit gut lesbarer Schrift. Von gotza

3. Versuche es mit einfarbigen Hintergründen

Fotos sind nicht das Richtige für deine Website? Weshalb versuchst du es nicht mit einem einfarbigen Website-Hintergrund? In der Regel ist dies ein guter Weg um sicherzustellen, dass deine Website lesbar ist, so lange der Kontrast stimmt. Achte nur darauf, dass die Farbe zu deiner Marke, Branche und dem Eindruck passt, den du von deinem Unternehmen vermitteln willst. Warme Farben wie Rot oder Pink haben beispielsweise einen belebenden Effekt auf den Nutzer und eignen sich gut für Fitnessmarken, wohingegen kalte Farben wie Grün oder Blau zumeist eine beruhigende Wirkung haben und tatsächlich die meistgenutzten Farben für Webseiten sind.

einfarbiger oranger Website-Hintergrund für veganes Essen
Einfarbiger Website-Hintergrund von Vegan Kitchen. Von UI maniac

4. Vermeide überladene und chaotische Bilder

Dies ist besonders wichtig, wenn über deinem Bild Text liegt. Auch wenn du ein fantastisches Bild für deine Website möchtest, sollte es nicht von der Botschaft und Story ablenken, die du vermitteln möchtest. Landschaften können beispielsweise ein toller Website-Hintergrund sein, da sie sowohl auffällig als auch schlicht sind.

Aufgeräumter Website-Hintergrund mit Landschaft und zwei Menschen für Viking
Schlichter und sauberer Website-Hintergrund von arosto

5. Lasse Trends einfließen

Ein Website-Hintergrund, der einen angesagten Trend zeigt, kann deinem Design einen zeitgemäßen Ausdruck verleihen. Versuche, einige der größten Webdesign-Trends zu nutzen, beispielsweise geometrische Formen, immersive 3D-Elemente, leuchtende Farbschemata, Dark Mode oder die Pantone-Farbe des Jahres. Denk aber daran, dass, wenn du ein angesagtes Design einem zeitlosen vorziehst, du eventuell von Zeit zu Zeit deinen Hintergrund überarbeiten musst.

dark mode website-hintergründe
Düsterer Website-Hintergrund im Dark Mode-Design von DarkDesign Studio

6. Animiere deinen Website-Hintergrund

Ein animierter Website-Hintergrund ist ein wirklich guter Weg, um deine Website zum Leben zu erwecken. Stelle nur sicher, dass die Animation dezent ist, damit sie nicht vom Hauptbild oder der Botschaft ablenkt und das Design im Vordergrund überstrahlt. Da Animationen so lebhaft sind, solltest du eine dezente Farbpalette verwenden.

animierter website-hintergrund
Nutzerfreundlicher, animierter Website-Hintergrund von Adam Muflihun

7. Versuche es mit einem Farbverlauf

Ja, die Trends der 90er sind wieder angesagt und dazu gehört auch ein Trend, der die Designwelt im Sturm erobert: Farbverläufe. Sie sind auch als Farbübergänge bekannt und zeichnen sich dadurch aus, dass sie schrittweise von einer Farbe zur nächsten übergehen. Sie sind optisch ansprechend und können entweder allein als Hintergrund oder über einem Foto verwendet werden, um deiner Website ein gewisses Extra zu verleihen.

website-hintergrund mit farbverlauf
Website-Hintergrund mit Farbverlauf von Impossible Bureau

8. Passe den Hintergrund für Mobilgeräte an

Wir leben im Jahr 2020. Selbst wenn du deine Website auf einem Desktop designst – der Großteil des Online-Contents wird auf Mobilgeräten konsumiert. Beachte folgende Dinge, um sicherzustellen, dass deine Website für Mobilgeräte geeignet ist:

  • Erstelle eine responsive Website
  • Sorge dafür, dass Informationen leicht zu finden sind
  • Benutze kein Flash
  • Verwende das Viewport Meta Tag
  • Aktiviere die Autovervollständigung für Formulare
  • Mache deine Buttons groß genug für Mobilgeräte
  • Verwende große Schriftgrößen
  • Komprimiere deine Bilder und CSS

Achte bei der Wahl eines Website-Hintergrundbildes darauf, dass dein gewähltes Bild sich gut für kleine Bildschirme skalieren lässt. Ein breites Bild funktioniert beispielsweise auf einem Smartphone nicht so gut.

Mobilfreundlicher Website-Hintergrund für Baufirma
Mobilfreundlicher Website-Hintergrund von Pint

Wie du den Website-Hintergrund deiner Träume bekommst

Der richtige Hintergrund kann aus einer mittelmäßigen Website eine hervorragende machen. Vergiss nicht, dass das Nutzererlebnis an erster Stelle steht, also wähle Farben und Bilder, die deine Besucher ansprechen, und stelle sicher, dass man bei deinem Website-Hintergrundbild den Text darüber klar und deutlich lesen kann.

Ziehe einfarbige Hintergründe in Erwägung, vermeide überladene Bilder um jeden Preis und denke darüber nach, einen Trend wie Farbverläufe oder geometrische Formen einzubauen, um zeitgemäß und modern zu sein. Versuche dich an einer Animation, wenn du wirklich herausstechen möchtest, und wähle immer einen Hintergrund, der sich gut für Mobilgeräte anpassen lässt.

Am wichtigsten ist, nicht zu vergessen, dass es im Design keine festen Regeln gibt. Tatsächlich sind die besten Designs oftmals die, die sich überhaupt nicht an Regeln halten. Am meisten zählt das Nutzererlebnis. Nutze diese Tipps als Ausgangspunkt und habe keine Angst davor, deinem künstlerischen Instinkt zu vertrauen.

Du benötigst ein tolles Design für deine Website?
Dann arbeite mit unseren talentierten Designern.