Layout
Raster und Layouts sind entscheidend für eine gute Benutzererfahrung. Rasterungen strukturieren Content-Blöcke und passen sich verschiedenen Formatgrößen an. Somit können spannende und übersichtliche Oberflächen erschaffen werden.
Wie liest der Mensch?
Beim Lesen von Texten gibt es zwei verschiedene Arten, wie der Inhalt aufgenommen wird. Man unterscheidet zwischen dem F- und dem Z-Muster. Wobei der Mensch beim Lesen den Text meist nur überfliegt.
Layout-Struktur
Die meisten Oberflächen bauen auf einer Rasterung im Hintergrund auf. Diese Rasterung ist für den Betrachter meist unsichtbar, wird aber trotzdem von ihm wahrgenommen. Das Ziel ist hierbei eine Struktur in die Gestaltung der Content-Blöcke zu bringen und dabei alle gewünschten Formatgrößen abzudecken. Ein Layout ist meist in horizontalen und vertikalen Spalten eingeteilt, welche durch Rinnen getrennt werden. Zu beachten ist hierbei, dass die horizontale Einteilung von rechts nach links erfolgt, während die vertikale sich von oben nach unten erstreckt.
Es gibt feste und fließende Layouts. Die feste Variante zeichnet sich durch eine festgelegte Spaltenbreite aus, die unabhängig der Formatgröße bzw. der Ausrichtung des Bildschirms den Inhalt immer gleich darstellt.
Das Gegenteil hierzu stellt die fließende Variante dar. Sie passt die Spaltenbreite der Größe des Formats an und ist somit responsiv. Der Inhalt wird formatfüllend dargestellt.
Die klassische Rasterung
Zu Beginn der digitalen Rasterung etablierte sich das 10pt Raster. Bei dieser Methode werden die Rinnen in 10pt-Einheiten definiert. Dies bietet den Vorteil der Benutzerfreundlichkeit, da es leicht zu berechnen ist.
Das 10pt Raster wurde später durch das 8pt Raster abgelöst. Dieses funktioniert ähnlich, bietet aber den Vorteil der Flexibilität bei Margin und Padding, da mehr Einheiten mit dem Basiswert acht zur Verfügung stehen. Zudem sind viele gängige Bildschirmauflösungen durch acht teilbar.
Soft Grid
Verzichtet man beim Gestalten seines Layouts auf ein klares Raster und nutzt stattdessen als Abstand »nur« einen definierten Basiswert zwischen seinen Objekten, spricht man von einem »Soft Grid«. Eine weit verbreitete Variante des Soft Grids ist die »Red Square Method«. Vorteil hierbei ist, dass das Quadrat eine vollständige Form darstellt und nicht, wie eine Rasterlinie mindestens 1px in Anspruch nimmt. Die Quadrate sollten je nach Größe unterschiedliche Rottöne haben. Man beginnt mit dem kleinsten Quadrat, welches als Seitenlänge die Punktzahl des Basiswertes hat und multipliziert diesen mit zwei oder addiert 8pt um auf das nächst größere Quadrat zu kommen. In unserem Beispiel nutzen wir den Basiswert 8pt und daraus resultierend größere Quadrate mit 16, 24, 32, 48 und 64pt. Die Werte 8 und 16pt werden zur Bestimmung der Abstände von Komponenten, 24pt für die Schnittstelle dazwischen und 32pt und aufwärts für das Layout verwendet. Somit ist durch das »Gesetz der Nähe« klar, wie die Objekte zueinander stehen.
