Über diese Vorlage
Für ein Gesundheits- oder Wellness-Produkt löst ADHD Planner das Thema Preissektion mit einem einzigen erfassten Briefing. Die Palette umfasst gedämpftes orange #F6E4CF darunter, tiefes orange #321C04 für die Schrift und gedämpftes orange #D9C4AA für die Akzente, die Schrift ist Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1458x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 300ms, cubic-bezier(0.77,0,0.175,1) und eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Preissektion, statt von Grund auf neu zu bauen.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und Schrift von 42px bis 96px und Abstände in 25px-Schritten vor der ersten Runde verbindlich haben wollen.
- Gemacht für Product Manager, die ein Preissektion-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Dieses Preissektion-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Gesundheit 7,3s Video in Schleife tragen kann.
Was enthalten ist
- Ein Breakpoint für die Links. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #D9C4AA, alles über der Komposition (Preissektion) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #D9C4AA ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Feste Stufen statt einer Skala. Die Werte sind die Spezifikation: Schrift von 42px bis 96px, Abstände in 25px-Schritten, 300ms Übergänge und Easing cubic-bezier(0.77,0,0.175,1), aufgenommen bei 1458x1080 und nicht aus einem Screenshot abgeleitet. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Obere Zeile, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1458x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Schrift von 42px bis 96px, Abstände in 25px-Schritten, 300ms Übergänge und Easing cubic-bezier(0.77,0,0.175,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 7,3s-Schleife in 1458x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Kurze, benannte Zeiten
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 300ms bei jedem Zustandswechsel. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Die Reihenfolge im Eintrag Preissektion
Ein Screen, eine Handlung, und dazwischen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster. Das Briefing legt diese Reihenfolge fest, statt den ersten Screen einem Stapel von Sektionen zu überlassen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Preissektion
Jeder Übergang hier hat eine Zahl. Deshalb lassen sich Übergänge von 300ms, eine Medienschleife von 7,3s und ein Scroll-Reveal Wert für Wert portieren, statt nach Gefühl neu abzustimmen. Nichts in diesem Eintrag Preissektion animiert um seiner selbst willen.
So wird der Eintrag Preissektion deiner
Ein Template verlangt, dass du sein Layout akzeptierst; diese Referenz verlangt, dass du es behältst und alles darin änderst. Der Unterschied: Schrift von 42px bis 96px, Abstände in 25px-Schritten, 300ms Übergänge und Easing cubic-bezier(0.77,0,0.175,1) bleiben fest, während das Thema wandert. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Häufige Fragen
Was kann ich mit dem Briefing zu ADHD Planner machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 8.810 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was bekomme ich, wenn ich das Briefing zu ADHD Planner kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1458x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um ADHD Planner nachzubauen?
ADHD Planner wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
