Ein Leitfaden zum Goldenen Schnitt für Designer

Gutes Design steht schon so lange zur Debatte, wie wir gestalten. Es gibt endlose Foren, Social-Media-Threads und persönliche Gespräche darüber, was gutes Design ausmacht, wobei jeder seine eigene Sichtweise einbringt.

Das ist das Schöne an Design, oder? Jeder kann es anders interpretieren.

Es wird zwar nie einen allgemeingültigen Ansatz für Design geben, aber es gibt einen konkreten, mathematischen Ansatz, der uns dabei helfen kann, jedes Mal einen Schritt näher an die Schaffung erstaunlicher Design-Erlebnisse heranzukommen: der Goldene Schnitt.

Der Goldene Schnitt ist ein mathematisches Verhältnis, das man fast überall finden kann, etwa in der Natur, der Architektur, der Malerei und der Musik. Speziell auf das Design angewandt, schafft er eine organische, ausgewogene und ästhetisch ansprechende Komposition.

In diesem Artikel tauchen wir ein in die Frage, was der Goldene Schnitt ist, wie man ihn berechnet und wie man ihn im Design einsetzt – inklusive einer praktischen Liste von Tools.

Was ist der Goldene Schnitt?

Auch bekannt als Goldener Schnitt, Goldener Mittelwert, Göttliche Proportion oder der griechische Buchstabe Phi, ist der Goldene Schnitt eine spezielle Zahl, die ungefähr 1,618 entspricht. Das Verhältnis selbst stammt von der Fibonacci-Folge, einer natürlich vorkommenden Zahlenfolge, die überall zu finden ist, von der Anzahl der Blätter an einem Baum bis hin zur Form einer Muschel.

Die Fibonacci-Folge ist die Summe der beiden Zahlen vor ihr. Sie geht so: 0, 1,1, 2, 3, 5, 8, 13, 21, und so weiter, bis ins Unendliche. Aus diesem Muster entwickelten die Griechen den Goldenen Schnitt, um die Differenz zwischen zwei beliebigen Zahlen in der Folge besser auszudrücken.

Was hat das mit Design zu tun? Sie können den Goldenen Schnitt finden, wenn Sie eine Linie in zwei Teile teilen und der längere Teil (a) geteilt durch den kleineren Teil (b) gleich der Summe von (a) + (b) geteilt durch (a) ist, die beide 1,618 ergeben. Diese Formel kann Ihnen bei der Erstellung von Formen, Logos, Layouts und vielem mehr helfen.

Sie können diese Idee auch nehmen und ein goldenes Rechteck erstellen. Nehmen Sie ein Quadrat und multiplizieren Sie eine Seite mit 1,618, um eine neue Form zu erhalten: ein Rechteck mit harmonischen Proportionen.

Wenn Sie das Quadrat über das Rechteck legen, ergibt sich aus dem Verhältnis der beiden Formen der Goldene Schnitt.

Wenn Sie die Formel des Goldenen Schnitts immer wieder auf das neue Rechteck ganz rechts anwenden, erhalten Sie am Ende ein Bild, das aus immer kleineren Quadraten besteht.

Wenn Sie über jedes Quadrat eine Spirale zeichnen, die in einer Ecke beginnt und in der gegenüberliegenden endet, erzeugen Sie die erste Kurve der Fibonacci-Folge (auch bekannt als die Goldene Spirale).

Wie Sie den Goldenen Schnitt im Design verwenden

Nun, da die Mathematikstunde vorbei ist, wie können Sie dieses Wissen auf Ihre tägliche Arbeit anwenden?

Hier sind vier Möglichkeiten, den Goldenen Schnitt im Design zu verwenden:

Typografie und Definition der Hierarchie

Der Goldene Schnitt kann Ihnen dabei helfen, herauszufinden, welche Schriftgröße Sie für Überschriften und Fließtext auf einer Website, Landing Page, einem Blogbeitrag oder sogar einer Printkampagne verwenden sollten.

Angenommen, Ihr Fließtext ist 12px groß. Wenn Sie 12 mit 1,618 multiplizieren, erhalten Sie 19,416, was bedeutet, dass eine Header-Textgröße von 19px oder 20px dem Goldenen Schnitt folgt und die 12px Körperschriftgröße ausgleicht.

Wenn Sie herausfinden wollen, wie groß Ihr Körpertext sein sollte, können Sie das Gegenteil tun. Wenn Ihr Header-Text 25px groß ist, können Sie ihn durch 1,618 teilen, um den Textkörper (15 oder 16 px) zu finden.

Bilder zuschneiden und in der Größe anpassen

Beim Zuschneiden von Bildern ist es einfach, den weißen Raum zu identifizieren, der herausgeschnitten werden soll. Aber wie stellen Sie sicher, dass das Bild nach dem Ändern der Größe immer noch ausgewogen ist? Sie können die Goldene Spirale als Leitfaden für die Bildkomposition verwenden.

Wenn Sie zum Beispiel die Goldene Spirale über ein Bild legen, können Sie sicherstellen, dass sich der Brennpunkt in der Mitte der Spirale befindet.

Layout

Die Verwendung des Goldenen Schnitts kann Ihnen helfen, eine visuell ansprechende Benutzeroberfläche zu gestalten, die die Aufmerksamkeit des Benutzers auf das Wesentliche lenkt. Zum Beispiel kann eine Seite, die einen breiten Inhaltsblock auf der linken Seite mit einer schmaleren Spalte auf der rechten Seite hervorhebt, den Proportionen des Goldenen Schnitts folgen und Ihnen helfen, zu entscheiden, wo der wichtigste Inhalt platziert werden soll.

Logoentwicklung

Wenn Sie ein neues Logo entwerfen und nicht weiterkommen, können Sie den Goldenen Schnitt nutzen, um die Proportionen und Formen zu skizzieren. Viele populäre Logos folgen dem Goldenen Schnitt, wie z.B. Twitter, Apple und Pepsi.

Der Designer Kazi Mohammed Erfan hat sich sogar selbst herausgefordert, 25 neue Logos zu entwerfen, die komplett auf dem Goldenen Schnitt basieren. Das Ergebnis? Einfache, ausgewogene und schöne Icons.

Tools, die Ihnen helfen, den Goldenen Schnitt zu nutzen

Sie müssen nicht Bleistift und Papier hervorholen, um den Goldenen Schnitt zu berechnen – es gibt eine Reihe von Apps, die das für Sie erledigen können.

Hier sind fünf Tools, die Ihnen helfen, den Goldenen Schnitt in Ihren Designs zu verwenden:

• Golden Ratio Calculator: Berechnen Sie die kürzere Seite, die längere Seite und die kombinierte Länge der beiden Seiten, um den Goldenen Schnitt zu ermitteln.
• goldenRATIO: Diese App wurde für Designer und Entwickler entwickelt und bietet Ihnen eine einfache Möglichkeit, Websites, Benutzeroberflächen, Layouts und mehr nach dem Goldenen Schnitt zu gestalten. Sie enthält einen eingebauten Rechner mit visuellem Feedback und Funktionen zum Speichern von Bildschirmposition und Einstellungen, damit Sie den Goldenen Schnitt nicht für jede Aufgabe neu anordnen müssen.
• Golden Ratio Typography Calculator: Entdecken Sie die perfekte Typografie für Ihre Website, indem Sie die Schriftgröße und -breite eingeben. Sie können anhand von Schriftgröße, Zeilenhöhe, Breite und Zeichen pro Zeile optimieren.
• PhiMatrix: Diese Design- und Analysesoftware für den Goldenen Schnitt kommt mit anpassbaren Rastern und Vorlagen, die Sie über jedes Bild legen können. Es kann für Design und Komposition, Produktdesign, Logoentwicklung und mehr verwendet werden.
• Golden Ratio Sketch resource: Laden Sie eine kostenlose Skizzendatei der Goldenen Spirale herunter, die Ihnen bei der Bild- und Layoutgestaltung hilft.

Einstieg in den Goldenen Schnitt

Wenn Sie einmal wissen, worauf Sie achten müssen, werden Sie den Goldenen Schnitt überall bemerken. (Sie glauben uns nicht? Schauen Sie sich Ihre Hände an. Sogar Ihre Finger folgen dem Goldenen Schnitt.) Das menschliche Auge ist es gewohnt, diese magische Zahl zu sehen, und wir reagieren unbewusst positiv darauf.

Als Designer können wir diese Zahl zu unserem Vorteil nutzen. Selbst kleine Änderungen an der Art und Weise, wie Sie ein Bild zuschneiden oder ein Layout entwickeln, können die Art und Weise, wie Ihre Benutzer mit Ihrem Design interagieren, dramatisch verbessern.