Layouts

Der Goldene Schnitt im Web-Design

5. November 2008
von

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

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.

Goldener Schnitt

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.

Rule of Thirds
Beispiel für die Drittel-Regel. Quelle: Wikipedia

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.

Rule of Thirds

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.

Rule of Thirds
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. ™

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.

8 Kommentare zu „Der Goldene Schnitt im Web-Design
  1. moonrise am 5. November 2008 um 08:28

    Vielen Dank für diesen Artikel!

    Genau sowas möchte ich hier lesen.

  2. Minerva am 6. November 2008 um 09:52

    Schließe mich moonrise an

  3. michael am 6. November 2008 um 12:34

    So sollte es sein. Informativ und nachvollziehbar.

    Gab es nicht mal eine Aktion für Photoshop, die die Aufteilung eines Formates nach dem goldenen Schitt erledigte?

  4. Francois am 6. November 2008 um 13:35

    my2cents: ich finde den Beitrag auch sehr informativ – deswegen bin ich plus Mitgleid.

  5. Vitaly Friedman am 6. November 2008 um 16:48
  6. Sven Lennartz am 6. November 2008 um 16:51

    danke sehr. dann wissen wir was wir zu tun haben…

  7. michael am 6. November 2008 um 17:43

    @Vitaly Friedman (#5):
    Ja, danke für den Link. So etwas hatte ich in Erinnerung.

  8. [Suche] design-Umsetzung w3c-valide am 18. Mai 2012 um 23:35

    [...] [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!