Mathematik im Webdesign

Fibonacci Design

Wie der Name bereits sagt, basieren Fibonacci-Design auf der Fibonacci-Reihe. Laut Definition sind die ersten beiden Zahlen 0 und 1 und jede weitere Zahl wird aus der Summe der vorhergehenden beiden Zahlen gebildet. Einige Quellen verzichten auf die vorhergehende 0 und beginnen stattdessen mit zwei Einsen. Demnach sind die ersten beiden Fibonacci-Zahlen vorgegeben und alle weiteren ergeben sich aus der Summe ihrer beiden Vorgänger. Je weiter eine Reihe fortschreitet, desto mehr entspricht das Verhältnis zwischen den einzelnen Zahlen dem goldenen Schnitt. Eine Fibonacci-Reihe: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

Fibonacci-Reihen werden in der Musik manchmal dazu verwendet, um Stimmungen festzulegen – beim Design dienen Sie dazu, die Länge und Größe von Inhalten und Elementen festzulegen.  Ein Beispiel dafür ist das von Jürgen Schmidhuber umgesetzte Design ins seinem Blog methodology for Fibonacci-based designs. Wenn Sie sich dieses Design näher betrachten, wird Ihnen wahrscheinlich auffallen, dass es recht starr und schwierig zu lesen und navigieren ist. Es ist daher sinnvoll, bei der Umsetzung kreativ zu agieren statt sich blind an die mathematischen Regeln zu halten.

Die Hauptidee hinter solchen Designs ist, Fibonacci zu nutzen, um die Größen für Inhaltsbereich oder Sidebar festzulegen. Goldener Schnitt und Fibonacci geben Designern zuverlässige Richtlinien für die Größenverhältnisse von Containern und Blöcken.

Auf einer Fibonacci-Reihe basierende Designs sind realtiv einfach zu erstellen. Bestimmen Sie zuerst eine Basisbreite – z.Bsp. 90 px. Wenn Sie dann die Größe der einzelnen Container festlegen, multiplizieren Sie einfach die Basisbreite mit den Zahlen der Fibonacci-Reihe.  Als Beispiel dafür ein minimalistischer Typografie-Blog basierend auf einem Fibonacci-Design.

Wie Sie sehen, ist die Seite in drei Spalten aufgeteilt. Jede Spalte entspricht einer Fibonacci-Zahl. Für dieses Design wurde eine Basisbreite von 90px verwendet. Diese Breite wurde dann mit einer Fibonacci-Zahl multipliziert, um die Breite für die jeweilige Spalte zu bestimmen. So hat die erste Spalte eine Breite von 180 Pixeln ( 90 x 2), die zweite Spalte ist 270 Pixel (90 x 3) breit und die dritte Spalte 720 Pixel (90 x 8). Die Schriftgrößen stehen auch in Verhältnis von Fibonacci-Zahlen. Die Blog-Überschrift hat eine Größe von 55 px, die Artikelüberschriften 34 px und Content 21 px.

Der Nachteil der Fibonacci-Designs ist, dass sie nur schwer bei fest vorgegebenen Layout-Dimensionen angewendet werden können. In diesem Fall ist es einfacher, den Goldenen Schnitt  zu nutzen.

Mögliche Anwendungen

Ein Fibonacci-Design passt am besten zu Blogs oder Magazinen. Man kann das Layout auf verschiedene Arten nach den Fibonacci-Zahlen arrangieren. Ganz wichtig: Beim Anwenden der Fibonacci-Reihe auf Design ist Kreativität gefragt. Ansonsten wirkt das gesamte Design sehr streng und ist schwierig zu nutzen