Share
Bei der Komposition geht es darum, alle Ihre Ideen und Gestaltungselemente zu einem Ganzen zusammenzusetzen. Komponieren dein Design. Wir werden alle vorherigen Lektionen kombinieren, die wir behandelt haben, und deshalb ist Komposition einer der wirklich schwierigen Aspekte des Entwerfens.
Wenn Sie eine gute Komposition erstellen, wird die Benutzererfahrung beim Navigieren auf Ihrer Website verbessert und ein besseres Gesamtbild erstellt. Wir streben nach Ausrichtung, Beständigkeit und starker Einheit. Composition hilft uns auch, unseren Layouts eine visuelle Relevanz zu verleihen, damit wir unseren Benutzern helfen können, mehr über ihre Reise auf einer Website zu erfahren, auf der sie als nächstes vorgehen sollten.
Komposition ist wohl der wichtigste Teil Ihres Entwurfsprozesses - Punkt.
Wie wir zu Beginn dieser Serie gelernt haben, ist das Entwerfen, „über das Aussehen und die Funktion (eines Gebäudes, eines Kleidungsstücks oder eines anderen Objekts) zu entscheiden, typischerweise durch Erstellen einer detaillierten Zeichnung“ - und Komposition bedeutet „Schreiben oder Erstellen“ ”. Wenn wir also diese beiden Elemente zusammenstellen, komponieren (gestalten) wir in unserer Kompositionsphase das Aussehen und die Funktion unseres Designs - im Wesentlichen setzen wir jetzt alles zusammen.
Im traditionellen Druckdesign gibt es viele Druckkompositionen und Layouts, die sich im Laufe der Zeit bewährt haben. Viele von ihnen finden inzwischen ihren Weg ins Netz - und das aus gutem Grund. Obwohl es schwierig sein kann, diese Layouts in absolute Begriffe für das Design im Web zu übersetzen, können wir uns zumindest ein wenig mit den Layouts befassen, die wir vielleicht beim Erstellen versuchen möchten.
Es gibt viele Kompositionstypen oder beliebte Layouts - aber ich werde hier nur über ein paar sprechen. Es gibt so viele Ressourcen online, um diese weiter zu betrachten, und obwohl diese traditionellen Layouts wichtig sind, möchte ich auch auf weitere Details eingehen zu anderen Aspekten der Komposition.
An erster Stelle steht das einzelne visuelle Layout.
Ein hervorragendes Beispiel für das Single Visual-Layout, wie auf der Creative People-Website zu sehen ist. Das ist wirklich ganz einfach - dort gibt es einen wichtigen Aspekt eines Designs, der als einzelner visueller Fokus fungiert. Sie können beispielsweise ein Design mit einem großen Foto im Hintergrund erstellen, das viel Leerzeichen und einfache Typografie enthält.
Das Z-Layout ist ziemlich selbsterklärend und bezieht sich stark auf das Layout, das Sie für Ihre Gestaltungselemente wählen.
Das Z-Layout aus der BBC News. Einfach ausgedrückt, folgt das Z-Layout dem natürlichen Muster, das unsere Augen normalerweise beim Scannen einer Website haben könnten. Wenn Sie sich das nicht schon vorstellen können, wird dies in der Forschung manchmal im Muster des Buchstabens „Z“ gezeigt - es fließt von links oben nach rechts, diagonal nach unten und dann wieder hinüber.
Dies kann sehr nützlich sein, wenn Sie sich überlegen, wo Ihre Artikel platziert werden sollen, damit sie für den Benutzer relevant sind. Es kann Ihnen dabei helfen, wichtigen Elementen Gewicht zu verleihen.
Als Konstruktionsprinzip für Fotografie und Film (und vieles mehr) gilt die dritte Regel als gutes kompositorisches Layout für das Webdesign.
Die dritte Regel ist eine Richtlinie, die vorschlägt, ein Bild in neun gleiche Teile (drei quer, drei unten) aufzuteilen, wobei Elemente dieses Bildes oder Designs an den Rändern jedes dieser Teile ausgerichtet werden sollten. Dies ist besonders nützlich für das Webdesign, da es uns helfen kann, Proportionen und Layouts in unseren Designs zu erstellen.
Die Drittelregel ist ein großartiges kompositorisches Werkzeug und Layout. Obwohl dies nicht unbedingt strikt beachtet werden sollte, kann es eine große Hilfe sein, wenn es um mehr Gleichgewicht geht. Es kann auch zusammen mit anderen visuellen oder Kompositionslayouts verwendet werden, z. B. dem einzelnen visuellen Element oder sogar beim Erstellen von Rastersystemen.
Der Goldene Schnitt (oder Goldener Schnitt, wenn Sie es lieber so nennen möchten) ist stark mit Mathematik verbunden und ist eines der bekanntesten (zumindest im Namen) Kompositionslayouts oder Werkzeuge in jeder Form von Design.
Der Goldene Schnitt wird oft als von den alten Griechen geschaffen (gescheites Volk, wie sie waren) und beschreibt die Beziehung zwischen zwei Verhältnissen. Der Goldene Schnitt ist 1.618 (03398875…) und es scheint, dass viele Elemente darin sind Natur werden oft gefunden, die diesem Verhältnis entsprechen. Es ist daher immer etwas, das für unser menschliches Auge beruhigend und angenehm ist.
Da es für uns ein so vertrautes Muster ist, ist es sinnvoll, den Goldenen Schnitt in unseren Entwürfen zu verwenden. ein harmonisches Gleichgewicht zu schaffen, das sich einfach richtig anfühlt und sinnvoll erscheint.
Eine einfache Möglichkeit, dies in unseren Designs zu implementieren, besteht darin, die Golden Ratio-Zahl (1,618) zu verwenden und ein wenig Mathematik zu verwenden. In unserem Design haben wir möglicherweise einen Bereich, in dem wir beispielsweise einige Inhalte und eine kleine Seite oder Seitenleiste hinzufügen möchten. Das Aufteilen in unseren Entwürfen, ohne darüber nachzudenken, ist möglicherweise einfach - insbesondere, wenn Sie ein einfaches Rastersystem haben -, aber wenn wir über den Goldenen Schnitt nachdenken, können wir am Ende ein besseres Ergebnis erzielen.
Wir haben also diesen Bereich, den wir mit unserer Golden Ratio-Nummer in zwei Teile teilen wollen. Messen Sie dazu die Breite des verfügbaren Bereichs (lassen Sie uns für diesen Artikel mit 950px gehen) und teilen Sie ihn durch 1.618.
Wenn unsere verfügbare Breite 950px ist, bedeutet dies, dass unsere erste Berechnung (für unseren Hauptinhalt) lauten sollte: 950 / 1.618 = 587.144622991 (was auf 587px abgerundet wird)..
Als Nächstes ziehen wir diese Zahl einfach von unserer ursprünglich verfügbaren Breite ab, um unsere zweite Breite für die Seitenleiste oder auf der Seite zu erhalten: 950 - 587 = 363px.
Da unser Hauptinhalt relevanter ist und wir möchten, dass der Fokus in diesem Teil des Designs liegt, können wir die größere der beiden endgültigen Zahlen für die Breite dieses Inhalts verwenden. Wir können dann die kleinere Zahl für unsere Neben- oder Seitenleiste verwenden. Und da haben wir es - unser perfekt goldenes Design!
Hinweis: Die Extrapolation dieser Beziehung ist Teil der Erstellung einer modularen Skala für Ihr Design.
Bei der Komposition geht es auch um den Raum. Dies bedeutet nicht, dass Sie große, leere Bereiche in Ihren Entwürfen belassen, sondern es geht darum, mit dem Raum, den Sie zur Verfügung haben, klug zu sein. Bei der Nutzung von Whitespace geht es genauso darum, Ihren Inhalt zu fokussieren, als leere Bereiche zu verlassen.
Verwenden Sie jedoch Padding und Whitespace zu Ihrem Vorteil - niemand wird es leicht finden, durch eine unübersichtliche Website zu navigieren, die wenig hierarchisch ist und wo die Elemente eng sind und keinen Raum zum Atmen haben. Fügen Sie stattdessen Platz an Orten ein, an denen Sie können, um Ihren Designern ein besseres Gesamterlebnis zu bieten.
Nachdem wir uns mit dem Konzept der Komposition vertraut gemacht haben, werden wir im nächsten Abschnitt den Raum in unseren Entwürfen näher untersuchen. Wir sehen uns dort!
Accentsconagua