Der goldene Schnitt in Designbeispielen & Tipps

Das mag sich wie eine Mathematikstunde anfühlen, bleibt aber drin. Das goldene Verhältnis vereint ein wenig Mathematik, ein bisschen Natur und viel praktische Anwendung für Designer. Lassen Sie uns einen Blick darauf werfen, was der Goldene Schnitt für Design bedeutet, und ein paar Tipps, wie Sie ihn in Ihren Designprojekten verwenden können.

Der Goldene Schnitt wurde im Laufe der Geschichte verwendet, um Gestaltungselemente zu kreieren, die einen idealen optischen Eindruck haben. Da die Form in der Natur und in der Mathematik verwurzelt ist, ist sie die perfekte Kombination aus Balance und Harmonie. Und es ist ein hervorragendes Werkzeug, um als Designer den Ärmel zu haben.

Was ist der Goldene Schnitt?

Der goldene Schnitt (auch goldenes Rechteck und goldener Mittelwert genannt) ist einfach eine Form mit einem Anteil von 1 bis 1,618.

Komplexer kann die Mathematik folgendermaßen beschrieben werden, wie von der Interaction Design Foundation erläutert:

Jede Zahl in der Fibonacci-Folge ist einfach die Summe der beiden Zahlen davor. Es beginnt mit 1, 1 (dh 1 + dem unsichtbaren 0 = 1), und die ersten 10 Mitglieder der Sequenz sind 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. Es geht unendlich weiter .

Berechnen Sie das Verhältnis mathematisch mit der Formel für Phi: A / B = (A + B) / A = 1,618033987 =?

Die Anwendungen für Print- und Webdesign-Projekte sind oft ungenauer als 1 bis 1.618. Viele Designer runden Zahlen ab, wenn sie ein mathematisches Verhältnis für Raster erstellen, mit denen einfacher zu arbeiten ist.

Wenn es um die Anwendung des Konzepts geht, wird es häufig durch eine Spirale, Kreise oder Dreiecke dargestellt.

Und es ist nicht nur eine Designsache. Der Goldene Schnitt findet sich in der Natur (Nautilusmuschel), Kunst (Mona Lisa), Architektur (Eiffelturm) sowie Design.

Wie benutzt man es?

Bei der Anwendung des Goldenen Schnittes gibt es verschiedene Denkrichtungen:

  • Richten Sie den Entwurf mit einem Raster ein, das auf dem Verhältnis basiert, um Harmonie zu erzeugen
  • Tun Sie nichts, weil es gilt, ob Sie es absichtlich tun oder nicht

Die beste Lösung könnte irgendwo in der Mitte liegen. Aller Wahrscheinlichkeit nach ist Ihr Auge wahrscheinlich darauf trainiert, Designs zu entwerfen, die diese Theorie beinhalten, aber es kann niemals schaden, wenn Sie es wirklich gut anwenden.

Und die Leinwand kann alle möglichen Probleme verursachen, wenn es um den Goldenen Schnitt geht. Sie wissen nicht, welche Browsergröße jemand verwendet, oder das Verhältnis passt nicht zu einer bestimmten Druckgröße.

Ziel ist es, Teile innerhalb des Designs zu erstellen, die zu dieser idealen Form passen. Betrachten Sie es als Logo oder Foto. Verwenden Sie es, um eine Kopfzeile oder ein bestimmtes Stück eines Designs zu erstellen. Verwenden Sie die Konzepte, um ein Basisraster oder eine hierarchische Skala für die Typografie zu erstellen.

Raster und Vorlagen

Wenn Sie wie ich sind, ist die Idee der komplexen Mathematik zur Lösung eines Designproblems etwas einschüchternd. Da gibt es gute Werkzeuge, die helfen können.

Hier sind einige Vorlagen und Taschenrechner, mit denen Sie den Goldenen Schnitt etwas einfacher machen können.

  • Phikulator: Geben Sie eine beliebige Zahl ein und erhalten Sie den entsprechenden Golden-Ratio-Wert
  • Goldener Schnittentyp-Typ-Rechner: Erstellen Sie eine Skala basierend auf der Basisschriftart und -größe
  • Golden Ratio Template: Kostenlose Vektorvorlage zum Herunterladen
  • Goldene Ration Wireframing-Vorlage: Mit Ebenen für eine Kurve, Kreise oder ein Quadrat
  • Golden Ratio Calculator: Berechnen Sie das Verhältnis mit einer beliebigen Anzahl von Zahlen
  • Golden Rectangle Calculator: Berechnet die Bemaßungen für äußere und innere goldene Rechtecke für eine beliebige Anzahl (dies ist die Basis für viele Netzgitter, die das Verhältnis verwenden).

3 Tipps zur Verwendung des Goldenen Schnittes

Wie setzen Sie all diese Informationen in die Praxis um? (Wir möchten nicht, dass Sie Design-Projekte überdenken und von Mathematik überwältigt werden.)

Hier sind drei Tipps, wie Sie den Goldenen Schnitt in Designprojekten einsetzen können.

  • Verwenden Sie das Verhältnis, um ein Basis-Website-Grid für den Hauptinhaltsbereich und die Seitenleiste zu erstellen. Laut W3Schools beträgt die häufigste Browserauflösung zu Beginn des Jahres 2018 1366 x 768 Pixel. Wenden Sie das goldene Verhältnis für einen Inhaltsbereich von 846 Pixel Breite mit einer Seitenleiste von 520 Pixel Breite an. Bei der Betrachtung des Verhältnisses für diesen Zweck ist die Höhe nicht wichtig.
  • Verwenden Sie das Verhältnis, um eine Anleitung für den Abstand im Entwurf zu erstellen. Prototypr.io hat diesen Rat:? Verwenden Sie größere Quadrate wie Einheit 8 und 13, um Layouts zu definieren. Verwenden Sie kleinere Quadrate von Einheit 1, 2 oder 3, um Rinnen und Inhaltsabstände zu definieren. basierend auf goldenen Rechtecken.
  • Verwenden Sie das Verhältnis, um dauerhafte Elemente wie Symbole oder Logos zu erstellen: Wenn Sie ein dauerhaftes Element mit starker Harmonie haben, kann dies die Struktur für laufende Projekte schaffen. Das obige Beispiel enthält eine Vorlage, die Sie herunterladen und ausprobieren können.

Warum spielt der goldene Schnitt eine Rolle?

Warum ist der goldene Schnitt für Designer so wichtig?

Es ist ein weiteres Hilfsmittel, das Ihnen dabei hilft, etwas zu schaffen, das den richtigen emotionalen und visuellen Ton bei den Benutzern darstellt. Diese Theorie gilt unabhängig davon, ob Sie sie absichtlich anwenden oder nicht. Es kommt also darauf an, dass Sie es verstehen und anerkennen, um das bestmögliche und brauchbarste Design zu erstellen.

Was der Goldene Schnitt bedeutet, führt Sie zu den Fokusbereichen, in denen sich der Benutzer wahrscheinlich fokussieren und auf die Natur schauen kann. Es hilft, Gleichgewicht und Skalierung zu schaffen, auch wenn es nicht ganz beabsichtigt ist.

Hier sind ein paar gut gestaltete Websites mit der Vorlage "Goldener Schnitt", um genau zu sehen, wie sie sich auf die einzelnen Designs bezieht.

Fazit

Hier ist Ihr Schlüssel zum Verständnis und zur Anwendung der Goldenen Ratio: Es ist dort, ob Sie darüber nachdenken oder nicht. Warum also nicht überlegen, wie diese bewährte Designtheorie für Sie funktionieren und Projekte verbessern kann?

Laden Sie die Vorlage herunter, die wir hier verwendet haben, und zeigen Sie, wie nahe Sie gekommen sind, ohne darüber nachzudenken.

Overlay mit goldenem Schnitt von Eightonesix