Wenn Sie Raster hören, was fällt Ihnen als erstes in den Sinn? Bei den meisten Designern handelt es sich dabei häufig um ein horizontales Konzept mit Spalten auf der Leinwand. Dies gilt insbesondere für das Nachdenken über Web- und digitale Designprojekte.
Aber was ist mit vertikalen Gittern? Ebenso wichtig ist es, den Seitenfluss nach oben und unten zu erzeugen. Bei den Netzsystemen gibt es verschiedene Möglichkeiten.
Warum ein vertikales Gitter verwenden?
Wenn Sie in Ihren Designprojekten nicht bereits über vertikale Gitter nachdenken, fragen Sie sich vielleicht, warum dies wichtig ist. Ein vertikales Raster sorgt für vertikalen Rhythmus und Harmonie auf der Seite.
Das Raster hilft dabei, Regeln für das Design festzulegen und festzulegen, ob gedruckt oder digital. Diese Struktur vereinfacht das Zeichnen des Designs und enthält Richtlinien für Abstand, Platzierung und Größenänderung von Text und anderen Objekten auf der Leinwand. Ein vertikales Raster erzeugt auch ein rhythmisches Muster und einen Fluss für eine Website, wenn die Benutzer blättern. (Dies kann besonders bei kleineren Geräten wichtig sein.)
Der Gesamteffekt ist ein Design, das, wenn Sie es im Wireframe-Stil skizzieren, ein fließendes Aussehen hat. Die Elemente sind gut voneinander beabstandet, Übergänge sind leicht zu sehen und zu verstehen, und jeder andere Teil des Entwurfs fühlt sich zweckmäßig und Teil des Plans an.
Schauen Sie sich das Drahtgitter oben an. Sie können Linien über die Skizze zeichnen, sodass sich jedes Element auf derselben Ebene befindet. Dieser visuelle Fluss ist genau das, was Sie erreichen möchten.
Raster für Text
Ein vertikales Raster ist besonders wichtig, wenn es um Text geht. Es kann auf verschiedene Arten verwendet werden, um einen Fluss in Kopie zu erstellen. Es hängt alles von Ihrem Grundlinienraster ab.
Das Grundlinienraster besteht aus einer imaginären Gruppe von gleich beabstandeten horizontalen Linien - denken Sie an das reguläre Papier, das Sie in der Grundschule verwendet haben -, an das sich der Text richtet. Die Unterseite (Grundlinie) der Buchstaben ruht auf diesen Zeilen, so dass der Abstand zwischen den Textzeilen gleich ist und die Textspalten sich auch aneinander ausrichten.
Hier sind ein paar Anwendungen:
- Erstellen Sie zwei Spalten, und behalten Sie den Typ auf der Basislinie.
- Verwenden Sie Mathematik, um alle Typen unabhängig von der Größe an der Grundskala auszurichten.
Aber wie machst du das? Es beginnt mit ein wenig? Typografie-Mathematik ?. (Das Konzept ist für Print- oder digitale Projekte nahezu das gleiche.)
- Wählen Sie die Schriftart und Größe für den Haupttext.
- Legen Sie die Rasterlinien oder den Abstand zwischen den Textzeilen fest.
- Verwenden Sie das gleiche Verhältnis für andere Abstände im Design.
- Sie können ein Vielfaches des Grundlinienrasters auch für Elemente verwenden. Wenn Ihr Haupttext also 16 Punkte umfasst, kann der größere Text die doppelte Zeilenhöhe erreichen.
Dieses Grundlinienraster führt auch etwas anderes aus. Es hilft Ihnen beim Erstellen einer Typografiehierarchie, da jede neue Textebene proportional zu anderen Textebenen gestapelt wird.
Raster für Bildschirme oder Panels
Vertikale Raster sind eines der wichtigsten Werkzeuge beim seitenweisen Design, z. B. Websites mit Parallax-Scrolling-Funktionen. Jede Seite muss die gleiche Größe und das gleiche Gefühl haben, damit sich jede neue Seite wie ein zusammenhängender Teil derselben Geschichte und Ästhetik anfühlt.
Die meisten Designer tun dies mit Farbe oder einem Hauch von Animation, um Bildschirme zu "schnappen". mit jeder Schriftrolle. Wenn Elemente in perfekter vertikaler Ausrichtung ausgerichtet sind, ist jeder Bildschirm auf einmal sichtbar und nicht halb oder halb so groß wie der Bildschirm. Dieses vertikale Raster schafft eine richtige Harmonie und trägt zu einer guten Lesbarkeit und einer wünschenswerteren Benutzererfahrung bei.
Der Rahmen für diesen Designstil hängt von einem guten vertikalen Fluss ab. Elemente müssen auf ähnliche Weise positioniert werden, wie der Benutzer scrollt. Der Typ sollte in ein ähnliches Spaltenformat fallen, und die Größe und der Abstand von Beschriftungen und Elementen sollten von Bildschirm zu Bildschirm konsistent sein.
Diese kleinen Hinweise sind der Faden, der den Benutzer fokussiert und visuelles Verständnis schafft und von einem Teil der Informationen zum nächsten fließt.
Raster für Karten
Das Design im Kartenstil ist eines der beliebtesten und trendigsten Elemente des Jahres und funktioniert dank eines vertikalen Rasters. Mit Hilfe des vertikalen Gitters können Sie eine Karte erstellen, die sich eindeutig anfühlt, den richtigen Abstand aufweist und bequem Platz für mehrere Elemente in einem einzigen Container bietet.
Denken Sie an alle Orte, an denen Sie ein vertikales Gitter mit einer Karte verwenden können:
- Abstand zwischen Karten in einem Design. (Eine Karte pro Bildschirm auf mobilen Geräten).
- Interner Randabstand für die Karte zwischen Elementen wie Bildern, Text oder Schaltflächen.
- Bemessung für jedes Element.
- Texthierarchie und Größenanpassung.
Grids für E-Commerce
Vertikale (und horizontale) Netze sind aufgrund des unterschiedlichen Organisationsflusses eine beliebte Option für E-Commerce-Websites. Elemente können nebeneinander platziert werden, sodass Benutzer vor dem Kauf vergleichen und Entscheidungen treffen können.
Wenn Sie genau hinschauen, werden Sie wahrscheinlich feststellen, dass auch der Rest des Website-Frameworks demselben vertikalen Rhythmus folgt. Die subtile Nutzung des Gitters ist komfortabel und sorgt dafür, dass sich die Käufer wohl fühlen, dank einer guten Organisation dem Design vertrauen und hoffentlich einen Kauf tätigen.
Raster für die Gesamtorganisation
Nur weil Sie ein Gitter verwenden, muss Ihr Design nicht wie ein Mauerwerk oder ein Gitter aussehen. Verwenden Sie das Raster in mehreren Hälften, um interessante Kombinationen von Elementen zu erstellen, die in Harmonie fallen.
Und zögern Sie nicht, ab und zu das Gitter zu brechen. Manchmal geraten Sie in eine Situation, in der das Rastervielfach einfach nicht richtig aussieht, insbesondere wenn Sie fehlende Auf- oder Abstiegstypen eingeben. Es ist in Ordnung, es ein wenig zu verfälschen. Denken Sie daran, dass selbst wenn Sie ein Gitter verwenden und es komisch aussieht, die Harmonie und der Fluss gestört werden. Nehmen Sie diese visuellen Korrekturen und Einstellungen nach Bedarf vor.
Fazit
Warum ist vertikaler Rhythmus und ein Raster so wichtig? Wenn es sich um Text handelt, trägt dies dazu bei, dass ein Benutzer beim Lesen nicht müde wird. Für andere Elemente entsteht ein ausgeprägtes Gefühl von Harmonie und Fluss.
Die Leute mögen die Organisation von Natur aus und möchten, dass Designs auf einen Blick leicht verständlich sind. Ein gutes Netzsystem kann Ihnen dabei helfen, dies problemlos zu erreichen. Sobald das Raster erstellt ist, sind die Platzierungen, Größen und Formen von Elementen leichter vorstellbar, da Sie sie an den Rahmen anpassen können, den Sie bereits skizziert haben.
Bildquelle: Baldiri.