6 Design-Richtungen für s01-pm.de. Jede Demo ist vollständig navigierbar, zweisprachig (DE/EN) und startet mit einem Vollbild-Video.
6 design directions for s01-pm.de. Every demo is fully navigable, bilingual (DE/EN) and opens with a full-screen video hero.
01 / 06
Nach spacex.com: ein Vollbild-Panel pro Thema, Text unten links, Versalien-Labels, Rahmen-Buttons, Navigation blendet beim Scrollen aus. Slate Teal, Limette als Primäraktion, Schriften nach S01-Stylesheet.
After spacex.com: one full-screen panel per topic, copy bottom-left, uppercase labels, outlined buttons, navigation that hides while scrolling. Slate teal, lime for the primary action, S01 stylesheet type.
02 / 06
Zweite SpaceX-Variante im Stil der Missionsseiten: Anthrazit statt Teal, ein Vollbild-Video-Hero mit Versalien-Headline, große Kennzahlen, nummerierte Leistungen, Projekte als Missions-Zeitstrahl.
Second SpaceX variant in the style of its mission pages: charcoal instead of teal, one full-screen video hero with an uppercase headline, big key figures, numbered services, projects as a mission timeline.
03 / 06
Nach arup.com: weiße Seite, großes Statement als Überschrift, bildgeführte Teaser-Karten mit Kategorie-Label, ruhige Serifenlose, Textlinks statt Buttons, umfangreicher Footer.
After arup.com: white page, a big statement headline, image-led teaser cards with category labels, calm sans type, text links instead of buttons, extensive footer.
04 / 06
Zweite Arup-Variante: Off-White-Seite, geteilter Hero mit Video links, Leistungen als Kacheln mit Frage-Charakter, Tabs, Projekte als Zeitstrahl, Sand-Flächen.
Second Arup variant: off-white page, split hero with the video on the left, services as question-style tiles, tabs, projects as a timeline, sand surfaces.
05 / 06
Beste Kombination: SpaceX-artiger Vollbild-Video-Einstieg mit Versalien-Headline unten links und ausblendender Navigation, danach Arup-artige redaktionelle Abschnitte mit Bild-Teasern, Projektkarten und großem Footer.
Best of both: a SpaceX-like full-screen video opening with the uppercase headline bottom-left and a hiding navigation, then Arup-like editorial sections with image teasers, project cards and a large footer.
06 / 06
Nach apple.com: schmale dunkle Leiste, große zentrierte Headlines, Video, das beim Scrollen zu einer Karte schrumpft, abwechselnd helle und dunkle Vollbild-Abschnitte, Kacheln mit großen Radien. Kinoreife Bewegung: Trägheits-Scrolling, Wort-für-Wort-Headlines.
After apple.com: thin dark bar, big centered headlines, a video that shrinks into a card as you scroll, alternating light and dark full-bleed sections, tiles with large radii. Cinematic motion: inertia scrolling, word-by-word headlines.