Share
Ausrichtung ist eines der Dinge, die bei der Arbeit mit Netzsystemen Hand in Hand gehen. Das Thema Ausrichtung ist nicht einfach eine Frage der Auswahl, ob Sie Text oder Bilder links oder rechts eines Designs ausrichten möchten oder nicht (obwohl diese Entscheidungen offensichtlich immer noch von Bedeutung sind). Stattdessen verwenden wir Ausrichtung, um unsere Designs zu verbessern. Durch die richtige Ausrichtung Ihrer Designs werden sie optisch ansprechender und machen es Benutzern leichter, eine Seite zu scannen, was unbewusst auch ein ruhigeres Leseerlebnis bietet.
Alle Elemente in Ihrem Design müssen in irgendeiner Weise ausgerichtet werden, unabhängig davon, ob dies nur Text auf Ihrer Seite ist, Bilder, die im Text gemischt sind (oder sogar Kopf- oder Heldenbilder), Videos, Schaltflächen und Handlungsaufforderungen. Links (innerhalb des Textes oder in Modulen wie einem Navigationsbereich) oder andere Elemente, die Sie möglicherweise haben.
Grids helfen Ihnen bei der Lösung von Ausrichtungsproblemen oder Entscheidungen in Ihrem Entwurf. Wir müssen uns hier jedoch darauf konzentrieren, wie die verschiedenen Elemente, Elementgruppen oder einzelnen Module in Ihrem Entwurf zusammenarbeiten. Ich habe von Anfang an betont, wie wichtig eine zusammenhängende Benutzererfahrung ist. Die richtige Ausrichtung ist eines der wirklich wichtigen Dinge, die dazu beitragen können, die Benutzererfahrung zu verbessern.
Durch die Ausrichtung können wir auch bewusst entscheiden, wo sich Elemente befinden und wie sie miteinander interagieren. Durch eine gute Ausrichtung wird die visuelle Lücke zwischen jedem Element in Ihrem Entwurf geschlossen und wir können Beziehungen zwischen den vorhandenen Elementen herstellen. Ansonsten hätten wir ein Design, das aus Textblöcken und Bildern überall besteht und ohne Struktur wenig Sinn macht.
Wie in den vorangegangenen Artikeln beschrieben wurde, scheinen viele Leute Gitter nicht zu mögen, weil sie sie als einschränkend empfinden. dass sie oft alle Kreativitätschancen innerhalb eines Designs zerstören.
Das ist absolut verständlich. Raster sind eine Reihe von Spalten und Zeilen, die uns im Wesentlichen beim Erstellen von Blöcken helfen. CSS legt das Element im Allgemeinen in einer Box-Anordnung fest. Es kann jedoch schwierig sein, einen geeigneten Zeitpunkt zu erkennen, um von unserem Netz abzubrechen.
Nicht alles in Ihrem Website-Design muss übereinstimmen. Abhängig von Ihrem Design oder Ihrer Arbeitsweise kann dies manchmal die Kreativität beeinträchtigen. Denken Sie stattdessen darüber nach, wie Sie können mischen Ihre Ausrichtungen Auf diese Weise stellen Sie immer noch sicher, dass für jedes Element oder Modul auf Ihrer Website ein Muster vorhanden ist. Durch das Mischen der Ausrichtungen stellen Sie jedoch sicher, dass Sie immer noch etwas visuelles Interesse schaffen, durch das Ihre Benutzer die Website erkunden.
Das Mischen von Ausrichtungen bedeutet auch, dass Sie mit Layouts und Gittern ein wenig mehr spielen können. Verwenden Sie statt eines 6-Spalten-Gitters auch ein anderes Gitter, das Sie überlagern können, beispielsweise ein 4-Spalten-Gitter.
Ein Beispiel für eine Rasterüberlagerung - sechs Spalten mit vier Spalten überlagert. Eingebaute Gridset-App. Sie brechen dann zwar nicht vollständig aus Ihrem Raster, sondern führen ein neues Raster ein, aus dem Sie arbeiten können, und bietet noch mehr Ausrichtungs- und Layoutoptionen in Ihren Entwürfen.
Das Mischen von Ausrichtungen bedeutet nicht nur, dass Sie neue Gitter, Säulen oder Extras in Ihre Struktur einfügen. Verwenden Sie stattdessen Ihr aktuelles Raster, um zu mischen, welche Elemente an welchen Spalten ausgerichtet sind. Beispielsweise haben Sie möglicherweise die Kopfzeilenelemente an den Rändern der ersten und letzten Spalte ausgerichtet. Sie können sich jedoch auch dafür entscheiden, Ihren Haupttext an der ersten und vorletzten Spalte auszurichten. Das Tolle ist, dass ein Gitter Ihnen fast unbegrenzte Ausrichtungsmöglichkeiten bietet, selbst wenn es sich um ein 4-6-Säulen-Raster handelt.
Das Mischen von Ausrichtungen ist eine Möglichkeit, Ihre Benutzer beim Browsen einer Website auf dem Laufenden zu halten. Anstatt Elemente ähnlich zu halten, wird den Elementen Ihres Entwurfs eine andere Ebene hinzugefügt, auch wenn dies unbewusst so ist.
Die wichtigsten Ausrichtungsoptionen für Ihren Text sind den in CSS verfügbaren Optionen sehr ähnlich: links, rechts, zentriert oder ausgerichtet. Eigentlich selbsterklärend; Wenn Sie Ihren Text linksbündig ausrichten, wird er nach links verschoben. Wenn Sie Ihren Text rechtsbündig ausrichten, wird er nach rechts gravitieren.
Stattdessen möchten Sie darüber nachdenken, wie geeignet diese Ausrichtungen für Ihren Text sind und wie sie sich in Ihrem Design befinden. Zum Beispiel können kleine Textmengen in zentrierter Ausrichtung gut funktionieren, obwohl dies bei größeren Textblöcken verwirrender und schwieriger zu lesen ist. In ähnlicher Weise kann es bei Überschriften in Ihrem Entwurf gut funktionieren, diese zentral auszurichten. Dies hängt jedoch von der Größe des Textes und dem Platz ab, an dem er platziert wird. Beispielsweise funktioniert eine zentral ausgerichtete Überschrift möglicherweise nicht gut, wenn sie einen großen Textblock enthält, der unmittelbar links unten ausgerichtet ist.
Sie müssen auch über die Kulturen nachdenken, die möglicherweise Ihrem Design und Ihrer Website ausgesetzt sind. In einigen Kulturen lesen Sie von rechts nach links, in den westlichen Kulturen jedoch von links nach rechts und von oben nach unten.
.Inhalt Richtung: RTL; Textausrichtung: rechts;
Aufgrund der westlichen Lesekultur von links nach rechts wird es wahrscheinlich schwierig sein, eine große Textmenge nach rechts auszurichten. Verwenden Sie stattdessen die Ausrichtungen, die möglicherweise in sehr geringen Mengen schwieriger zu lesen sind, eher in einem Konstruktionsmerkmal, z. B. in einer Fußzeile für Adress- oder Kontaktinformationen oder in einem Header mit einer Liste von Navigationslinks.
Das Ausrichten von Bildern kann schwierig sein, da die Ausrichtung, die Sie für jedes Bild verwenden sollten, relativ zur Größe des Bildes ist. Kleinere Bilder lassen sich naturgemäß leichter in Ihren Inhalt einfügen, ohne den Inhalt zu stören, während größere Bilder dazu neigen, den Lesefluss stärker zu stören und daher schwieriger in Ihrem Inhalt platziert werden können.
Sie haben zwei Möglichkeiten. Platzieren Sie Ihre Bilder entweder außerhalb des Inhaltsflusses (z. B. zwischen Absätzen oder am Anfang oder Ende des Inhalts), oder Sie können eine Möglichkeit finden, Ihre Bilder in das Raster einzufügen.
Die erste Option ist ziemlich einfach zu implementieren. Ohne den Textfluss zu unterbrechen, können Sie die Bilder entweder in voller Breite oder in einer benutzerdefinierten Breite und Mitte innerhalb des Bereichs platzieren, in dem sich der Text normalerweise befindet. Dies ist einfach genug und sieht trotzdem gut aus es ist ansprechend.
Die zweite Option kann etwas komplizierter werden, je nachdem, wie Sie die Bilder in Ihrem Inhalt platzieren möchten. Sie haben mehrere Möglichkeiten. Sie können die Bilder zunächst perfekt (links oder rechts) an Ihrem Text ausrichten oder die Bilder etwas über den Rand des Inhalts hinausragen lassen.
Auf diese Weise können Ihre Bilder eine volle Spaltenbreite in den Inhalt eingefügt werden, wobei der Inhalt um das Bild herum fließt. Dies stört den Lesefluss nicht so sehr, als wäre das Bild vollständig in den Inhaltsbereich eingefügt worden, aber es macht auch Ihr Design interessant - denn Sie erstellen einen anderen Ausrichtungsbereich für Ihre Elemente, der Ihr Design optisch frischer und frischer erscheinen lässt ansprechender.
Das Ausrichten von Hintergrundbildern ist eine dieser kleinen Hürden - und wieder ist alles relativ zu Ihrem Design und Motiv sowie der Größe des Hintergrundbilds.
Wie bei den Textausrichtungen kann die Ausrichtung Ihrer Hintergrundbilder Ihren CSS-Regeln sehr entsprechen. fix, absolut, nach oben oder nach unten, nach links oder nach rechts? Das hängt wirklich von Ihrem Design ab und davon, wie das Hintergrundbild dazu passt. Wenn Ihr Design über ein Muster verfügt, denken Sie darüber nach, wie dieses Muster an Ihren Elementen ausgerichtet ist. Sie möchten sicherstellen, dass es gut zu Ihren Elementen passt. Andernfalls könnte das gesamte Design vollständig wegfallen.
Denken Sie auch darüber nach, wie es aussieht, wenn Sie ein großes Hintergrundbild haben und wie dies zu Ihrem Design passt. Wenn sie groß sind und einen großen Fokus haben, überlegen Sie sich vielleicht, wie sich Ihre anderen Elemente und Module in dieses Design einfügen können. Könnte Ihr Haupttext beispielsweise an den Rändern des Designs ausgerichtet sein? Es geht darum zu hinterfragen, wie Ihre Bilder mit den anderen Teilen Ihres Designs zusammenarbeiten und wie Sie mit ihnen zusammenarbeiten können, um Ihr Design auf Hochglanz zu bringen und viel besser zusammenzuarbeiten.
Wenn ich eine Elementgruppe beschreibe, denke ich, dass sie sich sehr von dem unterscheidet, was ich als Modul bezeichnen würde.
Beim Denken in Bezug auf Module-Sowohl beim Entwerfen als auch beim Entwickeln des Website-Designs halte ich sie für eine Gruppe von Elementen, die miteinander verwandt sind und in unmittelbarer Nähe zueinander stehen. Beispiele für Module für mich sind eine Gruppe von Links, ein Heldenbild und überlagernder Text oder Kopfzeile. Alles, was gruppiert werden kann, ist ein wiederholbares Muster- oder Standalone-Modul.
Jedoch eine Elementgruppe ist eine Gruppe von Elementen in Ihrem Design, die dies nicht tun Notwendig müssen einander nahe sein. Eine Elementgruppe kann zum Beispiel sowohl Ihre Kopfzeilenelemente (beispielsweise Logo- und Navigationslinks) als auch Ihre Fußzeilenelemente sein (möglicherweise ein weiterer Satz von Links neben einem Copyright-Hinweis). Dies sind Elementgruppen, und Sie können diese Elementgruppen in Ihrem Design zusammen ausrichten. Obwohl Kopf- und Fußzeile nicht auf demselben Bildschirmbereich sichtbar sind, wird diese subtile Verwendung der Ausrichtung für ein stärkeres, optisch ansprechenderes und viel konsistenteres Design sorgen.
Andere Beispiele für Elementgruppen sind einfach sowohl der Text als auch die Bilder Ihrer Hauptkopie auf einer Seite oder können sogar so einfach sein wie ein Satz von Navigationslinks oder -elementen. In einer komplexeren Navigation haben Sie beispielsweise die Haupttextlinks, aber auch eine kleinere "Unterüberschrift" für den Link. Darüber befindet sich möglicherweise ein Symbol über oder unter dem Linktext. Während dies alle Einzelbits sind und diese drei Bits eine Verbindung bilden, können alle diese Einzelverbindungen ein komplexes Navigationsmodul bilden, sie können jedoch auch als Elementgruppe zusammengestellt werden, die Sie dann an andere Gruppen im Entwurf anpassen können.
Jetzt wissen Sie alles über die Ausrichtung in Ihren Entwürfen (und mit Ihren Rastern). Ich möchte, dass Sie Ihre Entwürfe und die Anordnung aller Elemente betrachten. Versuchen Sie, verschiedene Elemente und Elementgruppen zu gruppieren und den Text und die Bilder in Ihren Entwürfen auszurichten.
Sehen Sie, was Sie tun können, um ein besseres Design zu erstellen, indem Sie jedes Element in Ihrem Design richtig ausrichten. Verwenden Sie das Rastersystem Ihrer letzten Aufgabe, und richten Sie alle Elemente in Ihrem Entwurf anhand der Tipps aus dem heutigen Beitrag aus.
Accentsconagua