C.R.A.P. – 4 Punkte für gutes Design

Ich sag es ja immer – Webdesign unterscheidet sich nicht so arg viel von Gestaltungsprinzipien, die auch in der Architektur angewandet werden. Ich entdecke immer wieder Parallelen. Über [einfach persönlich] stieß ich auf einen Artikel auf [thinkvitamin.com], dem Blog von Mike Rundle. In meinem nun folgenden Weblogeintrag habe ich das Wichtigste aus dem [How C.R.A.P. is your Site Design?] herausgepickt. Ich empfehle jedoch die Seite selbst mal zu besuchen, denn dort werden einige Prinzipien noch mit Screenshot-Beispielen veranschaulicht.

[How crap is your site design]

… ist eine ziemlich provokative Überschrift, denn Leo meint, dass crap so viel hießt wie Scheiße, Mist, Scheißreck oder etwas etwas passender Unsinn oder Schrott.

“How crap is your Design?” würde ich daher mit der Frage : “Wie unsinnig ist Ihr Design?” übersetzen.

Wobei sich “C.R.A.P.” , wie es die Punkte schon verraten, auf folgende Abkürzungen beziehen.

  • C = Contrast = Kontrast
  • R = Repition = Wiederholung
  • A = Alignment = Ausrichtung
  • P = Proximity = Gruppenbildung

Contrast – Kontrast

Nicht gleiche Elemente sollten sich deutlich voneinander unterscheiden. Wenn sie sich nur ein bisschen unterscheiden, ist der Betrachter verwirrt und sieht Zusammenhänge wo keine sind. Ein starker Kontrast ermöglicht es dem Auge des Betrachters von einem Element zum anderen zu springen anstatt sich in einer Flut von Ähnlichkeiten zu verirren.

Gibt es bei Gebäudekomplexen oder in einem Stadt- bzw. Landschaftbild Unterschiede in den Funktionalitäten, so sollte man diese auch als solche deutlich wahrnehmbar machen.

Gute Kontraste verhelfen sowohl einer Webseite als auch z.B. einer oder einem Gebäudekomplex mit in sich unterschiedlichen Funktionsbereichen oder einer Fassade zu einem frischen und aufgeräumten Aussehen. Kontrastarmut hingegen lässt sowohl in der Architektur als auch im Webdesign das Dargestellte zu einem homogenen Brei vermengen.

Dadurch entstehen wenig einprägsame Bilder und Orientierungslosigkeit beim Betrachter.

Repetition – Wiederholung

Innerhalb einer Seite sollte der Style für ein bindiges Zusammengehörigkeitsgefühl wiederholt werden. Die Gestaltung der Elemente, die zu einem bestimmten Bereich gehören, sollten sich auch in anderen Bereichen wiederholen um Stetigkeit zu verdeutlichen.

An Bauteilen oder Ensembeln wird die Zusammengehörigkeit einer Gruppe ebenfalls dadurch verdeutlicht, dass bestimmte Gestaltungselemente überall wiederholt werden. Auch hier entsteht dadurch eine Einheit, die es Menschen leichter macht sich zu orientieren.

Insbesondere in Weblogs kommt dieses Prinzip deutlich zum Vorschein, da die Weblogeinträge in den meisten Blogs chronologisch untereinander angeordnet werden.
Die Überschrift eines Eintrags hat dabei Signalwirkung. Es ist wie eine Leiter die das Auge des Betrachters Stufe für Stufe abwärts führt. Beim Scrollen einer Seite nach unten findet sich der Leser sofort zurecht wenn er sofort, ohne den eignetlichen Inhalt lesen zu müssen, eine Überschrift als den Beginn eines neuen Inhaltes erkennt.

Die Überschriften sind dann eine Art Schlüsselelemente. Fehlen solche oder sind sie in der Wiederholung nicht deutlich genug als solche zu erkennen, wird der Betrachter nicht in der Lage sein zu lesen und demzufolge das Geschriebene auch nicht so gut verstehen wie er es sollte.

Die Wiederholung der Design-Elemente einer Seite nach unten verstärkt im Auge des Betrachters deren Bedeutung genauso wie wenn der Designer das Layout in zusammenhängender Form geplant hätte.

Alignment – Ausrichtung

Jedes Element einer Seite muss visuell zu etwas anderem in Zusammenhang stehen. Nichts sollte deplaziert wirken und sich zu sehr von anderem unterscheiden.

Eine Gruppe von Gebäuden kann in sich unterschiedliche Funktionen haben oder : auf einer Fassade können unterschiedliche Elemente angeordnet werden. Einerseits sollen sich zwar unterschiedliche Funktionen abheben und deutlich erkennbar sein. Andererseits sollte der visuelle Abstand nicht so groß gewählt sein, dass ein einzelnes Element überhaupt keinen Bezug mehr zu den übrigen Elementen hat und völlig isoliert wird. Ein solches Element würde deplatziert wirken.

Rundle meint dazu, dass die ausgewogene Ausrichtung der Elemente untereinander ein Gütesiegel für eine gut gemachte Webseite ist.
Wenn er nach danach gefragt wird wie er seine Designarbeit macht, so antwortet er, dass er oft nur die Abstände abgleicht und danach schaut, dass das padding um die Elemente herum symmetrisch und relativ zur Größe des jedweiligen Elementes ist.

Als Tipp empfiehlt Rundle entweder left-align oder right align zu nehmen – aber nicht beides. Rechts ausgerichteter Text in einer rechten Seitenspalte produziert eine Flut von white spaces zwischen den zwei Spalten und sieht entsetzlich aus.

Bereits vorhandene Ränder und Kanten sollen genutzt werden um Elemente daran auszurichten. Wenn z.B. eine header Grafik 5 px vom linken Rand entfernt ist, dann sollte man dem Textkörper auch 5 px geben. Und ganz wichtig : Immer präszise arbeiten! 5px sind 5px und nicht 7px – gutes Design zeigt sich in den Details.

Von der Architektur her kann ich auch das nur bestätigen. Auch hier würde man immer versuchen Bezüge aufzunehmen, sei es in einer Fassade, bei der Anordnung von Baukörpern auf einem Grundstück, einem Stadtquartier oder noch einen Maßstab größer : auch in der Landschaftplanung.

Proximity – Nachbarschaft, Verwandtschaft

Nah beieinander stehende Elemente erwecken den Eindruck von ähnlicher Bedeutung. Bedeutungsmäßig verwandte Elemente sollten gruppiert werden. Deutlich unterschiedliche Elemente hingegen brauchen mehr Platz um sich herum damit die Unterschiedlichkeit wahrgenommen werden kann.

Sind die Funktionen unterschiedlich sollte man darauf achten, dass unterschiedliche Elemente nicht zu dicht beieinander stehen weil das sonst den Eindruck von Zusammengehörigkeit erweckt wo keine besteht. Gebäude mit einer deutlich anderen Funktion sollten auch einen deutlich größeren Abstand zu anderen Gebäuden halten.

Das Nachbarschaftzsprinzip erlaubt es ähnliche oder verwandte Elemente zu gruppieren um ein bindendes Ganzes zu formen. Begriffe die nicht verwandt sind sollten auch visuell separiert werden von denen zwischen denen es einen Zusammenhang gibt. Das ermöglicht es dem Betrachter einer Seite sofort zu wissen welche Seitenelemente gruppiert sind und welche nicht.