Dieter Petereit 27. Juni 2018

Design und der goldene Schnitt: Das solltest du darüber wissen

Perfekte Proportionen haben eine besondere Ästhetik. Als perfekt gilt weithin der sogenannte goldene Schnitt. Was hat es damit auf sich?

Der goldene Schnitt: Was für Akademiker

Den goldenen Schnitt kann man unter vielerlei Aspekten erklären. Er ist knallhart mathematisch, aber auch kunsthistorisch und fast schon esoterisch zu betrachten. Ich muss mich also entscheiden, denn alles zusammen geht nicht und beißt sich sogar.

Außerdem sind wir hier nicht an der Uni und auch nicht Teil eines wissenschaftlichen Projekts. Erwartet also jetzt keine akademischen Abhandlungen, denn die wären zum einen schnarch-langweilig und zum anderen so komplex, dass ein Artikel hier nicht das richtige Format dafür wäre.

Vielmehr will ich auf der praktischen Ebene versuchen, euch das Phänomen des goldenen Schnitts zu vermitteln. Das Ziel des Beitrags ist es, zu verstehen, inwieweit das Konzept des goldenen Schnitts oder eine seiner Näherungen hilfreich für eure Designs sein kann.

Der goldene Schnitt – Mathematik und dennoch Mysterium

Der sogenannte goldene Schnitt bezeichnet ein mathematisches Teilungsverhältnis eines Elements, dessen Verhältnis des Ganzen zu seinem größeren Teil, dem Verhältnis des größeren zum kleineren Teil entspricht. Dieses Teilungsverhältnis beträgt 1:1,618. 1,618 ist der Beginn der irrationalen Zahl Phi, die sich nicht als Bruch ganzer Zahlen darstellen lässt. Klar soweit?

Im Zusammenhang mit Phi steht die sogenannte Fibonacci-Folge. Die Fibonacci-Folge ist die unendliche Folge von natürlichen Zahlen, die mit zweimal der Zahl 1 beginnt. Von der zweiten Stelle an ist jedes Glied der Folge gleich der Summe der beiden vorhergehenden. Nach 0, 1 und 1 kommt demnach 2, gefolgt von 3, gefolgt von 5, gefolgt von 8, gefolgt von 13 und so weiter. Die darin enthaltenen Zahlen werden als Fibonacci-Zahlen bezeichnet.

Je weiter man der Fibonacci-Folge folgt, desto mehr nähert sich der Quotient aufeinanderfolgender Zahlen dem goldenen Schnitt an. Der Mathematiker Fibonacci brachte seine Folge nie selbst in Verbindung mit der Bezeichnung „Goldener Schnitt”, vielmehr benutzte er die Zahlenfolge, um im Jahr 1202 das Wachstum einer Kaninchenpopulation mathematisch zu beschreiben.

Um 1490 entstand die bekannteste Illustration des Künstlers Leonardo da Vinci, nämlich der „vitruvianische Mensch”. Das ist insofern von Bedeutung, als der Mathematiker Luca Pacioli eben sowohl die Person war, die da Vinci in die Mathematik einführte, als auch jene, die 1509 eine Abhandlung über die „Göttliche Proportion” schrieb. Diese Abhandlung beeinflusste in der Folge viele Künstler und Geisteswissenschaftler, wurde aber dennoch erst durch das Buch „Neue Lehre von den Proportionen des menschlichen Körpers” des deutschen Lehrers Adolf Zeising im Jahre 1854 populär.

Der vitruvianische Mensch von Leonardo Da Vinci | Fotograf: www.lucnix.be | Lizenz: Public Domain

Erst durch die romantisch verklärte Verknüpfung von Natur- und Geisteswissenschaften entstand in der Folgezeit ein Mysterium rund um den goldenen Schnitt. Insbesondere das Vorkommen eben jener Proportionen in der Natur, wie Zeising es etwa für den menschlichen Körper beschrieb, oder in der Architektur und Kunst in quasi unbewusster Verwendung, sorgte dafür, dass der goldene Schnitt zu einem Geschenk Gottes, dem göttlichen Bauplan des Universums verklärt wurde. Fortan galt der goldene Schnitt, der zu dieser Zeit gar als „göttlicher Schnitt” bezeichnet wurde, als diejenige Proportion, die von allen Menschen als schönste empfunden werden würde.

Der Mythos vom goldenen Schnitt funktioniert allerdings nur so lange, wie daran geglaubt wird. Tatsächlich entstanden selbst die Kunstwerke, die dem goldenen Schnitt zugesprochen wurden, etwa da Vincis bereits genannte Proportionsstudie nach Vitruv nicht unter Verwendung dieses Proportionsverhältnisses. Und von einer quasi natürlichen, Gott gegebenen Dominanz dieses Proportionsverhältnisses kann auch keine Rede sein. Dazu reicht ein Blick auf beliebige Alltagsobjekte.

Wie kann das sein, fragt ihr euch vielleicht? Das ist im Grunde ganz einfach. Man war seinerzeit davon ausgegangen, dass die Kunstwerke aller Epochen unter Verwendung der „göttlichen Formel” entstanden sein mussten, betrachtete sie ausschließlich unter diesem Gesichtspunkt und interpretierte so lange an ihnen herum, bis es passte. Dabei gibt es kein einziges Dokument, in dem irgendein Künstler je selbst beschrieben hätte, er habe den goldenen Schnitt als Gestaltungsmaxime genutzt.

Der goldene Schnitt in der heutigen Zeit

Natürlich gibt es auch heutzutage noch glühende Verfechter der alten Theorien, wahre Ideologieschlachten werden um das Thema geführt. Wir sollten uns daran nicht beteiligen, denn unstreitig ist ja durchaus, dass harmonische Proportionen wichtig für die ästhetische Gestaltung sind.

Sprich, wir benötigen ohnehin einen Ansatz für die Erstellung von proportionalen Design. Und da ist der goldene Schnitt, abgespeckt auf die Basics, nicht die schlechteste Möglichkeit, die wir haben.

Was heutzutage tatsächlich stattfindet, allerdings nur in Maßen, ist die Verwendung der Fibonacci-Folge als Grundlage für die Erstellung von Gestaltungsrastern. Und Gestaltungsraster braucht insbesondere, aber nicht nur, der Webdesigner. Das Gute an der Verwendung von Teilungsverhältnissen auf Basis der Fibonacci-Zahlen ist immerhin, dass die Proportionen sich vom größten bis zum kleinsten Gestaltungselement wiederholen, also konsistent bleiben. Dadurch wirken Designs auf dieser Basis immer homogen.

Wenn euch allerdings einer mit der Nautilus-Spirale oder noch komplexeren Ausprägungen des goldenen Schnitts kommt, solltet ihr durchaus einen vorsichtigen Schritt rückwärts machen. Alle Interpretationen, die ich bislang für Websites gesehen habe, wirkten, wie schon die Fehlinterpretationen der letzten Jahrhunderte völlig beliebig. Bei der Komplexität der verschiedenen Varianten des goldenen Schnitts ist es doch klar: Irgendein Element findet sich immer, das mehr oder weniger präzise auf einer Teilungslinie liegt; das muss man dann nur noch interpretatorisch zum bedeutendsten Bildteil erklären.

Grafik mit Nautilus-Spirale. (Screenshot: D. Petereit)

Natürlich schadet es nicht, die Ratio von 1,618 auf euer Seitenlayout anzuwenden. Angenommen, wir wollen ein Grid mit einer Gesamtbreite von 1.080 Pixeln mit zwei Spalten erstellen, so wäre das Anteilsverhältnis nach dem goldenen Schnitt:

1080 : 1,618 = 667 Pixel
1080 – 667 = 413 Pixel

Danach wäre der Contentbereich 667 Pixel breit, der kleinere Sidebarbereich 413 Pixel. Bevor mir jetzt einer mit fluiden Designs und so kommt; das war nur ein Beispiel. Ich wette, ihr wärt auf eine Verteilung von 667 zu 413 nicht selber gekommen.

Wenn wir nun 667 durch 413 teilen, was kommt dann dabei heraus? Genau: 1,615, also fast der goldene Schnitt. Und wenn wir 1.080 durch 667 teilen, erhalten wir mit 1,619 ebenfalls wieder fast den goldenen Schnitt. Niemand hindert euch übrigens daran, die gleichen Berechnungen mit relativen Werten, wie etwa em, zu machen.

Der goldene Schnitt für jedermann: die Drittelregel

Wenn euch jetzt der Kopf schwirrt und ihr euch fragt, bei welchem Projekt jemals eine solche Vorgehensweise im Ansatz erforderlich sein könnte, dann lest dennoch weiter. Denn es gibt den goldenen Schnitt auch für jedermann. Er heißt dann Drittelregel.

Zugegebenermaßen ist die Drittelregel weit weniger komplex als der goldene Schnitt, führt aber ebenfalls zu einer harmonischen Komposition und ist ganz ohne Mathematik für jeden zu machen.

Unter Verwendung der Drittelregel teilen wir ein Bild oder sonstiges Werk, wie den Viewport eines Browserfensters in neun gleiche Teile auf. Wir dritteln horizontal mit zwei Linien in gleichen Abständen und wiederholen das in der Vertikalen. Jetzt liegt ein Grid mit drei mal drei Zellen über dem Element, also dem Foto oder der Website.

Rivertree thirds md.gif
Von User:MoondiggerEigenes Werk, CC BY-SA 2.5, Link

Nach der Drittelregel würden wir jetzt die bildwichtigen (bei Fotos) Elemente in einen der vier Kreuzungspunkte des Grid legen. Dadurch wirkt das Bild interessanter und lebendiger, als hätten wir das Motiv ganz simpel zentriert. Wichtig ist, dass ihr nicht alle vier Kreuzungspunkte mit wichtigen Elementen belegt, denn das Hauptprinzip ist ja, dass durch die Platzierung Aufmerksamkeit erzielt werden soll. Bei Websites geht es zudem nicht vordergründig um die Ästhetik, sondern um Fragen des Kommunikationsdesigns. Was will ich transportieren? Vielleicht den Call-to-Action?

Die Drittelregel könnt ihr nun natürlich noch weiter detaillieren, etwa indem ihr die neun entstandenen Zellen jeweils einzeln erneut mit einem Neuner-Grid verseht. So lässt sich die Harmonisierung der Gestaltung im Zweifel bis auf das letzte Pixel runterbrechen.

Und all das ganz ohne Fibonacci. Für jene unter euch, die Wert darauf legen, den goldenen Schnitt nicht bloß in abgespeckter Form, sondern in seiner ganzen Pracht zu realisieren, haben wir noch einige Tools zusammengestellt, die euch genau dabei behilflich sein können. Das komplexeste Werkzeug hört auf den Namen Atrise Golden Section und kann sogar die wildesten Varianten. Viel Spaß beim Ausprobieren!

Tools zur Umsetzung des goldenen Schnitts

Modular Scale

Modular Scale. (Screenshot: D. Petereit)

Die Web-App Modular Scale erlaubt die Umrechnung verschiedener Fontgrößen auf Basis verschiedener Relationen, darunter befindet sich auch die Ratio 1,618 – der goldene Schnitt.

Golden Ratio von UXTriggers

Golden Ratio. (Screenshot: D. Petereit)

Mit diesem Web-Tool legt ihr ein goldenes Rechteck über eine beliebige Website, die ihr per URL spezifiziert. Das Rechteck lässt sich an die Darstellungsgröße anpassen. Leider ist das Rechteck nur in der Größe anpassbar, kann aber nicht horizontal oder vertikal gespiegelt werden. So lässt sich stets nur eine Ausprägung beurteilen.

Atrise Golden Section

Atrise Golden Section. (Screenshot: D. Petereit)

Atrise Golden Section legt einen transparenten Fibonacci-Grid über deinen Bildschirm. Diesen verschiebst du dann an die Stelle, an der du ihn brauchst und veränderst ihn in der Größe. So hast du bis ins kleinste Detail stets die richtigen Proportionen nach dem goldenen Schnitt vor Augen. Das Tool läuft nur unter Windows und kann 30 Tage lang kostenlos getestet werden.

Atrise Golden Section kennt alle Varianten des goldenen Schnitts und legt auf Wunsch auch eine Spirale oder ein Dreieck über dein Design. Die Orientierung lässt sich ebenfalls verändern. Damit bietet Atrise die wohl vollständigste Hilfestellung für Designer überhaupt. Inwieweit dir das 50 USD wert ist, musst du natürlich selbst entscheiden.

Phiculator

Phiculator. (Screenshot: D. Petereit)

Der Phiculator ist ein kostenloses Widget für macOS, mit dessen Hilfe du zu jeder beliebigen Zahl die korrespondierende Zahl nach den Regeln der Fibonacci-Folge ermitteln kannst. Du gibst die Ausgangszahl entweder in den größeren oder den kleineren Eingabebereich ein und erhältst entsprechend entweder den passenden größeren oder kleineren Zahlenwert.

Golden Section Finder

Golden Section Finder. (Foto: Areaware)

Der Golden Section Finder von Areaware ist ein Tool für die reale Nutzung in der echten Welt – seltsam, nicht? Es handelt sich um eine kleine durchsichtige Schablone, die du quasi als Motivfinder nach den Regeln des goldenen Schnitts einsetzen kannst und ist damit in erster Linie für Fotografen gedacht.

Der Golden Section Finder kostet 12 USD. Für den Versand nach Deutschland kommen noch einmal 10 USD dazu.

Quellen zum Weiterlesen

  • Applying Divine Proportion To Your Web Designs | Smashing Magazine
  • Golden Ratio in UI design | Prototypr.io
  • Golden Ratio in Web Design: Creating a Divine Website | DDG
  • How To Use The Golden Ratio In Web Design | 92 Pixels
  • What Grid System Architecture and the Golden Ratio Do for Web Design | UX Mag
  • What Is The Golden Ratio? What You Need to Know and How To Use It | Canva Design School
  • Göttliche Proportion und menschliche Deutung | Spektrum
  • Goldener Schnitt | Typolexikon

(Quellennachweis Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück