# Detroit Paris — typografisches Gegenstück zur Filmleinwand Live-Recherche am 7. September 2026: [detroit.paris](https://www.detroit.paris/), [Projects](https://www.detroit.paris/projects), [Contact](https://www.detroit.paris/contact). Desktop 1440 × 1000 Pixel; Mobile 390 × 844 Pixel, Touch-Emulation in Chrome mit iPhone-User-Agent. Acht echte Screenshots liegen in `research/screenshots/`. Die mobilen Beobachtungen stammen aus Emulation, nicht von einem physischen Gerät. ## Erster Eindruck und Komposition Detroit lebt vom Wechsel zwischen **extrem großer schwarzer Schrift** und **fast leerem Weißraum**. Links oben steht eine zweizeilige, sehr fette und enge Grotesk. Die Zeilen stehen beinahe aufeinander. Kleine Navigation zieht sich über die obere Kante; ein kleines Signet sitzt links. Die rechte obere Hälfte bleibt weitgehend leer. Es gibt keinen üblichen großen Hero-Film, der die Fläche gleichmäßig füllt. Stattdessen wächst eine Bildfolge **treppenartig entlang der unteren Bildschirmkante**: klein links, dann Stufe für Stufe größer nach rechts. Alle Bilder teilen sich dieselbe untere Baseline. Ihre Oberkanten ergeben eine markante Diagonale. Unterschiedliche Motive und Größen machen die Folge expressiv, obwohl Rahmen, Schatten, Rundungen und Kartendekor fehlen. Die Bilder können seitlich angeschnitten sein. Die Typografie übernimmt damit die plakative Wirkung, die Bruns dem Vollbildfilm überlässt. Die Bilder sorgen für Spannung in der unteren Hälfte. Sehr kleine sachliche Labels halten die übrige Oberfläche ruhig. Die zusätzliche Buchempfehlung oben rechts ist ein eigener Werbeeinschub der Referenz, kein notwendiger Teil dieses Stils. ## Verifizierte Interaktion - Die Startseite bleibt bei 1000 Pixel Viewporthöhe genau 1000 Pixel hoch. Ein Wheel-Impuls verschiebt und skaliert die untere Bildfolge; `scrollY` bleibt 0. Das Scrollrad steuert eine inszenierte Medienbahn statt Dokument-Scroll. - Die Staffel verändert sich kontinuierlich: im aufgezeichneten Vorher/Nachher-Paar wachsen zuvor kleinere Kacheln und rücken nach rechts. Der große Schriftblock bleibt bestehen. - Hover direkt über einer Bildfläche zeigt einen kleinen schwarzen Punkt und den Namen oberhalb des Bildes. In `detroit-desktop-hover.png` ist dies die Talent-Kachel ARNAUD. Der erste Hover-Versuch oberhalb der tatsächlichen Bildoberkante zeigte keinen Zusatz; die finale Aufnahme trifft die Bildfläche. - Klick auf ARNAUD führte intern auf [die Talent-Seite](https://www.detroit.paris/talents/arnaud). Diese Seite enthält weitere Bilder und einen erklärenden Text. Detroit mischt auf der Startseite also Talente und Projekte; ein Klick bedeutet nicht generell „Film abspielen“. - Die Reihenfolge der Startbilder war nach frischem Seitenaufruf unterschiedlich. Die Screenshots aus zwei Läufen zeigen deshalb verschiedene Motive, obwohl dieselbe Komposition besteht. Ohne weitere Quellenprüfung wird daraus keine genaue Randomisierungsregel abgeleitet. Es ist eine starke experimentelle Oberfläche, aber kein Modell für besonders eindeutige Filmnavigation. Bei David sollte die visuelle Staffel übernommen werden, ohne die Scrollrichtung umzudeuten oder die Projektauswahl automatisch zu bewegen. ## Weitere Seiten Die Projektübersicht führt die übergroße Typografie konsequent weiter: eine dichte senkrechte Liste riesiger, enger Kundennamen. Ein Eintrag ist schwarz hervorgehoben, andere sind sehr hellgrau. Rechts liegen dazugehörige Bildfelder, wiederum mit versetzten Kanten. Kleine Kategorien stehen zwischen den Namen und Bildern. Die im Screenshot sichtbare Ansicht ist ein direkt geladener Zwischenzustand des interaktiven Projektindex, keine komplette statische Gesamtliste. Die Talent-Seite verwendet den Namen als große linke Überschrift, einen kompakten Textblock rechts und darunter Bilder in verschiedenen Formaten mit viel Weißraum. Das ist eine weitere brauchbare Referenz für redaktionell angeordnete Medien. Contact verteilt riesige Wörter über linke und rechte Bildschirmhälfte. Die tatsächlichen Kontaktlinks bleiben sehr klein am unteren Rand. Die Typografie hat hier den Charakter eines Plakats. Für ein Einzelportfolio lässt sich das auf eine große, klare Kontaktzeile und eine direkt erreichbare Mailadresse reduzieren. ## Mobile Das zweizeilige schwarze Schriftplakat bleibt erhalten, passt sich aber der schmalen Breite an. Die Desktopnavigation wird durch ein rechts oben stehendes „MENU“ ersetzt. Unter Überschrift und kleinem Erklärungstext liegt eine größere freie Fläche. Die Treppenform wird mobil zu **einem horizontalen Bildband mit gleich hohen, hochformatigen Kacheln**. Die erste/letzte sichtbare Kachel wird angeschnitten; ein Label mit schwarzem Punkt steht oberhalb. Eine emulierte Touch-Geste verschob dieses Band seitlich. Auch hier blieb `scrollY=0` und die Dokumenthöhe 844 Pixel bei 844 Pixel Viewporthöhe. Ein klassischer Bereich „weiter unten“ existiert auf der Startseite nicht. Der Dokumentüberlauf war im geprüften Zustand horizontal korrekt begrenzt: `scrollWidth=390`, `innerWidth=390`. Im mobilen DOM wurden in der sichtbaren Startkomposition keine Videoelemente gefunden; auf Desktop waren Videoelemente vorhanden, deren `src` im ausgelesenen Zustand leer war. Deshalb wird hier keine pauschale Aussage über Autoplay oder Loop-Wiedergabe der gesamten Referenz getroffen. Die geprüfte Stilwirkung kommt bereits durch statische Bilder und bewegte Anordnung zustande. ## Umsetzung für David: Variante Editorial Diese Referenz begründet eine **eigene helle Version**, die sich in Typografie und Seitenaufbau deutlich von der schwarzen Cinema-Variante unterscheidet: 1. Name groß und zweizeilig, ohne erfundene Berufsbiografie oder Markenclaim. 2. Eine feste aufsteigende Bildstaffel entlang der unteren Hero-Kante. Die Fläche bleibt räumlich stabil und normal scrollbar. 3. Kleine Filmvorschauen reagieren nur auf gezielten Hover/Fokus; reduced motion und unsichtbare Seiten stoppen die Vorschauen. 4. Darunter eine asymmetrische Filmübersicht mit unterschiedlich großen Medienfeldern und großzügigen Abständen. 5. Klick öffnet direkt einen Film im eigenen Dialog, mit Escape, erreichbarem Close und Fokus-Rückgabe. 6. Wenige klare Begriffe: Work und Contact. Demo-Footage wird als Rodrigo-Material kenntlich gemacht. Die Version unter `editorial/` übernimmt somit Typokontrast, Leerraum und Bildstaffel. Sie verwendet keine fremden Detroit-Medien und kopiert weder Talentstruktur noch Spezialnavigation. ## Screenshot-Index | Datei | Zustand | |---|---| | `detroit-desktop-start.png` | Riesige zweizeilige Typo, Weißraum und aufsteigende Bildstaffel | | `detroit-desktop-hover.png` | Echter Hover über ARNAUD zeigt Punkt und Label oberhalb | | `detroit-desktop-after-scroll.png` | Wheel verändert Position und Skalierung der Bildstaffel | | `detroit-desktop-project.png` | Intern geöffnete Talent-Seite ARNAUD, keine Film-Lightbox | | `detroit-desktop-projects.png` | Typografischer Projektindex mit Bildern an der rechten Seite | | `detroit-desktop-contact.png` | Plakative Wortverteilung mit kleinen Kontaktlinks | | `detroit-mobile-start.png` | Zweizeilige Überschrift und horizontal angeschnittenes Bildband | | `detroit-mobile-after-swipe.png` | Seitlich versetztes Bildband nach Touch-Geste | Rohdaten: `detroit-observations.json`. Reproduktionsskripte: `research/scripts/detroit.cjs` und `research/scripts/detroit-pages.cjs`. Es wurden keine Performance-Scores oder Übertragungsvolumen gemessen.