# Stilrecherche: YK PRODUCE Stand: 7. September 2026. Original: [ykproduce.co.jp](https://ykproduce.co.jp/). Diese zusätzliche Referenz erweitert Davids schwarz gehaltene Filmübersicht um eine deutlich inszeniertere, typografische Richtung. ## Methode Liveprüfung in isoliertem Chrome: Desktop 1440 × 1000 px und Smartphoneemulation 390 × 844 px mit iPhone-User-Agent. Es wurden Intro, regulärer Einstieg, Scrollzustände, Showreel und mobiles Menü als echte Screenshots festgehalten. Das Intro wurde zunächst abgewartet, bevor der reguläre Einstieg aufgenommen wurde. Die Aufnahmen 20–26 dokumentieren bewusst zusätzliche zeitliche Phasen und sind keine sieben unterschiedlichen Seiten. Präzisierung nach instrumentierter Scrollanalyse: `window.scrollY` blieb im ersten Test bei 0 und die Dokumenthöhe bei einer Bildschirmhöhe. Die anfängliche Interpretation als „transformierter eigener Inhaltscontainer“ war falsch. Tatsächlich scrollt der Barba-Container nativ mit `overflow-y: scroll`; sein `scrollTop` ändert sich, sein Transform bleibt `none`. Lenis glättet dieses Scrollen. `window.scrollTo` adressiert den falschen Scrollbereich. Die Originalmesswerte bleiben erhalten; [die genaue Scrollanalyse](ykproduce-scroll-analysis.md) dokumentiert die korrigierte Mechanik. Die mobile Ansicht wurde emuliert und nicht auf einem physischen iPhone getestet. Die Wiedergabe des Showreels wurde im Prüfbrowser bestätigt; nach dem Öffnen lief die Videoposition sichtbar weiter. Eine vollständige Leistungs- oder Barrierefreiheitsprüfung war nicht Teil dieser Stilanalyse. ## Belegte Beobachtungen ### Einstieg: erst Filmsequenz, dann vollständige Oberfläche Bei einem frischen Aufruf läuft zuerst eine inszenierte Folge schwarzweißer Unterwasserbilder. Die einzelnen großen Bilder gleiten vertikal, Bildausschnitte folgen aufeinander, zeitweise fehlen sichtbare Navigation und Texte. Die Reihenfolge und der genaue Zeitpunkt hängen vom Ladefortschritt ab. Aufnahmen um sechs Sekunden zeigen noch die Sequenz, nach ungefähr zwölf bis fünfzehn Sekunden war in den geprüften Aufrufen die vollständige Oberfläche sichtbar. Diese Zeiten sind Beobachtungen dieser Läufe, keine feste Zusage über die Website. Der reguläre Einstieg zeigt einen bildschirmhohen Schwarzweißfilm. Darüber stehen links das YK-Zeichen und die Wortmarke, rechts eine kleine waagerechte Navigation. Ein groß skaliertes Zeichen aus Dreiecken sitzt im Zentrum über dem Film. Es ist dieselbe geometrische Identität wie im kleinen Logo. Am unteren Rand kündigt eine Überschrift bereits die nächsten zwei Geschäftsbereiche an. Unten rechts steht eine kleine, schwarze Showreel-Kachel mit Filmminiatur, Play-Dreieck, Label und Laufzeit. Die Navigation ist fixiert. Sie setzt kleine Versalien in einer Helvetica-Neue-Definition ein, bei 1440 px ungefähr 12,65 px groß. Darunter liegt eine feine Teilstrichskala. Rechts am Bildschirm sitzt zusätzlich eine vertikale Skala mit rotem Positionsstrich. Kleine rote Punkte markieren weitere Positions- oder Kapitelinformationen. Untere Ecken tragen technische Randbeschriftungen wie Koordinaten und einen Scrollhinweis. Das Gesamtbild erinnert dadurch an einen Sucher oder einen Gestaltungsarbeitsplatz. ### Komposition nach dem ersten Bildschirm Der nächste Bereich bleibt schwarz. Die Geschäftsbereiche werden nicht als kleine gleichmäßige Karten inszeniert: Sehr große, fette serifenlose Titel sitzen weit links beziehungsweise über die Mitte. Darunter steht weniger gewichtete Erklärung. Rechts darunter liegt ein vergleichsweise großes 16:9-Foto, links bleibt viel schwarze Fläche mit einer kleinen Abschnittsnummer. Das visuelle Gewicht wird bewusst asymmetrisch verteilt. Bei 1440 px liegt das geprüfte Sektionsfoto ungefähr bei x=623 px und ist rund 675 × 380 px groß. Zwischen den dunklen und hellen Abschnitten verändert sich die gesamte Grundfläche. In einem hellgrauen Bereich erscheint extrem große schwarze Typografie mit dem kurzen englischen Motto der Website. Die Buchstaben sind so groß, dass sie den Bildschirm als Gestaltungselement durchlaufen. Ein kleines rechteckiges Filmfenster ist in diese Typografielandschaft eingesetzt. Das wirkt nicht wie eine normale Überschrift über einem Inhaltsblock, sondern wie Schrift und Film auf derselben Bühne. Weiter unten entsteht ein breites, horizontal angeordnetes Fotopanorama: Das mittlere Bild ist groß, Nachbarbilder sind am linken und rechten Rand angeschnitten. Darunter folgt ein ruhiger Textblock. Der kleine Showreel-Einstieg bleibt am unteren rechten Rand verfügbar. Seine konstante Position verbindet die verschiedenen Abschnitte funktional mit demselben Filmzugang. ### Farbigkeit, Typografie und Bewegung Die visuelle Basis besteht aus Schwarz, Weiß und kühlem Hellgrau. Die Fotos und der Hauptfilm sind im untersuchten Desktopzustand überwiegend schwarzweiß dargestellt. Kleine rote Akzente werden als Orientierungssignale eingesetzt, nicht als große Markenfarbflächen. Mobil war das Foto im Geschäftsbereich in Farbe sichtbar; die Bildfarbigkeit ist also nicht in allen geprüften Zuständen identisch. Es gibt einen klaren Maßstabskontrast: sehr große fette Groteskschrift für die Inszenierung, kleine normale Groteskschrift für Navigation und „Roboto Mono“ für technische Beschriftungen. Die japanischen Unterzeilen bringen zusätzlich einen anderen Schriftcharakter ein. Für eine deutschsprachige Portfoliodemo ist daraus der Größenkontrast sinnvoll ableitbar; die Sprachmischung ist eine Eigenheit dieser japanischen Marke. Die Bewegungen sind umfangreich: Auftaktsequenz, laufender Hintergrundfilm, von Lenis geglättetes Containerscrollen, einzelne Scroll-Parallaxeffekte, autonome gegenläufige Laufbänder und dauerhafter Showreelzugang. Ein gewöhnliches statisches Grid steht nicht im Zentrum. Die Website inszeniert ihre Produktionsfirma, bevor sie konkrete Geschäftsbereiche erklärt. ### Showreel-Interaktion Der Klick auf „Play Showreel“ öffnet den Film unmittelbar innerhalb der Website, ohne externe Vimeo-Seite. Der Bildschirm wird nahezu vollständig Film. „Exit“ sitzt klein oben rechts; unten liegen Titel, Zeitanzeige, Fortschritt, Play/Pause und Tonsteuerung. Der Player hat eine eigens gestaltete kleine Oberfläche. Die Filmwiedergabe war im Test aktiv und der Zähler stand im Screenshot bei etwa zwei Sekunden. Dieser Teil passt direkt zu Davids Wunsch: Ein Bild oder Playelement führt zum Film, ohne vorangestellte Credits. Das Prinzip funktioniert unabhängig davon, ob die Oberfläche davor eine dichte Projektwand oder eine freie Komposition ist. ### Smartphone Der reguläre Einstieg bewahrt das Motiv und das grafische Zeichen in einem hohen Ausschnitt. Links oben bleibt die Wortmarke; rechts steht ein ausgeschriebenes „Menu“ mit kleiner Skala. Der große Film wird deutlich enger beschnitten. Die Showreel-Kachel erscheint über dem unteren Bereich des ersten Bildschirms. Der nächste Abschnitt ist schon unten angekündigt. Das geöffnete Menü liegt auf Schwarz und zeigt große, fette, mehrzeilige Ziele untereinander. Feine Linien trennen die Einträge; die sekundären japanischen Zeilen bleiben wesentlich kleiner. Der Schließbutton befindet sich dort, wo vorher „Menu“ stand. In den Geschäftsbereichen werden die großen Titel sinnvoll zweizeilig, die Bilder folgen in voller Inhaltsbreite. Die gemessene Breite betrug `innerWidth = scrollWidth = 390`; horizontaler Überlauf war in diesen Ansichten nicht vorhanden. Der mobile Viewport ist mit `width=device-width` gesetzt, enthält jedoch zusätzlich `maximum-scale=1.0`. Das sollte für die David-Demo nicht übernommen werden: die Vergrößerung durch Besucher muss möglich bleiben. ## Frühere Ableitung für Version C „Playground“ Diese Empfehlungen entstanden vor der präzisen Scrollanalyse. Sie sind keine Beschreibung der Originalmechanik; insbesondere war die vorgeschlagene kleine Verschiebung keine getreue Umsetzung der nun gemessenen YK-Effekte. Für eine Übernahme konkreter Animationen gilt die [separate Scrollanalyse](ykproduce-scroll-analysis.md). Die folgenden Punkte sind Empfehlungen und eigenständige Gestaltungsideen, keine Kopie vorhandener YK-Funktionen. - **Schrift als Teil der Bildkomposition.** Eine sehr große Namensdarstellung und versetzt komponierte Filmfenster sollen gemeinsam den Einstieg bilden. Die Identität entsteht weiterhin durch David Friedrichs Namen; das fremde YK-Zeichen wird nicht übernommen. - **Ein Wechsel des Maßstabs.** Große Hauptfilme wechseln mit kleineren, versetzten Hochformaten. Dazwischen dürfen freie Flächen stehen. Damit unterscheidet sich diese Variante tatsächlich vom regelmäßigen schwarzen Drei-Spalten-Raster der Cinema-Version. - **Gezielte Bewegung.** Kurze stumme Loops beleben einzelne sichtbare Bilder. Eine langsame kleine Verschiebung im Einstieg darf die räumliche Beziehung verdeutlichen. Es gibt keine verpflichtende Intro-Wartezeit, keine übernommene virtuelle Scrollmechanik und keine Animation als Voraussetzung für den Zugriff auf die Arbeiten. - **Eine kompakte zweite Ansicht.** Eine Indexdarstellung kann dieselbe Auswahl direkt nach Titel zeigen. So bleiben Experiment und schnelle Orientierung nebeneinander verfügbar, ohne eine zweite Projektebene einzuführen. - **Direktes Abspielen auf allen Geräten.** Ein eigenes schwarzes Dialogfenster erhält natives Video, einen klaren Schließbutton, Escape-Unterstützung und Rückgabe des Tastaturfokus. Auf Touchgeräten bleiben Playelemente sichtbar. - **Kurze funktionale Beschriftungen.** Indexnummer, Werktitel und Play helfen bei der Bedienung. Erfundenes Koordinatendekor, technische Skalen und YKs Markenmotto gehören nicht automatisch zur übernommenen Richtung. - **Material ehrlich kennzeichnen.** Die vorhandenen Filme sind Demo-Material von Rodrigo Bustamante. Biografische Aussagen über David werden aus dieser Referenz nicht abgeleitet. ## Screenshot-Index | Datei | Zustand | Einordnung | |---|---|---| | [ykproduce-01-desktop-start.png](screenshots/ykproduce-01-desktop-start.png) | 1440×1000 | Regulärer Einstieg nach dem Intro | | [ykproduce-02-desktop-scrolled.png](screenshots/ykproduce-02-desktop-scrolled.png) | 1440×1000 | Große Sektionsüberschrift, asymmetrisches Foto | | [ykproduce-03-desktop-type-composition.png](screenshots/ykproduce-03-desktop-type-composition.png) | 1440×1000 | Übergang zu Hellgrau und großmaßstäblicher Typografie | | [ykproduce-04-desktop-showreel.png](screenshots/ykproduce-04-desktop-showreel.png) | 1440×1000 | Aktiver eigener Showreelplayer | | [ykproduce-05-mobile-start.png](screenshots/ykproduce-05-mobile-start.png) | 390×844 | Regulärer mobiler Einstieg nach dem Intro | | [ykproduce-06-mobile-scrolled.png](screenshots/ykproduce-06-mobile-scrolled.png) | 390×844 | Zweizeilige Sektionstitel und Bildbreite | | [ykproduce-07-mobile-menu.png](screenshots/ykproduce-07-mobile-menu.png) | 390×844 | Geöffnetes mobiles Hauptmenü | | [ykproduce-08-desktop-about.png](screenshots/ykproduce-08-desktop-about.png) | 1440×1000 | Heller Bereich mit horizontalem Fotopanorama | | [ykproduce-20-desktop-intro.png](screenshots/ykproduce-20-desktop-intro.png) | 1440×1000 | Frühe Intro-Phase, ausdrücklich kein regulärer Einstieg | | [ykproduce-21-mobile-intro.png](screenshots/ykproduce-21-mobile-intro.png) | 390×844 | Frühe mobile Intro-Phase | | [ykproduce-22-mobile-intro-later.png](screenshots/ykproduce-22-mobile-intro-later.png) | 390×844 | Weiteres Bild innerhalb des mobilen Intros | | [ykproduce-23-desktop-intro-6s.png](screenshots/ykproduce-23-desktop-intro-6s.png) | 1440×1000 | Zeitprobe ungefähr 6 Sekunden nach DOM-Laden | | [ykproduce-24-desktop-intro-12s.png](screenshots/ykproduce-24-desktop-intro-12s.png) | 1440×1000 | Zeitprobe ungefähr 12 Sekunden, Oberfläche bereits sichtbar | | [ykproduce-25-desktop-intro-18s.png](screenshots/ykproduce-25-desktop-intro-18s.png) | 1440×1000 | Zeitprobe ungefähr 18 Sekunden, regulärer Film | | [ykproduce-26-desktop-intro-24s.png](screenshots/ykproduce-26-desktop-intro-24s.png) | 1440×1000 | Zeitprobe ungefähr 24 Sekunden, regulärer Film | Die Dateinamen 23–26 bezeichnen die Messreihe zum Introübergang; ab dem vollständigen Erscheinen von Navigation und Showreel-Kachel zeigen sie den regulären Zustand. Messdaten liegen in `ykproduce-initial.json`, `ykproduce-mobile.json` und `ykproduce-observations.json`.