Wensity Layout
Layout bestimmt, wie eine Seite Menschen zeigt, was wichtig ist und was zusammengehört – noch bevor sie ein Wort lesen. Gutes Layout entsteht aus drei Gewohnheiten: einer festen Abstandsskala, Gruppierung durch Abstand und einem einheitlichen Ausrichtungssystem. Dieser Skill richtet alle drei ein und behandelt die responsive Struktur.
Wenn das Projekt bereits eine Abstandsskala und Container-Breiten hat, verwende sie.
1. Die Abstandsskala
Verwende eine 4px-Basis. Jeder Margin, jedes Padding und jeder Gap stammt aus dieser Liste:
| Token | px | Typische Verwendung |
|---|---|---|
| 1 | 4 | Symbol zu Beschriftung, enge Inline-Abstände |
| 2 | 8 | Innerhalb eines Steuerelements, zwischen einer Beschriftung und ihrer Eingabe |
| 3 | 12 | Zwischen Elementen in einer dichten Liste, Button-Padding y |
| 4 | 16 | Karten-Padding (kompakt), Abstand zwischen verwandten Steuerelementen, Seitenrand auf Mobilgeräten |
| 5 | 20 | Button-Padding x (groß) |
| 6 | 24 | Karten-Padding, Abstand zwischen Formularfeldern |
| 8 | 32 | Zwischen Gruppen innerhalb eines Abschnitts |
| 10 | 40 | Zwischen einer Abschnittsüberschrift und ihrem Inhalt (groß) |
| 12 | 48 | Abschnitts-Padding auf Mobilgeräten |
| 16 | 64 | Zwischen Abschnitten in einer App, Abschnitts-Padding auf Tablets |
| 20 | 80 | |
| 24 | 96 | Abschnitts-Padding auf Desktop-Marketingseiten |
| 32 | 128 | Hero-Padding, der Raum um eine große Aussage |
Tailwinds Standardskala folgt bereits einer 4px-Basis (p-4 ist 16px), verwende also ihre Schritte und erfinde keine p-[13px]. Ungerade Werte sind nur für optische Korrekturen erlaubt, die du im Render überprüft hast (ein Symbol, das um 1px daneben aussieht).
2. Gruppierung durch Abstand
Die wichtigste Layout-Regel überhaupt: Der Abstand innerhalb einer Gruppe ist kleiner als der Abstand zwischen Gruppen. Eine Beschriftung sitzt 8px von ihrer Eingabe entfernt; das nächste Feld sitzt 24px entfernt. Der Titel einer Karte sitzt 8px über ihrem Text; die nächste Karte sitzt 24px entfernt. Wenn innere und äußere Abstände gleich sind, schwebt alles auseinander und nichts wird als Gruppe wahrgenommen.
- Strebe ein Verhältnis von etwa 1 zu 2 oder 1 zu 3 zwischen inneren und äußeren Abständen an.
- Mehr Abstand oberhalb einer Überschrift als darunter. Die Überschrift gehört zum Inhalt danach. Typisch: 48px über einer Abschnittsüberschrift, 16px darunter.
- Abstände vor Boxen. Gruppiere zuerst durch Abstand. Füge einen Rahmen, einen Trenner oder einen Hintergrund nur hinzu, wenn der Abstand nicht ausreicht (dichte Tabellen, Symbolleisten, Inhalte auf unruhigen Hintergründen). Eine Box um jede Gruppe macht eine Seite schwer.
- Verwende
gapfür Geschwisterelemente (flex gap-4,grid gap-6) anstelle von Margins auf Kindern. Das hält die Abstände an einer Stelle und vermeidet unerwünschte Margins an den Enden einer Liste.
3. Rhythmus, nicht Gleichförmigkeit
Eine Seite, bei der jeder Abschnitt 96px Padding, eine zentrierte Überschrift und ein Raster mit drei Elementen hat, hat keinen Rhythmus. Variiere die Dichte bewusst:
- Wechsle zwischen dichten Abschnitten (Feature-Raster, Tabellen, Logos) und offenen Abschnitten (eine Aussage, ein großes Bild).
- Lass wichtige Abschnitte mehr Platz einnehmen. Platz ist, wie du Aufmerksamkeit verteilst.
- Wiederhole ein Layout nur, wenn der Inhalt wirklich die gleiche Art von Sache ist.
4. Ausrichtung
- Eine Startkante. Überschriften, Absätze, Buttons und Bilder in einem Abschnitt teilen sich dieselbe Startlinie. Die meisten „Irgendwas sieht komisch aus“-Beschwerden sind zwei Startkanten, die ein paar Pixel auseinander liegen.
- Standardmäßig am Anfang ausrichten (
text-align: start, was auf Deutsch links und auf Arabisch oder Hebräisch rechts ist). Zentriere nur kurze, eigenständige Inhalte: eine Hero-Überschrift, einen einzelnen CTA-Block, einen leeren Zustand. Formulare, Tabellen, Listen und langer Text werden am Anfang ausgerichtet. - Zahlen am Ende ausrichten in Tabellen und Statistikspalten.
- Am Text ausrichten, nicht an Boxen. Ein Symbol neben einer Beschriftung wird an der Versalhöhe oder der Mitte der Beschriftung ausgerichtet, nicht am oberen Rand der Zeilenbox. In Flex-Zeilen:
items-centerfür einzelne Zeilen;items-startplus einen kleinen oberen Margin am Symbol für mehrzeiligen Text. - Optische Anpassungen: Play-Symbole, Pfeile und runde Formen sehen in der Mitte falsch aus, wenn sie mathematisch zentriert sind. Korrigiere nach dem Ansehen um 1 bis 2px.
5. Container und Breiten
| Container | Max-Breite | Verwendung |
|---|---|---|
| Prosa | 65ch (ca. 640 bis 720px) | Artikel, Dokumentation, lange Absätze |
| Schmal | 560 bis 640px | Formulare, Anmeldung, fokussierte Aufgaben, eine zentrierte Hero-Aussage |
| Inhalt | 1120 bis 1280px | die meisten Marketing-Abschnitte und App-Seiten |
| Breit | 1440 bis 1600px | Dashboards, Galerien, Editoren |
| Vollbreit | 100% | Hintergründe, Bilder, Produktaufnahmen, die die Ränder berühren sollen |
- Seitenrand: 16px auf Smartphones, 24px auf Tablets, 32 bis 48px auf Desktops. Bleibe konsistent: ein Randwert pro Breakpoint für die gesamte Website.
- Hintergrund von Inhaltsbreite trennen. Der Hintergrund eines Abschnitts kann vollbreit laufen, während sein Inhalt im Inhaltscontainer bleibt.
- Lass Text auf breiten Bildschirmen nicht vollbreit laufen. Bilder und Raster können wachsen; Absätze nicht.
6. Raster
- 12 Spalten für Marketing-Layouts geben dir Hälften, Drittel, Viertel und asymmetrische Aufteilungen (7 und 5, 8 und 4). Asymmetrische Aufteilungen wirken durchdachter als 6 und 6.
- Auto-füllende Raster für Karten, damit die Spaltenanzahl dem Platz folgt:
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
Das min(100%, 280px) verhindert Überlauf auf Bildschirmen, die schmaler als 280px sind. auto-fill hält die Kartenbreite stabil, wenn es nur eine oder zwei Karten gibt; auto-fit dehnt die wenigen Karten aus, um die Zeile zu füllen. Wähle bewusst.
- Lass flexible Spuren schrumpfen. Raster- und Flex-Kinder weigern sich standardmäßig, unter ihre Inhaltsgröße zu schrumpfen, weshalb langer Text oder eine breite Tabelle ein Dashboard zum Überlaufen bringt. Verwende
minmax(0, 1fr)für flexible Spuren undmin-width: 0(Tailwindmin-w-0) auf Flex-Kindern, die Text enthalten:
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.row > .text { min-width: 0; }
- Gleiche Höhen nur für gleiche Inhalte. Karten in einer Zeile werden standardmäßig im Raster auf die höchste gedehnt. Gut für eine Reihe von Tarifen; falsch, wenn eine Karte eindeutig die hervorgehobene ist.
- Bento-Raster: Variiere die Kachelgrößen nach Wichtigkeit, behalte einen einheitlichen Gap-Wert und gib jeder Kachel einen echten Inhalt. Leere dekorative Kacheln sehen aus wie eine Vorlage.
- Verwende Subgrid (
grid-template-rows: subgrid), wenn Karten in einer Zeile ihre Titel, Texte und Buttons aneinander ausrichten müssen.
7. Responsive Struktur
Gestalte zuerst für Mobilgeräte, füge dann Struktur hinzu, wenn der Platz wächst.
- Breakpoints folgen dem Inhalt, nicht Geräten. Füge einen hinzu, wo das Layout anfängt, falsch auszusehen. Tailwinds
sm 640,md 768,lg 1024,xl 1280sind gute Standardwerte. - Strukturiere um, schrumpfe nicht nur. Auf Mobilgeräten wird ein dreispaltiges Feature-Raster zu einer Spalte, Text und Bild nebeneinander werden gestapelt (das Bild an zweiter Stelle, oder an erster, wenn es die Botschaft trägt), eine Tabelle wird zu einer Liste von Karten oder scrollt horizontal in ihrem eigenen Container, eine Seitenleiste wird zu einem Drawer.
- Container Queries für Komponenten, die in unterschiedlichen Breiten vorkommen (eine Karte in einer Seitenleiste und in einer Hauptspalte):
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }
In Tailwind v4: @container auf dem Elternelement und @md:grid-cols-2 auf dem Kind.
- Abstände mit dem Bildschirm skalieren. Abschnitts-Padding: 48px mobil, 64px Tablet, 96px Desktop. Gaps können von 16 auf 24 auf 32 steigen.
- Viewport-Höhe: Verwende
min-h-dvh(oder100dvh), nichth-screen(100vh), für vollständige Layouts.100vhist auf mobilen Browsern mit einer Symbolleiste größer als der sichtbare Bereich, sodass Inhalt darunter versteckt wird. - Safe Areas auf Smartphones mit Notch:
padding-bottom: env(safe-area-inset-bottom)auf festen unteren Leisten, mitviewport-fit=coverim Viewport-Meta-Tag. - Rechts-nach-links-Sprachen: Verwende logische Eigenschaften (
margin-inline-start,padding-inline,inset-inline-end; Tailwindms-*,pe-*,start-*) anstelle von links und rechts, und teste mitdir="rtl". Spiegele richtungsabhängige Symbole (Zurück-Pfeile, Chevrons), nicht Logos oder jedes Symbol. - Kein horizontales Seiten-Scrollen, niemals. Überprüfe bei 320px. Die üblichen Ursachen sind eine feste Breite, ein langes Wort oder eine lange URL, ein
w-screen-Element (das die Scrollleistenbreite einschließt) oder ein negativer Margin.
8. Tabellen
- Kopfzeile in der Label-Rolle, klebrig (
position: sticky; top: 0), wenn die Tabelle scrollt, auf einer getönten Oberfläche oder mit einem stärkeren unteren Rand. - Zeilenhöhe nach Dichte: 36px kompakt, 44px Standard, 52px bequem. Biete einen Umschalter an, wenn sich die Benutzer unterscheiden.
- Zeilen getrennt durch feine Trennlinien oder durch Zebrastreifen, nicht beides.
- Zahlen am Ende ausgerichtet mit
tabular-nums; Text am Anfang ausgerichtet; Status und Aktionen in den letzten Spalten. - Breite Tabellen auf Mobilgeräten: Horizontal in ihrem eigenen Container scrollen (
overflow-x: auto) mit klebriger erster Spalte, oder zu einer gestapelten Karte pro Zeile wechseln. Lass niemals eine Tabelle die Seite seitlich aufblähen. - Leere, Lade- und Fehlerzustände befinden sich innerhalb des Tabellenrahmens, wobei der Header erhalten bleibt, damit der Benutzer weiß, was erscheinen wird.
9. Dichte
Passe die Dichte an die Nutzungshäufigkeit des Bildschirms an:
- Marketing und Onboarding: offen. Wenige Elemente pro Bildschirm, großzügige Abstände, große Schrift.
- Täglich genutzte App-Bildschirme: kompakt. Zeilen von 36 bis 44px, 8 bis 12px Abstände, 14px Text. Menschen, die einen Bildschirm täglich nutzen, wollen mehr auf einmal sehen.
- Tabellen und Datenwerkzeuge: dicht, mit einem Dichte-Umschalter, wenn sich die Benutzer unterscheiden.
- Mische keine Dichten innerhalb eines Panels.
10. Touch-Ziele und Trefferbereiche
- 44 mal 44px Ziel für alles Antippbare auf Touch-Bildschirmen, selbst wenn das sichtbare Symbol 16px ist. (WCAG 2.2 AA erfordert mindestens 24 mal 24px; 44 ist die bequeme Größe.) Vergrößere den Trefferbereich mit Padding oder mit einem unsichtbaren Pseudoelement, das auf dem Steuerelement zentriert ist, sodass sich das Layout nicht ändert:
.icon-btn { position: relative; }
.icon-btn::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: max(100%, 44px);
transform: translate(-50%, -50%);
}
- Mindestens 8px zwischen separaten Touch-Zielen, damit ein Daumen nicht zwei trifft.
11. Überlagerung
Behalte eine kleine Z-Index-Skala bei und verwende nur diese Werte:
:root { --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; }
Natives <dialog>, geöffnet mit showModal(), und Elemente mit dem popover-Attribut werden in der obersten Ebene des Browsers gerendert, über jedem Z-Index, und benötigen daher keinen. z-index: 9999 bedeutet, dass die Stapelung nicht verstanden wird. Korrigiere den Stapelkontext (oft ein irreführendes transform, filter oder isolation auf einem Elternteil), anstatt die Zahl zu erhöhen.
12. Klebrige und feste Elemente
- Klebrige Header: Halte sie kurz (56 bis 64px) und gib ihnen einen Hintergrund (durchgehend oder unscharf) erst, wenn die Seite darunter scrollt, damit der obere Teil der Seite sauber bleibt.
- Füge
scroll-margin-topin Höhe der Header-Höhe bei Ankerüberschriften hinzu, damit In-Page-Links nicht unter dem Header landen. - Feste untere Leisten auf Mobilgeräten benötigen das Safe-Area-Padding oben und dürfen den letzten Inhalt auf der Seite nicht verdecken; polstere den unteren Seitenrand um die Höhe der Leiste.
13. Überprüfe, bevor du fertig bist
- Jeder Abstandswert liegt auf der 4px-Skala.
- Der Abstand innerhalb von Gruppen ist deutlich kleiner als der Abstand zwischen ihnen.
- Mehr Abstand oberhalb von Überschriften als darunter.
- Eine Startkante pro Abschnitt; Zahlen in Tabellen am Ende ausgerichtet.
- Flexible Spuren verwenden
minmax(0, 1fr); Text-Kinder können schrumpfen. - Absätze auf etwa 65ch begrenzt, auch auf breiten Bildschirmen.
- Layout wird auf Mobilgeräten umstrukturiert, nicht nur geschrumpft.
- Kein horizontales Scrollen bei 320px; vollständige Abschnitte verwenden
dvh. - Touch-Ziele mindestens 44px (niemals unter 24px).
- Z-Index-Werte stammen aus der Skala.
- Schieltest: Das Wichtigste und die Gruppen sind klar erkennbar, wenn die Details unscharf sind.