Diese Seite zeigt jeden Layout- und Interaktions-Baustein live in Aktion — genau so, wie sie später in Kunden-Websites eingesetzt werden. Kein Kunden-Pitch, nur die eigene Werkzeugkiste.
Display-Font nur für Überschriften, Body bleibt neutral.
.swipe / .swipe-dots
Swipebare Karten auf dem Handy
Unter 720px ein horizontales Scroll-Snap-Karussell mit Punkte-Indikator, darüber ein normales Grid. Auf dem Handy testen oder das Browserfenster schmal ziehen.
Karte 1
Erste Referenz oder Leistung.
Karte 2
Zweite Referenz oder Leistung.
Karte 3
Dritte Referenz oder Leistung.
z. B. „12+ Jahre Erfahrung"z. B. „80+ Projekte"
.foto-badges
Schwebende Kennzahl-Pillen
Bindet echte Zahlen direkt an ein Portrait- oder Teamfoto, statt eine separate Kennzahlen-Sektion zu bemühen.
Die Werte hier sind Platzhalter — im echten Einsatz ausschließlich belegbare, echte Angaben.
.scroll-highlight
Dieser Absatz startet gedimmt und hellt Wort für Wort auf, während man daran vorbeiscrollt — fühlt sich hochwertiger an als simples Rein-Faden.
.blur-reveal
Kommt beim Scrollen unscharf-zu-scharf in den Fokus statt nur zu faden — wirkt filmischer.
.steps-scroll
Sticky Schritt-Erklärung
Nur für echte Abläufe mit Reihenfolge. Das Bild bleibt beim Scrollen stehen, der jeweils aktive Schritt hebt sich hervor.
01
Analyse
Bestehende Website und Inhalte prüfen.
02
Entwurf
Individuelles Layout aus der Bibliothek bauen.
03
Vorschau
Live-Link zum Pitch, jederzeit aktualisierbar.
.compare-slider
Vorher/Nachher-Regler
Reine Mechanik-Demo mit zwei beliebigen Beispielfotos (kein echtes Vorher/Nachher). Im echten Einsatz ausschließlich mit Fotos desselben Ausschnitts.
Beispiel ABeispiel B
.dark-feature + .grain + .section--glow + .tilt
Der eine dunkle Farbmoment
Feines Film-Korn, weiches Licht folgt der Maus (Desktop), und die Karte links kippt leicht Richtung Cursor. Drei dezente Effekte, eine ruhige Sektion.
.video-teaser (ohne JS, reines :target)
Video-Lightbox ohne JavaScript
Öffnet per Anker-Link ein Vollbild-Modal. Hier ohne echtes Video verlinkt (Platzhalter-Panel), Mechanik ist aber identisch zum echten Einsatz mit selbst gehostetem Video.
Beide rein CSS-basiert (Radio/Checkbox + :checked-Styling), kein JavaScript nötig. Zum Ausprobieren anklicken.
.local-time + .status-dot + .bg-crosshair
Kleinteile für Kopfzeile & Badges
Live-Ortszeit: Wolfsburg ·
z. B. „2 Termine frei im Monat"
Das feine Liniengitter im Hintergrund dieser Sektion ist .bg-crosshair — nüchterner als .bg-dots, passt zu Kanzleien/Ingenieurbüros.
Design-Register · Achse 1
Sieben Seitenarchitekturen
Diese Seite hier nutzt bewusst die erste, klassischste Option — im echten Kundeneinsatz wird aktiv gewechselt, damit sich keine zwei Websites gleich anfühlen.
Klassischer Vertikal-StapelHero → Sektionen im durchgehenden Fluss → Footer. Der Standard — auch diese Seite folgt ihm.
Kapitel-Sequenz3–5 fast bildschirmfüllende, eigenständige „Momente" mit je eigenem Ton statt einer langen Liste.
Persistente SeitenleisteFeste schmale Spalte mit Navigation/Kontakt, rechts scrollt der Inhalt — gut für textlastige Kanzleien/Beratungen.
Durchgehender Asymmetrie-SplitDerselbe schmal/breit-Spaltensplit zieht sich als Leitlinie durch die ganze Seite.
Ultra-minimaler AuftaktFast nur ein großes Foto + Wortmarke, Inhalt folgt erst nach Scroll-Anker, großes Wortmarken-Echo statt klassischem Footer.
Dossier-SequenzJeder Abschnitt bekommt eine schmale Kennzeichnungsleiste als „Aktendeckel", Blöcke stapeln sich ohne große Zwischenräume.
Über diese Seite
Kein Kunden-Pitch — die eigene Werkzeugkiste
Diese Seite wird bei jeder Erweiterung des /redesign-Skills mit aktualisiert. Sie zeigt live, was inzwischen alles möglich ist — Layout-Bausteine wie Kennzahlen-Bänder und Karten genauso wie Interaktions-Bausteine wie den Video-Teaser oder das Kontaktformular. Nicht gezeigt: die sieben Seitenarchitekturen lassen sich naturgemäß nicht alle gleichzeitig auf einer Seite darstellen — die Liste oben beschreibt sie stattdessen in Textform.
z. B. „12+ Jahre Erfahrung"
z. B. „80+ Projekte"
Video entdecken