Hintergründe, Perspektiven und Schatten

Geschätzte Lesezeit: 3 Minuten

Ebenso wie ein Blatt Papier oder eine Leinwand ist ein Bildschirm zweidimensional. Doch bedeutet dies zwangsläufig, dass eine Website flach sein muss?

Immer, wenn ich ein neues Onlineprojekt gestalte, mache ich mir intensiv Gedanken über Räume und Körper, die in diesem Kosmos existieren. Welche Fluchtpunkte sind möglich, welche Perspektiven kann ich der Site mitgeben? Welche Schatten wirft eine Fläche, welche Vertiefungen oder Erhöhungen kann man sich vorstellen?

Die Idee einer Perspektive in der Kunst ist sehr alt, Bedeutungsperspektiven zeigten Machtverhältnisse auf, Vorder- und Hintergrund richtig eingesetzt erzeugte Kulissenwirkungen. Ihre Blüte erfuhr die Perspektive jedoch durch die Erfindung der Camera obscura. In der Zentralperspektive wurde die Ansicht eines Raumes zweidimensional dem menschlichen Auge nachempfunden. Dreidimensionaler Illusion in der Kunst wurden Tür und Tor dadurch geöffnet. Wenn ich heute online unterwegs bin, habe ich leider oft den Eindruck, die Renaissance hätte nie stattgefunden. Alles ist flach. Proportionen und Bedeutungsverhältnisse sind nicht durchdacht. Und Schatten werden als nutzloser Effekt abgetan. Dem kann ich keinesfalls folgen. Durch Schatten kann man vielmehr Distanzen und Räume definieren, Körper erzeugen und ein Gefühl von Materialität vermitteln.

Grundsätzlich kann man jeder definierten Fläche in HTML einen eigenen Hintergrund zuschreiben, ob Bild oder Farbcode. Die gebräuchlichsten Zonen für Hintergrundbilder sind bei WordPress body, header, content und wrapper. Man kann aber auch innerhalb von Widgetzonen oder Artikel-Bereichen Hintergründe definieren. Vielleicht wäre das eine schöne Aufgabe für jeden Webdesignerlehrling: Zu Anfang ist die leere Fläche. Am Ende steht der definierte Raum. Einzig erlaubte Stilmittel: Flächen, Farben, Rahmen, Schatten und perspektivische Verzerrung.

Ich habe zwei Hintergrundbilder auf meiner Seite eingeführt: Eine Header-Zone mit kleinen lustigen Anspielungen auf Leon Battista Alberti und eine Wrapper-Zone mit der kongenialen Freefont Modul72 von Typograf Viktor Nübel. Viktor hat ornamentale Fassadenelemente von DDR-Hochhäusern als Schrift interpretiert, die er zum uneingeschränkten Download auf seiner Seite freigibt. Vielen Dank, für dieses Juwel!

Technisch gesprochen habe ich für die Header-Zone in Adobe Photoshop insgesamt fünf verschiedene Hintergrundbilder angelegt – für jede übliche Browsergröße ein eigens Gestaltetes. Alle fünf Varianten mag ich sehr gerne. Ich habe dafür einfach im Stylesheet einen eigenen body-tag für jede „media-only“ Zone definiert, und eine Bild-URL angegeben:

body {
background-color: #meinefarbe;
background-image:url(meinordner/meinbild.png);  background-repeat: no-repeat; background-position: top center;
}

Für die Wrapper-Zone habe ich eine Bildkachel mithilfe der Schrift von Viktor in Photoshop erzeugt, die ich über den „repeat“ Befehl über die Seite wachsen lasse. Rein technisch ist das alles eine Kleinigkeit, wenn man sich in seinem Stylesheet zurecht findet. Die Arbeit steckt im Detail. Alle Elemente sollen aufeinander abgestimmt sein, Raumillusionen wollen vermittelt werden, Informationsvermittlung soll vereinfacht werden, und nicht zuletzt soll alles funktional, klar und übersichtlich sein. Wobei Spaß niemals vernachlässigt werden sollte. Dafür braucht man Zeit. Aus diesem Grund widmete ich den vierzehnten Lebenstag der Existenz von Granaton Berlin ausschließlich Hintergründen, Rahmen und Schatten.

Schatten können übrigens für alle Browser (mit Ausnahme vom Internet Explorer) über den CSS Befehl „box-shadow“ erzeugt werden. Auf der Seite von WSS-expert findet man lustige Beispiele im Kontext mit Text.

[Nachtrag 04.02.2013] Der Trend „Flat Design“ widerspricht nicht meiner Sehnsucht nach mehr Dimensionen und Perspektive im Web. Dazu ein kurzer Kommentar als individueller Artikel. [Nachtrag Ende]

Teilen Sie Ihre Meinung mit