German (Deutsch) translation by Max Walsch (you can also view the original English article)
Der goldene Schnitt wird für grafische Layouts aller Art genutzt, insbesondere um textlastige Inhalte auszugleichen. Er kann Designern helfen, Hierarchien zu erstellen und den Blick des Betrachters auf bestimmte Gebiete zu lenken. Schau dir die folgenden Beispielwebseiten an und lerne, wie Designer Gebrauch von ihm machen.
Was ist der goldene Schnitt?
Der goldene Schnitt ist ein mathematisches Verhältnis, dass oft in der Natur gefunden werden kann in der klassischen Design-Theorie genutzt wird, um ausgewogene Kreationen zu schaffen. Er beträgt ungefähr 1,6180, ist ebenfalls als goldene Mitte bekannt und wird mit dem griechischem Buchstaben Phi "ϕ" dargestellt.
Ein "goldenes Rechteck" ist ein Rechteck, welches 1.6180 mal so breit, wie hoch ist. Als Beispiel könnte man ein div, dessen eine Seite 300px lang und dessen andere Seite 300 * 1.6180 ≈ 485px lang ist, als goldenes Rechteck bezeichnen.

Wenn daraus nun ein perfektes Quadrat geschnitten wird, erhält man ein weiteres goldenes Rechteck.

Dasselbe kann nun mit dem kleineren Rechteck unbegrenzt oft gemacht werden, sodass ein ähnliches Bild wie das folgende entsteht:

Die Fibonacci-Folge
Die Fibonacci-Folge ist dem goldenen Schnitt ähnlich, jedoch nicht gleich. Es ist eine Folge von Nummern, dessen nächste Zahl in der Folge die Summe der beiden vorherigen ist. Als Beispiel: 0, 1, 1, 2, 3, 4, 7
Wenn wir mit einem perfekten Quadrat beginnen und ein weiteres hinzufügen, erhalten wir ein Rechteck.

Dann fügen wir ein weiteres Quadrat mit den Maßen der längsten Seite des gebildeten Rechtecks hinzu:

Das noch einmal und noch einmal:

Das kann unbegrenzt so weitergehen und wird zum gleichen Effekt wie im goldenen Rechteck führen, doch ist es an der Zeit, etwas aufzubauen, anstelle wegzuschneiden. Der goldene Schnitt und die Fibonacci-Folge schaffen beide ähnlich ansprechende Proportionen.
Lass uns nun einige Webseiten analysieren, um das in Aktion zu sehen.
Beispiel #1: YStudio

Worüber handelt diese Webseite?
“Your Local Studio” ist ein Design- und Entwicklungsstudio aus Kopenhagen in Dänemark. Sie sind spezialisiert auf das Arbeiten mit visuellen Konzepten in jeglicher Form bis hin zum Erstellen von Erfahrungen, die die Umwelt verbessern.
Wie sie den goldenen Schnitt nutzen
Diese Webseite nutzt den goldenen Schnitt auf zwei von drei Seiten. Die Startseite ist eine konzeptionelle Übersicht ihrer Hauptbetätigungsfelder. Besucht man jedoch die Studio-Seite, mischen sich ein traditionelles Web-Layout mit goldenen Rechtecken, wenn man die Seite nach unten scrollt.

Warum es effektiv ist
Willst du dich von der Masse abheben? Yourlocalstudio (YLS) hat das geschafft, in dem sie den goldenen Schnitt in ihr Webdesign integriert haben. Dieses Design verfügt über ein fortschrittliches Aussehen und bestimmtes Rastersystem. Du kannst natürlich argumentieren, dass heutzutage alles wie Bootstrap aussieht... doch behalte dein Auge mehr auf den Seiten, die durch ein strukturelleres und dynamischeres Layout die Aufmerksamkeit auf sich ziehen möchten.
Beispiel #2: Mashable

Worüber handelt diese Webseite?
Mashable ist eine Nachrichtenseite, eine Quelle von Informationen, Wissen und Ressourcen für die "Generation Internet".
Wie sie den goldenen Schnitt nutzen
Ich habe den Goldenen-Schnitt-Test von UX Triggers genutzt, um zu demonstrieren, wie Mashable die Fibonacci-Folge in ihrem Layout nutzt. Das Inhalts-Layout ist flexibel, mit den Überschriften zur Linken und weiteren Nachrichten zu rechten, durch die Gitter voneinander getrennt.
Warum es effektiv ist
Der goldene Schnitt ist hier effektiv, da er den Texten einer sehr inhaltslastige Seite Freiraum gibt. Ähnliche Seiten scheinen dichter bepackt mit Inhalten, da sie traditionelle Raster-Layouts nutzen, doch Mashable demonstriert, dass der goldene Schnitt effektiv sein kann, selbst wenn er nicht sichtbar ist.
Beispiel #3: Jackson & Kent

Worüber handelt diese Webseite?
Jackson & Kent ist ein Webdesignagentur aus Frankreich. Sie sind spezialisiert auf digitale Dienstleistungen, wie HTML5, CSS3, Drupal, Wordpress, PHP/MySQL, Flash, etc.
Wie sie den goldenen Schnitt nutzen
Der Screenshot oben zeigt, wie ihr Layout im wesentlichen aus vergangener Arbeit für ihre Klienten besteht. Ein Block widmet sich dabei der Agentur selbst und eine Navigationsleiste zieht sich durch die Mitte des Bildschirms. Der Kontakt-Button, wie er unten zu sehen ist, nutzt ebenfalls den goldenen Schnitt als Rastersystem, um das Layout einzigartig auszurichten.

Warum es effektiv ist
Das Beispiel ermutigt, durch die Webseite zu schwenken und ihre Inhalte horizontal zu entdecken. Die gerasterte Ansicht und die unterschiedlich bemessenen Blöcke machen die Inhalte visuell interessanter. Da die Besucher die Inhalte vermutlich auf einem Desktop (oder einem Tablet) betrachten, befindet sich die Seitennummerierung auf der horizontalen Navigation. Es ist ein innovativer Weg, um jedes Stückchen Inhalt, sowie die Benutzeroberfläche als Ganzes zu betrachten.
Abschluss
Der goldene Schnitt lenkt den Blick des Nutzers natürlich auf bestimmte Punkte innerhalb einer Benutzeroberfläche. Als Konzept kann er dir helfen, bei der Platzierung von Inhalten und der effektiven Nutzung von Hierarchien nachzudenken. Die Kombination von Layout, Schriften, Farben und übergreifende Prinzipien wird dir helfen, dein Design auf das nächste Level zu bringen.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post