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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
