Share
Der Goldene Schnitt wird in grafischen Layouts aller Art verwendet, insbesondere um Textinhalte auszugleichen. Es kann Konstrukteuren dabei helfen, eine Hierarchie zu erstellen und die Augen der Benutzer auf bestimmte Bereiche zu lenken. Schauen Sie sich die folgenden Website-Beispiele an und erfahren Sie, wie Designer davon Gebrauch machen!
Das Goldene Verhältnis ist ein mathematisches Verhältnis, das häufig in der Natur vorkommt und in der klassischen Designtheorie zur Erzeugung ausgewogener Kompositionen verwendet wird. Sie entspricht ungefähr 1,6180, ist auch als "goldenes Mittel", "goldener Schnitt", bekannt und wird mit dem griechischen Buchstaben Phi "ϕ" bezeichnet..
Ein "Goldenes Rechteck" ist ein Rechteck, dessen Länge 1,6180 mal so groß ist. Zum Beispiel a div Man könnte sagen, dass das eine Seite von 300px und eine andere von 300 * 1.6180 ≈ 485px ein goldenes Rechteck ist.
Wenn Sie ein perfektes Quadrat von diesem goldenen Rechteck abhacken, bleibt ein anderes goldenes Rechteck übrig.
Sie können dasselbe mit dem kleineren Rechteck machen und dann auf unbestimmte Zeit dasselbe, um Ihnen dieses vertraute Bild zu geben:
Die Fibonacci-Sequenz ähnelt der Goldenen Ratio, aber nicht genau so. Es ist eine Reihe von Zahlen, bei denen die nächste Zahl in der Folge die Summe der vorherigen zwei ist. Zum Beispiel: 0, 1, 1, 2, 3, 5, 8
Wenn wir mit einem perfekten Quadrat beginnen, fügen wir ein anderes hinzu, und wir erhalten ein Rechteck:
Addiere Quadrate auf der längsten LängeDann fügen wir ein weiteres Quadrat hinzu, das der längsten Länge der gesamten Form entspricht:
Dann immer wieder:
Dies kann unbegrenzt weitergehen, so dass wir den gleichen Effekt haben wie unser Goldenes Rechteck, dieses Mal jedoch aufbauen statt abhacken. Sowohl die Goldene Ratio als auch die Fibonacci-Sequenz geben uns ähnlich ansprechende Proportionen.
Lassen Sie uns nun einige Websites analysieren, auf denen wir sie in Aktion sehen können.
yourlocalstudio.dk"Your Local Studio" ist ein Design- und Entwicklungsstudio in Kopenhagen, Dänemark. Sie sind darauf spezialisiert, mit visuellen Konzepten in jeglicher Form zu arbeiten, um Erfahrungen zu schaffen, die die Umgebung verbessern.
Die Website hier verwendet den goldenen Mittelwert für zwei ihrer drei Seiten. Die Startseite ist eine konzeptionelle Übersicht der wichtigsten Arbeiten. Wenn Sie jedoch die Studioseite besuchen, mischt sie ein wenig vom traditionellen Weblayout mit goldenen rechteckigen Formen, wenn Sie die Seite nach unten scrollen.
Willst du in der Masse auffallen? Yourlocalstudio (YLS) hat dies durch die Verwendung des Goldenen Schnitts bei der Gestaltung ihrer Website erreicht. Das Design zeichnet sich durch einen progressiven Look mit einem bestimmten Rastersystem aus. Sie könnten argumentieren, dass diese Tage eAlles sieht nach Bootstrap aus… Halten Sie Ausschau nach immer mehr Websites, die mit einem strukturell dynamischen Layout auf sich aufmerksam machen möchten.
mashable.comMashable ist eine Nachrichten-Website. eine Quelle von Informationen, Wissen und Ressourcen für die "vernetzte Generation".
Ich habe den Golden Ratio-Test von UX Triggers verwendet, um zu demonstrieren, wie Mashable die Fibonacci-Sequenz in ihrem Layout verwendet. Das Inhaltslayout ist flexibel, mit der Überschrift links und Links zu weiteren Nachrichten auf der rechten Seite, getrennt durch die Raster.
Der Golden Ratio ist hier effektiv, da er einer sehr inhaltsorientierten Website die Typografie geben kann Atempause. Ähnliche Websites erscheinen mit herkömmlichen Rasterlayouts möglicherweise dichter mit Inhalten, aber Mashable zeigt, dass der Golden Ratio auch dann wirksam ist, wenn er unsichtbar ist.
www.jandk.frJackson & Kent ist eine Webproduktionsagentur aus Frankreich. Sie sind spezialisiert auf digitale Dienste wie HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash etc.
Der Screenshot oben zeigt, wie das Layout die Arbeit des Kunden weitgehend ausmacht. Es enthält auch einen Inhaltsblock über die Agentur selbst und eine Navigationsleiste in der Mitte des Bildschirms. Die Kontaktschaltfläche verwendet, wie unten gezeigt, auch den goldenen Mittelwert als Rastersystem, um das Layout auf einzigartige Weise zu organisieren.
Das Beispiel hier ermutigt Sie, durch die Website zu blättern und deren Inhalt horizontal zu untersuchen. Die Rasteransicht und die unterschiedlich großen Blockformen machen den Inhalt visuell interessanter. Da Benutzer den Inhalt wahrscheinlich auf einem Desktop (und auf einem Tablet) anzeigen möchten, gibt es Seitennummern in der Navigation der horizontalen Achse. Dies ist eine innovative Möglichkeit, jeden Inhalt, aber auch die Benutzeroberfläche als Ganzes anzuzeigen.
Das goldene Verhältnis führt das Auge des Benutzers natürlich zu bestimmten Punkten innerhalb einer Benutzeroberfläche. Als Konzept kann es Ihnen helfen, über die Platzierung von Inhalten nachzudenken und die Hierarchie effektiv zu nutzen. Durch die Kombination von Layout, Typografie, Farbe und übergeordneten Prinzipien können Sie Ihre Entwürfe auf die nächste Stufe bringen.
Accentsconagua