Als Webdesigner müssen wir beim Projektstart viel berücksichtigen. Eines der größten Segmente, das mit Layouts und Systemen arbeitet, um den Abstand zu ordnen. Normalerweise arbeiten Designer mit einer CSS-Bibliothek mit Gitterabstand, es gibt jedoch viele Möglichkeiten, kreative Layouts zu implementieren.
Heute gehen wir auf den Goldenen Schnitt ein und zeigen Ihnen, wie Sie einfache Lektionen in Ihre Entwurfsarbeit integrieren können. Die meisten der besprochenen Techniken sind auf eine breite Palette von Künsten und Design anwendbar, wir konzentrieren uns jedoch auf den digitalen Aspekt. Erwägen Sie neben dem Goldenen Schnitt einige weitere nützliche Tools, die bei der Entwicklung von Website-Layouts hilfreich sein können.
Der göttliche Anteil
Der göttliche Anteil wird auch als Goldener Schnitt bezeichnet. Es ist eine mathematische Konstante, die nahezu 1,618 entspricht, um das Verhältnis zwischen zwei Elementen zu beschreiben. Dieses Verhältnis wird seit der frühen Renaissance verwendet, als Kunstkonzepte der neuen Zeitalter auftauchten.
Künstler in dieser Zeit betrachteten das Verhältnis als magisch und besaßen mystische göttliche Kräfte, wenn sie in die Designarbeit integriert wurden. Vor Hunderten von Jahren galt dies hauptsächlich für Architektur, Skulpturen und Gemälde. Heute können wir diese Techniken jedoch auch in unserer digitalen Kunst anwenden.
Das Verhältnis lässt sich am besten mathematisch beschreiben. Das ist zunächst etwas verwirrend, aber wir können jede in der Gleichung verwendete Variable durch tatsächliche Zahlen ersetzen, nur damit die Dinge ein bisschen mehr Sinn machen. Wir arbeiten nur mit 2 Variablen - nennen wir sie ein und b. Elemente arbeiten in einem goldenen Schnitt, wenn a + b / a ist äquivalent zu a / b.
Sie können dies mit beliebigen Werten beider Variablen testen, um zu sehen, was Sie erhalten. Letztendlich möchten Sie als Antwort auf 1.61803398 (oder nur 1.618) enden. Da die Proportionen, mit denen wir arbeiten, nicht auf einen bestimmten Wert festgelegt sind, können wir davon ausgehen, dass eine beliebige Anzahl von Werten gleich ist. Dadurch bleibt unsere Designarbeit flexibel und relativ zur Größe, anstatt in einem Bereich absoluter Zahlen zu sitzen.
Mathematische Funktionen im Verhältnis
Ein interessanter Trick besteht darin, nur mit dem Verhältnis selbst und Variablen aus unserem Gesamtsystem zu arbeiten. Nehmen Sie zum Beispiel das 960-Rastersystem, das in zwei Spalten aufgeteilt ist. Wir wissen nicht, wie groß jede Spalte sein soll, um unser Layout innerhalb der göttlichen Proportionen zu halten, aber wir haben genug Zahlen, um es herauszufinden.
960 (in Pixeleinheiten dargestellt) enthält unseren Wert von a + b. Wir können also 960 in 1,618 unterteilen, um den Wert unserer längeren Seite zu erhalten, der durch unsere Variable a dargestellt wird. In diesem Fall 960 / 1.618 kommt zu 593px heraus.
Mit dieser neuen Information können wir 593 von 960 subtrahieren, um die Breite unserer Seitenspalte - 367 zu erhalten. Wenn wir unsere Antwort überprüfen wollen, können wir 593 + 367 (960) nehmen und durch unseren größeren Seitenwert 593 teilen. Basierend auf meinem Berechnungen sollten Sie einen Rückgabewert von ~ 1,618 erhalten, der genau unserem Goldenen Schnitt entspricht. Ta-da!
Diese Technik ist für die Entwicklung flüssiger Layouts für dynamische Websites unerlässlich. Das göttliche Verhältnis trägt dazu bei, die Dinge auf organische und natürliche Weise zu organisieren. Sie können Ihr Design auf Wunsch in 3- oder 4-Spalten-Layouts organisieren. Mit dieser Option müssen Sie testen, wie genau Sie aussehen und wie groß Ihr Layout insgesamt ist.
Wenn Sie sich nicht sicher sind, einen festen Anteil für Ihre Website zu finden, schwitzen Sie nicht die kleinen Dinge. Das göttliche Verhältnis dient nur dazu, Sie als Designer zu führen, und nicht, um Ideen dazu zu zwingen, überall exakte numerische Werte zu verwenden. Solange Ihr Design sein eigenes Gewicht tragen kann und ein gleichmäßiges Gefühl auf der gesamten Seite hat, sollten Sie in Ordnung sein.
Als Faustregel können Sie das Verhältnis 5: 3 verwenden - obwohl es nicht genau dem Goldenen Schnitt entspricht, sollte es Ergebnisse liefern, die nahe genug sind, um Fehler zu berücksichtigen.
Die Drittelregel umreißen
Bei der Optimierung Ihres Website-Layouts werden die Dinge möglicherweise nicht immer perfekt. Dies ist die Art und Weise des Webdesigns, und es gibt sicherlich keinen Grund, hier genaue Richtlinien zu befolgen. Die Drittelregel ist fast ein vereinfachter "faules Mann". eine goldene Proportion anwenden.
Es wird Ihnen nicht schlechte Ergebnisse oder missgestaltete Websites bieten, weit davon entfernt. Es ist jedoch eine lockere Herangehensweise bei der Auslegung von Verhältnissen, die vielen exakten Berechnungen überlegen sein wird.
Die Regel besagt, dass Sie jedes Modell oder Kunstwerk in neun gleiche Quadrate unterteilen können. Dies wird erreicht, indem zwei vertikale und zwei horizontale Linien in gleichem Abstand im gesamten Bild platziert werden. Die vier Punkte im Bild, an denen sich Ihre Linien treffen, sind die "Hot Spots". für Ihre Website. Oder allgemein ausgedrückt, diese Bereiche sollten die wichtigsten benutzergesteuerten Inhalte enthalten.
Ein interessanter Ansatz für dieses Problem löst die Aufteilung jeder Spalte in zwei Hälften. Dadurch erhalten Sie ein Raster, das gleichmäßig auf Ihre Site verteilt ist, wobei die Proportionen auf der ganzen Linie festgelegt sind. Auf diese Weise enthält Ihr oberes linkes Quadrat das meiste Branding Ihrer Website (Logo, Navigation, Überschriftenbereich?). Alternativ enthält Ihr oberes rechtes Quadrat möglicherweise weniger wichtige Informationen, die vertikal durch Ihre Site geleitet werden.
Wenn Sie sich auf jeden inneren Punkt im Site-Design konzentrieren, können Sie herausfinden, wo Überschriften, Schaltflächen, Verknüpfungen usw. beibehalten werden müssen. Dies ist keine strikte Regel, die alle Designer befolgen müssen, um ihre Layouts unter Kontrolle zu halten. Dies ist lediglich eine Ideologie, die auf unzählige Gestaltungsprinzipien angewendet wurde und sich bei komplexen Website-Layouts bewährt hat. Dies ist sogar noch einfacher zu handhaben, da die Adobe-Design-Software über Tools verfügt, mit denen Sie Raster in Ihren Dateien aktivieren können. Wie viel einfacher könnten die Dinge werden?
Das goldene Rechteck
Wie der Name schon sagt, ist es möglich, ein goldenes Rechteck zu erstellen, indem das gleiche Verhältnis angewendet wird, das wir geometrisch besprochen haben. Die längere Seite Ihres Rechtecks sollte Ihren längeren Wert oder Ihre Variable enthalten ein, während die kürzere Seite Ihre Variable darstellen würde b Wert. Diese Form kann auch stark in Design-Layouts und anderen Grafiken einschließlich Logos und kleineren Symbolen angewendet werden.
Diese speziellen Teile der Geometrie können Sie dabei unterstützen, fast alle Layoutprobleme oder Elemente herauszufinden, mit denen Sie sich beschäftigen können. Genauer gesagt, können Sie Bildmaterial oder fantastische Flash-Anzeigen, die sich im Heiminhalt Ihrer Website befinden, umreißen. Diese Rechtecke können auch im gesamten Fußzeilen- oder Seitenleistenbereich verwendet werden, um einzelne Elemente oder Widgets zu markieren.
Die prominenteste Verwendung hierfür ist natürlich der dynamische Inhalt. Beim Platzieren von Fotogalerien oder Werken in einem Portfolio sollten Sie goldene Rechtecke als Trennzeichen betrachten. E-Commerce-Websites können mit diesem Verhältnis viel besser umgehen, indem sie Produkte nicht nur in Zeilen, sondern in inhaltsreichen Spalten anzeigen, die gleichmäßig in goldenen Rechtecken angeordnet sind.
Ich möchte hier nicht vorschlagen, dass jedes Element auf Ihrer Seite durch goldene Rechtecke gepflastert werden sollte. In der Tat gibt es viele Überlegungen, wenn es um Ausrichtung und Raster geht, um sich über eventuelle Konstruktionsfehler auf dem Laufenden zu halten. Dies ist nur ein weiteres Werkzeug neben den unzähligen anderen, die zum Erstellen eines schönen Layouts verwendet wurden.
Fazit
Wir sind etwas tiefer über die Oberfläche des Golden Ratio geritzt, um herauszufinden, wie er in moderne Design-Arbeiten umgesetzt werden kann. Rastersysteme können wählerisch sein und das Arbeiten innerhalb der göttlichen Proportionen ermöglicht sowohl festen als auch elastischen Grundrissen Raum zum Atmen und Zusammenfallen. Sie sollten Ihr gesamtes Layout nicht auf diesen mathematischen Konstanten aufbauen. Sie können jedoch einen großen Vorteil erzielen, wenn Sie in diesem Sektor beginnen und das Rasterlayout Ihrer Website berücksichtigen.
Es gibt einige erstaunliche kostenlose Raster-Vorlagen, die während dieses Prozesses unterstützt werden können. Diese sind großartig, wenn Sie nicht zuversichtlich sind, mit dem Kopf in Designproportionen zu springen und auf soliden Grundlagen arbeiten möchten.
Versuchen Sie, diese Ideen in Ihrem nächsten Entwurf anzuwenden und zu sehen, wie sich die Dinge entwickeln. Organische Layouts und Strukturen gepaart mit natürlich leistungsfähiger Mathematik können zu einem erstaunlichen Website-Design führen.