Gestaltungsraster (Teil 2)

Teil 2/2

Unsere drahtigen Helfer, die Gestaltungsraster, treten heute wieder auf die Bühne. Nachdem wir uns beim letzten Mal ihr Wesen, ihre Spielarten, sowie ihre guten und schlechten Seiten angeschaut haben und schon mit der Überlegung angefangen haben, welche Raster denn für unser Produkt das optimale wäre, erzählen wir heute ihre Heldentaten, die sie bei der Gestaltung der Oberflächen in digitalen Systemen vollbringen. Ein Star unter den Rastern tritt hervor – das 12-er Spaltenraster. Und wir erfahren, wie sich die Benutzeroberflächen für kleine und große Fenster wie von Zauberhand anpassen lassen – mit Hilfe von responsiven Gestaltungsrastern.

Gestaltungsraster in digitalen Systemen

Die am häufigsten im digitalen Bereich genutzten Raster sind Spaltenraster und Grundlinienraster.

Die Elemente dehnen sich zwischen den vertikalen Linien des Spaltenrasters aus und können an ihnen entlang links- oder rechts-bündig ausgerichtet werden.

Das Grundlinienraster mit seinen horizontalen Linien hilft die Texte lesbar und ästhetisch zu setzen, indem es für proportionale Zeilenabstände und horizontale Ausrichtung der Texte bei unterschiedlicher Textgröße sorgt.

Das Spaltenraster

Im Spaltenraster werden die Elemente nicht nur innerhalb einer Spalte platziert, sondern können sich über mehrere Spalten erstrecken. Die Spaltenraster mit einer geraden und durch möglichst viele Zahlen teilbaren Anzahl von Spalten bieten besonders viele Varianten für die Gestaltung. Dazu gehören die am häufigsten genutzten Raster mit 8, 12, 16, 24 und 32 Spalten.

So kann ein Spaltenraster mit 24 Spalten, kurz 24er-Spaltenraster, durch 2, 3, 4, 6, 8, 12 und 24 geteilt werden d.h. es können 2, 3, 4, 6, 8, 12 oder 24 Elemente gleicher Breite nebeneinander positioniert werden. Oder ein Element dehnt sich prominent über 12 Spalten, also die halbe Fläche aus, während daneben noch 3 weitere gleich breite Elemente Platz einnehmen, die sich jeweils über 4 Spalten erstrecken. Die Vielzahl an mögllichen Variationen bietet daher eine große Flexibilität für die Gestaltung.

Allerings können je nach Produkt-, Seiten- bzw Ansichtfenstergröße beim 24er-Spaltenraster die Spalten und die Abstände zwischen den Spalten relativ schmal ausfallen und das Layout dadurch eng wirken lassen. Es sind ja u.a. die Zwischenabstände, die den Weißraum sichern und ein Layout „atmen“ lassen. Auch die recht große Variationsvielfalt in der Positionierung kann die Einhaltung der Konsistenz im Layout erschweren.

Das 12er-Spaltenraster hat sich im digitalen Bereich etabliert, weil es meistens ausreichend  Flexibilität für das Layout – es lässt sich durch 2, 3, 4 und 6 teilen – aber genug Platz für relativ breite Einzelspalten und die Zwischenabstände bietet. Die Teilungsoptionen sind auch beim responsiven Raster wichtig, worauf wir noch später eingehen werden.

Wie berechnet man ein Spaltenraster?

Ausgehend von der Größe des Ansichtsfensters (des Viewports), die maximal die Maße der Bildschirmgröße des genutzten Ausgabegeräts einnehmen kann, entscheidet man sich für die optimale Anzahl des Rasterspalten.

Als nächstes kann man die Abstände zwischen den Spalten und die Abstände zum Viewportrand bestimmen.

Da die manuelle Berechnung oft mühsam ist, bieten hierbei verschiedene Gestaltungsprogramme Unterstützung an. Es gibt auch Online-Tools, die sich gut für die Berechnung von Spaltenrastern eignen. Durch die Angabe der Spaltenanzahl und der Randabstände werden die Zwischenabstände zwischen den Spalten automatisch berechnet.

Man kann auch von der Anzahl der Spalten und der Breite der Zwischenabstände ausgehen, um die Randabstände zu bestimmen. Wichtig dabei ist, dass am Ende volle Pixelzahlen und gleiche Randabstände links und rechts daraus resultieren. Bei den Randabständen oben und unten ist man entsprechend flexibel. Man kann sie optional angeben.

Raster auf verschiedenen Ausgabegeräten

Auf den großen Bildschirmen mit viel Platz in der Breite lassen sich die Vorteile von Rastern mit vielen Spalten ausschöpfen – flexible Ausdehnung und Positionierung der Layoutelemente. Sobald sich aber die Breite verringert, sind Raster mit einer reduzierten Anzahl von Spalten praktischer, damit die Spaltenbreiten und die Zwischenabstände nicht zu eng werden.

So eignet sich z. B. für den Desktop-Bereich das 12er-Spaltenraster, während auf den Tabletgrößen das 8er-Spaltenraster gute Dienste erweist und für mobile Geräte 4er-Spalten in der Regel völlig ausreichend sind.

Entscheidend ist dabei die Größe des Ansichtsfensters, des Viewports. Ein Layout, das im großen Viewport gut funktioniert, kann in einem kleineren Viewport Platzprobleme bekommen oder sogar teilweise unbenutzbar werden, wenn wichtige Inhalte oder Bedienelemente nicht sichtbar sind. Auch umgekehrt können Elemente, die auf einem kleinen Gerät die gesamte Breite des Bildschirms einnehmen, auf einem größeren Bildschirm überdimensioniert erscheinen.

Die Länge einer Textzeile spielt für die Lesbarkeit auch eine zentrale Rolle. Es ist daher sehr wichtig die Gestaltung in verschiedenen Viewportgrößen zu testen, um herauszufinden, an welchen Stellen bzw. ab welchen Größen das Layout nicht mehr funktioniert. Es handelt sich dabei um die sogenannten Breakpoints – Unterbrechungspunkte.

Die Anzahl der Breakpoints hängt von einem konkreten Layout ab. Am häufigsten kommen jedoch Layoutänderungen bei den Übergängen zwischen Desktop, Tablets und mobilen Gerät vor. Die Geräte unterscheiden sich dabei nicht nur in der Größe, sondern auch in der Art, wie sie genutzt werden, das wiederum die Gestaltung beeinflusst (z. B. Maus- oder Touchbedienung)

Responsive Raster

Gestaltung von responsiven Websites und Applikationen, deren Layout sich automatisch an verschiedene Ausgabegeräte anpasst, ist eine besondere Herausforderung für Designer*innen.

Mit responsiv, das mit reagierend oder antwortend gleichgesetzt werden kann, werden Layouts bezeichnet, die sich an jeden Viewport automatisch anpassen. Die Raster, die ihnen zugrunde liegen, werden als responsive Raster bezeichnet.

Der Anpassungsvorgang und somit das Verhalten des Rasters kann dabei unterschiedlich ablaufen, je nachdem, wie das Layout konstruiert ist.

Man unterscheidet zwischen folgenden Layout-Varianten:

• fluid – die Größenangaben aller Elemente sind prozentual (z. B. 100% oder 80% der verfügbaren Breite) und passen sich auf diese Weise immer automatisch und proportional an das Viewport an, das Raster deht sich hier auch entsprechend aus
• adapaptiv – es gibt unterschiedliche Entwicklungen für verschiedene Viewports z. B. eine getrennte mobile Website mit eigenem Code
• feste Breiten – die Elemente haben feste Breitenangaben in Pixeln und passen sich an unterschiedliche Viewports gar nicht an

Am meisten verbreitet sind Kombinationen von den o.g. Ansätzen. So kann beispielsweise bei großen Viewports ein Layout mit einer festen Breite für den Inhaltsbereich zum Einsatz kommen, während sich die Abstände zum Bildschirm- bzw. Fensterrand anpassen. Wenn der Viewport kleiner wird, wird das komplette Layout fluid, weil dort häufiger eine Anpassung nötig ist, um die optimale Nutzung anzubieten.

Übrigens spielen bei der Anpassung vor allem die Breiten der Elemente eine Rolle, da in den meisten aktuellen Ausgabegeräten durch das vertikale Scrollen zumindest theoretisch unendlich viel Platz in der Höhe vorhanden ist. Praktisch kommt es natürlich auf ein konkretes Element an und hängt mit der visuellen Hierarchie sowie der gesamten Komposition zusammen, wie mit der Höhe der Elemente umgegangen wird.

Das responsive Layout, und auch das ihm zugrunde liegende Raster orientiert sich an den oben erwähnten Breakpoints. Die Breitenbereiche zwischen den Breakpoints werden Media Queries genannt. Es sind grob gesagt „bis zu“-Angaben, bzw. „größer und/oder kleiner als“ eine Breitenangabe in Px. Innerhalb eines Breitenbereichs, also einer Media Query, kann ein Raster und so das Layout eine feste Breite haben oder sich fluide anpassen. Die Abstände zwischen dem Raster und dem Rand des Viewports können sich wie das Raster fluid ausdehnen oder aber eine feste Breite haben. Eine Änderung wird am nächsten Breakpoint vorgenommen. Wird der Viewport kleiner, kann die Spaltenanzahl des Rasters reduziert werden. Es muss dann auch überprüft werden, über wieviele Spalten sich einzelne Elemente ausdehnen.

Der Mobile-First-Ansatz ist bei der Entwicklung von responsiven Layouts sehr populär geworden. Man fängt hierbei bei der kleinsten Layoutgröße an – also der für Smartphones oder Wearables, obwohl es dort auch schon viele unterschiedlichen Größen gibt. Dann passt man das Layout an die immer größer werdenden Viewports an. Es scheint einfacher zu sein, mit zusätzlichem Platz bei der Gestaltung umzugehen, als ein großzügigeres Layout an kleinere Fenster anzupassen.

Es ist sicherlich leicht vorstellbar, welche zusätzliche Aufwände die Gestaltung von responsiven Layouts mitbringen. Das responsive Raster erlaubt uns die Breitenangaben der Elemente an den Rasterspalten auszurichten, anstatt feste oder prozentuale Maße für alle Elemente anzugeben. So ist ein Element beispielweise innerhalb der Media Query für Smartphones 2 von 4 Spalten breit, innerhalb der Media Query für Tablets 2 von 8 Spalten breit, während es bei Desktopgeräten immer 3 von 12 Spalten breit ist. Das am Raster ausgerichtete Layout wächst oder schrumpf proportional innerhalb einer Media Query.

Gestaltungsraster in der Entwicklung

Der Einsatz von Rastern bietet nicht nur für die Gestaltung Vorteile. Es macht die Übergabe des Layouts an die Entwicklung klarer, da die Entwickler das Raster samt der Breakpoints in der Regel in das CSS übernehmen können. Media Queries sind Konzepte die aus der Entwicklung kommen. Die Kommunikation zwischen Designern und Entwicklern wird vereinfacht, da das Raster eine gemeinsame Grundlage bildet.

CSS Grid ist eine Möglichkeit für die Umsetzung eines Gestaltungsrasters. Auch komplexe oder sogar verschachtelte Raster lassen sich mit CSS Grid umsetzen. Es ist allerdings nicht zwingend notwendig ein Gestaltungsraster mit CSS Grid umzusetzen. Die Entscheidung bleibt von Fall zu Fall den Entwicklern überlassen.

Fazit

Im Bereich der digitalen Inhalte sticht besonders das 12er-Spaltenraster hervor, da es eine gelungene Balance zwischen Einfachheit und Flexibilität aufweist. Die Anpassung an verschiedene Bildschirmgrößen durch responsive Raster erleichtert Designern die Schaffung konsistenter und benutzerfreundlicher Layouts für unterschiedliche Geräte. Darüber hinaus erleichtert die Integration von Rastern in die Entwicklung die Kommunikation zwischen Designern und Entwicklern, da sie eine gemeinsame Grundlage bilden. Die geschickte Anwendung von Rastern ist ein klares Zeichen für das ausgewogene Verhältnis zwischen Struktur und Kreativität im Designprozess und trägt maßgeblich zur Verbesserung des Nutzungserlebnisses bei.

Dieser Beitrag hat dir gefallen? Schau dir auch den ersten Teil der Reihe an:
Gestaltungsraster (Teil 1)