Wahrscheinlich habt ihr alle schon vom Goldenen Schnitt gehört: Eine Methodik im Design, die dabei hilft, Bilder und Graphiken sehr ansprechend und ästhetisch wirken zu lassen. Hierbei handelt es sich um die Einteilungen von Elementen in dem Größenverhältnis 1 zu 1,618. Dieser Ansatz lässt sich natürlich auch im Webdesign an vielen Stellen anwenden. In diesem Beitrag zeigen wir euch, wie der Header, insbesondere die Größe und Position eures Logos, einer Website mit diesem magischen Verhältnis gestaltet bzw. optimiert werden kann.
Da wir unser Portal aktuell ganz frisch gestalten, wollen wir diese Methodik natürlich auch für das Design von musikus.online benutzen. Mal sehen, wie viel wir davon am Ende tatsächlich anwenden 😉
Größenverhältnisse bei einem goldenen Schnitt
Der Grundgedanke bei einem goldenen Schnitt ist es, eine Strecke (z.B. die Breite des Headers eurer Website) in einem ganz bestimmten Verhältnis (1:1,618) zu schneiden. Dabei entstehen zwei Bereiche mit den jeweiligen relativen Breiten von 61,8% und 38,2% – bei einer Website mit einer Breite von 1280 Pixel ergeben sich somit die Breiten von ca. 791 und 489 Pixeln. Die kleinere Seite lässt sich nun wieder teilen und es entstehen Abschnitte von ca. 302 und 187 Breite. Das kann man nun beliebig fortsetzen.
Die sich daraus ergebenden Längen bzw. Abschnitte werden graphisch meistens mit nebeneinander liegenden Quadraten dargestellt. Tabellarisch sieht das wie folgt aus:
| – | Prozentual | Beispiel 1 | Beispiel 2 | Beispiel 3 | Beispiel 4 |
|---|---|---|---|---|---|
| 1. | 100% | 1280px | 345px | 707px | 188px |
| 2. | 61,8% | 791px | 213px | 437px | 116px |
| 3. | 38,2% | 489px | 132px | 270px | 72px |
| 4. | 23,6% | 302px | 81px | 167px | 44px |
| 5. | 14,6% | 187px | 50px | 103px | 27px |
| 6. | 9,0% | 115px | 31px | 64px | 17px |
| 7. | 5,6% | 71px | 19px | 39px | 10px |
| 8. | 3,4% | 44px | 12px | 24px | 6px |
Wenn man sich die Werte anschaut, stellt man fest, dass die Summe der unteren 2 Zeilen genau der Zahl in der Zeile darüber entspricht. Also in Beispiel 1:
- Zeile 8 + Zeile 7 = Zeile 6; oder …
- Zeile 7 + Zeile 6 = Zeile 5; oder …
- Zeile 4 + Zeile 3 = Zeile 2
Würden wir mit den Zahlen 1 und 2 unten beginnen, würde sich die sogenannten Zahlenreihe nach Fibonacci – oder auch die Fibonacci-Folge genannt – ergeben.
Im Design der Website lassen sich sowohl die Länge als auch die Breite nach dieser Methodik einteilen. In Summe geht es darum, dass die Wirkung auf den Besucher der Website positiv ist. Dabei können nun diese Werte, die als Größen von Graphiken aber auch als Abstände genutzt werden können, helfen. Je nachdem, welches Element als Basis betrachtet wird, ergeben sich ganz unterschiedliche Werte.
Im nächsten Abstimmt wenden wir die Methodik an, um unser Logo bestmöglich mit diesen Verhältnissen im Header Bereich der Website zu platzieren.
Logo mit Breite und Höhe nach dem Fibonacci Ansatz gestalten
Step 1: Schriftart und Farben auswählen
Der erste Schritt ist einfach: eine schöne Schriftart auswählen und den Teil des Domainnamen eurer Seite als Text verwenden. Mit einem grünlichem Hintergrund und dem Gentona Font sieht der Logo Entwurf von unserer Musiker Plattform musikus.online in weiß schon mal so aus:
Step 2: Header Höhe und vertikale Logo Position bestimmen
Jetzt schauen wir uns mal an, wie groß der aktuelle Schriftzug ist. Mit der Schriftgröße von 72px haben sich bei der Gentona Schriftart eine Breite von 270px und eine Höhe von 50px ergeben.
Nun wollen wir den ersten Goldenen Schnitt anwenden und die Header Höhe entsprechend dieser Methodik berechnen. Dabei teilen wir die Höhe des Headers in 3 Teile, wobei der Schriftzug mit 50px in der Mitte sitzt. Wir wollen oben mehr und unten weniger Platz haben. Aus der Tabelle oben (Beispiel 2) ergeben sich somit folgende Größen: oben 81px und unten 31px. Das Ganze sieht dann so aus.
Damit die Höhe des Logos besser erkennbar ist und somit der goldene Schnitt mehr heraussticht, haben wir das Logo selbst ein wenig verändert. So sieht es nun aus.
Wir haben hier also zwei mal das magische Verhältnis von 1:1,618 angewandt: 50:81 und 31:50 Pixel.
Step 3: Horizontale Position des Logos mit goldenem Schnitt bestimmen
Jetzt wird es spannend: wir wollen das Logo weiter nach links platzieren. Doch wie viele Pixel Abstand gönnen wir uns hier zum linken Rand?
Ein möglicher Ansatz: Den linken Bereich bis zum rechten Abschluss des Logos in 2 Anschnitte unterteilen – den Abstand zum linken Rand und das Logo selbst. Das Logo hat eine Breite von 270 Pixeln. Aus der Tabelle oben (Beispiel 3) wählen wir für den Abstand eine Breite von 167px aus. Und hier das Ergebnis – das sieht doch schon ganz gut aus, oder? 🙂
Schriftgrößen mit dem Ansatzes des Goldenen Verhältnisses abstimmen
Abschließen wollen wir an das Logo noch das Wort “online” mit einer kleineren Schriftgröße ergänzen. Ohne diesen hier beschriebenen Ansatz wäre das Ganze eine Rate- und Ausprobierpartie bis man ein ästhetische Verhältnis dieser beiden Schriftgrößen gefunden hätte.
Probieren wir mal den goldenen Schnitt: der musikus Schriftzug hat eine Schriftgröße von 72px. Teilt man diesen Wert durch 1,618 ergibt sich gerundet 44px. Dies ist immer noch recht groß. Daher teilen wir nochmals durch 1,618 – es ergibt sich gerundet ein Wert von 27px (siehe oben in der Tabelle Beispiel 4). Diese Schriftgröße nehmen wir nun wir unser erweitertes Logo. Und so sieht dann aus:
Es wirkt für mich direkt passend! Was meinst du?
Es gibt mit Sicherheit noch ganz viele andere Möglichkeiten, wie man Abstände und Größen im Webdesign definiert – der hier beschriebene Ansatz ist relativ einfach und intuitiv anzuwenden. Das Ergebnis lässt sich meines Erachtens sehen. Wie macht ihre eure Designs? Bitte hinterlasst einen Kommentar!
Mal sehen, wie unser Logo am Ende der Neugestaltung aussehen wird – vielleicht ihr dieser Blogbeitrag für uns selbst ein guter Impulsgeber 🙂
