NOIR/STUDIO — Wenn die Website sich verhält wie die Arbeit
Eine konzeptionelle Landingpage für ein hochwertiges Studio für Film- und Fotoproduktion, aufgebaut auf einer einzigen Prämisse: Die Seite soll in der Arbeit verschwinden, nicht mit ihr konkurrieren. Editoriale Typografie, oxidierter Akzent und GSAP-Motion, abgestimmt auf das Tempo eines Studio-Reels.
NOIR/STUDIO ist ein konzeptioneller Landingpage-Entwurf für ein hochwertiges Studio für Filmproduktion und Fotografie, aufgebaut um eine einzige Idee: Die Website eines Studios sollte hinter der Arbeit verschwinden, die sie präsentiert — nicht mit ihr konkurrieren.
Die visuelle Richtung wird durch ein einziges leitendes Prinzip definiert: kinematografische Zurückhaltung im Stil eines Editorials. Gebrochenes Schwarz im Hintergrund (#0A0A0A), warmes gebrochenes Weiß in der Typografie (#F3F1EC) und ein einzelner Akzent in oxidiertem Orange (#D4451C), bewusst sparsam eingesetzt — nie öfter als zwei oder drei Mal auf der gesamten Seite. Die Palette schöpft aus dem Printeditorial und filmischem Color Grading, nicht aus den Konventionen des Webdesigns. Sie liest sich selbstbewusst, nicht laut.
Die Typografie trägt die gesamte visuelle Identität. Eine große Display-Serif — Instrument Serif oder Fraunces — übernimmt jeden Headline-Moment in clamp-Skalierung bis zu 12vw, vergrößert bis zu dem Punkt, an dem sie zu Architektur wird statt zu Text. Eine schmale Monospace — JetBrains Mono — übernimmt Labels, Indizes, Zeitstempel, Koordinaten und Metadaten an den Rändern. Der Dialog zwischen diesen beiden Stimmen — monumentale Serif gegen ingenieurhafte Mono — bildet das gesamte Designsystem. Keine dekorativen Elemente nötig.
Das Layout verzichtet auf zentrierte SaaS-Konventionen zugunsten eines asymmetrischen Editorial-Rasters. Meta-Texte sitzen grundlinienbündig in Ecken und an Rändern, markiert mit eingeklammerten Indizes und Sektionsnummerierungen — so, wie ein gedrucktes Magazin seine Paginierung führt. Die Selected-Work-Sektion verwirft das übliche Projektkarten-Raster vollständig und präsentiert Projekte stattdessen als horizontale Editorial-Liste — Index, Titel, Kunde, Jahr, Disziplin — in der ein Hover ein Vorschaubild offenbart, das dem Cursor folgt. Die Services-Sektion verzichtet auf Icons und Karten zugunsten einer langen, mit Linien gegliederten Liste. Die Studio-Sektion stellt ein Serif-Zitat gegen drei gestapelte Statistiken in Mono. Jede Sektion folgt ihrer eigenen inneren Logik bei gemeinsamem räumlichem Rhythmus.
Das Motion Design basiert auf GSAP mit einer einzigen leitenden Easing-Kurve — expo.out — und Dauern zwischen 0,9 und 1,6 Sekunden. Nichts springt. Nichts federt. Die Seite öffnet sich mit einem vollflächigen schwarzen Overlay und einem Mono-Zähler, der von 00 auf 100 tickt, bevor er sich hebt und die Hero-Headline freigibt, die sich Zeile für Zeile in einem Übergang von Unschärfe zu Klarheit zeigt. ScrollTrigger steuert die Sektions-Reveals nach einer festen Regel: Animationen laufen einmal und kehren nie um. Die Hover-Preview in Selected Work nutzt gsap.quickTo() für die Cursor-Verzögerung — die einzige technisch korrekte Methode, einer Maus ohne Performance-Kosten zu folgen. Ein Custom Cursor skaliert und wechselt die Farbe über interaktiven Elementen. Eine lebende Warschauer Uhr in der Navigation tickt leise in Mono. Jede Bewegung respektiert prefers-reduced-motion.
Die UX-Erzählung folgt dem Bogen eines Studio-Reels: Ankunft durch die typografische Hero, Glaubwürdigkeit durch die editoriale Werkliste, Kompetenz durch die Services-Sektion, Haltung durch das Studio-Zitat, Social Proof durch die Marquee mit Kunden-Wortmarken und Einladung durch ein überskaliertes „Let's talk.", das beim Hover unterstrichen wird und die gesamte Seite auflöst.
NOIR/STUDIO ist ein Konzept, das Whitespace als Kameraführung behandelt, Typografie als Regie und Motion als Schnittrhythmus. Es zeigt nicht die Arbeit des Studios — es verhält sich so, wie sich die Arbeit des Studios verhält.