Eine Website, die billig aussieht, hat nicht unbedingt ein schlechtes Design. Häufiger hat sie ein gutes Design mit zwei oder drei konkreten Schwachstellen, die das Gesamtbild untergraben. Die gute Nachricht: Die meisten dieser Schwachstellen lassen sich ohne Redesign beheben.
Hier sind die acht häufigsten und was Sie jeweils genau dagegen tun können.
Typografie ist der wichtigste Unterschied zwischen Websites, die ausgefeilt wirken, und solchen, die amateurhaft wirken. Die meisten Startup-Websites haben zwei Probleme:
Zu viele Schriftschnitte. Wer Regular, Medium, SemiBold, Bold und ExtraBold auf einer Website verwendet, zeigt fehlende Disziplin. Wählen Sie zwei: einen für Überschriften (meist Bold oder SemiBold) und einen für Fließtext (Regular). Wenn Sie einen dritten brauchen, nehmen Sie Medium für UI-Beschriftungen.
Inkonsistente Größen. Eine Website, auf der H2-Überschriften von Abschnitt zu Abschnitt unterschiedlich groß sind oder der Fließtext in einer Komponente 14px und in einer anderen 16px beträgt, wirkt unfertig. Definieren Sie eine Typografie-Skala und halten Sie sie konsequent ein: 12, 14, 16, 20, 24, 32, 48, 64. Sonst nichts.
Die Lösung: Öffnen Sie das CSS Ihrer Website und zählen Sie, wie viele font-size- und font-weight-Werte vorkommen. Sind es mehr als acht Größen und drei Schriftschnitte, haben Sie ein Typografie-Problem. Konsolidieren Sie.
Stockfotos erkennt jeder sofort, der mehr als eine Stunde im Internet verbracht hat. Das lächelnde, diverse Team am Konferenztisch, der aufgeklappte Laptop auf dem Café-Tisch, die Hände auf der Tastatur: Diese Bilder sagen nichts über Ihr Produkt aus, aber alles darüber, dass Sie nicht in echte Bilder investieren können.
Die Lösung bei begrenztem Budget:
Option 1: Verzichten Sie auf Fotos. Ein markanter typografischer Hero mit einer kurzen, konkreten Aussage sieht besser aus als ein generisches Stockfoto. Viele hervorragende Websites kommen ganz ohne Fotos aus.
Option 2: Verwenden Sie Produkt-Screenshots. Wenn Ihr Produkt existiert, zeigen Sie es. Ein echter Screenshot Ihres Dashboards mit Hinweisen und Beschriftungen ist glaubwürdiger als jedes Stockfoto.
Option 3: Verwenden Sie Illustrationen. Individuelle Illustrationen sind teuer, aber zeitlos. Tools wie Blush.design oder ein Illustrator auf Contra können markenspezifische Illustrationen erstellen, die nicht wie die aller anderen aussehen.
Option 4: Verwenden Sie abstrakte Visuals. Verläufe, geometrische Muster oder per CSS erzeugte Grafiken sind besser als schlechte Fotos. Sie vermitteln nichts Konkretes, wirken aber auch nicht generisch.
Inkonsistente Farben gehören zu den schnellsten Anzeichen für eine amateurhafte Website. Der typische Fehler: leicht unterschiedliche Töne derselben Farbe in verschiedenen Komponenten, weil niemand ein Farbsystem definiert hat.
Der primäre Button ist #2563EB. Der Hover-Zustand ist #1D4ED8. Die Linkfarbe ist #3B82F6. Der aktive Navigationspunkt ist #1E40AF. All das ist „Blau“, aber nicht dasselbe Blau, und das Gehirn registriert die Inkonsistenz, selbst wenn der Nutzer sie nicht bewusst bemerkt.
Die Lösung: Definieren Sie drei bis fünf Farben. Benennen Sie sie. Verwenden Sie nur diese. Ein minimales Farbsystem: eine Primärfarbe (Ihre Markenfarbe), eine Neutralfarbe (Graustufen von Weiß bis fast Schwarz) und eine semantische Gruppe (Rot für Fehler, Grün für Erfolg, Bernstein für Warnungen). Alles andere ist eine Variation dieser drei.
In Webflow sind das CSS-Variablen in den Website-Einstellungen. In Next.js ist es Ihre Tailwind-Konfiguration oder CSS Custom Properties. Definieren Sie sie einmal, verwenden Sie sie überall und schreiben Sie niemals einen Hex-Wert außerhalb des Systems fest in den Code.
„Mehr erfahren“ ist der schlechteste Call-to-Action überhaupt. Er sagt: Wir wissen nicht, was Sie tun sollten, also tun Sie etwas Unverbindliches. „Absenden“ ist der zweitschlechteste. „Hier klicken“ der drittschlechteste.
Button-Text ist eine Mikro-Verpflichtung. Nutzer lesen ihn und fragen sich: Lohnt sich dieser Klick? „Mehr erfahren“ gibt ihnen keinen Grund, Ja zu sagen.
Die Lösung: Ersetzen Sie den Button-Text durch Aktion + Ergebnis.
Die Konkretheit der Aktion sagt Nutzern genau, was der Klick bewirkt. Allein das verbessert die Klickraten oft messbar.
Der Footer ist das Letzte, was Nutzer sehen, bevor sie entscheiden, ob sie wieder nach oben scrollen und konvertieren oder die Seite verlassen. Die meisten Startup-Websites verschwenden diesen Platz mit einer knappen Linkliste und einer Copyright-Zeile.
Nutzer, die bis zum Footer scrollen, sind noch in der Bewertungsphase. Sie suchen nach Signalen, die eine Frage beantworten: Kann ich diesem Unternehmen vertrauen?
Was in Ihren Footer gehört:
Der Footer muss nicht aufwendig sein. Er muss Seriosität signalisieren.
Social Proof findet sich auf den meisten Startup-Websites. Aber die Platzierung ist genauso wichtig wie das Vorhandensein.
Häufige Platzierungsfehler:
Die Lösung:
Mehr als die Hälfte Ihrer Besucher ist mobil unterwegs. Websites, die auf dem Desktop hervorragend aussehen und auf dem Smartphone kaputtgehen, signalisieren, dass Ihnen die Hälfte Ihrer Besucher egal ist.
Die konkreten Fehler, durch die mobile Websites billig aussehen:
Horizontaler Überlauf. Inhalte, die über den Rand des Viewports hinausragen, erzeugen eine horizontale Scrollleiste. Das passiert am häufigsten bei Elementen mit fester Breite, Codeblöcken und Tabellenlayouts.
Winzige Tap-Flächen. Buttons und Links mit weniger als 44px Höhe lassen sich schwer zuverlässig antippen. Apples HIG und Googles Material Design geben beide mindestens 44–48px vor.
Text, der nicht skaliert. Hero-Überschriften mit 72px auf dem Desktop bleiben auf dem Smartphone 72px groß und erfordern horizontales Scrollen. Verwenden Sie responsive Schriftgrößen (clamp() in CSS oder die responsiven Präfixe von Tailwind).
Die Lösung: Testen Sie Ihre Website auf einem echten Mobilgerät, nicht in den DevTools des Browsers. Die mobile Simulation der DevTools erkennt nicht jedes Problem, das auf echten Geräten auftritt. Schicken Sie sich die URL aufs Handy und klicken Sie sich fünf Minuten lang durch.
Die wahrgenommene Qualität hängt mit der wahrgenommenen Ladegeschwindigkeit zusammen. Eine Website, die in 3 Sekunden lädt, „fühlt“ sich weniger hochwertig an als eine, die in 1,2 Sekunden lädt, unabhängig von der Designqualität.
Das ist messbar. Googles Untersuchungen zum Zusammenhang zwischen Ladezeit und wahrgenommener Website-Qualität zeigen konsistente Ergebnisse: Langsamere Websites werden als weniger hochwertig bewertet, selbst bei identischem Design.
Die wirkungsvollste Einzelmaßnahme: Optimieren Sie Ihr Hero-Bild. Konvertieren Sie es in WebP, ergänzen Sie fetchpriority="high" und laden Sie es per Preload vor. Diese eine Änderung bringt die meisten Marketing-Websites auf Mobilgeräten von „langsam“ zu „schnell“.
Über das Hero-Bild hinaus: Entfernen Sie Drittanbieter-Skripte, die Sie nicht aktiv nutzen. Jedes Chat-Widget, jede Analytics-Bibliothek und jedes A/B-Testing-Tool, das beim Seitenaufruf lädt, kostet Gewicht. Prüfen Sie, was tatsächlich auf Ihrer Website läuft, und entfernen Sie alles, was Sie in den letzten 90 Tagen nicht angesehen haben.
Nicht alle acht Probleme wiegen gleich schwer. Gehen Sie in dieser Reihenfolge vor:
Alle acht lassen sich ohne komplettes Redesign umsetzen. Die meisten sind die Arbeit eines Nachmittags.
Sie möchten eine konkrete Analyse der Glaubwürdigkeitsprobleme Ihrer Website? Starten Sie ein Gespräch: Wir sehen uns Ihre Website an und sagen Ihnen genau, was Sie Kunden kostet.
Wir nehmen jeden Quartal eine begrenzte Anzahl von Projekten an. Erzählen Sie uns, was Sie bauen.
Klare Beschreibungen von 11 UI-Mustern für SaaS-Dashboards: Empty States, KPI-Karten, Tabellen vs. Karten, Filter, Benachrichtigungen, Ladezustände und Datenexport.
Wir haben 10 Top-Marketing-Websites zerlegt (Linear, Stripe und mehr): Core Web Vitals, Hero-Texte, Social Proof und was Sie für Ihre eigene Website übernehmen können.
