Als Goldener Schnitt im Webdesign wird ein ursprüngliches klassisches Gestaltungsprinzip aus der Kunst und Architektur bezeichnet, um harmonische und ausgewogene Layouts zu schaffen. Doch der Ursprung lässt sich auf die Mathematik zurückverfolgen, wo nach das ausgewogene Verhältnis des Goldenen Schnitts auch in der Natur zu finden ist. Der Goldene Schnitt ist überall auf der Welt zu finden, auch dort, wo wir ihn tagtäglich nur unbewusst wahrnehmen. Und auch im Webdesign kommt das Verhältnis des Goldenen Schnitts sehr häufig zur Anwendung, wenngleich dies kein in Stein gemeißeltes Gesetz ist, sondern als Richtwert für Harmonie und Ausgewogenheit im Design wahrgenommen wird.
Goldener Schnitt als Verhältnis: Das Ganze verhält sich zum größeren Teil wie der größere Teil zum Kleineren
Der Goldene Schnitt beschreibt ein Verhältnis von etwa 1 : 1,618 (≈ 61,8 % : 38,2 %). Ein Ganzes (100%) wirkt besonders ästhetisch, wenn sich der größere Teil (61,8 %) zum kleineren Teil (38,2 %) verhält wie das Ganze (100 %) zum größeren Teil (61,8 %). Bei Fotografien, Grafiken und Videoaufnahmen, die nach diesem Prinzip entstanden sind, spricht man davon, dass diese gut im Auge liegen, beziehungsweise sehr harmonisch anzusehen sind.
Menschen (Fotografen, Videografen, ..) die bei der Entstehung des Werkes auf den Goldenen Schnitt achten, sind darum bemühlt, das Zentrum der Aufmerksamkeit am Werk (zB eine Person) am Bild / Video dort zu platzieren, wo das mathematische Gesetz des Goldenen Schnitts seine „Schnittlinie“ oder „Teilungslinie“ hat.
Die Fibonacci Folge, beziehungsweise die goldene Spirale, wird auch gerne mit berühmten Werken aus der Kunstwelt, wie der Mona Lisa, in Verbindung gebracht. Viele Fotografen, Maler und Künstler aus der ganzen Welt verwenden diese Technik der Positionierung. So verschmlitzt Kunst mit Mathematik, wodurch auch andere Wissenschaften, wie die Architektur, inspiriert werden.
Kunst ist nicht unbedingt eine präzise mathematische Wissenschaft – beziehungsweise Kunst, oder das was Kunst ausmacht, beziehungsweise was schön anzusehen ist, lässt einen imensen Freiraum und Interpretationsspielraum zu, was mit Mathematik nicht erfasst werden kann. Kunst kann sich die Mathematik zur Hilfe nehmen, aber Emotionen und Gefühle werden durch etwas Nicht-Mathematisches erzeugt. Daher bestätigen auch beim Prinzip des Goldenen Schnitts Ausnahmen die Regel.
Wie an diesem Beispiel mit dem Segelschiff zu sehen ist, muss die exakte Position des Schiffes unter der Schnittlinie nicht immer gleich sein. Am ersten Bild habe ich die Brücke des Schiffs ins Zentrum der Goldenen Spirale gesetzt. So geht man auch oft vor, wenn man die zum Beispiel die Blüte einer Pflanze entsprechend am Foto platzieren will. Beim zweiten Bild mit dem Segelschiff habe ich als Grundlage der Positionierung in etwa die grafische Mitte des Schiffes unter die Schnittlinie des Goldenen Schnittes im Verhältnis 1 : 1,618 (≈ 61,8 % : 38,2 %) gesetzt.
Während ein Fotomotiv am Goldenen Schnitt liegt – und dadurch besser im Gesamtbild zur Geltung kommt – kann das gleiche Motiv in zentraler Position an Geltung verlieren, oder als „fad“ empfunden werden. Wohlgemerkt muss das aber nicht immer der Fall sein. Es gibt auch Fälle, in welchen zentrale Positionierungen sogar auch wunschenswert sind, so auch im Webdesign. Hier zum Vergleich das Schiff mit zentraler Positionierung:
Aus meiner subjektiven Empfindung (Bauchgefühl) heraus finde ich das Schiff in zentraler Positionierung gar nicht so verkehrt, da das Objekt ansich leicht schief ist, und somit wieder etwas Emotion in das Gesamtbild bringt. Anders wäre es, wenn das Schiff ganz gerade im Wasser stehen würde.
Der exakte Goldene Schnitt: Φ Phi
Die Formel für den exakten Goldenen Schnitt
φ = (1 + √5) / 2 ≈ 1,6180339887
Prozentuale Aufteilung des Goldenen Schnitts
wenn das Gesamt = 100 % ist:
Der größere Anteil:
φ₁ = 1 / φ ≈ 0,6180339887 ≈ 61,80339887%
Der kleinere Anteil:
φ₂ = 1 – 1/φ ≈ 0,3819660113 = 38,19660113%
Exaktes Verhältnis des Goldenen Schnitts:
61,80339887 % : 38,19660113 %
daraus ergibt sich gerundet ein allgemein genutztes Verhältnis von: 61,8 % : 38,2 %
Goldener Schnitt im Webdesign
Im Laufe der Zeit hat sich die Verwendung des Goldenen Schnitts zeitgleich mit der Entwicklung des Internets als fixer Bestandteil des Webdesigns manifestiert. So wird dieses Verhältnis nicht nur auf Bildern und Grafiken von Websites verwendet, sondern auch beim Layout und der Spaltenaufteilung von Websites. Bei zweispaltigen Websites ist es oft gängige Praxis, dass die Hauptspalte über den „großen“ Anteil von 61,8 % verfügt, und im Umkehrschluss die Seitenleiste den „kleinen“ Anteil von 38,2 % für sich in Anspruch nimmt. Wohlgemerkt: das muss aber nicht zwingend so sein (es wird nur gerne so gemacht).
Als Beispiel dafür möchte ich nun diesen Beitrag (ohne Seitenleiste) heranziehen, um zu demonstrieren, wie man mit Spalten im Inhaltsbereich dieses Seitenverhältnis herstellen kann. Als „Ganzes“ (= 100%) nehmen wir nur die Hauptspalte dieser Website her (wir denken uns die Seitenleiste weg):
Ganze Breite:100%
Große Spalte: 61,8%
Große Spalte: 100%
in der mobilen Ansicht wird die kleine und große Spalte gleich groß
Kleine Spalte: 38,2%
Kleine Spalte: 100%
in der mobilen Ansicht wird die kleine und große Spalte gleich groß
Sie können nun hier einen Test machen und live das geöffnete Browserfenster in der Breite verändern und dabei zu sehen, wie sich die Abmessungen der beiden Spalten verändern. Spannend wird es dann in der mobilen Ansicht, wenn plötzlich beide Spalten mit 100% in der Breite untereinander angezeigt werden.
Responsive Webdesign setzt in mobiler Ansicht den Goldenen Schnitt außer Kraft
Im Gegensatz zum Printdesign mischt Responsive Webdesign die Karten neu. Hier gelten etwas andere Regeln, denn der Goldene Schnitt bekommt Füße und beginnt sich in „Millisekundenschnelle“ in seinen fixen Werten zu verändern, je nachdem welches Bildschirmformat gerade den Wert des „Ganzen“ (= 100 %) definiert.
Eine gängige Form ist es, dass wenn das Display / der Bildschirm zu schmal wird, dass ab einem gewissen Pixelwert, der unterschritten wird, die kleinere Spalte unter die größere Spalte wandert und sich zeitgleich mit der größeren Spalte auf 100% ausweitet. Diese Dynamik hebt das mathematische Verständnis für den Goldenen Schnitt im Prinzip auf eine komplett neue Ebene, was ich persönlich sehr spannend finde.
Der Goldene Schnitt im Einsatz bei der Typografie
Wenn man den goldenen Schnitt auf ganz subtiler Ebene einsetzen will, dann kann man dies bei den Schriftarten tun, wie zum Beispiel beim skalieren von Schriftgrößen:
- Basis-Schriftgröße: 16 px
- Schriftgröße der Überschrift: 16 px × 1,618 ≈ 26 px
Diese „Leidenschaft“ kann auch zum Einsatz kommen bei:
- Zeilenabständen
- Abstände zwischen Textblöcken
- Farbschattierungen
- Dicke von Linien
- usw …
Eines ist hier noch ganz wichtig zu wissen:
- Der Goldene Schnitt ist eine Orientierung, kein Zwang
- Zu strikte Anwendung kann unnatürlich wirken
- Die richtige Kombination aus Usability, Grid-Systemen und Responsive Webdesign ist entscheidend
