Gestaltungselemente mit Konsistenz

Diese Website wäre mir entgangen, hätte ich nicht das Ghostery-Plugin für alle meine Browser installiert. Ich war es satt, meine Daten als Träger meines Surfverhaltens (kostenlos) zu verbreiten. Ghostery erklärt  in einem Install-Wizzard (sehr komfortabel), wie man böse Cookies un­schäd­lich macht am Beispiel der folgenden Site. Diese taugt wiederum als Beispiel guten Gestaltens, sodass ich sie heute besprechen werde. Es geht um die Konsistenz der Gestaltungselemente dieser Site.

Gutes Gestalten ist nicht modisch

Ribbons im WebJede Site hat ihren Stil und vertritt damit auch eine besondere Auffassung von Gestaltung. Manche setzen bekannte Elemente ein, die gerade in Mode sind (Beispiele: Ribbons, Sleves, Badges, Slider). Das Ergebnis ist eine nette Site, die damit aber wenig Individualität zeigt. Sie genügt den Ansprüchen des Mainstreams. Webdesign ist mehr als pures »Aufhübschen«. Design sollte den Ansprüchen an Funktion und Zielen der Site genügen. Gestaltung, die sich am Üblichen orientiert, veraltet schnell. Das Design einer Website sollte sinnvolle Elemente einsetzen. Mit konsistenter Ver­wen­dung guter Elemente verstärkt sich sogar deren Wirkung, ohne zu nerven.

Layout

Zu unserem Beispiel, was erst einmal unspektakulär, weil bekannt, daher kommt. Den Zwängen (warum eigentlich?) eines Content-Management-Systems unterlegen zeigt sich ein typischer Aufbau: Headerzone mit Slider oben, Navi horizontal, 3-Spalter des Inhalts. Nun ist man schnell den Zwängen vieler Teilhabenden unterworfen, gerade, wenn es sich um eine nachrichtliche Seite handelt. Alle drängeln sich um den besten Platz auf der Einstiegsseite, so auch hier.

On The Media home

Unterseiten

Besser wird es auf den Unterseiten. Hier unterliegt man nicht dem Zwang alles auf eine Seite zu quetschen, sondern es ist spezieller. Hier die Blog-Unterseite, die wesentlich aufgeräumter daher kommt. Der Kontrast zwischen den Versalüberschriften und Teasertexten ist ausgewogen. Die Linien als Trenner sind schon fast zuviel. Auch hier merkt man eine starke Konsistenz der Site, die sich aus diversen Elementen ergibt, siehe unten.

On The Media Blog

Typografie

Die Typografie ist durchgängig (konsistent) und damit »selbstverstärkend«. Auffällig sind vor allem die Überschriften, die in der Atrament Web, einer ökonomisch schmallaufenden Headline-Schrift gesetzt sind.

Laufweitenvergleich Attrament Web

Mit dem riesigem Einstiegssignal »ON« wird die Grundtypo gesetzt und in vielen Elementen der Site verwendet. Das ist ein ganz starkes Signal für das Auge, welches sich von Element zu Element der Site hangelt (=Blickführung). Man hätte dem Versalsatz der Überschriften etwas mehr Letter-Spacing gönnen sollen. Die Buchstaben kleben teils zusammen.

Die Grundschriftart (Bodytext) ist in Mischsatz mit der Chaparral Pro als Alternative zu Georgia bewusst klassisch-zeitungsartig gesetzt. Klassisch aufgrund der Ästhetik einer venezianischen Renaissance-Antiqua und zeitungsartig aufgrund der robusten Serifen und geringen Strichstärken-Unterschiede. Gute Lesbarkeit auch in kleinen Graden wird durch die geöffneten Punzen gewährt. Ein schönes Anwendungsbeispiel findet sich auf der hervorragenden Website von Jason Santa Maria.

On the media Typo

Farbgebung

Die Site benötigt im Grunde nur eine Schmuck- oder Auszeichnungfarbe, ein Orangerot. Die Farbe findet sich sowohl bei grafischen Elementen, aktiven Menupunkten als auch Über­schrif­ten­(-links). Damit der Kontrast nicht zu hoch wird, ergänzen diverse Graus als Hinterleger und als Schmuckfarbe für Grafiken.

On the Media Colors

Formen

Die Formgebung der Site ist auf dem ersten Blick unspektakulär, so einfach fügt sie sich in den Gesamteindruck ein. Sämtliche verwendeten Icons oder grafischen Elemente sind umgearbeitet von Originaldesign zu einem einheitlichen Eigendesign. Das ist viel Arbeit gewesen, lohnt sich aber! Beispiel: das Twittericon erscheint in Orange. Das dient der Sitekonsistenz, wird aber den Firmen nicht gerade schmecken, deren Logos verändert werden. Auf der anderen Seite zeigt es aber auch, dass die Icons stark genug sind, auch wenn sie farblich verändert sind. Es werden diverse grafische Elemente verwendet, wie es in der Abbildung unten deutlich wird. Clever, aber typografisch eine Spur zu zu stark finde ich die sich wiederholende Verwendung der eckigen Klammer.

On the Media Formen

Tags: , ,

Comments are closed.


QR Code Business Card