Share
Mathematik ist überall, auch wo man es nicht erwartet hätte. Mathematische Kennzahlen und Konstanten finden Sie in der Architektur, aber auch in den Instrumenten, die wir zum Musizieren verwenden. Sie können Mathematik in bestimmten Spielen finden, die wir spielen, und daher sollte es Sie nicht überraschen, dass Mathematik auch im Webdesign eine wichtige Rolle spielt. Aber was ist diese Rolle? Und wie können wir diese Verhältnisse, Konstanten und Theorien verwenden, um unsere Webdesigns schöner zu gestalten?
Walt Disney einmal einen Film darüber gemacht Donald Duck in Mathmagicland. In diesem Video, das auf YouTube verfügbar ist, werden Kinder in die Mathematik eingeführt 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 zu finden ist. Wir können dieses exakt gleiche Rechteck auch in einigen Renaissance-Kunstwerken finden, zum Beispiel durch das berühmte Leonardo Da Vinci.
Die allgemeine Lektion ist einfach: Sie können einige grundlegende mathematische Prinzipien verwenden, um Ordnung und Schönheit in Ihren eigenen Kreationen zu gestalten.
Im antiken Griechenland gab es eine elitäre Gruppe von Mathematikern, die sich selbst den Namen Pythagoreer. Die Pythagoreer hatten das Pentagramm als Emblem. Sie haben diese Form aufgrund ihrer mathematischen Perfektion gewählt: Die lineare Form des Pentagramms enthält bereits dreimal den Goldenen Schnitt! Es gibt auch Tonnen von goldene Rechtecke Auch in der Form verborgen, sind dies dieselben goldenen Rechtecke, die in der Mona Lisa vorhanden sind.
Eine Weile danach in den 12th und 13th Jahrhundert lebte ein talentierter italienischer Mathematiker. Sein Name war Leonardo Pisano Bigollo, obwohl Sie ihn vielleicht besser kennen Fibonacci. Für sein Buch Liber Aci, er beobachtete die natürliche Zucht von Kaninchen. In dieser idealen Welt, in der kein Kaninchen jemals sterben würde und sich jedes einzelne Kaninchen so schnell wie möglich vermehren würde, stellte er fest, dass dieser Zyklus eine spezielle Zahlenfolge enthielt. Diese Sequenz wurde später als bekannt Fibonacci-Zahlen.
Das Besondere an dieser Sequenz ist, dass wenn Sie eine gewählte Nummer mit der vorherigen Nummer in der Sequenz teilen, Sie (ungefähr) jedes Mal dieselbe Nummer erhalten. Diese Zahl ist ungefähr 1.618, besser bekannt als Phi. Je weiter Sie in der Sequenz vorgehen, desto näher kommt das Ergebnis der Division an Phi. Fibonacci fand auch heraus, dass diese Sequenz nicht nur in der Zucht von Kaninchen zu finden ist, sondern auch in anderen Bereichen der Natur, wie zum Beispiel bei der Anordnung von Samen in einer Sonnenblume.
Wie Sie vielleicht bereits wissen, ist Phi auch im Design eine sehr prominente Konstante. Dies liegt daran, dass ein Verhältnis von 1 zu 1,618 besser als bekannt ist Goldener Schnitt - oft als das bezeichnet goldener Schnitt, Goldene Mitte oder der Göttliches Verhältnis. Wenn Sie ein Rechteck mit diesem Verhältnis erstellen, erhalten Sie eine Form, die als bezeichnet wird Goldenes Rechteck.
Der Goldene Schnitt und das Goldene Rechteck werden in vielen Formen von Kunst und Design verwendet. In der Renaissance haben viele Künstler ihre Kunstwerke nach diesem Verhältnis und diesem Rechteck proportioniert. 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 ist das goldene Rechteck stark vertreten.
Aber was macht dieses Verhältnis so besonders? Da diese Zahl, Phi, ihren Ursprung in der Natur hat, fühlen wir uns Menschen mit diesem Verhältnis automatisch wohl. Da wir dieses Verhältnis so gut kennen, löst es auf natürliche Weise ein Gefühl von Gleichgewicht und Harmonie aus. Aus diesem Grund kann die Verwendung dieses Verhältnisses eine ausgewogene Zusammensetzung Ihrer Elemente gewährleisten.
Bevor wir darüber nachdenken, das Verhältnis auf unsere Designs anzuwenden, müssen wir uns zunächst einige Beispiele ansehen, 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, habe ich zwei Farben verwendet, um die verschiedenen Spalten zu markieren. Die Breite der Hauptspalte mit den darin enthaltenen Blogbeiträgen ist mehr oder weniger 1.618 Mal so groß wie die Seitenleiste mit den Anzeigen. Eine schnelle Berechnung unten zeigt dies.
Diese Website verwendet jedoch nicht nur den Goldenen Schnitt in ihrer Gesamtbreite, sondern auch einige kleinere Bereiche der Website.
Werfen wir einen kurzen Blick auf die Hauptspalte und dann auf den Inhalt. Wie Sie unten sehen können, ist das enthaltende Element etwa 1,618-mal so groß wie der Inhalt, der in diesem Element gelesen werden soll.
Ein weiteres gutes Beispiel ist der berühmte Blog des Smashing Magazine. Ihre Hauptsäule hat eine Gesamtbreite von knapp über 700 Pixel. Wenn Sie diese Zahl durch 1,618 teilen, ergibt sich ungefähr 435: Die genaue Breite der Seitenleiste.
Die Leinwand eines Gemäldes und die Breite eines Gebäudes haben alle eine feste Breite, die Monitore, die unsere Arbeit zeigen, variieren in der Größe. Daher gibt es - und insbesondere bei flüssigen Designs - eine zusätzliche Variable, die bei der Berechnung des Goldenen Verhältnisses berücksichtigt werden sollte.
Es gibt jedoch einen einfachen Weg, dieses Problem zu überwinden. Wenn Sie die Breite eines Elements entsprechend dem Verhältnis berechnen möchten, müssen Sie nur die Breite des übergeordneten Elements, also des übergeordneten Elements, berücksichtigen. In unserem ersten und letzten Beispiel war dies die gesamte Breite einer Website. Im zweiten Beispiel war dies nur die Breite eines kleineren Teils: der Hauptsäule.
Wenn Sie die Breite des übergeordneten Elements bestimmt haben, sollten Sie diesen Wert nun durch Phi dividieren. Das Ergebnis gibt Ihnen die Breite des Hauptelements. Jetzt müssen Sie nur noch das Ergebnis vom Hauptelement von Ihrer ursprünglichen Breite abziehen. Dies gibt Ihnen die Breite der sekundären Spalte.
Wenn Sie Probleme haben, sich an Phi zu erinnern, oder wenn Sie nur faul sind, einige Zahlen auf einem Taschenrechner einzugeben, schlage ich vor, Phiculator zu verwenden. Für diese kleine Anwendung müssen Sie einen Wert eingeben (die Breite des übergeordneten Elements), und die entsprechende Breite wird automatisch berechnet. Sie können es sogar bitten, mit ganzen Zahlen zu rechnen, so dass Sie sich auch keine Dezimalzahlen machen müssen.
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 gleich große Teile teilen. Die Regel ist der Goldenen Ratio ein wenig ähnlich, da die Division mit 0,62 der von 0,67 sehr ähnlich ist - was zwei Dritteln entspricht.
Eine Kunstform, bei der die Drittelregel häufig verwendet wird, ist in der Fotografie einfach und schnell führen um dir eine gute Komposition zu geben. Daher finden Sie wahrscheinlich auf Ihrer Digitalkamera eine Funktion, die den LCD-Bildschirm in neun Teile unter Verwendung der Drittel-Regel aufteilt. Sogar einige DSLRs haben diese Funktion, da sie beim Scharfstellen ein paar helle Punkte in den Sucher setzen.
Mit der Drittelregel teilen Sie Ihre Leinwand horizontal und vertikal um drei. Diese Unterteilung gibt Ihnen neun gleiche Rechtecke, vier Linien und vier Schnittpunkte. Sie können eine interessante und ausgewogene Komposition erstellen, indem Sie diese Linien und Schnittpunkte verwenden.
Der Schlüssel in einer guten Komposition liegt natürlich in der richtigen Positionierung Ihrer Elemente. Bei der Verwendung der Drittelregel gibt es zwei Dinge, mit denen Sie positionieren können.
Die erste sind die Linien, mit denen die Leinwand geteilt wird. In der Fotografie werden Dinge mit einer langen und geraden Form häufig an diesen Linien ausgerichtet. Im Design können Dinge mit derselben Form - wie etwa eine Seitenleiste - auch an diesen Linien ausgerichtet werden.
Das zweite, an das Sie sich anpassen können, sind die Punkte, an denen sich Ihre Trennlinien schneiden. Sie müssen ein oder zwei Objekte an diesen Punkten platzieren, da zu viele Ihre Komposition trotzdem töten.
Ein gutes Beispiel dafür fand ich auf der Fotografie-Website Flickr. Wie Sie unten sehen können, hat der Fotograf die Gebäudereihe an der oberen Linie ausgerichtet, und am oberen rechten Schnittpunkt befindet sich ein Haus, das durch seine Farbe besonders hervorsticht. Da es bereits ein zentraler Punkt ist, fügt es eine gute Komposition und ein ausgeglichenes Gefühl hinzu, wenn Sie es auf den Schnittpunkt ausrichten.
flickr foto hier gefunden Wir haben die Drittel-Regel auf die Fotografie angewandt, aber wie man sie auf das Website-Design anwendet, können wir Beispiele dafür finden?
Ein gutes Beispiel für die Regel, die auf das Webdesign angewendet wird, ist diese Website. Ich habe ein Bild vorbereitet, das Sie unten sehen können. Es zeigt, dass die Seitenleiste auf der rechten Seite sehr eng an der vertikalen Linie ausgerichtet ist. Auf der linken Seite sehen Sie, dass sich die Artikel an den Schnittpunkten befinden.
Die beiden Ausrichtungen, die Sie oben sehen, erzeugen ein harmonisches Gefühl im Layout dieser Website.
Wie genau kann also die Drittelregel auf das Design Ihrer Website angewendet werden? Wieder kann die unterschiedliche Breite unserer "Leinwand" Probleme bereiten. Wenn wir jedoch dieselbe Technik anwenden wie beim Goldenen Schnitt, ist alles in Ordnung.
Um die Division anzuwenden, müssen Sie die gesamte Breite Ihres übergeordneten Elements nehmen und durch drei teilen. Sie müssen dann eine Linie - oder einen Leitfaden, je nachdem, wie es Ihnen am besten passt - zweimal auf den als Ergebnis erhaltenen Wert zeichnen (multiplizieren Sie diese mit zwei, um die Position der zweiten Linie zu erhalten).
Der zweite Teil der Abteilung kann jedoch einige Probleme verursachen. Die Höhe unserer "Leinwand" ist ebenfalls variabel, daher wird es schwierig sein, diese Variable durch drei zu teilen. Um dies zu umgehen, berechne ich die 'Höhe' der Division mit einem 16: 9-Verhältnis (Breitbild) oder benutze einfach die Höhe des übergeordneten Elements. Teilen Sie die Breite des übergeordneten Elements durch 16 und multiplizieren Sie diese Zahl mit 9, und Sie haben eine Höhe. Sie können diese Zahl jetzt wieder durch 3 teilen und die Linien / Hilfslinien zeichnen.
Wenn Sie die Hilfslinien eingerichtet haben, können Sie Ihre Elemente jetzt gemäß diesen Hilfslinien positionieren. Richten Sie Ihre Elemente an den Linien aus, und Sie müssen einige interessante und kontrastierende Elemente an den Schnittpunkten platzieren.
Sie denken zwar nicht, dass Raster mathematisch sind, aber sie sind es. Sie teilen Ihre Leinwand in verschiedene Spalten und Rinnen. Diese Trennung 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 denke nicht, dass dies wahr ist, wie das Buch Vormator mich lehrte, dass Einschränkungen Ihre Kreativität tatsächlich steigern. Dies liegt daran, dass Sie an Lösungen mit diesen Grenzen denken, während an diese Ideen nie gedacht worden wäre, wenn Sie diese Einschränkungen nicht hätten.
Der Grund, warum Grid-Systeme funktionieren, ist, dass sie Sie bei der Dimensionierung, Positionierung und Ausrichtung Ihres Website-Designs unterstützen können. Sie können Ihnen beim Organisieren und Entfernen von Unordnung aus Inhalten helfen. Vor allem aber sind sie einfach zu bedienen.
Ein weiterer guter Grund für die Verwendung von Gittern ist, dass Regeln gebrochen werden sollen, nicht wahr? Wenn Sie Ihr Gitter ab und zu "brechen", ist es nicht schlecht. Andererseits! Wenn Sie Ihr Raster brechen, kann dies ein besonderes Interesse für ein bestimmtes Element auf der Seite hervorrufen, da es sich im Gegensatz zum Rest befindet. Dies kann Ihnen dabei helfen, bestimmte Ziele zu erreichen, beispielsweise einen Aufruf zum Handeln, der sich dadurch besonders auszeichnet.
Es gibt keinen richtigen Weg, um ein gutes Rastersystem aufzubauen, da es sich um Inhalte dreht und kein Inhalt wirklich derselbe ist. Der Einfachheit halber zeige ich jedoch einen einfachen Prozess beim Erstellen eines 6-Spalten-Gitters in einer 960 Pixel breiten Umgebung.
Zuerst teilen wir unsere gesamte Leinwandbreite durch 6, sodass wir die Gesamtbreite jeder Spalte haben. Das Ergebnis dieser Unterteilung beträgt 160 Pixel, wie Sie unten im Bild sehen können.
Zweitens erstellen wir ein Bild einer Spalte, das wir 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 uns für die Größe unserer Rinne entscheiden, ich denke, 20 Pixel werden ausreichen. Die Rinne sollte auf beiden Seiten der Säule hinzugefügt werden, daher müssen wir sie durch zwei teilen. Wenn wir dies nicht tun, ist unsere Rinne 40 Pixel breit. Wie Sie in der Abbildung unten sehen können, haben wir auf jeder Seite eine 10-Pixel-Rinne hinzugefügt.
Jetzt können wir dieses Bild duplizieren, bis wir wieder insgesamt 960 Pixel erreicht haben und wir uns ein (einfaches) Gitter erstellt haben.
Mach dir keine Sorgen; selbst wenn Sie faul sind, müssen Sie ohne Gitter nicht leben. Im Internet gibt es viele nette und kostenlose Rastersysteme. Mein Favorit, und ich bin sicher, dass Sie davon bereits gehört haben, ist das berühmte 960.gs-Rastersystem, das über ein CSS-Framework und eine PSD-Datei mit allen installierten Handbüchern verfügt.
Ich hoffe, ich habe Ihnen gezeigt, dass Mathematik schön sein kann, wenn sie auf das Design angewendet wird, und dass ich Ihnen genügend Techniken zur Verfügung gestellt habe, die Sie für Ihr nächstes Design verwenden können. Seien Sie jedoch gewarnt, es sind noch viele andere Dinge erforderlich, um ein Design zum Erfolg zu führen. Daher ist die Verwendung dieser Tricks keine Garantie für ein gutes Design, aber sie können Ihnen sicherlich helfen und Sie bei der Erstellung unterstützen.
Danke fürs Lesen!
Accentsconagua