Klaas ist klasse

Klaas HomeDie Site von Skyler van der Molen der Fa. Klaas ist bei mir gleich hängen geblieben. Schwarz⸗Weiss reduziert, viel Weissraum, grafische und typo­grafische Extras usw. Kurzum, die Site kann nicht auf den ersten Blick erschlossen werden, bietet aber Raffinessen, die es lohnt aufzuschlüsseln und zu erklären. Skyler gibt seine Wohnsitz-Koordi­naten 28.351085, -80.726205 an (ok, das ist in Cocoa, Central Florida, USA—Google Streetview erlaubt einen Blick auf sein schmuckes Büro) und man fragt sich, wie man auf der »sunny side« so eine streng gestaltete Website entwickeln kann?

Merksatz für Kollegen und Kunden

How to do great work? ist die Auf­macher­frage der Homesite. Er stellt fest: 1. Stay small, 2. Do it once, do it right 3. Find great clients. Und ergänzend verät er mit Hilfe einer dekorativen Grafik das geheime Mischung seiner Company, the secret formula, fig.1, Hard work vs. Great clients = Great work. So einfach ist das, und er wird den Beweis weiter hinten im Siteinnern antreten, dazu später.

Die folgenden Erklärungen zur Arbeitsweise klingen gut aber wir konzentrieren uns auf die optische Seite. Starterpunkt jedes Absatzes stellen kräftige Initialen dar—ziemlich große für eine Site. Ich habe untersucht, ob das mit einen eingebetteten Font (Stichwort @font-face) gelöst wurde, aber hier ist Old-School angesagt. Es handelt sich um geschickt platzierte Bilder. Die Site strahlt insgesamt Old-School aus. Die verwendete Antiqua (scheint die Corona zu sein, eine robuste Schrift für den Zeitungsdruck) in Kombination mit Futura-Initalen wirkt wie aus der Boulevardpresse.

Dafür springen aber die Initialen kräftig hervor und lockern das Bild spielerisch, so wie es die historischen Gestaltungszitate auch darstellen. Das zieht die Blicke an, wirkt ein bischen grob, aber so war zu den Zeiten des Boulevards. Wessen Zeitung auffällig wirkte, wer am lautesten schreien konnte, hat die Zeitung an den Mann gebracht. Das konterkariert auch die Bemühung eines seriösen Webauftritts. Es ist ja spielerisch gemeint, und nicht unüberlegt, wie an der Blickführung zu bemerken ist.

Die Blickführung

Ab der schwarzen Ecke oben links (ach so, das ist ein Logo…) über die Titelei zur Grafik und dann an den Initialen entlang wandert der Blick im idealen Zickzack. Der Blick wird also in einer streichenden Bewegung über den Inhalt geführt, was das Scannen desselben begünstigt.

Chaos versus Raster

In Überschau wird man durch gute Blickführung in die Seite hineingeführt. Allerdings scheint die Site etwas aufgebrochen wegen der harten Kontraste der Initialen. In unscharfer Darstellung (bitte Augen zusammenkneifen) wird eine unruhige Fleckenbildung deutlich:

Site unscharf

Dennoch wirkt die Seite geschlossen. Da hilft zunächst der Weissraum, welcher klare Trennung der Zonen erzeugt. Das Seitenraster unterstützt zudem. Wenn Linien hinterlegt werden, dann erscheint ein asymetrisches Raster. Aha, es wird der Goldene Schnitt (3 ⸗ 2) genutzt!

Klaas Siteraster

Farbe

Tja, mit der Farbigkeit scheint nicht viel los zu sein. Dennoch ist mit Hinterlegung und Einsatz von Markergelb ein wenig Farbe im Spiel. Über dieses Gelb entsteht eine Metapher des modernen Büro­lebens auf dieser Site. Das wirkt sparsam und unterstreicht die Kontraste der Site. Es sieht mini­ma­listisch aus, so wenig Farbe einzusetzen und das funktioniert, weil auch die Typografie der Seite passend mit dem Gegensatzpaar alt—modern spielt: serifenbetonte Antiquaschrift versus moderner geometrischer Groteskschrift.

Unterseiten

Landingpages können angenehm gestaltet sein. Die Qualität zeigt sich an den Unterseiten. Passt es noch zur Startseite? Ist es ein Aufguss oder ein weiteres Modul des Gesamtauftritts? Skyler löst auf klassische Weise das Problem Gestaltung und Inhaltlichkeit. Der Header bleibt bestehen, die Inhalte werden angehängt:

Zitate der Eingangsseite finden sich über das fette Initial sowie dem Raster im Goldenen Schnitt. Auch der Weissraum wird beibehalten. Eine Unterseite des Shopbereichs:

Comments are closed.

QR Code Business Card