Visuelle-Hierarchie-Analysator

Eingabe

Design Description

Landing page: top has a small logo left, nav links right. Hero is a centered headline (~28px), a gray subhead, and a blue 'Sign up' button the same size as a secondary 'Learn more' button beside it. Below are three equal feature cards. The testimonial and pricing are far down, and there's a second identical CTA in the footer.

Design Type

landing

Analysis Focus

conversion

Ausgabe (Auszug)

HIERARCHIE-PROBLEME (Conversion): 1) Die Headline mit 28 px ist für einen Hero zu leise — auf 44-56 px erhöhen, um die ersten 3 Sekunden zu gewinnen. 2) Primärer und sekundärer CTA teilen das Gewicht — „Mehr erfahren“ abschwächen (Ghost-/Text-Stil), damit das Auge sich für „Anmelden“ entscheidet. 3) Preise und Testimonials liegen hinter langem Scrollen — einen Vertrauensbeleg in Hero-Nähe ziehen. 4) Zwei identische CTAs splitten den Fokus; die Formulierung variieren. PRIORITÄRE KORREKTUR: Headline vergrößern + ein einziger dominanter CTA. Erwartete Wirkung: klarerer Scan-Pfad, schnellere Entscheidung.

Eingabe

Design Description

Newsletter email: full-width hero image with white text baked into it, a light gray body text on white background (~13px), one orange button, and a footer with tiny 10px legal text and low-contrast unsubscribe link.

Design Type

email

Analysis Focus

accessibility

Ausgabe (Auszug)

HIERARCHIE-PROBLEME BEI DER BARRIEREFREIHEIT: 1) In das Hero-Bild eingebackener Text ist für Screenreader unsichtbar und bricht, wenn Bilder blockiert werden — die Headline in lebenden HTML-Text verschieben. 2) 13-px-Hellgrau-Fließtext auf Weiß scheitert wahrscheinlich am WCAG-AA-Kontrast — auf mindestens #595959 abdunkeln und auf 15-16 px anheben. 3) 10-px-Rechtstext ist unleserlich — min. 12 px. 4) Ein kontrastarmer Abmelde-Link riskiert Compliance und Vertrauen — deutlich sichtbar machen. PRIORITÄT: lebender Text + Kontrast. Diese verbessern auch Zustellbarkeit und Überfliegbarkeit.

Eingabe

Design Description

Analytics dashboard ported to mobile: a top row of four KPI cards squeezed side by side, a large line chart, then a dense data table with 8 columns. Everything is the same font size and weight, and the most important metric (revenue) sits third from left.

Design Type

dashboard

Analysis Focus

mobile

Ausgabe (Auszug)

MOBILE-HIERARCHIE-PROBLEME: 1) Vier KPI-Karten in einer Reihe werden unter ~90 px Breite zerdrückt — auf ein 2×2-Raster stapeln und mit Umsatz führen, nicht mit dem dritten von links. 2) Einheitliche Größe/Strichstärke bedeutet, dass nichts das Auge führt — die Hero-Metrik ~2× größer und fett machen. 3) Eine 8-spaltige Tabelle ist auf Mobile unbrauchbar — auf eine Kartenliste oder horizontales Scrollen mit fixierter erster Spalte wechseln. 4) Das Diagramm braucht Luft über der Tabelle. PRIORITÄT: nach Wichtigkeit umsortieren + responsives KPI-Raster.