Da ich schon ein paarmal die gestalterisch einfallslose Verwendung von Raster auf Websites kritisierte, aber auch Grid-Frameworks vorgestellt 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
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 Copyrightkrams. 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 Bildbeschreibung des Topteaserbildes. 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:
So gewinnt das Orange als einziges Farbfeld weiterhin Kraft und Ausstrahlung. Hier eine Unterseite 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
Mondrians 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 wesentlich breiter, wahrscheinlich wegen der großen Fotos und Weissräume. Die Rasterteilungen 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 bekanntermaß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:
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.