Mache dein Webdesign effektiver mit dem goldenen Schnitt

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.