WebdesignerZu meiner PersonWebdesignpreiseWebdesignreferenzenBlogKontakt

  

 

Hintergrundbilder / Wallpaper / Hintergrundfarben fürs Webdesign

Hintergründe können Webseiten verschönern oder auch verschlechtern; je nachdem, ob sie richtig eingesetzt wurden.

Es gibt drei Arten von Hintergründen:

1. Einzelne Farben
2. Farbverläufe
3. Bilder (Einzelbilder oder sich wiederholende Bildmuster)

Zu 1, den einzelnen Farben:
Farben drücken verschiedene Emotionen aus bzw. verursachen diese.

Einige Beispiele:

Rot: Leidenschaft, Energie, Wille, Macht, Spontanität und Freude

Grün: Hoffnung, Frische, Leben, Natur, Innovation, Erneuerung, Friede

Weiß: Reinheit, Klarheit, Ordnung, Grenzenlosigkeit, Spiritualität, Weite, Schutz, Tadellosigkeit und Unschuld

Blau: Ruhe, Treue, Vertrauen, Sehnsucht, Weite, Entspannung, Erholung und Stabilität (typische Farbe der meisten Unternehmen in Deutschland)

Rosa: Mädchenhaft, süß und verspielt

Gelb: Verstand, Fröhlichkeit, Intelligenz, Logik, Kommunikation, Leichtigkeit

Orange: Lebenslust, Ausgelassenheit, Aufgeschlossenheit, Optimismus, Jugendlichkeit, Selbstvertrauen

Grau: Konservativ, modern, schlicht, sachlich, professionell und kompromißbereit.

Braun: Wärme, Bequemlichkeit

Violett: Mystik, Inspiration, Frömmigkeit, Weiblichkeit

Schwarz: Geheimnisvoll, ernsthaft und edel. Hat aber auch negative Assoziationen wie z.B. Tod, Enge, Schwere oder Unmoral, je nachdem in welchem Kontext es verwendet wird.

Anmerkung: Verschiedene Menschen und Kulturen haben gesonderte Vorstellungen von Farben. Farbnuancen spielen auch eine Rolle in der Wahrnehmung. So hat z.B. ein dunkles Bordeauxrot eine andere Wirkung als ein knalliges Purpurrot!

Farben können für den Background eines Webdesigns als einzelne Hintergrundfarben genommen werden.
Beispiel:

Farbe Hintergrund Bilder

Hier ist die Hintergrundfarbe Grau und schafft die nötige Neutralität, um die Bilder und das Logo dieser Fotokünstlerin hervorzuheben.

Farben können auch kombiniert werden, wie die von mir programmierte Webseite eines meiner Kunden verdeutlicht:

Farbmischung

Dieser Kardiologe drückt durch das Dunkel-Graue unter seinem Namen Professionalität, Moderne und Neutralität aus. Da es ein dunkles Grau ist, kommt auch noch die Ernsthaftigkeit des Schwarz hinzu. Das Weiße schafft Raum, Ordnung und Klarheit für seine Aussage. Ausserdem demonstriert es Tadellosigkeit (wie man es sich halt von Ärzten so vorstellt bzw. erhofft). Das Orange drückt Aufgeschlossenheit und Optimismus aus. Das es ein fast rotes Orange ist, kommt hier noch die Impulsität des Rot hinzu, die zum Weiterschauen und Weiterklicken anregt. Man bekommt Lust sich noch mehr zu informieren.

zu 2 – den Farbverläufen als Hintergrund/Background:

Bei Farbverläufen gilt das gleiche wie bei den Farben. Was bei den Farbverläufen noch hinzu kommt ist, dass die Farbe aufgewertet/intensiviert wird.
Die Verlaufsrichtungen sind:

- Vertikal
- Horizontal
- Quer
- Radial

Vertikaler Farbverlauf

Bei vertikalen Farbverläufen, die man als Hintergrund einsetzt, kann man, um die Dateigröße zu reduzieren, den Verlauf nur wenige Pixel breit machen. Auch 1 Pixel Breite würde ausreichen, da sich der Verlauf automatisch wiederholt.

Horizontaler Farbverlauf

Bei horizontalen Farbverläufen, die man als Hintergrund einsetzt, kann man, um die Dateigröße zu reduzieren, den Verlauf nur wenige Pixel hoch machen. Auch 1 Pixel Höhe würde ausreichen, da sich der Verlauf automatisch wiederholt. Man sollte bedenken, dass bei höheren Monitorauflösungen, der Verlauf eventuell rechts abgeschnitten wird bzw. sich abrupt wiederholt. Hier sollte man entweder den Verlauf so groß machen, dass er auf allen gängigen Monitor-Auflösungen ohne Unterbrechung gesehen werden kann oder man läßt den Verlauf zur Ursprungsfarbe verlaufen, so dass es keine abrupte sondern eine sanfte Unterbrechung gibt.

Quer Farbverlauf

Beim diesem Farbverlauf sollte man bedenken, dass man entweder  die Grafik so groß macht, dass es auf alle Monitorgrößen passt, oder man setzt den Background durch den CSS-Befehl fest : “background-attachment: fixed”. Er scrollt dann nicht mit. Das gilt auch für den radialen Farbverlauf.

Radialer Farbverlauf

Ein radialer Farbverlauf kann auf der Webseite schöne Akzente setzen, z.B. um einen beleuchtungsähnlichen Effekt zu erzielen. So wie ich es auf dieser Webseite gemacht habe:

Farbverlauf Beleuchtung

Man sollte bei Farbverläufen bedenken, dass es viele schlechte Monitor gibt, welche das sogenannte “Banding” haben, d.h. man erkennt bei den Verläufen abrupte Farbwechsel, anstatt dass die Farben weich verlaufen.

Hier ein Beispiel von “Banding” bei einem Farbverlauf, dessen Farbnuancen eigentlich weich verlaufen sollten:

Monitor Banding

 

Zu 3, Bilder bzw. Bildmuster:

Man kann ganze Bilder als Hintergrund nehmen. So wie ich es hier gemacht habe:

Bildhintergrund

Abstrakter Hintergrund

Das Hintergrundbild ist auch hier fix. Dies erreicht man wie bereits erwähnt mit dem CSS-Befehl: “background-attachment: fixed”. Er scrollt also nicht mit.
Des weiteren kann man auch Bildmuster einsetzen. Dezente Muster (Pattern) gibt es hier. Ich empfehle die Muster noch nachzubearbeiten, indem man die Farbe abmildert oder den Kontrast schwächt. So kann man dann dezentere Hintergründe kreieren.

Oder man nimmt ein Echt-Bild, so wie ich es hier gemacht habe:

Hintergrundbild

Bei diesem Beispiel habe ich zusätzlich die hier beschriebene Methode verwandt, damit der Hintergrund mit der jeweiligen Browsergröße mitwächst. Ansonsten müsste man sich an gängigen Monitorauslösungen orientieren. Eine aktuelle repräsentative Statistik zu Monitorauflösungen findet man hier (so weiß man, worauf man optimieren sollte). Ich empfehle aufgrund dieser Statistik auf die Auflösung 1920 x 1200 Pixel zu achten, da höhere Werte bei der Monitorauflösung selten genutzt werden. Das Hintergrundbild, falls es nicht als sich wiederholendes Muster konzipiert wurde,  sollte dementsprechend mindestens diese Maße aufweisen. Zu groß sollte es auch nicht geraten, da sonst der Hintergrund (wegen der Dateigröße) zu lange lädt.

Um die Dateigröße weiter einzuschränken sollte man eine Software verwenden, mit der man Bilder komprimieren (das Datenaufkommen des Bildes reduzieren) kann.

Ich nutze Photoshop zum Komprimieren von Bildern. Hier nutze ich den Menüpunkt “Save for Web and Devices” (speichern fürs Web und Geräte) und nutze den Vorschaumodus, um zu sehen wie stark ich die Komprimierung einstellen kann, ohne das zu starke Artefakte den Bildeindruck stören. Normalerweise reicht die Einstellung zwischen 55-60. Falls es ein sehr wichtiges Bild ist, dass sehr klar rüber kommen soll, verwende ich 70 als Qualitätsstufe (Kompressionsstufe). Bei anderen Programmen gibt es hier vielleicht eine andere Skala.

Manchmal bestehen Bilder nur aus wenigen Farben. Hier ist vielleicht eine Gif-Komprimierung sinnvoll. Man stellt dann die Anzahl der Farben ein.

Bezüglich Hintergründen/Wallpapern sollte man eine Dateigröße von maximal 300-400 Kb ansteuern. Bei z.B. 500 Kb für das Hintergrundbild würde dieses für die meisten Web-Surfern zu langsam laden, und daher als störend empfunden werden, wenn ca. 10 Sekunden, nachdem der Inhalt der Seite sich bereits aufgebaut hat, plötzlich der Hintergrund ins Auge springt.

Wie dem auch sein. Ich wünsche allen viel Erfolg, die mit der richtigen Wahl von Hintergründen, einen schönere Webseite schaffen möchten.

 



Kategorie: Design 9 Kommentare »

9 Reaktionen zu “Hintergrundbilder / Wallpaper / Hintergrundfarben fürs Webdesign”

  1. Walter

    Es ist tatsächlich so, dass ein Hintergrund eine Website aufwerten kann, oder eben total zerstören.
    Bei der Verwendung von Bildern ist immer die Gefahr latent vorhanden, dass das Design zu schwer wird. (in Sachen Dateigrösse und Performance)

  2. admin

    Deshalb ist es wichtig, dass man vielleicht Bilder vorher dateigrößen-technisch optimiert. Ich denke alles unter 300 kb für eine Hintergrundbild ist vertretbar. Natürlich schreien jetzt die Webdesigner der alten Schule auf, aber es ist ja so, dass wir nicht mehr in Zeiten von Analog-Modems leben, sondern in Zeiten von Highspeed-DSL. Das Einzige, was man bedenken sollte, ist vielleicht dass Google jetzt verstärkt auf Ladegeschwindigkeit achtet, da es aus Sicht von Google zur Userexperience dazu gehört.

    Jedenfalls vielen Dank für den Hinweis. Ich habe es gerade im Artikel ergänzt.

  3. Samuel

    Schöne Auflistung.
    Man sieht es fast ausschließlich: entweder wird sehr schlicht gearbeitet und das Logo ist das einzige, was stilistisch hervorbricht – oder es wird mit Verläufen und Pattern gearbeitet, was das Zeug hält. Interessant ist es vor allem, Verläufe an den Enden mit einer 1 Pixel breiten Linie zu versehen, die etwas heller oder dunkler als die Fläche ist.
    Das kann häufig den Gesamteindruck nochmal stark aufwerten.

  4. W3Spor webdesign

    Danke für die Tips!! Der Hintergrund ist wichtig, und die richtige Bild zu finden fordert oft viel Zeit.
    Grüsse aus Norwegen!

  5. Niclas Schmidt

    Das ist wirklich eine sehr große Hilfe, wenn man eine Website erstellen möchte. Es ist auch super verständlich dein Artikel.

    Danke für die Hinweise.

  6. Michael

    Guter Bericht. Wirklich geholfen hat mir der CSS-Befehl: ”background-attachment” Den kannte ich so noch nicht. Solche Tipps sind wirklich sehr hilfreich und ich bin wirklich dankbar für solche Beiträge. Kurz, knapp und auf den Punkt ! Gerne mehr …

  7. Carsten Zöhrer

    Sehr schöne und detaillierte Zusammenstellung der einzelnen Möglichkeiten, die sicherlich nicht nur für Anfänger interessant ist.

  8. Stefan Rosebrock

    Ich habe mir selber mal die Arbeit gemacht und verschiedene Hintergründe für unsere Webseite ausprobiert. Erstaunlich welche Wirkung veränderte Farben auf eine Webseite bewirken. Der erste Eindruck entscheidet – deshalb sollte gerade die Startseite von der Auswahl der Farben und Photos perfekt gestaltet sein.
    Da hilft oftmals nur testen, ausprobieren und sich andere Meinungen anhören :-)
    Danke für die kurzweilige und gute Zusammenfassung.

  9. http://www.core-design-studio.de

    Manchmal verbringe ich Tage damit (bin ja als Webdesigner tätig) den richtigen Hintergrund zu finden und auszubauen. Es ist die Basis vom kompletten Webdesign. Die weiteren Schritte, wie Anordnung, Platzierung und Typografie richten sich bei mir nach dem Hintergrund, der Farbe und die Aussage die damit getroffen werden möchte. Wiedermal ein schöner Artikel. Danke an den Autor und die Mühe für diese detailreiche und ausführliche Beschreibung!


Kommentar schreiben

Kommentar (Bitte mindestens 3 Sätze)