Website-Design-Audit: Vergleich mit einer Referenz

Sie haben eine Website, die läuft, und schlecht ist sie auch nicht — aber neben den guten Seiten in Ihrer Branche wirkt sie blass. Fragen Sie nach, woran es hakt, kann es niemand klar benennen. Sie selbst eingeschlossen. In diesem Artikel beschreibe ich eine Methode, die diesen Unterschied in konkrete Punkte übersetzt: Sie vergleichen Ihre Seite mit einer selbst gewählten Referenz und bekommen einen messbaren Differenzbericht.

Die Methode beruht auf dem vergleichenden Audit aus dem Video Turn Claude into a Design Genius... Just Watch von Jack Roberts; dieser Artikel fasst es zusammen und erweitert es. Das Anfrage-Gerüst, die Messtabelle, die Priorisierung und die Grenzen des Audits sind Ergänzungen dieses Beitrags.

Warum sehen Sie das Problem Ihrer eigenen Website nicht?

Das Problem ist nicht das Sehen, sondern das Benennen. Sie merken, dass ein Design gut ist, können aber nicht sagen, warum. Übrig bleiben Sätze wie „Wirkt luftiger“ oder „Sieht professioneller aus“.

In der Arbeit mit KI wird daraus sofort ein Hindernis: Was Sie nicht beschreiben können, kann das Modell nicht reparieren. Auf die Anfrage „Mach es besser“ bekommen Sie zufällige Änderungen, weil es kein Ziel gibt.

Genau das löst ein vergleichendes Audit. Es übersetzt Ihr Bauchgefühl in Zahlen.

Fünf Achsen, auf denen der Unterschied liegt

Das Video vertritt die These, dass sich die Merkmale generischen Designs auf fünf Achsen bündeln. Auch der „unerklärliche“ Unterschied zwischen zwei Websites liegt meist auf einer davon:

• Typografie — Schriftwahl, Laufweite, Zeilenhöhe, Verhältnis von Überschrift zu Fließtext.
• Bildsprache — Foto oder Illustration, selbst erzeugt oder Stock, konsistent oder zusammengewürfelt.
• Hierarchie — wohin das Auge zuerst geht und wohin als Zweites. Auf guten Seiten ist das kein Zufall.
• Farbe — Breite der Palette, Kontrast, wie oft die Akzentfarbe eingesetzt wird.
• Weißraum — Luft zwischen den Elementen, Abstände zwischen Abschnitten, Außenränder.

Die Aufgabe des Audits besteht darin, zwei Seiten auf diesen fünf Achsen nebeneinanderzulegen.

Wie führt man ein vergleichendes Audit durch?

In vier Schritten:

1. Wählen Sie die richtige Referenz. Suchen Sie eine wirklich gut gestaltete Website aus Ihrer eigenen Branche oder mit ähnlicher Zielgruppe. Award-Galerien und Designsystem-Archive sind dafür ideal. Wie Sie Ihr eigenes Designsystem aufbauen, habe ich in den sieben Stufen von Claude Design behandelt. Manche Quellen, etwa das im Video genutzte Archiv, analysieren die Seite und liefern Farbpalette, Typografie-Skala und Design-Variablen gleich mit — das erleichtert den Vergleich erheblich.

2. Geben Sie beide Seiten vor. Nennen Sie die Adresse Ihrer eigenen Website und die der Referenz zusammen. Sagen Sie nicht nur „Verbessere meine Seite“, sondern verlangen Sie einen Vergleich.

3. Verlangen Sie Schonungslosigkeit. Modelle sind standardmäßig höflich. Wenn Sie nicht ausdrücklich sagen „Sei schonungslos, spar dir die Höflichkeit“, bekommen Sie Allgemeinplätze mit Lob vermischt. Wenn Sie diesen schonungslosen Blick von einer einmaligen Anfrage in einen festen Schritt verwandeln wollen, werfen Sie einen Blick auf die Kritiker-Schleife.

4. Verlangen Sie ein konkretes Ergebnis. Was Sie wollen, ist keine Liste mit „Das könntest du verbessern“, sondern Werte nebeneinander. Wie groß ist Ihre Laufweite, wie groß die der Referenz? Wie viele Pixel hat Ihr Eckenradius, wie viele der andere? Den Bericht als kurze, lesbare HTML-Seite anzufordern, macht die Sache leichter.

Wie formulieren Sie die Audit-Anfrage?

Der Aufbau der Anfrage bestimmt direkt die Qualität des Ergebnisses. Ein Gerüst, das funktioniert, hat fünf Teile:

1. Rolle und Ton: „Sieh dir das wie ein Art Director an und sei schonungslos.“ Ohne diesen Satz bekommen Sie eine nette und unbrauchbare Ausgabe.
2. Beide Seiten: Ihre eigene Adresse und die der Referenz, mit klarer Kennzeichnung, welche welche ist.
3. Achsenliste: Typografie, Bildsprache, Hierarchie, Farbe, Weißraum. Lassen Sie das offen, hängt sich das Modell an beliebigen Dingen auf.
4. Ausgabeformat: „Pro Befund: Achse, mein Wert, Wert der Referenz, Auswirkung.“ Wenn Sie keine gemessenen Werte verlangen, bekommen Sie Meinungen.
5. Umfangsgrenze: „Höchstens acht Befunde, nach Wirkung sortiert.“ Ohne Grenze kommt eine Liste mit vierzig Punkten ohne jede Priorisierung.

Punkt vier ist der kritischste. Die Frage „Wie kann ich meine Website verbessern?“ bringt Ihnen allgemeine Ratschläge; die Aufgabe „Miss die Laufweite beider Seiten und schreibe sie nebeneinander“ bringt Ihnen eine Zahl, mit der Sie arbeiten können.

Konkrete Werte für den Vergleich

Das sind die Werte, die das Audit messen soll. Diese Liste können Sie direkt in Ihre Anfrage übernehmen:

Achse	Zu messender Wert
Typografie	Größenverhältnis Überschrift/Fließtext, Zeilenhöhe, Laufweite, Anzahl verwendeter Schriften
Weißraum	Abstand zwischen Abschnitten, Basiswert der Skala, Außenrand
Farbe	Breite der Palette, Kontrastverhältnis Text zu Hintergrund, Einsatzhäufigkeit der Akzentfarbe
Tiefe	Anzahl unterschiedlicher Schattenwerte, Anzahl der Eckenradien
Hierarchie	Anzahl konkurrierender Elemente im oberen Bereich, Anzahl der primären Handlungsaufforderungen

Sobald Sie diese Tabelle ausfüllen lassen, haben Sie nichts mehr zum Diskutieren, sondern eine Liste zum Abarbeiten.

Was ein Audit typischerweise findet

Im Beispiel des Videos vergleicht Roberts die Website von Glido, einem von ihm gegründeten Unternehmen, mit der Website von Linear, und der Bericht findet drei große Lücken:

• Die Laufweite ist zu groß. Besonders in großen Überschriften. Der Bericht zeigt den Unterschied mit einem interaktiven Schieberegler zwischen beiden Werten; schon eine kleine Wertänderung verändert den Eindruck sichtbar.
• Es gibt keine Höhenstaffelung. Schatten und Ebenentiefen sind willkürlich; auf guten Seiten stammen sie aus einer definierten Skala.
• Das Hauptbild konkurriert mit dem Produkt. Die große Grafik im oberen Bereich zieht Aufmerksamkeit, erdrückt aber die eigentliche Botschaft.

Weitere Befunde, die bei solchen Vergleichen häufig auftauchen:

• Die Zeilenhöhe ist zu gering. Der Fließtext wirkt gedrängt, das Lesen wird anstrengend.
• Die Akzentfarbe wird zu häufig eingesetzt. Wenn überall betont wird, ist nirgends betont.
• Die Weißraum-Skala ist inkonsistent. Abstände zwischen Abschnitten bestehen aus unzusammenhängenden Werten wie 40, 56, 72.

Nichts davon verlangt, das Design neu zu machen. Es sind alles Korrekturen auf Wertebene — zusammen können sie aber einen deutlichen Unterschied machen.

Wie priorisieren Sie die Befunde?

Der Bericht fällt meist lang aus, und alles auf einmal umzusetzen, ist falsch. Die Reihenfolge, die ich empfehle:

1. Typografie. Hier ist das Verhältnis von Wirkung zu Aufwand am höchsten. Wenn Schrift, Skala und Zeilenhöhe sitzen, sieht die Seite schon anders aus.
2. Weißraum-Skala. Der Wechsel auf eine konsistente Skala räumt für sich genommen den größten Teil der Unordnung auf.
3. Hierarchie. Vereinfachen Sie so lange, bis auf einem Bildschirm eine einzige Hauptbotschaft übrig bleibt.
4. Farbe und Schatten. Ganz zum Schluss. Das ist Politur, und Politur bringt nichts, solange die Schicht darunter nicht stimmt.

Und vergessen Sie nicht: Sie müssen nicht jeden Punkt aus dem Bericht umsetzen. Manche Unterschiede sind bewusste Markenentscheidungen. Nur weil die Referenz besser ist, ist nicht jede ihrer Entscheidungen auch für Sie richtig.

Eine Variable nach der anderen

Die Befunde im Paket umzusetzen, ist der häufigste Fehler. Wenn Sie acht Dinge auf einmal ändern, wissen Sie selbst bei einer Verbesserung nicht, welche davon gewirkt hat — und bei einer Verschlechterung nicht, welche Sie zurücknehmen müssen.

Das Vorgehen, das ich empfehle: eine Achse ändern, Screenshot machen, neben den vorherigen legen, entscheiden. Das sieht langsam aus, ist in der Summe aber schneller, weil die Rücknahme-Runden wegfallen.

Eine Ergänzung noch: Sehen Sie sich die Seite nach der Änderung erst ein paar Stunden später wieder an. Direkt nach einer Überarbeitung sieht alles gut aus; die eigentliche Bewertung gelingt erst, wenn sich das Auge beruhigt hat.

Worauf Sie bei der Wahl der Referenz achten sollten

• Beißen Sie sich nicht an einer einzigen Referenz fest. Vergleichen Sie mit zwei, drei Quellen; sonst zieht Sie das Audit in Richtung einer Kopie dieser einen Seite.
• Achten Sie auf vergleichbare Größenordnung. Die Website eines riesigen Produkts mit der eines frisch gegründeten Unternehmens zu vergleichen, kann in die Irre führen; die beiden lösen unterschiedliche Probleme.
• Übernehmen Sie das Prinzip, nicht das Asset. Den Rhythmus der Weißräume und den Umgang mit Kontrast zu übernehmen, ist legitim; Palette, Typografie und Bildsprache zusammen zu übernehmen, ist Kopieren. Diese Grenze habe ich in Was ist AI Slop ausführlich diskutiert.

Was ein Audit nicht erfasst

Diese Methode ist gut darin, visuelle Unterschiede zu messen, aber sie bewertet nicht Ihre gesamte Website. Vier Bereiche bleiben außen vor, und die müssen Sie sich gesondert ansehen:

• Performance. Die Referenzseite arbeitet vielleicht mit schwereren Bildern. Wenn Sie das Design übernehmen, wollen Sie die Ladezeit nicht gleich mitübernehmen.
• Barrierefreiheit. Das Kontrastverhältnis fällt ins Audit, Tastaturnavigation, Fokusanzeigen und Screenreader-Tauglichkeit nicht.
• Mobil. Der Vergleich findet meistens in der Desktop-Ansicht statt. Wenn der Großteil Ihres Traffics mobil ist, wiederholen Sie das Audit zusätzlich auf schmalem Bildschirm.
• Inhaltsstrategie. Welche Abschnitte auf der Seite stehen sollten, ist keine Designfrage. Das Audit sagt Ihnen, wie die vorhandenen Abschnitte aussehen, nicht welche fehlen.

Kurz gesagt: Das Audit beantwortet die Frage „Wie sieht es aus?“; die Frage „Zeigt es das Richtige?“ beantwortet es nicht. Die Zweite bleibt Ihre Aufgabe.

Kurz gefasst

Das Gefühl „Da fehlt etwas, aber ich weiß nicht was“ bremst den Fortschritt im Design am stärksten. Ein vergleichendes Audit übersetzt dieses Gefühl in messbare Punkte — und jedes Problem, das zu einem Punkt wird, lässt sich lösen. Fangen Sie bei der Typografie an, machen Sie mit dem Weißraum weiter; die Farbe kommt zuletzt.

Häufig gestellte Fragen

Wie oft sollte ich dieses Audit machen?

Vor und nach einem größeren Update reicht. Ständiges Auditieren heißt ständige Änderungen — und Konsistenz ist ja genau das, was Sie aufbauen wollen.

Soll ich nur die Startseite prüfen?

Fangen Sie mit der Startseite an, nehmen Sie aber die Preis- und Produktseiten dazu. Die Inkonsistenzen zeigen sich meistens nicht auf der Startseite, sondern auf den Unterseiten.

Kann ich die Werte aus dem Bericht direkt übernehmen?

Können Sie, aber nicht blind. Die Zeilenhöhe von 1,6 aus der Referenz kann in Ihrer eigenen Schrift anders wirken. Nehmen Sie den Wert und prüfen Sie ihn in Ihrer Typografie mit dem Auge nach.

Wer setzt die Werte aus dem Audit um?

Weil die Werte konkret sind, ist die Umsetzung meistens einfach: Schriftskala, Zeilenhöhe und Abstände zu ändern, sind ein paar Zeilen in der Stildatei. Komplex wird es nur bei den Hierarchie-Befunden — dort müssen Sie eventuell die Anordnung der Abschnitte ändern, und das ist eine Designentscheidung.

Ersetzt das eine Designerin oder einen Designer?

Nein. Diese Methode ist sehr gut darin, Unterschiede zu erkennen, aber nicht darin, Markenentscheidungen zu treffen. Wem Sie ähneln wollen, entscheiden Sie; das Audit misst nur, wie weit Sie davon entfernt sind.

Quelle

• Jack Roberts, Turn Claude into a Design Genius... Just Watch (YouTube, August 2026). Die fünf Achsen, das Übernehmen eines Designsystems aus einem Referenzarchiv und die drei Befunde des Vergleichs zwischen Glido und Linear beruhen auf diesem Video; Anfrage-Gerüst, Messtabelle, Priorisierung und FAQ sind Ergänzungen dieses Artikels.