Über diese Vorlage
Für eine Agentur oder ein Studio löst Northstar das Thema Landingpage mit einem einzigen erfassten Briefing. Farbe bleibt auf petrol #1D8FB8 darunter, weiß #EEF2F3 für die Schrift und gedämpftes orange #F0DAC8 für die Akzente begrenzt, gesetzt in Instrument Serif. Der Eintrag nennt den Stack, der die Seite erzeugt hat (vanilla JS), statt ihn zu verschweigen. Die Bewegung bleibt auf Übergänge von 580ms und cubic-bezier(.16,1.3,1) beschränkt. Lass es beim Schreiben offen: Die 11.589 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Entwickler, die das Landingpage-Design auch bei langsamer Verbindung am Leben halten müssen, planen 1280x956 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Wenn die Bewegung wegfallen muss, funktioniert das Landingpage-Design trotzdem, weil dann 100vh hohe Sektionen und Abstände in 14px-Schritten die Hierarchie übernehmen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Northstar.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #F0DAC8, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #F0DAC8 ist das einzige Element in der Leiste mit Gewicht.
- Nichts davon ist geerbt. Das Briefing nennt die Zahlen: 100vh hohe Sektionen, Abstände in 14px-Schritten, 580ms Übergänge und Easing cubic-bezier(.16,1.3,1). Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet. Miss nach, bevor du anpasst.
- Die Display-Größe trägt die Aussage. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Instrument Serif in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst.
- Erst der Text, dann die Dekoration. Die Komposition ist bei 1280x956 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 1280x956, und deshalb hält sie zusammen, wenn sich der Text ändert.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 580ms auf cubic-bezier(.16,1.3,1). Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 1280x956-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Bewegung ist hier Rückmeldung und nicht Dekoration. Stillstand ist eine gültige Entscheidung.
Wie Northstar den ersten Blick ordnet
Vergleich den Seitenkopf mit einem typischen Landing-Screen im Bereich Agentur. Beide tragen eine Zeile und eine Handlung; hier stehen die Navigation, die Überschrift, die Kennzahlen-Zeile, der Hintergrund-Clip und der Footer in fester Reihenfolge, statt mit gleichem Gewicht zu konkurrieren. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was eine Agentur oder ein Studio hier gewinnt
Wenn dein erster Screen gerade drei Dinge erklärt, ist das hier die Version, die eines erklärt. die Navigation, die Überschrift, die Kennzahlen-Zeile, der Hintergrund-Clip und der Footer sind in Leserichtung gestaffelt, und 100vh hohe Sektionen und Abstände in 14px-Schritten geben den Takt vor. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Was du in Northstar zuerst änderst
Wenn du eigene Medien einsetzt, behalt Zuschnitt und Ebenenreihenfolge. Das Medium ist ein Standbild in 1280x956. Genau diese Platzierung hält den Text lesbar. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Häufige Fragen
Wie lang ist der Prompt hinter Northstar?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1280x956, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich vanilla JS, um Northstar nachzubauen?
Die Referenz ist zufällig in vanilla JS gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Darf ich Northstar in einem Kundenprojekt verwenden?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1280x956 erfasst.
