Vorher/nachher: Wie wir unsere Landingpage vom Tool zur Marke gemacht haben
Ein Abschnitt-für-Abschnitt-Vergleich unseres eigenen Landingpage-Redesigns: eine Akzentfarbe, Serif-Stimme, Weißraum, echte Beweise und ein Workflow zum Nachmachen.
Eine Seite, die funktioniert, und eine Seite, die man sich merkt, sind nicht dasselbe.
Unsere alte Landingpage erklärte das Produkt und konvertierte. Aber sie wirkte wie ein Tool. Deshalb haben wir die visuelle Sprache von oben bis unten neu gebaut.
Ausgangspunkt: klar, aber tool-artig
Die erste Version hatte einen grünen Hero, eine fette Sans-Headline und graue Blöcke zwischen fast allen Abschnitten. Die Information war vollständig. Die Identität fehlte.
Eine Akzentfarbe und eine Serif-Stimme
Vorher: Grün als Akzent und Stimmung zugleich.
Nachher: ein diszipliniertes Indigo, #4f66d8, nur dort, wo Aufmerksamkeit verdient ist.
Dazu kamen Libre Baskerville für Headlines und Inter für Body. Der Hero konnte dadurch in zwei emotionale Takte wechseln:
Clone any website from a URL. Yours to edit and export.
Weißraum und sichtbarer Beweis
Die grauen Blöcke wurden durch eine weiße redaktionelle Fläche ersetzt. Eine einzige dunkle Zone trägt die technische Kernaussage.
Statt Editierbarkeit zu behaupten, zeigt der neue Hero einen Browser-Frame mit echten Clones und Rebranding-Hinweis.
System statt Einzelpage
Der wichtigste Teil ist unsichtbar: Farbe, Typografie, Abstände, dunkle Zone und Glow wurden zu Tokens und gemeinsamen Komponenten. Deshalb fühlen sich Pricing, Gallery, FAQ und Footer wie eine Marke an.
Workflow zum Kopieren
- Finde eine Seite mit einer visuellen Sprache, die du bewunderst; die Galerie hat echte Clones zum Studieren.
- Klone sie mit Clonesite, um editierbaren Source zu bekommen.
- Lies die Entscheidungen: Akzent, Typografie, Kontrast, Weißraum.
- Übertrage diese Entscheidungen auf deinen Inhalt.
- Ersetze jedes Logo, Bild, jeden Claim und jede Copy-Zeile.
- Exportiere und veröffentliche.
Der Clone entfernt die leere Leinwand. Die Entscheidungen machen daraus Marke.
FAQ
Wie designe ich eine Landingpage neu?+
Arbeite Abschnitt für Abschnitt: eine Akzentfarbe, Display-Schrift, mehr Weißraum, echte Beweise und Tokens. So bleibt das Redesign lieferbar.
Was macht eine Landingpage einprägsam?+
Ein konsistentes visuelles System: klarer Akzent, typografische Stimme, bewusst gesetzter Raum und sichtbare Beweise.
Redesign oder Rebuild?+
Ein Rebuild aus einem Clone ist oft schneller. Der Clone gibt editierbare Struktur; deine Energie geht in die Marke.
Weitere Guides
Die besten KI Website Cloner Tools 2026Der beste Website Cloner ist der, dessen Input und Output zu deiner Aufgabe passen — URL-zu-Code, um ein echtes Layout wiederzuverwenden, Screenshot-zu-Code für ein statisches Mockup und Prompt-zu-Seite zum Bauen von Grund auf. Vergleiche sie nach Input-Typ, Editierbarkeit und Export-Qualität, bevor du wählst.
URL klonen vs. Screenshot zu Code: Was sich im Output wirklich ändertURL-Klonen liest die echte Struktur einer Live-Seite — DOM, CSS, Schriften, Links und responsive Breakpoints — und baut sie als editierbaren Code neu auf. Screenshot zu Code sieht nur Pixel, erschließt also das Layout und verliert Schriften, Links und Responsiveness. Der Unterschied zeigt sich direkt darin, wie brauchbar der Output ist.
Website mit Claude Code klonen (2026): der echte Pipeline-Ablauf und seine GrenzenEin Builder-Guide zum Website-Klonen mit Claude Code: fünf Phasen, Messung im echten Browser, Rekonstruktion als editierbarer React- und Tailwind-Code, Setup, typische Bruchstellen und wann ein gehosteter KI-Website-Cloner sinnvoller ist.