Was macht Seiten-Layout gestalten?
Überblick
Die meisten Seiten scheitern am Rhythmus, nicht an den Ideen. Die Typografie ist in Ordnung, die Farben sind in Ordnung, und trotzdem sieht es nach einer Vorlage aus, weil die vertikalen Abstände Abschnitt für Abschnitt festgelegt wurden und nichts aufeinander ausgerichtet ist.
Kernprinzip: Wähle eine Abstandsskala, eine Schriftgrößenskala und ein Abschnittssystem, bevor du irgendetwas stylst, und führe niemals einen Wert ein, der nicht auf diesen Skalen basiert.
Das Abschnittssystem
Inhaltsabschnitte teilen eine Handvoll Werte. Pinned-Szenen sind die Ausnahme.
| Teil | Regel |
|---|---|
| Abschnittstitel | eine Größe für jeden Inhaltsabschnitt (z. B. 48 auf dem Desktop, 38 auf Smartphones) |
| Linke Kante | eine Kante, gleich der Navigationslogo-Kante. Eine höhenangepasste Skala verschiebt die Kante, also miss sie |
| Label | ein Pill-Stil über dem Titel |
| Karte | ein Radius, eine Haarlinie, ein Farbton. Niemals Rahmen plus Schatten plus Füllung |
| Endkarte | der Titel in den Grid-Zeilen, die Buttons in der nächsten Zeile, kein zusätzlicher Satz |
Pinned- und Scrubbed-Szenen behalten ihre eigenen Bühnenmaße. Sie sind von Natur aus viewport-hoch, und ihr Leerraum ist Scroll-Landebahn. Verkleinere keine Pinned-Bühne, ohne jede Position, die ein Prozentsatz davon ist, neu zu verankern.
Eine Seite, bei der jeder Abschnitt seine eigene Titelgröße, seine eigene linke Kante und seine eigene Karte hat, wirkt zusammengewürfelt. Diese Tabelle verhindert das.
Abstandsrhythmus
Entscheide dich einmal für die Skala. Eine 4-Px-Basis mit einer geometrischen Rampe deckt alles ab:
0.4 0.8 1.6 2.4 3.2 4.8 6.4 8 12 16 rem
Treibe den gesamten Abschnittsabstand über zwei Token, --sec zwischen Abschnitten und --blk zwischen Blöcken innerhalb eines Abschnitts. Eine lockere Seite zu straffen bedeutet, zwei Zahlen zu ändern, nicht vierzig. Auf einer Seite haben 48 und 40 Einheiten auf dem Desktop und 36 und 28 auf Smartphones das Dokument um etwa 10 % reduziert.
Elementgrößen ändern sich nicht, wenn du den Rhythmus straffst. Karten, Typografie, Logos, Buttons: Behalte sie bei, wie sie entworfen wurden. Vergleiche die Komponentengrößen zwischen dem alten Build und dem neuen, um das zu beweisen.
Abschnittspadding ist der Punkt, an dem Seiten auseinanderfallen. Prüfe jeden Übergang, nicht jeden Abschnitt:
| Übergang | Gesamtabstand | Wirkt wie |
|---|---|---|
| Zwei unabhängige Abschnitte | 200-240px | getrennte Kapitel |
| Ein Block, der den darüber fortsetzt | 40-80px | ein Kapitel, zwei Teile |
| Randloser Mediainhalt, der auf einen Abschnitt trifft | 0 | ein Schnitt |
Miss die Summe aus padding-bottom des oberen Abschnitts und padding-top des unteren Abschnitts. Eine Seite mit 120/60, 64/20, 24/0 und 0/120 erzeugt Lücken von 180, 84, 24 und 120 ohne Logik. Der Leser empfindet es als Schlamperei, ohne es benennen zu können.
Ein Abstand von über ~240px auf einem einfarbigen Hintergrund braucht etwas darin. Entweder straffe ihn oder setze einen CTA hinein.
Der erste Bildschirm
Bemesse den Hero so, dass der nächste Streifen auf dem ersten Bildschirm sichtbar ist. clamp(620, 100svh - 150, 900) Einheiten platzieren den Beweisstreifen nach einem Scrollen in Sicht. Ein Hero, der den Viewport ausfüllt und nichts darunter zeigt, verbirgt den Beweis, auf den die Seite angewiesen ist.
Gemeinsame Komponenten gehören zur Website
Eine Navigation, ein Footer oder ein Button, die auf der Live-Website existieren, sind das Design. Gestalte sie auf einer neuen Seite nicht neu. Wenn es auf der neuen Seite anders aussieht, liegt die Ursache fast immer an einem Seiten-Override. Vergleiche berechnete Styles mit der Live-Website und entferne das Override, begrenzt auf den Breakpoint, an dem es durchsickert.
Schriftgrößenskala
Maximal zwei Schriftfamilien: eine Display-Schrift, eine Text-Schrift. Zahlen in einer Display-Schrift wirken wie gestaltet; Zahlen in einer einfachen Text-Schrift wirken wie Daten.
Setze immer font-variant-numeric: lining-nums tabular-nums auf jede Zahl, die in einer Reihe mit anderen Zahlen steht. Ohne diese Einstellung werden "3.000" und "500.000+" nicht ausgerichtet sein, und du wirst nicht wissen, warum.
Negativer Buchstabenabstand skaliert mit der Größe: ungefähr -0.02em bei Display-Größen, 0 bei Text, positiv 0.08em bei Großbuchstaben-Brauen.
Stimme die Schriftbreiten exakt mit dem Design ab. Siehe extracting-figma-truth für die optische Größenfalle.
Karten und Raster
Der mit Abstand häufigste Kartenfehler ist ungleichmäßiger Inhalt, der zu ungleichmäßigen Karten führt.
| Vorher | Nachher | Warum |
|---|---|---|
.card { padding: 2rem } in einem Grid | füge align-items: stretch auf dem Grid und height: 100% auf der Karte hinzu | sonst sind Karten so hoch wie ihr eigener Inhalt |
| Inhalt fließt von oben nach unten | margin-top: auto auf dem Element, das unten sitzen muss | fixiert die Metrik oder den CTA auf einer gemeinsamen Grundlinie über alle Karten hinweg |
| Label umbricht in einer Karte auf 1 Zeile, in einer anderen auf 2 | min-height gleich 2 Zeilen auf dem Label | hält die Grundlinie jeder Karte identisch |
<img> mit intrinsischer Größe | Wrapper mit aspect-ratio + object-fit: cover auf dem Bild | ein Raster mit gemischten Bildseitenverhältnissen ist kein Raster |
| Graue Füllung hinter Karten | weiß mit einem 1px Haarlinie | Füllungen wirken wie Platzhalter, Haarlinien wirken wie gestaltet |
Statistik- und Zahlenblöcke
Ein Zahlenblock hat drei Teile in einer festen Reihenfolge: Quelle oder Label oben, Zahl, Bildunterschrift unten. Die Zahl ist das größte Element im Block, und jede Zahl in der Reihe teilt eine Grundlinie.
- Setze niemals eine Nicht-Zahl in einen Zahlenplatz. "Creative Ops" in einer Reihe mit "150+" und "3.000" wirkt wie ein Fehler. Finde entweder die Zahl oder verschiebe diese Tatsache in den Fließtext.
- Eine Zahl, die auf zwei Zeilen umbricht, zerstört die Reihe. "6 Wochen bis 24 Stunden" wird zu "24h" mit dem Rest in der Bildunterschrift.
- Begrenze die Bildunterschrift auf zwei Zeilen. Wenn sie drei braucht, macht die Bildunterschrift die Arbeit der Zahl.
Logostreifen
Logos werden nach optischem Gewicht dimensioniert, niemals nach der Begrenzungsbox. Ein gestapeltes Layout, ein quadratisches Abzeichen und eine einzeilige Wortmarke, die auf dieselbe CSS-Höhe gesetzt sind, werden auf drei verschiedene Arten falsch aussehen.
Beginne mit: gestapeltes Layout 44px, quadratisches Abzeichen 40px, Wortmarke 22px, dann passe nach Augenmaß an. Normalisiere jedes Zeichen auf eine Tintenfarbe. Gemischte Logofarben lassen einen Streifen zusammengeklaubt wirken. Nur freigestellte Logos kommen in einen Streifen (siehe writing-claims-that-hold).
Gemeinsames CSS und Smartphone-Überlauf
Eine für eine Desktop-Komponente geschriebene Breitenregel, wie width: 37rem !important, kann das gesamte Dokument breiter als ein Smartphone machen (428 gegenüber 390). Das Symptom ist ein weißer Streifen am rechten Rand. Überprüfe scrollWidth gegen clientWidth bei 390 und begrenze feste Breiten auf die Breakpoints, für die sie entworfen wurden.
Die Anzeichen einer schablonenhaften Seite
- Jeder Abschnitt ist zentriert
- Abschnittspaddings sind alle
120pxunabhängig von der Beziehung - Karten haben sowohl einen Rahmen als auch einen Schatten und eine Füllung
- Überschriften sind in der Textschrift mit einer fetteren Strichstärke gesetzt
- Zahlen sind in der Textschrift gesetzt
- Zwei Akzentfarben, von denen keine die Markenfarbe ist
border-radius-Werte von 4, 8, 12 und 16 alle auf einer Seite
Checkliste
- Jeder Abstandswert liegt auf der Skala; Abschnitte laufen über zwei Token
- Jeder Abschnittsübergangsabstand ist bewusst gewählt und fällt in eines der drei Bänder
- Eine Titelgröße, eine linke Kante, ein Label, ein Kartenstil über Inhaltsabschnitte hinweg
- Der nächste Streifen ist auf dem ersten Bildschirm sichtbar
- Gemeinsame Komponenten stimmen mit den berechneten Styles der Live-Website überein
- Karten in einem Raster haben die gleiche Höhe, mit einer gemeinsamen internen Grundlinie
- Alle Medien in einem Raster teilen sich ein
aspect-ratio - Zahlen verwenden tabellarische Versalziffern
- Logos sind optisch dimensioniert und haben eine Tintenfarbe
- Kein horizontaler Überlauf bei 390
- Keine Lücke über 240px, die nichts enthält