Der Goldene Schnitt: Der ultimative Leitfaden, um ihn zu verstehen und zu verwenden

Designer auf der ganzen Welt sollten den Goldenen Schnitt kennen. Es ist ein mathematisches Verhältnis, das ästhetisch ansprechende Designs erzeugt. Da der Goldene Schnitt in der Natur so häufig vorkommt, überrascht es nicht, dass seine Ergebnisse natürlich aussehen.

Foto von Bogomil Mihaylov auf Unsplash

Der Goldene Schnitt hat auch mehrere andere Namen:

• Göttliches Verhältnis
• Goldene Mitte
• goldener Schnitt
• Phi (griechischer Buchstabe)

Die Mathematik hinter dem Goldenen Schnitt

Ich werde die Mathematik des Goldenen Schnitts so einfach wie möglich erklären und ohne auf die Details einzugehen, die Sie eigentlich nicht wissen müssen. Wenn Sie mit der Mathematik mithalten können, großartig. Aber wenn Sie das nicht können, ist das in Ordnung – Sie können das Konzept trotzdem in Ihren Designs verwenden.

Um den Goldenen Schnitt zu verstehen, müssen Sie zuerst das Goldene Rechteck verstehen

Das Goldene Rechteck ist ein großes Rechteck mit einem Quadrat darin. Die Seiten des Quadrats sind gleich der kürzesten Länge des Rechtecks:

Quelle: Wikipedia

Der Goldene Schnitt ist eine Zahl, die (irgendwie) gleich 1,618 ist, genau wie Pi ungefähr gleich 3,14 ist, aber nicht genau.

Du nimmst eine Linie und teilst sie in zwei Teile – einen langen Teil (a) und einen kurzen Teil (b). Die Gesamtlänge (a + b) geteilt durch (a) ist gleich (a) geteilt durch (b). Und diese beiden Zahlen entsprechen 1,618. Also ergibt (a + b) geteilt durch (a) 1,618 und (a) geteilt durch (b) ebenfalls 1,618.

Zurück zum Goldenen Rechteck, weil es so viel einfacher zu verstehen ist

Wenn Sie ein Quadrat innerhalb des Rechtecks ​​platzieren, wird ein weiteres, kleineres Rechteck erstellt. Ignorieren Sie die schwarzen Linien und sehen Sie sich die roten und grünen Kästchen an:

Das rote Quadrat hat vier gleich lange Seiten, und diese Länge entspricht der kürzesten Länge des Rechtecks. Indem Sie dieses Quadrat abtrennen, erstellen Sie automatisch ein weiteres, kleineres Rechteck (grün umrandet). Zusammen bilden sie ein komplettes Golden-Ratio-Layout und eine Basis für die Goldene Spirale.

Sie können auch ein neues Goldenes Rechteck aus dem kleineren Rechteck machen, wie dieses, das ich blau umrandet habe:

Ein traditionelles Golden-Ratio-Diagramm hat acht Goldene Rechtecke:

Und hier ist das kleinste Goldene Rechteck, #8:

Wenn Sie unten links beginnen und einen Bogen machen, um die gegenüberliegende Seite jedes quadratischen und kleinen rechteckigen Querschnitts zu verbinden, erhalten Sie die Goldene Spirale.

Die Fibonacci-Folge

Die Fibonacci-Folge ist ziemlich einfach zu verstehen: Sie beginnen mit Null und 1, dann erhalten Sie die nächste Zahl, indem Sie die beiden Zahlen davor addieren. 0 + 1 = 1, dann 1 + 1 = 2 usw. Die ersten paar Zahlen in der Folge sind 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Wenn Sie diese Zahlen verwenden, um Quadrate mit diesen Breiten zu erstellen, können Sie so ziemlich eine Goldene Spirale erstellen:

Quelle: Mathe macht Spaß

Die Goldenen Kreise

Manchmal werden anstelle der Spirale oder zusätzlich zur Spirale Kreise in die Quadrate gezeichnet. Wenn Sie in den Kästchen des Goldenen Schnitt-Overlays perfekte Kreise zeichnen, haben sie das Verhältnis 1:1,618 mit einem angrenzenden Kreis.

Quelle: Limelight-Abteilung

Die Logos von Pepsi und Twitter verwenden die Golden Circles:

Quelle: Hybride Gespräche

Sie haben gesehen Vor, A Lot

Die Natur ist voll vom Goldenen Schnitt. Es ist in Flora, Muscheln, Wetter…

Quelle: Foto von Annie Spratt auf Unsplash

Quelle: Foto der NASA auf Unsplash

Und weil wir es so oft sehen, bevorzugt unser Gehirn es. Diese angeborene Anziehungskraft ist der Grund, warum es für Designer so ein leistungsstarkes Layout ist.

Der Goldene Schnitt in Kunst und Design

Manchmal ist der Goldene Schnitt super einfach zu erkennen:

Quelle: staceysdetailinginc.com

Manchmal sagst du: „Ich habe keine Ahnung, wovon du redest… oh warte. Jetzt sehe ich es. Ich denke."

Quelle: Marketing-Insider

Manchmal könnte man beim Anblick verrückt werden…

Quelle: Widewalls

…aber wenn Sie sich auf das Haupt Golden Rectangle konzentrieren, wird es etwas klarer:

Werfen wir einen Blick auf ein häufig zitiertes Beispiel: den Parthenon

Quelle: Creative Bloq

Zuerst sehen Sie das vielleicht und sagen: „Das sieht für mich einfach symmetrisch aus. Wie passt das, was ich mir ansehe, zu dieser Golden Rectangle Spiral-Sache?“

Beim Goldenen Schnitt geht es nicht darum, wie jeder Teil eines Designs vollständig und nur in die spezifischen Abschnitte passt. Wenn das der Punkt wäre, wäre die rechte Seite des Parthenon ein großer Block und die linke Seite würde in kleinere Blöcke unterteilt.

Stattdessen wird das Verhältnis verwendet, um Harmonie und Proportionen zu erzeugen, und das kann auf verschiedene Weise interpretiert werden.

Während der Goldene Schnitt auf Mathematik basiert, kann er auf kreative Weise angepasst werden. Beim Parthenon bestimmt der Goldene Schnitt die Höhe und Platzierung der Designkomponenten. Außerdem gibt es eine Reihe von Möglichkeiten, Golden-Ratio-Diagramme darüber zu legen:

Quelle: Archinect

Quelle: Esther Sugihto auf Medium

Quelle: GoldenNumber.net

Der Goldene Schnitt und Website-Design

Egal, ob Sie sich für Mathe interessieren oder Ihnen der Kopf explodiert, der Goldene Schnitt ist in Bezug auf das Design etwas einfacher zu verstehen. Sie haben das schwere Heben erledigt. Jetzt ist es an der Zeit, das grundlegende Overlay zu nehmen und Ihre Webkomponenten perfekt zu gestalten.

Der Goldene Schnitt und Layout

Wenn Sie ein perfektes Golden-Ratio-Layout wünschen, stellen Sie die Abmessungen auf 1:1.618 ein. Sie können beispielsweise die Breite auf 960 Pixel und die Höhe auf 594 Pixel einstellen. Das Goldene Rechteck hat auf jeder Seite 594 Pixel und das Rechteck nimmt den Rest des Layouts ein (594 x 366).

Calculator Soup hat einen hilfreichen Goldenen Schnitt-Rechner, mit dem Sie jeden Begriff (A, B oder A + B) einstellen können, um die richtigen Goldenen Schnitt-Werte zu finden.

Oder Sie können einfach diese Art von zweispaltigem Layout verwenden, bei dem eine Spalte etwas breiter ist als die andere. Es ist organisiert und zeigt deutlich die Hierarchie.

Quelle: National Geographic

Ich verwende dies auf meiner Website, weil die Homepage eine Sammlung meiner Blog-Posts ist und ich denke, dass dies eines der bekanntesten Layouts für Blogs ist:

Meiner Meinung nach ist das symmetrische Layout, das wir bei Elegant Themes verwenden, jedoch moderner:

Der Goldene Schnitt und der Abstand

Der Goldene Schnitt kann Ihnen helfen zu bestimmen, wo Sie Elemente Ihres Designs platzieren, welche Proportionen Sie verwenden und wo Sie negativen Raum lassen. Hier ist ein einfaches Beispiel, und Sie können das Goldene Schnitt-Overlay fast sehen, ohne es darüber legen zu müssen:

Quelle: Digiarts 2011

So sieht es aus, wenn ich die Goldene Spirale in Photoshop anwende:

Auch hier ist der Goldene Schnitt in der Mathematik verankert, aber wenn es darum geht, ihn auf das Design anzuwenden, ist er nicht perfekt. Dieses Design wird nicht auf einem Goldenen Rechteck erstellt, daher hat die Goldene Spirale keine normalen Proportionen. Sie können jedoch sehen, wie es einem Designer helfen kann, auszuwählen, wo das größte Element des Designs sowie die kleinsten Elemente und der negative Raum platziert werden sollen.

Sie können die Überlagerung des Goldenen Schnitts auch überlagern, um sie auf verschiedene Elemente desselben Designs anzuwenden:

Quelle: Branding von Lemongraphic. Beispiel aus Canva.

Der Goldene Schnitt und Inhalt

Wenn Sie gemeinsam über das Layout und den Abstand des Goldenen Schnitts nachdenken, können Sie entscheiden, wo Sie Inhalte auf Ihrer Website platzieren möchten.

Schauen wir uns noch einmal die National Geographic-Website an, diesmal mit Canvas Goldener Schnitt-Overlay:

Das Layout wird so geteilt, dass der Inhalt entlang der Mittellinie der Spirale ausgerichtet ist. Auf der linken Seite befindet sich ein großer Inhaltsblock. Rechts wird der Inhalt dichter und es gibt viel mehr negativen Raum. In der Mitte der Spirale sehen Sie ein zweites National Geographic-Logo – es gibt keinen besseren Weg, um Ihr Home-Branding voranzutreiben, als es dort zu platzieren, wo das Auge natürlich hingeht.

Hier ist ein großartiges Beispiel dafür, wie die Goldene Spirale Ihr Auge durch ein Design führen kann, sogar über seine Hauptkomponente hinaus. Dies ist nützlich, wenn Sie viele Inhalte auf eine Seite quetschen müssen. Sie werden auch feststellen, dass selbst bei einem so vollgepackten und detaillierten Design immer noch negativer Platz darin ist.

Quelle: Design von Helms Workshop. Beispiel aus Canva.

Lobende Erwähnung: Der Goldene Schnitt und Bilder

Der Goldene Schnitt wird auch in der Fotokomposition verwendet. Anstatt eine Goldene Spirale zu erstellen, teilt der Goldene Schnitt das Bild in sechs Blöcke auf. Derselbe Goldene Schnitt wird bei dieser Art von Raster verwendet: Die Breiten und Höhen der Abschnitte betragen entweder 1 oder 0,618.

Quelle: Leinwand

Anschließend verwenden Sie die Schnittpunkte, um die Aufnahme zu erstellen. Das Ziel ist es, ein Motiv oder einen Hauptteil eines Motivs auf eine der Schnittlinien zu setzen – das Motiv sollte nicht zentriert sein und einige Blöcke sollten leer bleiben (in den meisten Fällen zumindest – Makrofotografie und Nahaufnahmen) füllt fast den gesamten Rahmen aus). Auf diese Weise erstellen Sie ein interessanteres Porträt, als wenn das Motiv zentriert wäre.

Eine viel einfachere und zugänglichere Möglichkeit, diese Regel zu befolgen, besteht darin, das Raster der Drittelregel zu verwenden, das Sie wahrscheinlich auf der integrierten Kamera Ihres Telefons oder Ihrer DSLR haben.

Hier ist ein Bild, das ich vom Sohn meiner Cousine gemacht habe. Ich habe das Raster der Drittelregel darüber gelegt, um Ihnen zu zeigen, wo das Motiv den Rahmen ausfüllt und wo nicht.

Sehen Sie sich auch an, wie sich die Goldene Spirale fast perfekt um das Thema wickelt:

Der Goldene Schnitt unterscheidet sich von der Drittelregel, weil das Drittelregelraster Abschnitte mit gleicher Länge und Breite hat. Es ist jedoch so nah – und so viel einfacher –, dass Fotografen dies häufig verwenden, wenn sie ein Foto komponieren oder bearbeiten.

Einpacken

Der Goldene Schnitt kann unverändert verwendet oder an Ihre Zwecke angepasst und an Größe angepasst werden – Mathematik mag feste Regeln haben, Kreativität jedoch nicht. Während Sie den Goldenen Schnitt von Anfang an verwenden können, um Ihr Design zu leiten, können Sie ihn auch verwenden, nachdem Sie mit dem Designen begonnen haben, um Optimierungen und Verbesserungen vorzunehmen. Das Ziel ist, dass Sie sich vom Verhältnis leiten lassen, und nicht, ein Design zu erzwingen.

Sind Sie bereit, noch mehr mit Ihrem Website-Layout zu spielen? Lesen Sie unseren Artikel über die Verwendung der neuen Höhen- und Breitenoptionen von Divi, um ein responsives Design zu erstellen.