Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Mathematik und Webdesign: Eine enge Beziehung

by
Length:LongLanguages:
This post is part of a series called Web Design Theory.
Great Design Hurts: Striving for Pixel Perfection
An Introduction to Color Theory for Web Designers

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Mathe ist überall, sogar dort, wo Sie es nicht erwarten würden.  Sie können mathematische Verhältnisse und Konstanten in der Architektur finden, aber auch in den Instrumenten, die wir verwenden, um Musik zu machen.  Sie können Mathe in bestimmten Spielen finden, die wir spielen, und deshalb sollte es Sie nicht überraschen, dass Mathematik auch eine wichtige Rolle im Webdesign spielt.  Aber was ist diese Rolle?  Und wie können wir diese Verhältnisse, Konstanten und Theorien verwenden, um unsere Webdesigns schöner zu machen?

Mathematik ist überall

Walt Disney hat einmal einen Film über Donald Duck in Mathmagicland gedreht.  In diesem Video - auf YouTube verfügbar - stellen sie Kindern die Mathematik vor und wofür sie verwendet wird.  Es zeigt, dass ein mathematisches Verhältnis verwendet wird, um die Noten auf unseren Instrumenten zu definieren, und dass ein mathematisches Rechteck sowohl in der antiken als auch in der modernen Architektur gefunden werden kann.  Auch finden wir genau dieses Rechteck in einigen Renaissance-Kunstwerken, zum Beispiel durch den berühmten Leonardo Da Vinci.

Math In Web Design

Mathematik im WebdesignDie allgemeine Lektion ist einfach: Sie können einige grundlegende mathematische Prinzipien verwenden, um Ordnung und Schönheit in Ihren eigenen Kreationen zu gestalten.

Eine kleine Geschichte

Im antiken Griechenland gab es eine elitäre Gruppe von Mathematikern, die sich die Pythagoreer nannten.  Die Pythagoreer hatten das Pentagramm als ihr Emblem.  Sie haben diese Form wegen ihrer mathematischen Vollkommenheit gewählt: Die lineare Form des Pentagramms enthält schon dreimal das Goldene Verhältnis!  Es gibt auch Tonnen von goldenen Rechtecken, die in der Form versteckt sind, das sind die gleichen goldenen Rechtecke wie in der Mona Lisa.

Kaninchenzucht

Eine Weile später, im 12.en und 13.en Jahrhundert, lebte ein talentierter italienischer Mathematiker.  Sein Name war Leonardo Pisano Bigollo, obwohl Sie ihn vielleicht besser als Fibonacci kennen.  Für sein Buch Liber Aci beobachtete er die natürliche Zucht von Kaninchen.  In dieser idealen Welt von ihm, in der kein Kaninchen jemals sterben würde und jedes einzelne Kaninchen sich so schnell wie möglich zu reproduzieren begann, fand er heraus, dass dieser Zyklus eine spezielle Folge von Zahlen enthielt.  Diese Sequenz wurde später als Fibonacci-Zahlen bekannt.

Math In Web Design

Mathematik im WebdesignDas Besondere an dieser Sequenz ist, dass wenn Sie eine gewählte Nummer mit der Nummer in der Sequenz teilen, erhalten Sie (ungefähr) immer die gleiche Nummer.  Diese Zahl ist ungefähr 1,618, besser bekannt als Phi.  Je weiter Sie in der Reihenfolge gehen, desto näher kommt das Ergebnis der Division zu Phi.  Fibonacci fand auch heraus, dass diese Sequenz nicht nur in der Zucht von Kaninchen, sondern auch in anderen Dingen in der Natur, wie der Anordnung von Samen in einer Sonnenblume, gefunden wird.

Das Goldene Verhältnis

Wie Sie vielleicht schon wissen, ist Phi auch eine sehr prominente Konstante im Design; Das liegt daran, dass ein Verhältnis von 1 zu 1,618 besser als das Goldene Verhältnis bekannt ist - oft als Goldener Schnitt, Goldener Abschnitt oder das Göttliche Verhältnis bezeichnet.  Wenn Sie ein Rechteck entsprechend diesem Verhältnis erstellen, erhalten Sie eine Form, die als Goldenes Rechteck bezeichnet wird.

The Golden Rectangle
Das goldene RechteckDas hier gezeigte Goldene Rechteck zeigt, wie Sie es unendlich (und perfekt) auf sich selbst aufteilen können.

Der Goldene Schnitt und das Goldene Rechteck werden in vielen Formen von Kunst und Design verwendet.  In der Renaissance proportionierten viele Künstler ihre Kunstwerke nach diesem Verhältnis und Rechteck.  Im antiken Griechenland verwendeten Architekten dieses Rechteck bei der Gestaltung der Gebäude; der Parthenon ist ein gutes Beispiel dafür.  Auch in der modernen Architektur hat das goldene Rechteck eine starke Präsenz.

Aber was macht dieses Verhältnis so besonders?  Da diese Zahl, Phi, ihren Ursprung in der Natur hat, fühlen wir Menschen uns automatisch mit diesem Verhältnis wohl.  Weil wir dieses Verhältnis kennen, löst es auf natürliche Weise ein Gefühl von Ausgeglichenheit und Harmonie aus.  Aus diesem Grund kann die Verwendung dieses Verhältnisses Ihnen eine ausgewogene Zusammensetzung Ihrer Elemente garantiere

Beispiele für das Goldene Schnitt im Webdesign

Bevor wir anfangen, über das Verhältnis zu unseren Designs nachzudenken, müssen wir zuerst einige Beispiele betrachten, die das Verhältnis bereits verwenden.

Ein gutes Beispiel ist diese Website, da ihr Design mehrere Fälle des Verhältnisses enthält.  Im Bild unten sehen Sie einen Screenshot dieser Website.  Wie Sie sehen können, habe ich zwei Farben verwendet, um die verschiedenen Spalten zu markieren.  Die Breite der Hauptspalte mit den darin enthaltenen Blogposts ist mehr oder weniger 1,618 mal so groß wie die Sidebar mit den Anzeigen.  Eine schnelle Berechnung auf der Unterseite beweist das.

Math In Web Design

Aber nicht nur, dass diese Website den Goldenen Schnitt auf ihrer gesamten Breite verwendet, sie wird auch auf einige der kleineren Teile der Website angewendet.

Werfen wir einen kurzen Blick auf die Hauptspalte und dann auf den Inhalt.  Wie Sie unten sehen können, ist das enthaltende Element ungefähr 1,618 mal so groß wie der Inhalt, der in diesem Element gelesen werden soll.

Math In Web Design

Ein weiteres gutes Beispiel ist der berühmte Smashing Magazine Blog.  Seine Hauptspalte hat eine Gesamtbreite von knapp über 700 px.  Wenn Sie diese Zahl durch 1,618 teilen, ergibt sich etwa 435: Die genaue Breite der Seitenleiste.

Math In Web Design

Wie man dieses Verhältnis auf dein nächstes Design anwendet

Die Leinwand eines Gemäldes und die Breite eines Gebäudes haben eine feste Breite, die Monitore, die unsere Arbeit zeigen, variieren in der Größe.  Daher - und besonders bei Fluiddesigns - gibt es eine zusätzliche Variable, die bei der Berechnung des Goldenen Schnitts berücksichtigt werden sollte.

Es gibt jedoch einen einfachen Weg, dieses Problem zu lösen.  Wenn Sie die Breite eines Elements nach dem Verhältnis berechnen möchten, müssen Sie nur die Breite des übergeordneten Elements, also des übergeordneten Elements, übernehmen.  In unserem ersten und letzten Beispiel war dies die komplette Breite einer Website.  Im zweiten Beispiel war das nur die Breite eines kleineren Teils: ihrer Hauptspalte.

Wie auch immer, wenn Sie die Breite des enthaltenen Elements bestimmt haben, sollten Sie diesen Wert nun durch Phi teilen.  Das Ergebnis gibt Ihnen die Breite des Hauptelements.  Jetzt müssen Sie nur noch das Ergebnis des Hauptelements von Ihrer ursprünglichen Breite subtrahieren. Dadurch erhalten Sie die Breite der sekundären Spalte.

Wenn Sie Schwierigkeiten haben, sich an Phi zu erinnern, oder wenn Sie nur faul sind, einige Zahlen auf einem Taschenrechner einzugeben, empfehle ich Ihnen, Phiculator zu verwenden.  Diese kleine Anwendung erfordert, dass Sie einen Wert (die Breite des enthaltenen Elements) eingeben und automatisch die entsprechende Breite berechnet.  Sie können es sogar mit Ganzzahlen berechnen lassen, so dass Sie sich auch keine Gedanken über Dezimalzahlen machen müssen.

Die Drittelregel

Eine andere berühmte mathematische Abteilung ist die Drittelregel.  Mit dieser Regel können Sie eine ausgewogene Komposition erstellen, indem Sie Ihre Leinwand in neun gleiche Teile teilen.  Die Regel ist dem Goldenen Schnitt ein wenig ähnlich, da die Division durch 0,62 0,67 sehr ähnlich ist - was zwei Dritteln entspricht.

Fotografie

Eine Form der Kunst, bei der die Regel der Drittel sehr oft verwendet wird, ist in der Fotografie, da es eine einfache und schnelle Anleitung ist, um Ihnen eine gute Komposition zu geben.  Das ist der Grund, warum Sie wahrscheinlich eine Funktion auf Ihrer Digitalkamera finden, die ihren LCD-Bildschirm unter Verwendung der Drittelregel in neun Teile unterteilt.  Auch einige dSLRs haben diese Funktion, da sie beim Fokussieren ein paar helle Punkte in den Sucher legen.

Wie funktioniert es?

Mit der Drittelregel teilen Sie Ihre Leinwand horizontal und vertikal um drei.  Diese Division gibt Ihnen neun gleiche Rechtecke, vier Linien und vier Schnittpunkte.  Mit diesen Linien und Schnittpunkten können Sie eine interessante und ausgewogene Komposition erstellen.

Der Schlüssel zu einer guten Komposition liegt offensichtlich darin, Ihre Elemente richtig zu positionieren.  Wenn Sie die Drittelregel verwenden, gibt es zwei Dinge, mit denen Sie positionieren können.

Die ersten sind die Linien, mit denen die Leinwand geteilt wird.  In der Fotografie sind Dinge mit einer langen und geraden Form oft auf diese Linien ausgerichtet.  Im Design können Dinge mit derselben Form - wie eine Seitenleiste - auch auf diese Linien ausgerichtet werden.

Die zweiten Punkte, auf die Sie sich ausrichten müssen, sind die Punkte, an denen sich Ihre Trennlinien schneiden.  Sie müssen ein oder zwei Objekte auf diese Punkte legen, da zu viel Ihre Komposition immer noch zerstören wird.

Ein gutes Beispiel dafür fand ich auf der Fotografie-Website Flickr.  Wie Sie unten sehen können, hat der Fotograf die Gebäudezeile mit der oberen Linie ausgerichtet, und am oberen rechten Schnittpunkt finden Sie ein Haus, das sich aufgrund seiner Farbe am meisten auszeichnet.  Da es sich bereits um einen Schwerpunkt handelt, trägt die Ausrichtung auf den Schnittpunkt zu einer guten Komposition und einem ausgewogenen Gefühl bei. 

Math In Web DesignMathe In Web Designflickr Foto finden Sie hier

Wir haben die Drittelregel für die Fotografie gesehen, aber wie wäre es mit der Anwendung auf das Website-Design? Können wir Beispiele dafür finden?

Die Drittelregel im Webdesign

Ein gutes Beispiel für die Regel, die auf Webdesign angewendet wird, ist wiederum diese Website.  Ich habe ein Bild vorbereitet, das Sie unten sehen können.  Es zeigt, dass die Seitenleiste rechts sehr nahe an der vertikalen Linie rechts ausgerichtet ist.  Auf der linken Seite können Sie sehen, dass die Artikel auf den Schnittpunkten positioniert sind.

Math In Web Design

Mathe im WebdesignDie zwei Ausrichtungen, die Sie oben sehen, schaffen ein Gefühl der Harmonie im Layout dieser Website.

Anwenden der Drittelregel auf Ihr nächstes Design

Wie genau kann die Drittelregel auf das Design Ihrer Website angewendet werden?  Auch hier kann die unterschiedliche Breite unserer Leinwand Probleme bereiten.  Wenn wir die gleiche Technik wie beim Goldenen Schnitt verwenden, wird uns nichts passieren.

Um die Division anzuwenden, müssen Sie die gesamte Breite des übergeordneten Elements übernehmen und durch drei teilen.  Sie müssen dann eine Linie - oder einen Leitfaden, was immer Ihnen am besten passt - zwei Mal auf den Wert zeichnen, den Sie als Ergebnis erhalten (multiplizieren Sie sie mit zwei, um die Position der zweiten Linie zu erhalten).

Der zweite Teil der Abteilung kann Ihnen jedoch einige Probleme bereiten.  Die Höhe unserer "Leinwand" ist ebenfalls variabel, daher wird es uns Schwierigkeiten bereiten, diese Variable durch drei zu teilen.  Um das zu umgehen, berechne ich die "Höhe" der Teilung mit einem 16: 9 (Widescreen) -Verhältnis oder verwende einfach die Höhe des enthaltenen Elements. Teilen Sie die Breite des enthaltenden Elements durch 16 und multiplizieren Sie diese Zahl mit 9 und Sie haben eine Höhe.  Sie können diese Zahl jetzt noch einmal durch 3 teilen und die Linien/Guides zeichnen.

Wenn Sie die Guides eingerichtet haben, können Sie Ihre Elemente nun gemäß diesen Guides positionieren.  Richten Sie Ihre Elemente mit den Linien aus, und Sie müssen einige interessante und kontrastreiche Elemente an den Schnittpunkten einfügen.

Rastersysteme

Sie denken vielleicht nicht an Raster als mathematisch, aber sie sind.  Sie teilen Ihre Leinwand in verschiedene Spalten und Rinnen, diese Teilung durch zwei, drei - und ich habe bis zu sechzehn gesehen - ist wirklich mathematisch.

Viele Leute argumentieren, dass Grid-Systeme Ihre Kreativität einschränken, weil Sie Ihre Freiheit mit einem Grid-System einschränken.  Ich glaube nicht, dass dies wahr ist, denn das Buch namens Vormator hat mir beigebracht, dass Einschränkungen deine Kreativität fördern.  Das liegt daran, dass Sie an Lösungen mit diesen Einschränkungen denken, während diese Ideen nie gedacht hätten, wenn Sie diese Einschränkungen nicht haben.

Der Grund dafür, dass Grid-Systeme funktionieren, ist, dass sie Sie bei der Dimensionierung, Positionierung und Ausrichtung Ihres Website-Designs unterstützen.  Sie können Ihnen helfen, Unordnung vom Inhalt zu organisieren und zu entfernen.  Aber vor allem sind sie einfach zu bedienen.

Ein weiterer guter Grund, Grids zu verwenden, ist, dass Regeln gebrochen werden sollen, nicht wahr?  Wenn Sie Ihr Raster hin und wieder "brechen", ist es nicht schlecht.  Andererseits!  Wenn Sie Ihr Raster 'aufbrechen', kann das für ein bestimmtes Element auf der Seite besonders interessant sein, da es im Gegensatz zu den anderen steht.  Das kann Ihnen helfen, bestimmte Ziele zu erreichen, wie zum Beispiel ein Call-to-Action, der sich dadurch auszeichnet.

Wie man ein gutes Raster erstellt

Es gibt keinen richtigen Weg, ein gutes Grid-System zu erstellen, da sie sich um Inhalte drehen und kein Inhalt wirklich derselbe ist.  Aber ich werde einen einfachen Prozess demonstrieren, wie man ein 6-Spalten-Raster in einer 960 px breiten Umgebung konstruiert.

Zuerst teilen wir unsere gesamte Leinwandbreite durch 6, so dass wir die Gesamtbreite jeder Spalte haben.  Das Ergebnis dieser Teilung ist 160 px, wie Sie unten im Bild sehen können.

Math In Web Design

Zweitens erstellen wir ein Bild von einer Spalte, wir werden das später duplizieren.  Auf diese Weise ist es einfacher, anschließend unser komplettes Raster zu erstellen, da wir diesen Schritt nicht für jede Spalte wiederholen müssen.

Wir werden über die Größe unserer Rinne entscheiden, ich denke 20 px werden ausreichen.  Die Rinne sollte zu beiden Seiten der Säule hinzugefügt werden, also müssen wir sie durch zwei teilen.  Wenn wir das nicht tun, wird unsere Rinne 40 px breit sein.  Wie Sie im Bild unten sehen können, haben wir auf jeder Seite eine 10px Rinne hinzugefügt.

Math In Web Design

Mathematik im WebdesignJetzt können wir dieses Bild kopieren, bis wir die insgesamt 960 px wieder erreicht haben, und wir haben uns ein (Grund-) Raster erstellt.

Ich bin faul!

Machen Sie Ihr keine Sorgen. Selbst wenn Sie faul sind, werden Sie ohne Raster nicht leben müssen.  Es gibt viele schöne - und kostenlose - Grid-Systeme im Internet.  Mein liebste, und ich bin mir sicher, dass Sie schon einmal davon gehört haben, ist das berühmte 960.gs Grid-System, das ein CSS-Framework und eine PSD-Datei mit allen installierten Guides hat.

Math In Web Design

Schlussfolgerung

Ich hoffe, ich habe Ihnen gezeigt, dass Mathematik beim Design schön sein kann und dass ich Ihnen genug Techniken für Ihr nächstes Design gegeben habe.  Seien Sie jedoch gewarnt, viele andere Dinge sind erforderlich, um ein Design zu einem Erfolg zu machen, und daher ist die Verwendung dieser Tricks keine Garantie für ein gutes Design, aber sie können Ihnen sicher helfen und Sie bei der Erstellung eines Tricks unterstützen.

Danke fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.