Screen-Layout

In der digitalen Welt ist das Screen-Layout – also die Anordnung und Größe von Elementen auf Bildschirmen – entscheidend für Benutzerfreundlichkeit, Ästhetik und Funktionalität. Ob Websites, Apps oder Software-Interfaces: die präzise Berechnung von Bildschirmflächen, Spalten, Rastern und Abständen garantiert ein klares, konsistentes Design. Dieses Kompendium erklärt, wie Screen-Layouts systematisch berechnet und gestaltet werden können, von absoluten Pixelmaßen bis zu responsiven Einheiten.

Grundlagen des Screen-Layouts

Ein Screen-Layout besteht aus:

• Gesamtbildschirmgröße (z. B. 1920 x 1080 px)
• Anordnung der Inhaltselemente (Text, Bilder, Buttons)
• Raster- und Spaltenstruktur (z. B. 12-Spalten-Raster)
• Abstände (Padding, Margin, Gutter)
• Responsivität (Anpassung an verschiedene Bildschirmgrößen)

Maßeinheiten im Screen-Layout

• Pixel (px): feste Größe, 1 px = 1 Bildpunkte auf dem Bildschirm
• Prozent (%): relative Größe zur Elternelementbreite oder -höhe
• Viewport Width/Height (vw, vh): Prozent der aktuellen Fensterbreite/-höhe
• REM/EM: relative Schrift- und Layouteinheiten, basierend auf Schriftgröße
• CSS Grid und Flexbox: ermöglichen flexible und proportionale Layouts

Raster- und Spaltenberechnung

Ein verbreitetes System ist das 12-Spalten-Raster:

• Gesamtbreite (W): Bildschirm- oder Containerbreite in px
• Spaltenanzahl (n): z. B. 12
• Zwischenraum (Gutter, g): Abstand zwischen Spalten, z. B. 16 px

Formel für Spaltenbreite (S):
S = (W – (n – 1) * g) : n

Beispiel:
W = 1200 px, n = 12, g = 16 px
S = (1200 – 11 * 16) : 12 = (1200 – 176) : 12 = 1024 : 12 ≈ 85,33 px

Responsive Layouts

Mit Medienabfragen (Media Queries) und flexiblen Einheiten passen sich Layouts an verschiedene Bildschirmgrößen an.

Beispiel für responsives Verhalten:

• Breite unter 600 px: Layout nutzt 4-Spalten-Raster
• Breite 600–1200 px: 8-Spalten-Raster
• Breite über 1200 px: 12-Spalten-Raster

Berechnung der Höhe und Proportionen

Für ein harmonisches Layout empfiehlt sich eine Proportionsberechnung, z. B. im Verhältnis 16:9 (Breite:Höhe).

Formel für Höhe (H):
H = W * (9 : 16)

Beispiel:
W = 1200 px
H = 1200 * 9 : 16 = 1200 * 0,5625 = 675 px

Abstände, Ränder und Padding

Abstände sind wichtig für Lesbarkeit und optische Klarheit. Typische Werte:

• Gutter: 16–24 px
• Margin/Padding: 8–16 px

Diese Werte können ebenfalls prozentual oder relativ zur Schriftgröße (REM) angegeben werden.

Praxisbeispiele

• Ein 960 px breites Layout mit 12 Spalten und 20 px Gutter:
  S = (960 – 11*20) : 12 = (960 – 220) : 12 = 740 : 12 ≈ 61,67 px pro Spalte
• Mobile Ansicht 375 px breit, 4 Spalten, 10 px Gutter:
  S = (375 – 3*10) : 4 = (375 – 30) : 4 = 345 : 4 = 86,25 px

Praxisbeispiel 1: Desktop-Webseite mit 12-Spalten-Raster

• Gesamtbreite (W): 1440 px
• Spaltenanzahl (n): 12
• Gutter (g): 24 px

Berechnung Spaltenbreite (S):
S = (1440 – (12 – 1) * 24) : 12
S = (1440 – 11 * 24) : 12
S = (1440 – 264) : 12 = 1176 : 12 = 98 px

Ergebnis: Jede Spalte ist 98 px breit, die Abstände dazwischen 24 px.

Praxisbeispiel 2: Tablet-Layout mit 8-Spalten-Raster

• Gesamtbreite (W): 1024 px
• Spaltenanzahl (n): 8
• Gutter (g): 16 px

Berechnung:
S = (1024 – (8 – 1) * 16) : 8
S = (1024 – 7 * 16) : 8
S = (1024 – 112) : 8 = 912 : 8 = 114 px

Praxisbeispiel 3: Mobile Layout mit 4-Spalten-Raster

• Gesamtbreite (W): 375 px
• Spaltenanzahl (n): 4
• Gutter (g): 12 px

Berechnung:
S = (375 – (4 – 1) * 12) : 4
S = (375 – 3 * 12) : 4
S = (375 – 36) : 4 = 339 : 4 = 84,75 px

Praxisbeispiel 4: Bildschirmhöhe nach Proportion 16:9 berechnen

• Breite (W): 1280 px

Berechnung Höhe (H):
H = W * (9 : 16) = 1280 * 0,5625 = 720 px

Praxisbeispiel 5: Flexible Breite mit Prozentangabe

• Ein Container ist 80 % der Fensterbreite. Die Fensterbreite ist 1440 px.

Berechnung:
Containerbreite = 1440 px * 0,8 = 1152 px

Praxisbeispiel 6: Responsive Gutter bei kleinerem Screen

• Desktop: Gutter 24 px
• Mobile: Gutter soll 12 px sein

Angenommen, Desktopbreite 1440 px (12 Spalten), Mobilebreite 375 px (4 Spalten).

Desktop Spaltenbreite:
S = (1440 – 11 * 24) : 12 = 1176 : 12 = 98 px

Mobile Spaltenbreite:
S = (375 – 3 * 12) : 4 = 339 : 4 = 84,75 px

Praxisbeispiel 7: Padding und Margin in REM berechnen

• Grundschriftgröße: 16 px
• Padding soll 1,5 REM sein

Berechnung:
Padding = 1,5 * 16 px = 24 px