Anwendung des Goldenen Schnittes in modernen Designs

Die ideale Webseite ist sowohl funktional als auch harmonisch, aber selbst erfahrene Webdesigner haben Schwierigkeiten, Ihnen zu sagen, was einem Design einen natürlichen Fluss verleiht. Trotz der Farb- und Navigationstheorien scheint der entscheidende Aspekt der perfekten Ästhetik einer Webseite inakzeptabel zu sein. Wir wissen nicht warum es funktioniert, aber manchmal ist es einfach so. Es könnte alles ein einfaches Konzept sein.

Indem Sie das Design Ihrer Website mit einer buchstäblich natürlichen Reihenfolge untermauern, können Zuschauer Ihr Design interessanter und von Natur aus ansprechend finden. Dieses Konzept heißt Goldener Schnitt, ein mathematischer Begriff gehorcht der Natur und den wir Menschen als Ausdruck der Vollkommenheit unbewusst erkennen.

Das Goldene Was?

In einfachen Worten, der Goldene Schnitt (auch bekannt als göttliche Proportion oder der goldene Mitte), ist eine mathematische Konstante, die in Natur und Kunstwerk wiederholt vorkommt.

Als Gleichung ausgedrückt, wenn ein ist größer als b, (a + b) geteilt durch ein entspricht ein geteilt durch b (Schauen Sie sich das Bild unten an), das ungefähr gleich ist 1.618033987. Diese Zahl, oft durch das griechische Zeichen "phi" dargestellt, ist die Goldener Schnitt.

(Bildquelle: mathsisfun.com)

Dieselbe Theorie kann verwendet werden, um ein Rechteck zu erstellen, das als bezeichnet wird goldenes rechteck. Ein Bild, das dem goldenen Schnitt folgt, kann ordentlich innerhalb eines Rechtecks ​​platziert werden, das dem Verhältnis folgt.

(Bildquelle: creativeautomaton.com)

Wählen Sie zum Erstellen eines goldenen Rechtecks ​​eine Zahl aus, die der Länge der kurzen Seite des Rechtecks ​​entspricht. Sagen wir 500 Argumente. Multiplizieren Sie das mit 1,618. Das Ergebnis, 809 Pixel, ist die Länge der langen Seite Ihres Rechtecks. Daher ist ein Rechteck mit 500 x 809 Pixeln ein goldenes Rechteck. Es gehorcht dem Goldenen Schnitt.

Natürliche Schönheit

In Wahrheit sind sich die Wissenschaftler nicht sicher, was das Verhältnis ist, das Menschen so sehr mögen. Sie sind sich sicher, wie sehr wir es mögen. Studien deuten darauf hin, dass selbst winzige Änderungen an einem Bild, die den Goldenen Schnitt wahrer machen, einen großen Einfluss auf das Gehirn der Betrachter haben.

Das menschliche Gesicht folgt ebenfalls dem Verhältnis, und wir finden Menschen, deren Gesicht wahrer das Verhältnis ist, attraktiver. Muscheln, klassische Renaissance-Meisterwerke, Architektur aus der Antike und sogar menschliche Körperteile werden je nach dem Verhältnis zu den Fingern selbst proportioniert.

(Bildquelle: in2visualdesign)

Etwas tief im Herzen unseres Geistes bezeichnet den Goldenen Schnitt als schön, eine Tatsache, die Künstler und Architekten seit Tausenden von Jahren wissentlich oder nicht genutzt haben. Es ist eine Ursprache in Bildern. Das Ergebnis ist organisch, intuitiv und fühlt sich einfach richtig an.

Göttliche Zusammensetzung

Wie verwenden Sie diese magische Zahl bei der Gestaltung Ihrer Webseite? Die Mathematik mag wie eine erstickende Kiste aussehen, in der sich Ihre Kreativität schwer tun wird, aber der Goldene Schnitt ist einfach eine nützliche Richtlinie. Wenn Sie eine grundlegende Richtlinie erstellen, aus der Sie bauen können, erhalten Sie mehr kreativen Freiraum, indem Sie einige der Vermutungen von Proportionen und Platzierungen nehmen.

Betrachten Sie es als Werkzeug anstelle eines Käfigs. Grundsätzlich können Sie den Goldenen Schnitt verwenden, um die Größe und Anordnung von Inhaltsbereichen und Seitenleisten festzulegen. Ein Layout mit fester Breite ist die einfachste Anwendung. Bestimmen Sie die Gesamtgröße Ihres Layouts mithilfe der Methode zum Erstellen eines goldenen Rechtecks.

Für Gitter / Blöcke

Das durch die a-Zeilen erzeugte Quadrat wäre Ihr Inhaltsblock. Das kleinere Rechteck wäre eine Seiten- oder Navigationsleiste. Wenn Sie die Größe Ihres Rechtecks ​​herausgefunden haben, können Sie herausfinden, wie breit Ihre Navigationsleiste sein muss.

• Für dieses Beispiel sagen wir, dass Ihr Rechteck ist 525 Pixel um 850 Pixel.
• 525 ist ein und 850 ist (a + b), und b wird die Breite Ihrer Seitenleiste sein.
• Finden b, wir ziehen einfach von ab (a + b), Das ist 325.
• Daher beträgt die Breite Ihrer Seitenleiste 325.

Denken Sie daran, dass Ihr Rechteck für Ihre Zwecke gedreht werden kann, indem Sie die Seitenleiste oben, unten oder auf der gegenüberliegenden Seite platzieren. Solange das Verhältnis gilt, fühlt sich Ihr Design harmonisch an.

Für text

Es gibt einen schnelleren Weg, um die gewünschten Messungen zu erhalten, und es kann mit Textinhalt angewendet werden.

• Nehmen wir an, Ihr Kontexttext hat die Größe 12.
• 12 mit multiplizieren 1.618, der Goldene Schnitt, und Sie erhalten 19.416.
• Eine Kopfzeilengröße von 19 oder 20 würde dem Goldenen Schnitt folgen.

Die goldene Ratio ist eine Sprache, die Ihr Verstand versteht, und wenn Sie mit ihr kommunizieren, werden Ihre Ideen effektiver wirken. Sie müssen sich nicht genau daran halten; das grundprinzip ist genug. Die Anwendung des Verhältnisses auf Bildgrößen, die Beziehung zwischen Text und Bildplatzierung und die Erstellung von Unterteilungen in Seitenleisten sind alle möglichen Konzepte.

Gitterarbeit: Die Drittelregel

Wenn Mathematik nicht Ihr Ding ist, kann das Konzept des Goldenen Schnittes vereinfacht werden. Das Drittelregel regelt die Platzierung von Sonderzielen in einer Szene. Unterteilen Sie ein beliebiges Bild horizontal und vertikal in Drittel. Sie erhalten 9 Gitter.

(Bildquelle: digital-photography-school.com)

Gemäß der Drittelregel sind die Scheitelpunkte dieser Linien (wo sich die Linien kreuzen) die ideale Platzierung für interessierende Punkte. Personen, die die Seite scannen, bemerken eher Dinge, die sich in der Nähe der Punkte befinden, und die Unterteilung ist komfortabel. Ein komplexeres Design ist möglich, indem diese Drittel in weitere Drittel zerlegt werden.

(Bildquelle: net.tutsplus.com)

Kurz gesagt, das Auge kann faul sein und muss nicht nach wichtigen Details suchen. Unsere Gehirne mögen das. Wichtige Bilder, Newsboxen, Suchleisten und andere interessante Punkte können an oder in der Nähe der Scheitelpunkte eingebettet sein. Diese nette Abkürzung gibt Ihnen ein Design, das sowohl die Augen schont, als auch die Menschen zu den wichtigsten Datenstücken zieht.

Spalten und Schriftgrößen: Fibonacci-Sequenzen

Ein weiteres einfaches Tool für Webdesign, das mit dem Goldenen Schnitt verknüpft ist, ist Fibonacci-Zahlen. Eine Fibonacci-Sequenz beginnt mit 0 und 1. Die beiden vorherigen Nummern werden addiert, um die nächste Nummer in der Sequenz zu erzeugen: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… und so weiter.

Ein wenig Mathematik sagt uns, dass die Beziehung zwischen aufeinanderfolgenden Fibonacci-Sequenznummern erstaunlich nahe am Goldenen Schnitt liegt - dividieren Sie die beliebige Nummer in der Sequenz durch die Nummer davor und Sie werden es bekommen - Sie haben es erraten - 1.618.

Wie beim Goldenen Schnitt können Fibonacci-Zahlen verwendet werden, um die Beziehung zwischen Kopf- und Inhaltstextgröße zu bestimmen. Es kann auch zur Festlegung der Spaltenbreite verwendet werden und ist besonders in Blogs und anderen textdichten Layouts effektiv. Die Zusammensetzung könnte auch auf dem Konzept der Fibonacci-Kacheln basieren, bei dem die Kachelgröße auf der Fibonacci-Sequenz beruht.

(Bildquelle: Wikipedia.org)

Goldene Spiralen und Content-Clustering

Eine andere mögliche Methode sowohl für den Goldenen Schnitt als auch für die Fibonacci-Zahlen sind die goldene Spiralen und Fibonacci-Spiralen. Goldene Spiralen werden für jede Vierteldrehung, die sie machen, um einen Faktor breiter, und die Fibonacci-Spiralen werden mit Fibonacci-Kacheln geformt.

Die Spiralen werden in Kunstwerken so lange verwendet, wie die Zahlen und Verhältnisse selbst sind. Die Theorie besagt, dass Bereiche mit negativem Raum und visuellem Interesse in die Spirale passen sollten. In diesem anmutigen Layout wird wie bei der Drittelregel der Blick natürlich auf das Zentrum der Spirale gerichtet, um nach Details zu suchen.

(Bildquelle: fabiovisentin.com)

Die Spiralen können als Richtlinie für die Inhaltsdichte und das Clustering dienen. Sie können als Grundlage für das Verhältnis der Kopfzeilen Ihrer Website, der Suchleisten und der Symbolleisten dienen.

Wenn Sie das ideale Bild für eine Titelseite auswählen, die aus großen Grafiken besteht, z. B. Homepage für Geschäftsseiten und Websites für Fotografie, können Sie auch von den goldenen Spiralen und den Fibonacci-Spiralen profitieren.

Mächtige Botschaften sind oft unterschwellig, und der Goldene Schnitt ist eine der produktivsten unterschwelligen Anzeigen der Natur. Indem Sie das göttliche Verhältnis verwenden, geben Sie sich selbst einen Vorteil natürlicher Logik und organischer Anmut, zu der alle Menschen eine unbewusste Anziehungskraft haben. Die goldene Ratio ist ein weiteres Werkzeug, das Ihnen kreativ zur Verfügung steht.

Mehr lesen:

• Anwenden des Goldenen Verhältnisses auf Weblayouts und Objekte

Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Chris Pentago für Hongkiat.com. Chris ist ein erfahrener Webentwickler, Designer und Internet-Vermarkter, der an Schlüsseltechnologien interessiert ist, um Ihr Online-Geschäft leistungsfähig zu machen. Sie finden ihn auf Twitter.