Der Goldene Schnitt im Web-Design

Perfekte Proportionen haben eine besondere Ästhetik. Als perfekt gilt weithin der sogenannte goldene Schnitt. Was hat es damit auf sich?

Effektives Web-Design muss nicht unbedingt schön oder farbenfroh sein. Es muss klar und intuitiv sein. Eigentlich haben wir die Prinzipien effektiven Web-Designs bereits analysiert. Also: Wie erreichen Sie klares und intuitives Design? Nun, es gibt da eine Reihe Möglichkeiten. Zum Beispiel können Sie Grids verwenden, die einfachsten Lösungen bevorzugen oder sich auf Benutzerfreundlichkeit konzentrieren. Dennoch müssen Sie in jedem der genannten Fälle sicherstellen, dass Besucher das Design als natürlich, klar, harmonisch und ansprechend empfinden. Hier kommt der sogenannte Goldene Schnitt ins Spiel.

Dieser Beitrag erklärt, was der Goldene Schnitt und was die Drittel-Regel ist und zeigt, wie Sie sie anwenden. Natürlich gibt es immer mehrere Wege. Ziel ist es, Ihnen einen Weg zu effektiveren und schöneren Web-Designs zu zeigen oder wenigstens ein paar Anhaltspunkte für eigene Überlegungen zu geben.

Goldener Schnitt

Seit der Renaissance proportionieren Künstler und Architekten ihre Werke, um sie dem Goldenen Schnitt (engl. „Divine Proportion“) anzunähern, insbesondere mit Hilfe des Goldenen Rechtecks, bei dem das Verhältnis der langen Seite zur kürzeren den Goldenen Schnitt darstellt. Hintergrund ist der Glaube, dass dieses Verhältnis natürlich, universell, harmonisch und ästhetisch ansprechend ist. Der Goldene Schnitt, der auch „stetige Teilung“, „göttliche Teilung“ oder in diesem Zusammenhang kurz Φ (Phi) genannt wird, ist überall im Universum zu finden. Vieles um uns herum kann man mit diesem Verhältnis beschreiben. Der Goldene Schnitt ist wahrscheinlich das bekannteste Gesetz der Proportionslehre und kann die Aussagekraft Ihrer Designs drastisch steigern.

Wie Mark Boulton in seinem Beitrag Design and the Divine Proportion schreibt, ist “eines der Schlüsselelemente in der Kommunikation […] die Komposition. In der Designausbildung wird sie als etwas gelehrt, das man eher fühlen als logisch herbeiführen sollte.” Wenn Sie Ihren Besuchern ein ansprechendes und natürlich aufgebautes Design präsentieren möchten, sollten Sie den Goldenen Schnitt in Erwägung ziehen. Was genau ist der Goldene Schnitt? Grundsätzlich ist es das Verhältnis 1.618033988749895 ≈ 1.618 zwischen Objekten im selben Zusammenhang.

Betrachten Sie das oben gezeigte Beispiel. Angenommen, Sie möchten ein Layout mit fester Breite verwenden. Die Breite des Layouts ist 960px. Eine Spalte soll der Inhaltsbereich #content sein, eine kleinere Spalte die Seitenleiste #sidebar. Wie berechnet man nun die Breiten beider Layoutspalten?

1. Berechnen Sie zunächst die Breite Ihres #content-Blocks. Stellen Sie sicher, dass das Verhältnis zwischen der Breite des Inhaltsblocks und der des Gesamtlayouts 1.62 beträgt. Sie teilen daher 960px durch 1.62, was ungefähr 593px ergibt.
2. Ziehen Sie 593px von der Breite des Gesamtlayouts (960px) ab. Diese Rechnung ergibt 960px – 593px = 367px.
3. Wenn Sie nun die Verhältnisse zwischen #content-Block und der Seitenleiste #sidebar (593px durch 367px ≈ 1.615) sowie zwischen Gesamtlayout und dem Inhaltsbereich prüfen (960px durch 593px ≈ 1.618) stellen Sie fest, dass sie im nahezu gleichen Verhältnis zueinander stehen.

Das ist die Idee hinter dem “Goldenen” Schnitt. Das gleiche gilt für flexible und skalierbare Layouts.

Natürlich müssen Web-Layouts nicht nach dem Goldenen Schnitt proportioniert sein. Dennoch kann es in einigen Fällen nicht nur die Aussagekraft Ihres Designs, sondern auch Ihr Layout vervollkommnen. Schauen Sie sich als Beispiel das 404 Blog (engl.) an. Dessen Design ist visuell ansprechend, bietet ruhige Farben und ist schön arrangiert.

Allerdings folgt das Design nicht dem Goldenen Schnitt, wie im folgenden Bild zu sehen ist. Nutzer sehen das aber nicht, weil sie intuitiv das Layout in zwei separate Blöcke mit 583px (630px – 11px – 11px) und 299px (330px – 31px) Breite teilen. Der Grund dafür ist, dass der Freiraum des Hauptbereichs passiv ist (drei Spalten mit jeweils 31px Breite). Es unterstützt den Inhaltsbereich daneben und ist nicht selbst der Inhalt.

Das Verhältnis zwischen den Layout-Blöcken ist 630 zu 330px ≈ 1.91 ≠ 1.62, Zwischen Inhaltsblöcken ist es 583 zu 299px ≈ 1.92 ≠ 1.62. Der Grund dafür, dass das Layout trotzdem nahezu perfekt aussieht ist, obwohl es nicht dem Goldenen Schnitt entspricht, ist die Tatsache, dass es ausgewogen ist. Beide Layout-Blöcke haben dieselben Proportionen. Daher macht das Design einen in sich geschlossenen und strukturell harmonischen Eindruck.

Das Interessante ist nun, dass Texte durch eine nicht optimale Layout-Breite eine nicht optimale Länge von 90 Zeichen pro Zeile haben. Angenehm zu lesende Texte haben pro Zeile zwischen 60 und 80 Zeichen. Eine Verbesserung des Layouts würde daher auch zu einer besseren Lesbarkeit der Inhalte führen. Ein netter Nebeneffekt der zeigt, wie man Dinge erreicht, in dem man den Gesetzen der Natur folgt.

Für Grob-Entwürfe können Sie das Verhältnis 5 : 3 verwenden, welches zwar nicht genau der Goldene Schnitt ist, aber als Faustformel nützlich sein kann, wenn Sie gerade keinen Tasschenrechner zur Hand haben. Der Goldene Schnitt liefert verlässliche Werte, die man in fast jedes Design verwenden kann. Bei Ihrem nächsten Projekt könnten Sie vielleicht die folgenden Tools nutzen, um Maße auf die Schnelle zu berechnen:

• Phiculator
  Der Phiculator ist ein einfaches Programm, welches zu einem beliebigen Wert den Goldenen Schnitt berechnet. Es ist für Windows und Mac verfügbar.
• Golden Section Ratio Design Tool
  Golden Section von Atrise ist ein Programm, welches Anwendern Routinearbeiten, Umgang mit Zahlen und Planen von Gruppierungen erspart. Man kann die harmonischen Elemente und Maße sehen und direkt verändern, während Sie an Ihrem Projekt arbeiten.

Die Drittel-Regel

Im Grunde genommen ist die Drittel-Regel eine vereinfachte Variante des Goldenen Schnitts und ist daher eine mehrteilige Faustregel. Eine Bildkomposition zu dritteln ist ein einfacher Weg, ohne jede Berechnung den Goldenen Schnitt anzuwenden.

Die Regel besagt, dass jede Bildkomposition durch jeweils zwei waagerechte horizontale und vertikale Linien in gleichem Abstand zueinander in neun gleiche große Teile geteilt werden kann. Hervorzuhebende Elemente können in der Nähe der Linien-Schnittpunkte platziert weden, damit sie eine hervorgehobene oder dominante Position im Design einnehmen. Ein Komposition mit der Drittel-Regel anzuordnen erzeugt mehr Spannung, Energie und Interesse als es einfaches Zentrieren vermag.

In den meisten Fällen ist es weder möglich noch sinnvoll, alle vier Schnittpunkte zum Hervorheben von Website-Funktionen oder Navigationselementen zu nutzen. Sie können aber einige Punkte (üblicherweise ein oder zwei) verwenden, um die wichtigste Aussage oder Funktion einer Seite zu platzieren. Der Punkt links oben ist normalerweise der beste, weil Nutzer Websites visuell in Form eines “F” erfassen.

Wie teilen Sie nun ein Layout in neun gleiche Teile? Jason Beiard erklärt (engl.) die folgende Methode, mit der die Drittel-Regel auf ein Layout angewendet wird:

1. Zeichnen Sie zunächst ein Rechteck. Die vertikale und horizontale Dimension spielt keine Rolle, zeichnen Sie aber sauber und 90-Grad-Winkel.
2. Teilen Sie Ihr Rechteck horizontal und vertikal in drei Teile.
3. Teilen Sie das obere Drittel Ihres Layouts erneut in drei Teile.
4. Teilen Sie jede der Spalten in zwei Hälften, um ein Gitter zu erhalten.
5. Sie sollten nun ein Quadrat haben, das dem Gitter der Drittel-Regel ähnlich ist.

Stellen Sie sich die folgende Situation vor. Angenommen, Ihr Layout hat eine fixe Breite von 960px. Beachten Sie den Bereich über der Falz, welcher wahrscheinlich eine Höhe von 750 bis 950px hat.

1. Teilen Sie die Breite Ihres Layouts durch drei. In dem Beispiel erhalten Sie 960px / 3 = 320px.
2. Teilen Sie die Höhe Ihres Layouts durch drei. In dem Beispiel erhalten Sie ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
3. Jedes Rechteck sollte jetzt 320px mal 285px groß sein.
4. Zeichnen Sie ein rechteckiges Gitter wie in Schritt 4 beschrieben, in dem Sie Linien durch die Enden der Rechtecke ziehen.
5. Platzieren Sie die wichtigsten Elemente Ihres Designs an den Schnittpunkten der vertikalen und horizontalen Linien.

Betrachten Sie unten das Design von demandware.com (engl.). Es wirkt trotz der lebendigen Farben nicht unruhig, sondern klar und gradlinig. Die Navigationsoptionen sind deutlich sichtbar und die Struktur der Website ist einfach zu erfassen.

Wenn Sie die Effektivität des Designs untersuchen, werden Sie feststellen, dass es perfekt ausbalanciert ist. Es wendet die Drittel-Regel fast perfekt an. An zwei der vier Schnittpunkte (rosa Blöcke im folgenden Bild) sind die Informationen platziert, die das Unternehmen besonders hervorheben will — nämlich, worum es auf der Website überhaupt geht und Arbeitsbeispiele. Beachten Sie auch, dass die Hauptbereiche genau entlang der zweiten horizontalen Achse plaziert sind. Das ist effektiv.

Drittel-Regel im Einsatz: An zwei der vier Schnittpunkte (rosa Blöcke) sind die Informationen platziert, die das Unternehmen hervorheben will.

Zusammenfassung

In einigen Fällen können Goldener Schnitt und Drittel-Regel die Aussagekraft Ihres Designs erheblich steigern. Mit dem Goldenen Schnitt geben Sie Ihrem Design Struktur, ein natürliches Gleichgewicht und machen es einfacher zu erfassen.

Mit der Drittel-Regel können Sie wichtige Funktionen Ihrer Website hervorheben und Ihren Besuchern ein Design präsentieren, das die Website benutzbar macht und die Informationen rüberbringt, die Sie vermitteln wollen. ™

Übersetzung von René Schmidt; mit exklusiver Genehmigung von Smashing Magazine

Der goldene Schnitt: Was für Akademiker

Den goldenen Schnitt kann man unter vielerlei Aspekten erklären. Er ist knallhart mathematisch, aber auch kunsthistorisch und fast schon esoterisch zu betrachten. Ich muss mich also entscheiden, denn alles zusammen geht nicht und beißt sich sogar.

Außerdem sind wir hier nicht an der Uni und auch nicht Teil eines wissenschaftlichen Projekts. Erwartet also jetzt keine akademischen Abhandlungen, denn die wären zum einen schnarch-langweilig und zum anderen so komplex, dass ein Artikel hier nicht das richtige Format dafür wäre.

Vielmehr will ich auf der praktischen Ebene versuchen, euch das Phänomen des goldenen Schnitts zu vermitteln. Das Ziel des Beitrags ist es, zu verstehen, inwieweit das Konzept des goldenen Schnitts oder eine seiner Näherungen hilfreich für eure Designs sein kann.

Der goldene Schnitt – Mathematik und dennoch Mysterium

Der sogenannte goldene Schnitt bezeichnet ein mathematisches Teilungsverhältnis eines Elements, dessen Verhältnis des Ganzen zu seinem größeren Teil, dem Verhältnis des größeren zum kleineren Teil entspricht. Dieses Teilungsverhältnis beträgt 1:1,618. 1,618 ist der Beginn der irrationalen Zahl Phi, die sich nicht als Bruch ganzer Zahlen darstellen lässt. Klar soweit?

Im Zusammenhang mit Phi steht die sogenannte Fibonacci-Folge. Die Fibonacci-Folge ist die unendliche Folge von natürlichen Zahlen, die mit zweimal der Zahl 1 beginnt. Von der zweiten Stelle an ist jedes Glied der Folge gleich der Summe der beiden vorhergehenden. Nach 0, 1 und 1 kommt demnach 2, gefolgt von 3, gefolgt von 5, gefolgt von 8, gefolgt von 13 und so weiter. Die darin enthaltenen Zahlen werden als Fibonacci-Zahlen bezeichnet.

Je weiter man der Fibonacci-Folge folgt, desto mehr nähert sich der Quotient aufeinanderfolgender Zahlen dem goldenen Schnitt an. Der Mathematiker Fibonacci brachte seine Folge nie selbst in Verbindung mit der Bezeichnung „Goldener Schnitt”, vielmehr benutzte er die Zahlenfolge, um im Jahr 1202 das Wachstum einer Kaninchenpopulation mathematisch zu beschreiben.

Um 1490 entstand die bekannteste Illustration des Künstlers Leonardo da Vinci, nämlich der „vitruvianische Mensch”. Das ist insofern von Bedeutung, als der Mathematiker Luca Pacioli eben sowohl die Person war, die da Vinci in die Mathematik einführte, als auch jene, die 1509 eine Abhandlung über die „Göttliche Proportion” schrieb. Diese Abhandlung beeinflusste in der Folge viele Künstler und Geisteswissenschaftler, wurde aber dennoch erst durch das Buch „Neue Lehre von den Proportionen des menschlichen Körpers” des deutschen Lehrers Adolf Zeising im Jahre 1854 populär.

Erst durch die romantisch verklärte Verknüpfung von Natur- und Geisteswissenschaften entstand in der Folgezeit ein Mysterium rund um den goldenen Schnitt. Insbesondere das Vorkommen eben jener Proportionen in der Natur, wie Zeising es etwa für den menschlichen Körper beschrieb, oder in der Architektur und Kunst in quasi unbewusster Verwendung, sorgte dafür, dass der goldene Schnitt zu einem Geschenk Gottes, dem göttlichen Bauplan des Universums verklärt wurde. Fortan galt der goldene Schnitt, der zu dieser Zeit gar als „göttlicher Schnitt” bezeichnet wurde, als diejenige Proportion, die von allen Menschen als schönste empfunden werden würde.

Der Mythos vom goldenen Schnitt funktioniert allerdings nur so lange, wie daran geglaubt wird. Tatsächlich entstanden selbst die Kunstwerke, die dem goldenen Schnitt zugesprochen wurden, etwa da Vincis bereits genannte Proportionsstudie nach Vitruv nicht unter Verwendung dieses Proportionsverhältnisses. Und von einer quasi natürlichen, Gott gegebenen Dominanz dieses Proportionsverhältnisses kann auch keine Rede sein. Dazu reicht ein Blick auf beliebige Alltagsobjekte.

Wie kann das sein, fragt ihr euch vielleicht? Das ist im Grunde ganz einfach. Man war seinerzeit davon ausgegangen, dass die Kunstwerke aller Epochen unter Verwendung der „göttlichen Formel” entstanden sein mussten, betrachtete sie ausschließlich unter diesem Gesichtspunkt und interpretierte so lange an ihnen herum, bis es passte. Dabei gibt es kein einziges Dokument, in dem irgendein Künstler je selbst beschrieben hätte, er habe den goldenen Schnitt als Gestaltungsmaxime genutzt.

Der goldene Schnitt in der heutigen Zeit

Natürlich gibt es auch heutzutage noch glühende Verfechter der alten Theorien, wahre Ideologieschlachten werden um das Thema geführt. Wir sollten uns daran nicht beteiligen, denn unstreitig ist ja durchaus, dass harmonische Proportionen wichtig für die ästhetische Gestaltung sind.

Sprich, wir benötigen ohnehin einen Ansatz für die Erstellung von proportionalen Design. Und da ist der goldene Schnitt, abgespeckt auf die Basics, nicht die schlechteste Möglichkeit, die wir haben.

Was heutzutage tatsächlich stattfindet, allerdings nur in Maßen, ist die Verwendung der Fibonacci-Folge als Grundlage für die Erstellung von Gestaltungsrastern. Und Gestaltungsraster braucht insbesondere, aber nicht nur, der Webdesigner. Das Gute an der Verwendung von Teilungsverhältnissen auf Basis der Fibonacci-Zahlen ist immerhin, dass die Proportionen sich vom größten bis zum kleinsten Gestaltungselement wiederholen, also konsistent bleiben. Dadurch wirken Designs auf dieser Basis immer homogen.

Wenn euch allerdings einer mit der Nautilus-Spirale oder noch komplexeren Ausprägungen des goldenen Schnitts kommt, solltet ihr durchaus einen vorsichtigen Schritt rückwärts machen. Alle Interpretationen, die ich bislang für Websites gesehen habe, wirkten, wie schon die Fehlinterpretationen der letzten Jahrhunderte völlig beliebig. Bei der Komplexität der verschiedenen Varianten des goldenen Schnitts ist es doch klar: Irgendein Element findet sich immer, das mehr oder weniger präzise auf einer Teilungslinie liegt; das muss man dann nur noch interpretatorisch zum bedeutendsten Bildteil erklären.

Natürlich schadet es nicht, die Ratio von 1,618 auf euer Seitenlayout anzuwenden. Angenommen, wir wollen ein Grid mit einer Gesamtbreite von 1.080 Pixeln mit zwei Spalten erstellen, so wäre das Anteilsverhältnis nach dem goldenen Schnitt:

1080 : 1,618 = 667 Pixel
1080 – 667 = 413 Pixel

Danach wäre der Contentbereich 667 Pixel breit, der kleinere Sidebarbereich 413 Pixel. Bevor mir jetzt einer mit fluiden Designs und so kommt; das war nur ein Beispiel. Ich wette, ihr wärt auf eine Verteilung von 667 zu 413 nicht selber gekommen.

Wenn wir nun 667 durch 413 teilen, was kommt dann dabei heraus? Genau: 1,615, also fast der goldene Schnitt. Und wenn wir 1.080 durch 667 teilen, erhalten wir mit 1,619 ebenfalls wieder fast den goldenen Schnitt. Niemand hindert euch übrigens daran, die gleichen Berechnungen mit relativen Werten, wie etwa em, zu machen.

Der goldene Schnitt für jedermann: die Drittelregel

Wenn euch jetzt der Kopf schwirrt und ihr euch fragt, bei welchem Projekt jemals eine solche Vorgehensweise im Ansatz erforderlich sein könnte, dann lest dennoch weiter. Denn es gibt den goldenen Schnitt auch für jedermann. Er heißt dann Drittelregel.

Zugegebenermaßen ist die Drittelregel weit weniger komplex als der goldene Schnitt, führt aber ebenfalls zu einer harmonischen Komposition und ist ganz ohne Mathematik für jeden zu machen.

Unter Verwendung der Drittelregel teilen wir ein Bild oder sonstiges Werk, wie den Viewport eines Browserfensters in neun gleiche Teile auf. Wir dritteln horizontal mit zwei Linien in gleichen Abständen und wiederholen das in der Vertikalen. Jetzt liegt ein Grid mit drei mal drei Zellen über dem Element, also dem Foto oder der Website.

Von User:Moondigger – Eigenes Werk, CC BY-SA 2.5, Link

Nach der Drittelregel würden wir jetzt die bildwichtigen (bei Fotos) Elemente in einen der vier Kreuzungspunkte des Grid legen. Dadurch wirkt das Bild interessanter und lebendiger, als hätten wir das Motiv ganz simpel zentriert. Wichtig ist, dass ihr nicht alle vier Kreuzungspunkte mit wichtigen Elementen belegt, denn das Hauptprinzip ist ja, dass durch die Platzierung Aufmerksamkeit erzielt werden soll. Bei Websites geht es zudem nicht vordergründig um die Ästhetik, sondern um Fragen des Kommunikationsdesigns. Was will ich transportieren? Vielleicht den Call-to-Action?

Die Drittelregel könnt ihr nun natürlich noch weiter detaillieren, etwa indem ihr die neun entstandenen Zellen jeweils einzeln erneut mit einem Neuner-Grid verseht. So lässt sich die Harmonisierung der Gestaltung im Zweifel bis auf das letzte Pixel runterbrechen.

Und all das ganz ohne Fibonacci. Für jene unter euch, die Wert darauf legen, den goldenen Schnitt nicht bloß in abgespeckter Form, sondern in seiner ganzen Pracht zu realisieren, haben wir noch einige Tools zusammengestellt, die euch genau dabei behilflich sein können. Das komplexeste Werkzeug hört auf den Namen Atrise Golden Section und kann sogar die wildesten Varianten. Viel Spaß beim Ausprobieren!

Tools zur Umsetzung des goldenen Schnitts

Modular Scale

Die Web-App Modular Scale erlaubt die Umrechnung verschiedener Fontgrößen auf Basis verschiedener Relationen, darunter befindet sich auch die Ratio 1,618 – der goldene Schnitt.

Golden Ratio von UXTriggers

Mit diesem Web-Tool legt ihr ein goldenes Rechteck über eine beliebige Website, die ihr per URL spezifiziert. Das Rechteck lässt sich an die Darstellungsgröße anpassen. Leider ist das Rechteck nur in der Größe anpassbar, kann aber nicht horizontal oder vertikal gespiegelt werden. So lässt sich stets nur eine Ausprägung beurteilen.

Atrise Golden Section

Atrise Golden Section legt einen transparenten Fibonacci-Grid über deinen Bildschirm. Diesen verschiebst du dann an die Stelle, an der du ihn brauchst und veränderst ihn in der Größe. So hast du bis ins kleinste Detail stets die richtigen Proportionen nach dem goldenen Schnitt vor Augen. Das Tool läuft nur unter Windows und kann 30 Tage lang kostenlos getestet werden.

Atrise Golden Section kennt alle Varianten des goldenen Schnitts und legt auf Wunsch auch eine Spirale oder ein Dreieck über dein Design. Die Orientierung lässt sich ebenfalls verändern. Damit bietet Atrise die wohl vollständigste Hilfestellung für Designer überhaupt. Inwieweit dir das 50 USD wert ist, musst du natürlich selbst entscheiden.

Phiculator

Der Phiculator ist ein kostenloses Widget für macOS, mit dessen Hilfe du zu jeder beliebigen Zahl die korrespondierende Zahl nach den Regeln der Fibonacci-Folge ermitteln kannst. Du gibst die Ausgangszahl entweder in den größeren oder den kleineren Eingabebereich ein und erhältst entsprechend entweder den passenden größeren oder kleineren Zahlenwert.

Golden Section Finder

Der Golden Section Finder von Areaware ist ein Tool für die reale Nutzung in der echten Welt – seltsam, nicht? Es handelt sich um eine kleine durchsichtige Schablone, die du quasi als Motivfinder nach den Regeln des goldenen Schnitts einsetzen kannst und ist damit in erster Linie für Fotografen gedacht.

Der Golden Section Finder kostet 12 USD. Für den Versand nach Deutschland kommen noch einmal 10 USD dazu.

Quellen zum Weiterlesen

• Applying Divine Proportion To Your Web Designs | Smashing Magazine
• Golden Ratio in UI design | Prototypr.io
• Golden Ratio in Web Design: Creating a Divine Website | DDG
• How To Use The Golden Ratio In Web Design | 92 Pixels
• What Grid System Architecture and the Golden Ratio Do for Web Design | UX Mag
• What Is The Golden Ratio? What You Need to Know and How To Use It | Canva Design School
• Göttliche Proportion und menschliche Deutung | Spektrum
• Goldener Schnitt | Typolexikon

Auch spannend

• Webdesign Trends 2022
• Atomic Design
• Brutalismus im Webdesign
• Neumorphisches Design
• Mehr Webdesign-Kunden finden
• Responsive Design mit Flexbox oder Grid?

(Quellennachweis Artikelbild: Depositphotos)