Was macht Seitendesign-Reviewing?
Überblick
Ein Design-Review, das "sieht gut aus" meldet, ist wertlos. Ein nützliches Review benennt das Element, den gemessenen Wert und was er sein sollte.
Grundprinzip: Jeder Befund trägt eine Zahl oder einen Selektor. Keine Adjektive ohne Belege, und was du nicht überprüfen konntest, wird ausgesprochen.
Reihenfolge der Durchgänge
Führe sie in dieser Reihenfolge aus. Spätere Durchgänge sind verschwendet, wenn ein früherer fehlschlägt.
- Struktur: Gibt es jeden Abschnitt in der vorgesehenen Reihenfolge, mit gebundenem Inhalt?
- Rhythmus: Abschnittsübergangslücken, Rasterausrichtung, Kartenhöhen, das Abschnittssystem
- Responsive: Die folgende Fenstermatrix, Mobil und Desktop
- Typografie und Farbe: Kontrast, Hierarchie, Hurenkinder, Überlauf, Textbreiten gemäß Design
- Bewegung: Siehe
animating-web-pagesundchoreographing-scroll-stories - Behauptungen und Inhalt: Siehe
writing-claims-that-hold - Barrierefreiheit und Performance: Fokus, Alternativtext, LCP, Layout-Shift
Die Fenstermatrix
Teste die Breiten, die die Seite überstehen muss, nicht eine repräsentative. Ein Satz, der bei einem echten Launch standhielt: Desktop bei 1024, 1280, 1440, 1920 und 2560, und Telefone bei 320, 360, 390 und 430.
| Breite | Achte auf |
|---|---|
| 1440 | Zeilenlängen über ~75 Zeichen, Abschnitte, die sich zentrieren, wenn sie es nicht sollten |
| 992 | Dreispaltige Raster, die zweispaltig sein sollten, klebrige Elemente ohne Bewegungsmöglichkeit |
| 768 | Der Tablet-Block, den niemand geschrieben hat, sodass Desktop-Werte bei halber Breite gelten |
| 390 | Randlos fließende Medien, die ihr Motiv nicht mehr einfangen, dunkler Text auf dunklem Hintergrund, horizontaler Überlauf |
| 320 | Das kleinste Telefon: umgebrochene Überschriften, abgeschnittene Buttons |
| 2560 | Weiche Bilder auf einem Retina-Bildschirm, verlorener Inhalt in der Mitte einer breiten Leinwand |
Der nennenswerte Mobilfehler: ein vollflächiger Hero, dessen Medium nur ca. 55 % des Abschnitts einnimmt, zeigt den Abschnittshintergrund im Rest. Wenn der Abschnittshintergrund dunkel ist und der Text auf ein helles Farbschema gewechselt hat, werden Text und Buttons unsichtbar. Überprüfe beide Farbschemazustände bei 390.
Messen, nicht blinzeln
Lies Werte aus der Live-Seite aus, anstatt sie anhand eines Screenshots zu beurteilen. Das ist schneller, erfasst Dinge, die dem Auge entgehen, und funktioniert, wenn kein Rendering verfügbar ist.
// Abschnittsrythmus: Die relevante Lücke ist die SUMME an jeder Verbindungsstelle
[...document.querySelectorAll('section')].map(s => {
const c = getComputedStyle(s);
return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
padT: c.paddingTop, padB: c.paddingBottom };
});
// Überlauf, der häufigste unsichtbare Fehler
[...document.querySelectorAll('*')]
.filter(e => e.scrollWidth > e.clientWidth + 1)
.map(e => e.className);
// Horizontaler Seitenüberlauf
document.documentElement.scrollWidth > document.documentElement.clientWidth;
// Kartengleichheit innerhalb eines Rasters
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));
tools/page-measure.js in diesem Repository bündelt diese und die folgenden Prüfungen in einem Snippet.
Weitere messbare Prüfungen, die sich bewährt haben:
- Abschnittssystem: Jeder Titel eines Inhaltsabschnitts hat dieselbe berechnete Schriftgröße; jede linke Kante entspricht der linken Kante des Nav-Logos.
- Schriftgrößen-Minimum: Kein Text unter 10px.
- Genau ein
h1. Überschriftenebenen steigen ab, ohne Stufen zu überspringen. - Bilder: Jedes dekodiert; effektives Pixelverhältnis bei oder unter 1,0 an jeder Scrollposition und jedem Gerätepixelverhältnis.
- Kontrast pro Szene: Jeder Textknoten innerhalb einer angepinnten Szene hat mindestens 3:1 (groß) oder 4,5:1 (Fließtext) gegen seinen ersten durchgehenden Hintergrund, im Endzustand der Szene.
- Hero: Acht Sekunden lang Stichproben ziehen. Scheitern bei einem doppelten Bild, einer Kachel außerhalb des Hero-Rechtecks, einer Überlappung, einer Kachel unter dem Text oder einer Änderung nach dem Einlaufen.
- Scroll-Gefühl: Echte Radeingabe, siehe
choreographing-scroll-stories. - Konsole ist sauber. Skript startet, Einführung läuft, keine ausstehenden Fehler.
Wenn du keinen Screenshot machen kannst
Headless- und versteckte Browser-Fenster pausieren das Rendering, sodass Screenshots leer zurückkommen, während das DOM völlig in Ordnung ist. Das ist kein Grund, das Review auszulassen, und kein Grund, den Benutzer zu bitten, für dich zu prüfen.
Überprüfe stattdessen numerisch: berechnete Styles, Begrenzungsrahmen, scrollWidth, Asset-Fetch-Status
und Inhaltstyp. Gib in deinem Bericht klar an, welche Befunde gemessen und welche gesehen wurden.
Inhalt und Behauptungen
Ein Design-Review umfasst, was die Seite sagt.
- Jede Statistik ist belegt, und die Quelle ist für Werbezwecke freigegeben
- Kundenlogos befinden sich auf der freigegebenen Liste, nicht nur „Logos, die wir haben“
- Alternativtext beschreibt das Bild, ist nicht der Dateiname und ist bei aussagekräftigen Bildern nicht leer
- Kein Platzhaltertext in einer CMS-Liste; keine leere Karte hinter einer Animation
- Keine verbotenen Wörter; keine Gedankenstriche, wenn der Hausstil sie verbietet
Barrierefreiheits-Minimum
- Fokusring sichtbar auf jedem interaktiven Element (
:focus-visible, nichtoutline: none) - Fließtext-Kontrast mindestens 4,5:1, großer Text 3:1
- Interaktive Ziele mindestens 44x44 auf Touch-Geräten
- Reduzierte Bewegung beachtet: Die Seite ist vollständig und statisch
- Kein Skript: Alles sichtbar
Performance-Minimum
- Das LCP-Bild ist „eager“, alles andere „lazy“
- Hero-Bild ist etwa 2x seiner CSS-Breite, nicht 4x
- Kein Layout-Shift durch Bilder ohne Abmessungen oder einen
aspect-ratio-Wrapper - Video ist eine 1x- oder Lite-Datei auf Telefonen, mit einem Poster
Wie viel ausgeführt werden soll
Ein Meilenstein bekommt die gesamte Suite. Eine kleine Korrektur bekommt die eine Prüfung, die die Änderung abdeckt, eine Veröffentlichung auf der Staging-Umgebung und einen Bericht. Die gesamte Suite nach jeder kleinen Änderung auszuführen, macht aus einer einzeiligen Korrektur eine Stunde. Wenn jemand „vollständiges QA“ sagt, führe alles aus.
Nach der Korrektur auf Staging veröffentlichen und das Staging testen, nicht nur den lokalen Build. Was ausgeliefert wird, muss überprüft werden.
Überprüfe den Lauf, nicht das Protokoll
Bevor du Zahlen meldest, bestätige, dass der Lauf, der sie erzeugt hat, abgeschlossen ist: Die Statusdatei ist von heute, das Protokoll endet sauber, das Fenster ist das, das du gemeint hast. Ein veralteter Protokollblock von einem früheren Lauf sieht genauso aus wie ein frischer.
Das Tor des kalten Prüfers
Dein eigenes QA teilt deine blinden Flecken. Für einen Meilenstein übergib einem neuen Prüfer, der die Arbeit nie gesehen hat, nur die Artefakte: ganzseitige Screenshots in den Matrixbreiten, das 390-Blatt, die Bewegungsaufnahme und das Behauptungs-Ledger. Messlatte: 8 von 10 in Hierarchie, Rhythmus, Bewegung, Bildsprache und Text. Maximal drei Runden, jede Runde ein neuer Prüfer. Ein Pilot dessen auf einem fertigen Video ergab insgesamt 7 Punkte und fand einen statischen Haken und einen späten Markennamen, den alle unsere eigenen automatisierten Prüfungen übersehen hatten.
Berichtsformat
Eine Tabelle. Schweregrad, Ort, gemessener Wert, Korrektur. Am schwerwiegendsten zuerst.
| Sev | Wo | Gemessen | Fix |
|---|---|---|---|
| Hoch | .hero bei 390 | Medium 500px innerhalb eines 812px-Abschnitts; Textbereich ist #0c0c0c | Abschnittshintergrund pro Farbschema setzen |
| Mittel | Beweis-zu-Info-Übergang | 120 + 120 = 240px leeres Weiß | auf 80 reduzieren oder den CTA dort platzieren |
Schließe ab mit dem, was du überprüft und nicht beanstandet hast, und einer Liste dessen, was du nicht überprüfen konntest (z. B.: „Ich kann kein Audio hören“, „der Entwurf kann nicht in der Produktionsdomäne vorschaut werden“). Ein Review ohne saubere Zeile wirkt eher unvollständig als gründlich.
Rote Flaggen
- „Sieht auf Mobilgeräten gut aus“ ohne genannte Breite
- Eine Korrektur als erledigt melden, ohne sie nachzumessen
- Einen Durchgang überspringen, weil der vorherige sauber war
- Den Benutzer bitten, etwas zu überprüfen, das du messen könntest
- Zahlen aus einem Lauf melden, dessen Abschluss du nicht bestätigt hast
- Die gesamte Suite für eine einzeilige Änderung ausführen