ZWOEINS Landingpage – Prototyp

Anweisung

Komplett überarbeitete Landingpage basierend auf V6. Farbsystem strict durchgesetzt, Seitenstruktur grundlegend umgebaut, persönlichere Ansprache, neue Sektionsreihenfolge.

Was sich geändert hat

• Navigation: Leistungen, Referenzen, Agentur, Karriere, Kontakt + "Gespräch buchen" CTA
• Hero: Showreel-Video mit Buttermilk Play-Button + Fullscreen-Modal
• Leistungen: Strategie/Marke/Technologie mit Lila-Tags, schwarzer Schrift, Aufzählungspunkten
• Wendepunkte: Full-Width Zigzag auf Anthracite (Nachfolge, Neupositionierung, Wachstum, Digitalisierung)
• Bilder-Marquee: 12 Teambilder als durchlaufender Slider nach den Zahlen
• Cases: Hover mit Full-Width-Overlay bis Bildschirmrand + "Alle Referenzen ansehen" CTA
• Farbsystem: Headlines violet, Fließtext lightgray, CTAs buttermilk auf anthracite Sektionen – keine Opacity-Shades
• Textgrößen reduziert: ze-text-lg = clamp(1.0625rem, 1.4vw, 1.125rem), line-height 1.5
• Logo-Slider: 6 pro Reihe, fade-out an den Rändern
• Wendepunkt-Bericht: Lead-Magnet CTA mit Formular

Anweisung

Komplettes ZWOEINS-Designsystem als verbindliches Regelwerk umsetzen. Theresas Corporate Design + Conversion-Psychologie. Striktes Typografie-System (H1: 132px, H2: 48px, Body: 20px, Buttons: 26px). Verkaufspsychologie, Social Proof, Loss Aversion.

Was sich geändert hat

• H1 auf 132px Switzer Semibold (war ~80px)
• Body-Text auf 20px (war 18px), Buttons auf 26px mit Pfeil →
• Alle abgerundeten Ecken auf Bildern/Containern entfernt – nur noch Buttons rund
• Randabfallende Elemente: Full-Bleed Hero-Image, Edge-to-Edge Team-Grid
• Differenzierung auf Violet-Hintergrund als Farbakzent
• Featured-Testimonial als eigene Anthracite-Sektion statt Karte
• Linien strikt nach Regelwerk: nur zwischen Items, nie als Modul-Abschluss
• Großzügigerer Weißraum (py-32/py-48 statt py-28/py-40)
• Buttermilk aktualisiert auf #F8FC94
• Sektions-Rhythmus: White → Image → LightGrey → Anthracite → Video → White → LightGrey → Violet → Anthracite → White → LightGrey → Anthracite → LightGrey → White → Image → LightGrey → Buttermilk → Anthracite

Anweisung

Theresas Design-DNA (editorial, magazinartig, reduktiv) kombinieren mit Web-Conversion-Logik. Listen statt Cards, Akkordeon-Leistungen, zwei gegenläufige Logo-Reihen, Featured+List Testimonials. Container auf 1700px.

Was sich geändert hat

• Listen-basierte Layouts mit 1.5px Linien als Struktur
• Akkordeon für Leistungen statt Karten
• Zwei gegenläufige Logo-Karussell-Reihen
• Featured Testimonial (dunkel, groß) + Listen-Testimonials
• Container: max-w-[1700px]
• Horizontaler Scroll mit Container-Alignment

Anweisung

V3 war inhaltlich gut, aber visuell eintönig und langweilig. Jede Section hatte den gleichen Rhythmus. Mehr Abwechslung, mehr Spannung, weniger Vorhersehbarkeit.

Was sich geändert hat

• Hero: Full-height mit Hintergrundbild + Gradient-Overlay statt 50/50-Grid
• Probleme: Bento-Grid (7/5 + 5/7) statt gleichförmigem 2x2, ein Card in Buttermilk als Farbakzent
• Differenzierung: Soft Violet als Hintergrundfarbe statt Light Grey
• Zahlen: Buttermilk-Hintergrund, monumentale Schriftgrößen, animierter Counter beim Scrollen
• Projekte: Horizontaler Scroll-Carousel statt Grid
• Team: Masonry-Layout mit versetzten Bildern
• Kundenstimmen: Featured-Testimonial (groß, dunkel) + gemischtes Grid
• Münsterland: Fullwidth-Bild mit dunklem Overlay statt Grid
• Wendepunkt: Große transparente Nummern (01, 02, 03) als visueller Layer
• ZWOEINS.GO: Cards mit Buttermilk-Topline-Akzent
• Animationen: Reveal-Varianten (fadeUp, slideLeft, slideRight, scale), Bento-Hover, Floating Badge

Anweisung (Feedback zu V2)

• Navigation fehlt
• Münsterland-Bezug zu schwach – es ist eine Landingpage fürs Münsterland, keine Startseite
• Alles zu gequetscht – Hero, Sektionen, Gaps
• Visuelle Hierarchie schwach – "Kommt dir das bekannt vor?" alles gleich groß, weiß auf grau
• Zu viel Text
• Verpixelte Bilder – hochaufgelöste JPGs aus Drive nutzen
• Generische Testimonials ersetzen durch echte von zwoeins.de
• Showreel-Video einbauen
• Mehr Assets von zwoeins.de nutzen (Kundenlogos, Projekte)
• Kompetenzen verständlicher – Strategie/Marke/Plattform versteht keiner, konkrete Einfallstore

Was sich geändert hat

• Desktop-Nav + Mobile-Hamburger-Menü
• Münsterland im Hero-Subline, "Werbeagentur Münsterland" als Label, eigene Regional-Section
• Probleme-Section auf Anthracite mit Border-Cards statt weiß auf grau
• Text überall gekürzt
• Hochauflösende JPGs aus Drive-Ordner statt verpixelte PNGs
• 6 echte Testimonials von zwoeins.de (Lichte, Energieversum, Heckmann, Voss Telekom, IRSF, St. Franziskus)
• Showreel-Video (fullwidth, autoplay, muted, loop)
• 6 echte Projektvorschauen mit Bildern
• Leistungen konkret: Positionierung, Markenentwicklung, Website, Performance, Kommunikation, Dashboards

Daniels Bewertung: "Hundert mal besser als V4-Versuch mit Typografie-System, aber visuell langweilig." → Basis für V4.

Anweisung (Feedback zu V1)

• Korrekte Farben: Buttermilk #F6FC94, Violet #E1D9F2, Anthracite #272727, Light Grey #F7F7F7
• Korrekte Schrift: Switzer (fontshare.com), nicht Space Grotesk + Inter
• Abgerundete Buttons (rounded-full), nicht eckig
• Unterstreichungen als Hervorhebung, nicht farbige Textakzente
• Linien: 1.5px, nur innenliegend, nie als oberer/unterer Abschluss
• Keine Preise auf der Website
• Konsistente Zahlen (nicht "fast 20" und dann "20")
• Bilder und Logo einsetzen

Was sich geändert hat

• Kompletter Farb-Switch auf korrekte Brand-Palette
• Switzer-Font statt Google Fonts
• Alle Buttons rounded-full
• ze-highlight = Unterstreichung, nicht text-color
• 1.5px Linien als Strukturelement
• Preise komplett entfernt
• Echtes Logo, echte Team-Fotos, echte Kundenlogos

Design deutlich besser Aber: keine Nav, gequetscht, generische Testimonials, verpixelte Bilder

Anweisung

Conversion-optimierte Landingpage für ZWOEINS im Raum Münsterland. Zielgruppe: Geschäftsführer mittelständischer Unternehmen an Wendepunkten. Quellen: Kommunikationskonzept (Notion), Strategiekonzept (Notion), Figma Designsystem, zwoeins.de.

Was gebaut wurde

• Single HTML mit Tailwind CDN
• Problem-Lösung-Ergebnis-Schema
• 3 Säulen (Strategie, Marke, Plattform) mit Preisen
• ZWOEINS.GO Timeline
• DU-Ansprache, Wendepunkt als Kernbotschaft

Feedback von Daniel

• Design: 5+ / 4- Brand Guidelines komplett verfehlt
• Falsche Farben (#CCFF00 statt #F6FC94), falsche Schrift (Space Grotesk statt Switzer)
• Kein Logo, keine Bilder, keine Assets von zwoeins.de genutzt
• Eckige Buttons statt abgerundet
• Farbige Textakzente statt Unterstreichungen
• Preise auf der Website (verboten)
• Copy: 3- Grundstruktur okay, aber Preise, Inkonsistenzen, zu vage

Detailliertes Feedback: version-1/FEEDBACK.md