Der Goldene Schnitt und Webdesign

Sind die Proportionen aufeinander abgestimmt, wirkt das auf den Betrachter ästhetisch und harmonisch. Die Perfektionierung dieser Technik nennt sich „Goldener Schnitt“. Was darunter genau verstanden wird, erkläre ich dir in folgendem Artikel.

Der Goldene Schnitt und Webdesign

Goldener Schnitt

Es gibt verschiedenste Herangehensweisen um den Goldenen Schnitt zu erklären. Dieser kann in Verbindung mit der Mathematik, der Kunstgeschichte oder der Esoterik gesehen werden. Alle drei Begriffsgeschichten hier zu erklären, würde aber den Rahmen des Artikels sprengen.

Als Ergebnis sollst du nach dem Lesen verstehen, was es mit dem Goldenen Schnitt auf sich hat und wie das Konzept, oder zumindest Teilbereiche davon, auch für deine Gestaltungen im Webdesign Sinn machen können.

Der Goldene Schnitt und dessen Ursprung in der Mathematik

Beim Goldenen Schnitt steht vor allem das mathematische Verhältnis der einzelnen Bestandteile eines Elementes im Zentrum. Alle einzelnen Teile stehen in einer mathematischen Verbindung. Das Verhältnis des gesamten Elements zu dem größten Teil sollte gleich dem Verhältnis des größten Teils zum kleinsten sein. Das exakte Verhältnis ist dabei 1:1,618. Diese Zahl hat in der Mathematik eine ganz besondere Bedeutung. Es ist die irrationale Zahl Phi. Eine Besonderheit von Phi ist, dass die Darstellung der Zahl als Bruch mit ganzen Zahlen unmöglich ist.

Wichtig für den Goldenen Schnitt ist auch die Fibonacci-Folge. Dabei handelt es sich um eine unendliche Folge von natürlichen Zahlen. Diese Zahlenreihe startet mit der Zahl 0, gefolgt von zwei Mal der Zahl 1. Nach der 0 hat jede weitere Fibonacci-Zahl eine exakte Logik: sie ist die Summe der beiden vorangegangenen Zahlen. Das bedeutet also, dass nach den Zahlen 0, 1, 1, die Zahl 2 folgt (1+1), danach die Zahl 3 (1+2) und dann die Zahl 5 (2+3). Diese Folge kann unendlich weitergeführt werden.

Was hat nun aber die irrationale Zahl Phi mit der Fibonacci-Folge zu tun? Je höher die Fibonacci-Zahl, desto mehr ähnelt sich der Quotient zweier nachfolgender Zahlen dem Goldenen Schnitt. Der Mathematiker, der diese Zahlenfolge entdeckt hatte, Fibonacci, hatte aber keine Ahnung, dass diese Zahlen später im Zusammenhang mit der Gestaltung von Elementen verwendet werden würden. Sie diente ihm am Beginn des 11. Jahrhunderts lediglich dazu, die Population von Kaninchen mathematisch darzustellen.

„Der vitruvianische Mensch“ von Leonardo da Vinci

„Der vitruvianische Mensch“ von Leonardo da Vinci

Um dich jetzt noch ein wenig mehr zu verwirren, kam dann noch einer der bekanntesten Künstler der Menschheitsgeschichte, Leonardo da Vinci, ins Spiel. Er hatte zuvor von dem Mathematiker Luca Pacioli eine Einführung in die mathematische Materie erhalten. Da Vincis Illustration aus dem Jahr 1490 mit dem Namen „vitruvianische Mensch“ war dann auch der Grund, dass dieser Mathematiker Pacioli einen Text unter dem Titel „Göttliche Proportion“ verfasste. Diese Veröffentlichung sollte später viele Künstler und Geisteswissenschaftler beeinflussen. Der Text erlangte aber erst 1854 durch den deutschen Lehrer Adolf Zeising in dem Buch „Neue Lehre von der Proportion des menschlichen Körpers“ Bekanntheit.

Der Goldene Schnitt war somit geboren, galt aber lange als ein Rätsel. Im Konkreten vor allem die Tatsache, dass genau diese Proportionen unabhängig voneinander in der Natur, im menschlichen Körper, in der Architektur und in der Kunst vorkamen. Aus Erklärungsnot, wieso genau dieses Verhältnis immer wieder unbewusst verwendet wurde, wurde der Goldene Schnitt schlicht als Gottes Geschenk und als Teil des Bauplans des Universums bezeichnet. Daher bekam er lange Zeit – und nicht zuletzt von Pacioli – den Beinamen des „göttlichen Schnittes“. Von Gott gegeben, empfand man ihn nun als die schönste, existierende Proportion.

Natürlich entsprach diese Erklärung aber nicht den Tatsachen. Viele Kunstwerke wurden schlichtweg dem Goldenen Schnitt zugeordnet, obwohl sie natürlich unter ganz anderen Gesichtspunkten entstanden sind und nichts mit dem vorhin erklärten Verhältnis zu tun hatten. Als bestes Beispiel gilt der „vitruvianische Mensch“ von da Vinci. Pacioli hatte zwar aufgrund dieser Illustration seine Theorie aufgestellt, da Vincis Absichten für die Gestaltung der Zeichnung waren aber natürlich ganz andere.

Wie kam es dann aber dazu, dass der „gottgegebene Schnitt“ plötzlich überall zum Vorschein kam? Damals glaubten Gelehrte fest an diese Theorie. Es war die einzig geltende Erklärung. Ein Objekt wurde so lange betrachtet und interpretiert, bis auch hier der Goldene Schnitt zur Interpretation angewendet werden konnte. In der Tat fand man aber nie ein Dokument, in dem ein Künstler explizit erklärte, diese Proportion absichtlich verwendet zu haben.

Die heutige Anwendung des Goldenen Schnitts

Was folgten, waren Kämpfe der Ideologien. Noch heute gibt es einige Verfechter der Theorie des Göttlichen. Fest steht bei all diesen Diskussionen eines: ein harmonisches Verhältnis bleiben weiterhin ein wichtiges Gestaltungsmerkmal in Designs. Daher kommt der Goldene Schnitt hier als Theorie gerade richtig. Es ist heute vor allem die Fibonacci-Folge, die ansatzweise für den Aufbau von Gestaltungsrastern verwendet wird. Diese Raster sind wichtig, damit ein Webdesigner seine Kreationen an Linien ausrichten kann. Die Ausrichtung der Raster auf Basis der Fibonacci-Zahlen hat den Vorteil, dass Designs sehr konsistent aufgebaut sind. Die Proportionen wiederholen sich in allen Gestaltungselementen – vom größten bis zum kleinsten – und das wirkt auf den Betrachter homogen und harmonisch.

Die Diskussionen um den Goldenen Schnitt gibt es, so wie früher, auch heute noch. Es wird wild darauf los interpretiert, welche mathematische Formel noch mit dem Goldenen Schnitt in Verbindung gebracht werden könnte. Da gibt es beispielsweise die Nautilus-Spirale – sie ist nur eine von vielen Ausprägungen. Viele Erklärungen wirken dabei völlig beliebig und weit hergeholt. Meiner Meinung nach muss man sich nur eines merken: in jedem Design findet sich ein Bildteil, das den meisten Platz einnimmt und daher zum wichtigsten Element erklärt werden kann. In den meisten Fällen liegt dieses Element dann noch auf einer Teilungslinie.

Das soll nun aber nicht heißen, dass der Goldene Schnitt und eine Aufteilung von 1,618 auf ein Layout sinnlos ist. Es kann helfen, gleich zu Beginn der Erstellung ein harmonisches Seitenlayout zu schaffen.

Wie wird die Ratio nun in der Praxis angewandt?

Wenn du ein Layout von einer Gesamtbreite von 1.080 Pixel hast und dieses in zwei Spalten aufteilen willst, berechnet sich das folgendermaßen: man dividiert die Gesamtbreite durch den Ratio (1080 : 1,618 = 667). Somit ist der größte Teil 667 Pixel groß und der kleinste Teil umfasst alles, was vom Seitenlayout noch übrig bleibt (1080 – 667 = 413).

Ob du nun richtig gerechnet hast, lässt sich schnell durch eine Gegenprobe feststellen. Dazu teilst du den größeren Teil, die 667 Pixel, durch den kleineren, die 413 Pixel. Das ergibt nun 1,615. Du siehst also, dass das fast dem Goldenen Schnitt entspricht, der ja bei 1,618 liegt. Dasselbe gilt, wenn du die Gesamtbreite, 1080 Pixel, durch den größeren Teil, 667 Pixel, teilst. Das Ergebnis ist 1,619. Natürlich sind solche Berechnungen nicht nur mit absoluten Werten wie mit Pixeln möglich, auch auf Basis von em funktioniert das.

Die einfachere Drittelregel im Alltag

Das Ganze hört sich jetzt wahnsinnig kompliziert an und es sieht so aus, als müsste man zu Beginn jedes Projekts komplizierte Rechnung anstellen. Zum Glück gibt es dafür die vereinfachte Version des Goldenen Schnittes. Diese nennt sich dann „Drittelregel“. Somit wird auch ohne komplexe Berechnung eine harmonische Aufteilung möglich gemacht. Du teilst dazu ein Bild bzw. ein Element, sowohl horizontal als auch vertikal, in neun gleiche Abschnitte. Über dem Element liegt nun ein Grid mit neun gleich großen Zellen.

Nimm als Beispiel an, dass du ein Header oder Slider Grafik/Bild vor dir liegen hast. Um die Drittelregel anzuwenden, identifizierst du die wichtigsten Elemente und positionierst sie an einem der vier Kreuzungspunkten des Rasters. Durch die nicht zentrierte Ausrichtung erhält das Bild automatisch einen viel lebendigeren Ausdruck. Allerdings sollte nicht alle vier Kreuzungspunkte mit wichtigen Elementen für die Platzierung herangezogen werden. Besser du fokussierst dich auf ein einziges Element, welches dann als Konsequenz viel mehr Aufmerksamkeit bekommt. Handelt es sich allerdings um eine Website, und um kein Bild/Grafik etc., ist die Vorgehensweise eine andere. Anstelle ästhetische Gesichtspunkte zu fokussieren, soll hier die Benutzerfreundlichkeit und ein einfach zu verstehendes Design/Kommunikation im Vordergrund stehen.

Die Drittelregeln beschränkt sich übrigens nicht nur auf die vier sichtbaren Kreuzungspunkte. Wer bei den Proportionen noch tiefer ins Detail gehen will, kann jede Zelle nochmals mit demselben Raster teilen und erhält so wieder neun neue Zellen.

Online-Tools für den Goldenen Schnitt

Wie du siehst, war diese Berechnung ganz ohne Fibonacci möglich. Ist dir die Drittelregel aber zu wenig, dann gibt es einige Tools, die dir bei der Berechnung und Bewertung des Goldenen Schnittes helfen können. Einfachere Tools, die keiner Einarbeitung bedürfen, sind die folgenden drei:

Golden Ratio von UXTriggers

Golden Ratio von UXTriggers

Mit dem Golden Ratio von UXTriggers kannst du eine Website nach dem Goldenen Schnitt beurteilen. Dazu legt sich ein goldenes Rechteck über die gewünschte Website. Dieses Rechteck kannst du je nach Größe der Darstellung beliebig verändern. Das Spiegeln ist allerdings nicht möglich.

Zum Golden Ratio von UXTriggers…

Modular Scale

Modular Scale

Modular Scale ist ein Web-Tool, das vor vor allem für die Berechnung von Schriftgrößen verwendet werden kann. Neben verschiedenen Verhältnissen steht auch die Proportion des Goldenen Schnittes (1,618) zur Auswahl.

Zum Modular Scale…

Phiculatur

Phiculator

Willst du zu einer Zahl x die dazugehörige Zahl der Fibonacci-Folge herausfinden? Dann hilft dir der Phiculatur weiter. Dazu brauchst du einfach diese Zahl x einzutippen und du erhälst automatisch die korrespondierende Zahl als Ergebnis. Das Tool ist kostenlos, steht allerdings aber nur für macOS zur Verfügung.

Zum Phiculatur…

Jetzt wünsche ich euch einen „Goldenen Blick“ beim „Goldenen Schnitt“.

author avatar
Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur / WordPress Agentur Wolkenhart® und freier Dozent an der Dualen Hochschule Baden-Württemberg.

8 thoughts on “Der Goldene Schnitt und Webdesign

  1. Vlad M

    Hai, Mika! Ein toller Beitrag. Ich interessiere mich schon lange für die Goldenen Schnitt. Das sind aber tolle Angaben! Danke.

  2. Andreas

    Lieber Mika,
    vielen Dank für deinen Beitrag.
    Er ist wirklich toll!
    LG! Andreas

  3. Rainer Ostendorf

    Ein wirklich interessanter Artikel. Gutes Webdesign halte ich für sehr wichtig. Schöne Grüsse aus Osnabrück

  4. Olga Kulmann

    Hallo! Meinen besonderen Dank dafür, dass Sie dieses interessante Thema behandelt haben.

  5. we-love-webdesign

    Wie viel Technik doch hinter dem perfekten Bild stecken kann. Toller Beitrag!

Comments are closed.