Fotografie und Film: Bild zuerst

Fotografie, Bewegtbild, Regie, Produktionsfirma

Die Oberfläche tritt fast vollständig zurück: kleine Typo, neutrale Fläche, Bildwechsel per Crossfade, Zähler und Bildunterschrift. Fotografen wie Nadav Kander und Tim Walker animieren praktisch nur die Opazität. Produktionsfirmen wie Partizan setzen auf Video-Vorschau beim Hover und ein 24-Spalten-Raster. Bewegung gibt es nur beim Wechsel zwischen Bildern, nie auf dem Bild selbst.

Bauplan tokens.css Alle Techniken

Schrift

Bild zuerst

Die Oberfläche tritt fast vollständig zurück: kleine Typo, neutrale Fläche, Bildwechsel per Crossfade, Zähler und Bildunterschrift.

Fotografie, Bewegtbild, Regie, Produktionsfirma

Headline: Instrument Serif
Text: Instrument Sans
Akzent: Fragment Mono

Farbe

#f4f4f2
#141414
#e6e6e6
#8a8a8a
#0e0e0e
#f2f2f2
#6D6D6D

Bewegung

cubic-bezier(0.76, 0, 0.24, 1)

Stil: Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: Bildwechsel 350–800, Hover-Video-Einblendung 600, UI 200, Seitenwechsel 500–800

Aufbau der Seite

SignaturEndlose Scroll-Galerie mit Tiefenparallaxe Seitenrand- und Vier-Ecken-Navigation

HeroKinoreifer Vollbild-Video-Hero

Kuratierte Auswahl (Startseite Fotograf)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Variable Breiten
Arbeiten / Regie-Roster (Film)Video-Vorschau bei Hover / im Viewport Projektindex als Liste mit Hover-Bildvorschau Eigener Videoplayer · Showreel
Serien / ProjekteMasonry-Galerie mit nativem display: grid-lanes (plus Fallback)Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Serie als Spalte Skeleton mit Schimmer · Bild-Platzhalter aus
Archiv / alle Serien (endlose Scroll-Galerie, Footer fest erreichbar)Endlose Scroll-Galerie mit Tiefenparallaxe
BioSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium
Leistungen, Pakete & Anfrage (z. B. Hochzeit/Business: Pakete mit ab-Preis, Verfügbarkeit, Formular; Agenturen bei Film; Studio-Adresse mit Karte per 2-Klick, wenn Besuch vorgesehen)Kontakt- und Anfrageformular als eigene Sektion Akkordeon mit Höhenanimation auf auto · FAQ Fahrschule Vergleichstabelle mit fester Kopfzeile · Paketvergleich Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild

Seitenwechsel: Vorschaubild wird zur Hero (Shared-Element-Morph)
Intro: Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)
Navigation: Seitenrand- und Vier-Ecken-Navigation Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück
Hover: Bild-Zoom in der Maske · Basis Hover-Absicht und Zeitlogik
Mikroanimation: Ein-/Ausblenden mit @starting-style
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-Bühne Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Serie als Spalte Video-Vorschau bei Hover / im Viewport Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Studio-Bühne Kolophon: Schriften, Bildnachweis, Stand, Gewicht
Buttons: Kontur-Button, der sich zeichnet · Linie zeichnet sich Pfeil-Icon-Button · Linie

Nicht verwenden

Graustufen zu Farbe / Duoton-Bildbehandlung Farbe ist Teil des Werks; Bilder nie entsättigen
WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift) und svg-filter-verzerrung – verändern das Foto, das der Kunde verkauft
Bild-Spur hinter dem Cursor (Image Trail) macht Werke zu Konfetti
Grain-/Noise-Überlagerung und halbton-raster – legen eine fremde Textur über fertige Bilder
Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske) , scroll-char-choreo, marquee-laufband – Typo-Inszenierung lenkt vom Bild ab
Subtiler mehrschichtiger Parallax und zoom-parallax auf Werkbildern – verschiebt den Bildausschnitt, den der Fotograf gewählt hat

Regeln

Das Bild bekommt die größte Fläche; Interface-Elemente an den Rand oder in die Ecken.
Bildwechsel als Crossfade 350–800 ms; das Werk selbst wird nie verschoben, verzerrt oder getönt.
Jede Slideshow zeigt Zähler und Bildunterschrift in Mono (Nadav: __count, __caption).
Film: Vorschau-Videos stumm, max. 800px breit, erst bei Hover oder im Viewport laden (Partizan: data-src).
Platzhalter-Grau in Bildgröße (aspect-ratio) reserviert den Raum, damit nichts springt.
Höchstens zwei Schriften; die Serif nur für Namen und Projekttitel.
Tastatur: Pfeiltasten blättern, Esc schließt das Vollbild.
Endlose Scroll-Galerie nur auf der Archivseite; Footer mit Impressum und Kontakt bleibt fest erreichbar, jede Serie hat eine eigene indexierbare Seite.
Pflichtangaben und Recht (Leitfaden 8a): Personenfotos nur mit Einwilligung der Abgebildeten (KUG, DSGVO), Hochzeits- und Kinderbilder nur mit Freigabe; Paketpreise inkl. MwSt.; Musik in Filmen lizenziert; Impressum und Kontakt bleiben auch neben der endlosen Galerie erreichbar – vom Kunden prüfen lassen.

Bild und Ton

Licht: Wie im Werk, nie korrigiert oder getönt.
Ausschnitt: Das Werk unbeschnitten im Original-Seitenverhältnis; nie für Kacheln gecroppt.
Personen: Wie im Werk; keine Making-of-Selfies auf der Startseite.
Formate: 3:2, 2:3, 16:9, Original
Nicht: Kein Zoom, keine Parallaxe, kein Tönen, kein Verschieben des Werks, kein Text über dem Bild außer im Film-Hero.
Anrede: Sie
Sätze: Fast keine Sätze: Titel, Kunde, Jahr. Bio in drei Sätzen, Kontakt als Zeile.
Haltung: Kuratiert und zurückhaltend; das Werk spricht.
Tonproben: Küste im Winter, 2025. 24 Bilder., Anfragen für Aufträge und Lizenzen per E-Mail.
Nicht schreiben: „Momente für die Ewigkeit“, „Emotionen einfangen“, „Leidenschaft für Fotografie“, Preispakete auf der Startseite.

Hero, Raum und Form

Hero-Raster: Bild randlos über die volle Fläche (100svh), UI in den vier Ecken.
Hero-Bild: Ein Werk oder Standbild; Foto im Originalformat auf neutraler Fläche, Film-Standbild 16:9 formatfüllend. cinematic-video-hero nur mit eigenem Showreel.
Überschrift: Name 1.25–1.5rem Instrument Serif oben links; Projekttitel clamp(1.5rem, 3vw, 2.75rem) unten links.
Handlung: Kein CTA-Paar; Ecken: Index oben rechts, Info und Kontakt unten rechts; Pfeiltasten blättern.
Zusatz: Zähler „12 / 44“ und Bildunterschrift in Fragment Mono 0.75rem in der unteren Ecke.
Sektionsabstand: clamp(48px, 8vw, 128px)
Dichte: dicht
Raum: Die Oberfläche ist dicht und klein, das Bild bekommt alles andere. Abstände zwischen Bildern einer Serie klein (8 bis 16 px), zwischen Serien groß.
Spalten: 24
Maximale Breite: none
Raster: 24-Spalten-Raster wie Partizan; UI in Ränder und Ecken (seitenrand-und-ecken-navigation). Platzhalter in Bildgröße per aspect-ratio.
Radius klein: 0
Radius groß: 0
Schatten: keiner
Form: Nichts konkurriert mit dem Bild. Knöpfe als gezeichnete Kontur (kontur-button-zeichnen, Variante zeichnen) oder Textlink (pfeil-icon-button, Variante linie).

Vorbilder