review-web-design

pjt222

Aktualisiert 2 days ago

5 Ansichten

Designdesign

Über

Diese Fähigkeit überprüft die Qualität des Webdesigns durch Bewertung von Layout, Typografie, Farbverwendung, Abständen, responsivem Verhalten, Markenkonsistenz und visueller Hierarchie. Sie liefert Einschätzungen zu Designprinzipien und Verbesserungsempfehlungen. Nutzen Sie sie bei der Überprüfung von Design-Entwürfen vor der Entwicklung, bei der Bewertung implementierter Websites oder während Design-Review-Sitzungen.

Schnellinstallation

Claude Code

Dokumentation

name: review-web-design description: > Bewertet 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, beim Feedback waehrend einer Design-Review-Sitzung, bei der Bewertung der Markenkonsistenz oder beim Pruefen des Responsive-Verhaltens ueber Breakpoints. locale: de source_locale: en source_commit: 6f65f316 translator: claude-opus-4-6 translation_date: 2026-03-16 license: MIT allowed-tools: Read Grep Glob WebFetch metadata: author: Philipp Thoss version: "1.0" domain: review complexity: intermediate language: multi tags: web-design, layout, typography, colour, responsive, visual-hierarchy, branding

Webdesign reviewen

Ein Webdesign auf visuelle Qualitaet, Konsistenz und Effektivitaet auf verschiedenen Geraeten bewerten.

Wann verwenden

Review eines Design-Mockups oder Prototyps vor der Entwicklung
Einschaetzung einer implementierten Website oder Webanwendung auf Designqualitaet
Feedback zum visuellen Design waehrend einer Design-Review-Sitzung
Bewertung der Markenkonsistenz ueber mehrere Seiten oder Abschnitte
Pruefen des Responsive-Design-Verhaltens ueber Breakpoints

Eingaben

Erforderlich: Zu reviewendes Design (URL, Mockup-Dateien, Screenshots oder Quellcode)
Optional: Markenrichtlinien oder Design-System-Dokumentation
Optional: Beschreibung der Zielgruppe
Optional: Referenzdesigns oder Konkurrenzbeispiele
Optional: Spezifische Problembereiche

Vorgehensweise

Schritt 1: Visuelle Hierarchie bewerten

Visuelle Hierarchie fuehrt das Auge des Nutzers durch Inhalte nach Wichtigkeit.

Klarer Blickfang: Gibt es auf jeder Seite/jedem Bildschirm einen offensichtlichen Einstiegspunkt?
Ueberschriften-Hierarchie: Folgen Ueberschriften logisch absteigend (H1 → H2 → H3)?
Groesskkontrast: Sind wichtige Elemente groesser als unterstuetzende Elemente?
Farbkontrast: Sind CTAs und wichtige Aktionen visuell hervorgehoben?
Weissraum: Trennt der Abstand logische Gruppen effektiv?
Lesefluss: Folgt das Layout einem natuerlichen Lesemuster (F-Muster, Z-Muster)?

## 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.

Schritt 2: Typografie bewerten

Schriftauswahl: Sind Schriften fuer Marke und Inhaltstyp geeignet?
Schriftpaarung: Ergaenzen sich Ueberschriften- und Fliesstext-Schriften (max. 2-3 Familien)?
Typo-Skala: Gibt es eine konsistente Skala (z. B. 1,25 Major Second, 1,333 Perfect Fourth)?
Zeilenhoehe: Fliesstext hat 1,4–1,6 Zeilenhoehe; Ueberschriften haben 1,1–1,3
Zeilenlaenge: Fliesstextzeilenlaenge betraegt 45–75 Zeichen (optimal ~66)
Schriftstaerke: Staerkevariationen werden konsistent zur Anzeige von Hierarchie verwendet
Schriftgroesse: Basis-Schriftgroesse betraegt mindestens 16px fuer Fliesstext

/* Beispiel gut strukturierte Typoskala (Verhaeltnis 1,25) */
: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.

Schritt 3: Farbverwendung reviewen

Palettenkohaerenz: Ist die Farbpalette bewusst und begrenzt (typischerweise 3-5 Farben + Neutraltoeone)?
Markenausrichtung: Stimmen Farben mit den Markenrichtlinien ueberein?
Kontrastverhaeltnisse: Text erfuellt WCAG AA (4,5:1 fuer normalen Text, 3:1 fuer grossen Text)
Semantische Farbe: Werden Farben konsistent fuer Bedeutungen verwendet (Rot=Fehler, Gruen=Erfolg)?
Farbenblindheit: Wird Information nicht ausschliesslich durch Farbe uebermittelt?
Dunkel-/Hellmodus: Wenn unterstuetzt, behalten beide Modi Lesbarkeit und Markenkonsistenz bei

## 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.

Schritt 4: Layout und Abstaende bewerten

Rastersystem: Wird ein konsistentes Raster verwendet (12-Spalten, Auto-Layout oder benutzerdefiniert)?
Abstandsskala: Sind Abstaende systematisch (4px/8px Basis oder Tailwind-aehnliche Skala)?
Ausrichtung: Sind Elemente am Raster ausgerichtet (keine "fast ausgerichteten" Elemente)?
Dichte: Ist die Informationsdichte fuer den Inhaltstyp angemessen (datenlastig vs. Marketing)?
Weissraum: Wird Weissraum bewusst zum Gruppieren und Trennen eingesetzt?
Konsistenz: Sind aehnliche Abschnitte identisch beabstandet?

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-*).

Schritt 5: Responsive Design bewerten

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:

Layout-Anpassung: Fliesst das Layout angemessen um (gestapelt auf Mobil, nebeneinander auf Desktop)?
Touch-Ziele: Sind interaktive Elemente auf Mobil mindestens 44x44px gross?
Textlesbarkeit: Ist die Schriftgroesse fuer den Viewport geeignet?
Bildskalierung: Skalieren Bilder ohne Verzerrung oder Ueberlauf?
Navigation: Ist die mobile Navigation zugaenglich (Hamburger-Menu, Bottom-Nav usw.)?
Kein horizontales Scrollen: Inhalte ueberlaufen den Viewport nicht horizontal

## 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.

Schritt 6: Markenkonsistenz pruefen

Logo-Verwendung: Logo korrekt dargestellt (Groesse, Abstand, Schutzzone)
Farbgenauigkeit: Markenfarben stimmen mit Vorgaben ueberein (Hex-Werte, nicht "nah genug")
Typografie-Uebereinstimmung: Schriften entsprechen den Markenrichtlinien
Ton/Stimme: UI-Texte passen zur Markenpersoenlichkeit
Ikonografie: Icons stammen aus einem konsistenten Set (Stil, Staerke, Raster)
Fotografie-Stil: Bilder entsprechen den Markenrichtlinien (falls zutreffend)

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.

Schritt 7: Den Design-Review verfassen

## 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.

Validierung

Visuelle Hierarchie fuer alle wesentlichen Seiten/Abschnitte bewertet
Typografie auf Lesbarkeit, Konsistenz und Skala geprueft
Farbkontrast gegen WCAG-AA-Mindestwerte verifiziert
Layout und Abstaende auf Rasterkonsistenz geprueft
Responsive Design an mindestens 3 Breakpoints getestet
Markenkonsistenz gegen Richtlinien verifiziert (oder interne Konsistenz bewertet)
Feedback ist spezifisch mit visuellen Referenzen (Seite, Abschnitt, Element)

Haeufige Stolperfallen

Subjektiv ohne Begruendung: "Ich mag die Farbe nicht" ist nicht umsetzbar. Erklaeren warum (Kontrast, Markendiskrepanz, Zugaenglichkeit).
Zugaenglichkeit ignorieren: Visuelles Design-Review muss WCAG-Kontrastpruefungen enthalten. Schoene Designs, die Nutzer ausschliessen, sind keine guten Designs.
Nur Mockups reviewen: Responsive-Verhalten, Hover-Zustaende und Uebergaenge testen — nicht nur statische Layouts.
Loesungen vorschreiben: Das Problem beschreiben ("Text ist auf diesem Hintergrund schwer lesbar") statt eine bestimmte Loesung vorzuschreiben ("Verwende #333").
Kontext vergessen: Eine Banken-App und eine Gaming-Site haben unterschiedliche Designstandards. Gegen den angemessenen Kontext reviewen.

GitHub Repository

pjt222/agent-almanac

Pfad: i18n/de/skills/review-web-design

agentsagentskillsai-assisted-developmentclaude-codeskillsteams