Seitenraster mit Sinn

Da ich schon ein paarmal die gestalterisch ein­falls­lose Verwendung von Raster auf Websites kritisierte, aber auch Grid-Frame­works vor­ge­stellt habe, wird es Zeit, gelungene Beispiele zu zeigen. Bei mir ist BeCreative auf dem Zettel. Bill stellt sich und seine Site kurz selbst vor: »BeCreative is the personal website of Bill Kalogiros, a strategic Creative Director who specializes in brand creation and corporate website design.«

About

Aboutsite Be
Zur Betrachtung der Site steige ich auf der About-Unterseite ein, einfach, weil diese am schönsten ist (die Homesite wird gerade mit einer hässlichen Grafik verunstaltet). Was sogleich auffällt, ist die klare Gliederung der Seite. Links oben sitzt das Logo auf schwarzem Untergrund, rechts davon ist deutlich auf weissem Untergrund die Navigation platziert. Darunter folgt eine typische Sliderzone. Ist aber keine (zum Glück), sondern ein großes Hauptmotiv mit seitlichem Infofeld. Dieses wird mit Farbe hinterlegt. Weiter abwärts folgt der eigentliche Content mehr oder minder ausführlich. Den Abschluss bildet eine schwarz hinterlegte Footerzone mit Copy­right­krams. Die schwarze Fußzone wirkt im Zusammenspiel mit dem Rest der Site eher optisch gewichtend.

Farbwirkung

Das Infofeld ist das einzige Farbfeld der Site. Es dient als Platz für die Bild­be­schreibung des Top­teaser­bildes. Es wirkt aber besonders als Farbfeld aufgrund der dominanten Kraft des Quadrates. Entgegen steht erst einmal nichts. Mit anderen Worten: es gibt enorm viel Weissraum um diese Farbfläche herum. Die Fotos des Hauptmotivs sind zudem entsättigt, fast schwarzweiss, haben damit keinen konkurrierenden Einfluss. In Erinnerung wird die Seite mit der vollschwarzen Fläche des Footers beendet. Ebenso findet es sich auf der Blogunterseite:
Be Blog
So gewinnt das Orange als einziges Farbfeld weiterhin Kraft und Ausstrahlung. Hier eine Unter­seite mit grünem Teaserfeld:

Der Aufbau und das Aussehen der Site erinnert stilistisch an die geometrische Bilderwelt von Piet Mondrian. Damit habe ich einen schönen Übergang zu…

Rasterordnung und Wirkung

wie MondrianMondrians Werke stellen Farben abstrakt gegenüber. Sie verzichten weitgehend auf unterschiedliche Formen, welche das Auge ablenken würden und die Interpretation in andere Richtung lenkt. Die Farben haben nun die Möglichkeit, gegen- und miteinander zu wirken. Die unterschiedlichen Größen und die Anordnung im Raster gewichten die Wirkung und man gewinnt über Mondrians Abstraktion ein vertieftes und erweitertes Gefühl der Farbwirkung. Aber ich weiche etwas ab, es geht hier um eine Website.
Bill setzt verschiedene Rasterstufungen ein, vermutlich mit einem eigen entwickelten Gridsystem. Interessant ist es, dass eine Gesamtbreite von »nur« 950 Pixel Breite besteht. Die Site wirkt wesent­lich breiter, wahrscheinlich wegen der großen Fotos und Weissräume. Die Raster­teilungen wechseln geschickt. Grundlage des Seitenrasters ist eine Drittelung der Gesamtbreite. Sekundäre Raster (z.B. Contentbereich, siehe unten rechts) werden wiederum gedrittelt, sodass Bill einer Teilung nach Goldenen Schnitt recht nahe kommt, welcher bekannter­maßen für Harmonie sorgt:

Blickführung

Die Blickführung gehört zu den starken Elementen dieser Site. Sie entspricht fast idealem Ablauf. Über einen starken Einstiegspunkt der Site soll das Auge in den Inhalt geführt werden. Schauen Sie selbst, wie die Blickführung in einem Zickzackpfad in die Site gelangt:
Blickführung
Im Contentbereich angelangt, kann der Leser die Inhalte über die Zwischentitel abscannen und bequem erfassen. Das ist rundum gelungen und somit gebührt diesem Webauftritt den Titel: »Website der Woche«!

Fazit

Kluges Raster, konsequent durchgehalten und nicht überladen, hat die Rasteritis zur Blüte gebracht. Kluge Blickführung, Weissraum en Masse, klare Anwendung der bekannten Regeln guten Layouts bringen im Zusammenhang ein feines Erlebnis.

Comments are closed.

QR Code Business Card