review-web-designBewertet Webdesign auf Layoutqualitaet, Typografie, Farbverwendung, Abstaende, Responsive-Verhalten, Markenkonsistenz und visuelle Hierarchie. Umfasst die Bewertung von Gestaltungsprinzipien und Verbesserungsempfehlungen. Verwenden beim Review eines Design-Mockups vor der Entwicklung, bei der Einschaetzung einer implementierten Website auf Designqualitaet, …
Independent GitHub snapshot · Automated classification · Original documentation governs
Ein Webdesign auf visuelle Qualitaet, Konsistenz und Effektivitaet auf verschiedenen Geraeten bewerten.
Visuelle Hierarchie fuehrt das Auge des Nutzers durch Inhalte nach Wichtigkeit.
## Visuelle-Hierarchie-Bewertung
| Seite/Abschnitt | Blickfang | Hierarchie klar? | Probleme |
|-------------|-------------|-----------------|--------|
| Startseite | Hero-Abschnitt CTA | Ja | Sekundaerer CTA konkurriert mit primaarem |
| Produktseite | Produktbild | Groesstenteils | Preis nicht prominent genug |
| Kontaktformular | Absenden-Button | Nein | Formulartitel gleich gross wie Fliesstext |
Erwartet: Jede wesentliche Seite/jeder Abschnitt auf klare visuelle Hierarchie bewertet. Bei Fehler: Wenn Mockups nicht verfuegbar sind, anhand von Live-Code mit Browser-Entwicklertools bewerten.
/* Example well-structured type scale (1.25 ratio) */
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39.06px */
}
Erwartet: Typografie auf Konsistenz, Lesbarkeit und Hierarchie bewertet. Bei Fehler: Wenn das Design mehr als 3 Schriftfamilien verwendet, Konsolidierung empfehlen.
## Farbbewertung
| Verwendung | Farbe | Kontrastverhaeltnis | WCAG AA | Anmerkungen |
|-------|--------|----------------|---------|-------|
| Fliesstext auf Weiss | #333333 | 12,6:1 | Bestanden | Gut |
| Linktext auf Weiss | #2563eb | 5,2:1 | Bestanden | Gut |
| Gedaempfter Text auf Hellgrau | #9ca3af auf #f3f4f6 | 2,1:1 | NICHT BESTANDEN | Kontrast erhoehen |
| CTA-Schaltflaeche Text | #ffffff auf #22c55e | 3,1:1 | NICHT BESTANDEN fuer kleinen Text | Dunkleres Gruen oder groesseren Text verwenden |
Erwartet: Farbpalette auf Kohaerenz, Zugaenglichkeit und semantische Konsistenz reviewt. Bei Fehler: Kontrastpruef-Tool (WebAIM) fuer exakte Verhaeltnisse verwenden.
Abstandsaudit:
## Abstands-Konsistenz-Prüfung
| Elementpaar | Erwarteter Abstand | Tatsaechlicher Abstand | Konsistent? |
|-------------|-------------|------------|-------------|
| Abschnittstitel bis Inhalt | 24px | 24px | Ja |
| Karte zu Karte | 16px | 16px/24px | Nein — inkonsistent |
| Formular-Label bis Eingabe | 8px | 4px/8px/12px | Nein — variiert |
Erwartet: Layout verwendet ein systematisches Raster und eine Abstandsskala konsistent.
Bei Fehler: Wenn Abstaende inkonsistent sind, Einfuehrung einer Abstandsskala empfehlen (z. B. Tailwinds space-*).
Ueber wichtige Breakpoints testen:
| Breakpoint | Breite | Repraesentiert |
|---|---|---|
| Mobil | 375px | iPhone SE / kleine Smartphones |
| Mobil L | 428px | iPhone 14 / grosse Smartphones |
| Tablet | 768px | iPad Hochformat |
| Desktop | 1280px | Standard-Laptop |
| Breit | 1536px+ | Desktop-Monitor |
An jedem Breakpoint pruefen:
## Responsive-Review
| Breakpoint | Layout | Touch-Ziele | Text | Bilder | Navigation | Probleme |
|-----------|--------|---------------|------|--------|------------|--------|
| 375px | OK | OK | OK | Ueberlauf im Hero | Hamburger | Hero-Bild wird abgeschnitten |
| 768px | OK | OK | OK | OK | Hamburger | Keine |
| 1280px | OK | N/A | OK | OK | Volle Navigation | Keine |
| 1536px | OK | N/A | Zeilenlaenge zu gross | OK | Volle Navigation | max-width zum Inhalt hinzufuegen |
Erwartet: Design an allen wichtigen Breakpoints getestet mit dokumentierten Problemen. Bei Fehler: Wenn Responsive-Testing-Tools nicht verfuegbar sind, CSS-Media-Queries auf Abdeckung ueberpruefen.
Erwartet: Markenelemente gegen Richtlinien verifiziert mit spezifisch vermerkten Abweichungen. Bei Fehler: Wenn keine Markenrichtlinien vorhanden sind, dies als Empfehlung vermerken und stattdessen interne Konsistenz bewerten.
## Webdesign-Review
### Gesamteindruck
[2-3 Saetze: Gesamtqualitaet, staerkste und schwaechste Aspekte]
### Visuelle Hierarchie: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Typografie: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Farbe: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Layout & Abstaende: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Responsive Design: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Markenkonsistenz: [Bewertung/5]
[Wichtigste Befunde mit spezifischen Referenzen]
### Prioritaere Verbesserungen
1. [Wirkungsvollste Aenderung — spezifisch und umsetzbar]
2. [Zweite Prioritaet]
3. [Dritte Prioritaet]
### Positive Anmerkungen
1. [Was gut funktioniert und erhalten werden sollte]
Erwartet: Review liefert spezifisches, visuell referenziertes Feedback mit priorisierten Verbesserungen. Bei Fehler: Wenn Bewertungen beliebig erscheinen, stattdessen ein einfacheres Bestanden/Bedenken/Nicht-bestanden-System verwenden.
review-ux-ui — Usability-, Interaktionsmuster- und Zugaenglichkeitsreview (ergaenzend zum visuellen Design)setup-tailwind-typescript — Tailwind CSS Implementierung fuer Design-Systemescaffold-nextjs-app — Next.js-Anwendungs-Scaffolding