Der Goldene Schnitt im Webdesign – So nutzt du diesen Design-Trick und Alternativen!

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!Webdesign ist ein Handwerk und deshalb wundert es nicht, dass hier viele Instrumente zum Einsatz kommen, die sich mit der Zeit etabliert haben, wie z.B. der Goldene Schnitt.

Diesen stelle ich im Folgenden ausführlich vor und zeige Beispiele für den Einsatz beim Fotografieren, aber auch im Webdesign. Zudem gehe ich auf Alternativen ein und gebe Tipps, wie man diesen in Photoshop nutzt.

Was ist der Goldene Schnitt?

Der Goldene Schnitt ist im Grunde nur ein einfaches Seitenverhältnis. Es geht um das Verhältnis von 1:1,618. Bis zum Ende des 19. Jahrhunderts wurde es auch als “Göttliche Proportion” bezeichnet.

Dass dieses Verhältnis eine besondere Harmonie aufweist, hat man bereits vor mehr als 2.000 Jahren herausgefunden. Erste Aufzeichnungen gab es darüber bereits von Euklid, aber auch in anderen Kulturen dieser Zeit. Später haben dann immer wieder Künstler, Gelehrte und Philosophen diese “Formel” genutzt, um besonders ästhetische Proportionen zu erschaffen. Wirklich beweisen kann man die psychologische Wirkung des Goldenen Schnitts zwar bis heute nicht, aber er zieht sich durch die Jahrhunderte der Menschheitsgechichte und findet sich auch in der Natur, z.B. bei Pflanzen.

Mathematisch gesehen handelt es sich dabei um das Teilungsverhältnis, bei dem das Verhältnis des Ganzen zu seinem größeren Teil dem Verhältnis des größeren zum kleineren Teil entspricht (Quelle: Wikipedia). Dadurch kann man dieses Verhältnis immer wieder anwenden und erhält am Ende die bekannte Goldene Spirale.

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Dies wird auch als die Nautilus Spirale bezeichnet.

Fotos und der Goldene Schnitt

Sehr beliebt ist der Goldene Schnitt bei Fotografen, die diese Aufteilung nutzen, um ihre Fotos zu arangieren. Statt das Haupt-Motiv genau in die Mitte des Fotos zu stellen, wird es mit Hilfe eines einfachen Modells des Goldenen Schnitts etwas seitlich bzw. auch in der Höhe nicht genau in der Mitte platziert.

Bei vielen Kameras kann man sich ein Raster einblenden lassen, welches dem Goldenen Schnitt entspricht. Hier sind vor allem die Schnittpunkte wichtig für die Ausrichtung, aber auch die Linien.

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Es beinhaltet die Aufteilung in 2 Quadrate in alle vier Richtungen gespiegelt. Das hilft dabei, das Motiv beim Fotografieren richtet zu fokussieren. Hier ein Beispiel:

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Es ist deutlich einfacher mit diesem Raster zu arbeiten, als mit der Goldenen Spirale, die zwar schön aussieht, aber in der Praxis so kaum zum Einsatz kommt.

Noch einfacher ist eine Abstraktion, die ebenfalls oft bei Foto-Apparaten vorhanden ist. Hierbei wird die Drittel-Regel genutzt. Der Bildschirm wird einfach in 9 gleich große Teile eingeteilt. Das entspricht zwar nicht dem Goldenen Schnitt, ist aber einfacher anzuwenden und erzielt oft die gleichen guten Ergebnisse.

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Der Goldene Schnitt im Webdesign

Doch es soll hier vor allem um den Goldenen Schnitt im Webdesign gehen und auch dort wird er schon länger angewandt.

Ein wichtiges Ziel von Webdesignern ist es, dem Nutzer ein gutes Nutzungserlebnis zu präsentieren, so dass er sich wohlfühlt und die Website länger nutzt. Das kann man mit einer Menge Maßnahmen versuchen zu erreichen.

Eine davon ist es, das Webdesign anhand des Goldenen Schnitts zu planen, zumindest im Groben. So ist es bei vielen Websites normal, dass es einen linken Hauptbereich mit den eigentlichen Inhalten gibt und eine rechte Sidebar mit Werbung, der Navigation und mehr.

Hier kann man das Verhältnis des Goldenen Schnitts nutzen und deren Breite darauf auslegen. Soll die Website insgesamt z.B. 1.000 Pixel breit sein, dann rechnet man wie folgt:

1.000 / 1,618 = 618 Pixel (= Breite des linken Hauptbereiches)
1.000 – 618 = 382 Pixel (= Breite der rechten Sidebar)

Das würde dann folgende Aufteilung ergeben:

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Das kann man natürlich noch weiter treiben. Man könnte z.B. den Header entsprechend des Goldenen Schnitts erstellen (den ich hier einfach mal drüber gelegt habe):

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Auch für weitere Elemente ist das denkbar, wie z.B. für die Headline, das Logo, die Navigation und mehr. Allerdings sollte man es hier nicht übertreiben. Schon die Spaltenbreite auf Basis des Goldenen Schnitts festzulegen findet nicht jeder sinnvoll.

Die Drittel-Regel wird übrigens auch für das Webdesign oft genutzt, da die Aufteilung oft sinnvoller ist, man aber dennoch von der harmonischen Wirkung dieser Komposition profitiert.

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Goldener Schnitt für Website-Bestandteile

Doch nicht nur beim generellen Design einer Website kann der Goldene Schnitt zum Einsatz kommen. Viel öfter ist es der Fall, dass einzelne Elemente einer Website nach diesem “idealen” Verhältnis gestaltet sind. So z.B. Grafiken, Werbebanner, Infografiken, News-Bereiche und vieles mehr.

Bei einzelnen Elementen der Website ist es meist einfacher und sinnvoll sich nach dem Goldenen Schnitt zu richten. Das sorgt dafür, dass die Besucher die ästhetische Aufteilung bemerken und positiv wahrnehmen, man das Layout der Website insgesamt aber effizienter gestalten kann. Schließlich ist Screenspace wertvoll.

Ebenfalls im Einsatz ist der Goldene Schnitt bei der Typografie. Hier kann man z.B. mit Hilfe der Website modularscale.com auf diesem Verhältnis basierende Schrittgrößen heraufinden, die optimal zueinander passen.

Der Goldene Schnitt im Webdesign - So nutzt du diesen Design-Trick!

Aber auch beim Schalten eigener Werbung kann der Goldene Schnitt positive Auswirkungen haben. Wenn die Werbung dadurch vielleicht ein wenig besser aufgenommen wird, warum sollte man das nicht mal ausprobieren.

Ausprobieren ist hier auch das Stichwort. Man sollte den Goldenen Schnitt nicht blind verwenden, sondern testen, wie einzelne Gestaltungen damit ankommen.

Goldener Schnitt in Photoshop

In Adobe Photoshop gibt es keine Goldene Schnitt Funktion von Hause aus. Manuell ein Bild nach der Drittel-Regel aufzuteilen ist noch kein Problem, aber den Goldenen Schnitt bekommt man nicht so einfach hin.

Deshalb lohnt es sich eine entsprechende Aktion herunterzuladen und in Photoshop zu laden. Dann kann man mit einem Klick in jeder beliebigen Grafik den Goldenen Schnitt anzeigen lassen. Hier findest du so eine Aktion zum Download. Das spart auf jeden Fall viel Zeit.

Und diese Aktion kann man nicht nur beim Layout-Design für Websites oder Grafiken einsetzen, sondern z.B. auch bei der Nachbearbeitung von Fotos. Diese “fallen” heute ja in einer sehr großen Auflösung aus der Digitalkamera, aber auch aus dem Smartphone. Mit Hilfe der Vorlage für den Goldenen Schnitt kann man diese oft nachträglich anpassen.

Macht der Goldene Schnitt wirklich Sinn?

Wie oben schon geschrieben, wurde der Goldene Schnitt über eine lange Zeit immer wieder genutzt, aber lange nicht von jedem Künstler oder Designer. Es ist ein Design-Instrument von vielen und man muss bzw. sollte es keineswegs permanent nutzen.

Bei der Entwicklung eines Webdesigns kann man unter anderem damit spielen und Dinge ausprobieren. Wenn es gut funktioniert, dann kann man es nutzen. Wenn nicht, dann versucht man halt etwas anderes. Man kann auch ohne den Goldenen Schnitt schöne Designs und Webdesigns erstellen.

Wie so oft bei handwerklichen Dingen ist es aber zu Beginn erstmal sinnvoll, etablierte Methoden zu nutzen, damit zu experimentieren und daraus zu lernen. Später kann man dann eigene Wege gehen und mit solchen Prinzipien brechen.

Peer Wandiger

7 Gedanken zu „Der Goldene Schnitt im Webdesign – So nutzt du diesen Design-Trick und Alternativen!“

  1. Sehr gute Erklärung. Auch sehr genau. Schon früher in der Schule mussten wir den Goldenen Schnitt anwenden, nur leider vergisst man sowas natürlich wieder sehr schnell. Interessiere mich sehr für Fotografie und kann es demnach ab jetzt versuchen anzuwenden.

  2. Ich kannte den goldenen Schnitt bisher nur aus der Fotografie. Das er auch im Webdesign anwendung findet ist mir neu aber auch einleuchtend. Da unsere Webseite ein update braucht werde ich mal versuchen das umzusetzen.Danke für die ausführliche Erklärung.

  3. Komme aus der Fotografie und setzte schon lange auf den Goldenen Schnitt. Im Bereich Webdesign macht der goldene Schnitt meiner Meinung nach aber nur bei Bildern sowie Grafiken Sinn.
    Das allgemeine Layout wird ja je nach Endgerät anders dargestellt – Stichwort Responsive, Mansory Grip etc. Seitenleisten werden am Mobile Device meist unter dem Content angehängt. Im Sinne von ‘mobile first’ Optimierung macht der goldene Schnitt beim eigentlichen Design der Seite wenig Sinn.

    Aber wie bereits erwähnt- bei Bilder und Grafiken durchaus sinnvoll!

  4. Der goldene Schnitt ist das “göttliche Verhältnis” von Proportionen, in jedem Designbereich lässt er sich anwenden, natürlich auch im Bereich Webdesign. Von daher ist es verwunderlich wie viele Designer das nicht wissen, aber schön dass hier mal darüber berichtet wird 🙂
    VG!

  5. Der goldene Schnitt ist sicherlich keine Allzweckwaffe, kann aber richtig eingesetzt sehr viel bewirken. Durch die hohe Ähnlichkeit mit der natürlichen Umgebung und unserer eigenen Wahrnehmung kann durch das Wissen über den goldenen Schnitt eine sehr gut durchdachte Nutzerführung (hinsichtlich dem Webdesign) entstehen – weil wir Menschen das Abbild einfach als “harmonisch”, “gewohnt”, oder “attraktiv” Wahrnehmen und unsere Augen einen Faden haben, dem man folgen kann. An dieser Stelle sei auch nochmal erwähnt, dass der goldene Schnitt die Fibonacci-Folge in sich trägt – ebenfalls ein sehr spannendes Thema und ein mathematisches Konstrukt, welches fest in unserer Umgebung und im Universum integriert ist.

  6. Mir war der goldene Schnitt bisher auch nur aus dem Kunstunterricht in der Schule damals bekannt. Aber dieses Prinzip auch im Webdesign anzuwenden ist für mich nach diesem Artikel schlüssig und macht durchaus Sinn.

  7. Ich selbst verwende Word Press.org, also ich hoste selbst. Gibt es dort Themes mit genau dem Goldenen Schnitt bwz. vorinstalierte Frames? Arbeite nämlich nur mit Themes da ich für das erstellen noch zu wenig Know How habe. Weis wer was? Klingt nämlich sehr intressant

Schreibe einen Kommentar