Über diese Vorlage
Das hier ist der Eintrag Onboarding-Flow von Kova Mobile App, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Sie beginnt mit „Turn your ideas into cinematic scenes“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Farbe bleibt auf weiß #FFFFFF darunter, schwarz #000000 für die Schrift und indigo #2E1065 für die Akzente begrenzt, gesetzt in Helvetica Neue. Es kommt als eine einzelne Komponente, damit sich der ganze Onboarding-Flow ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung kommt über Übergänge von 800ms und eine Videospur in Schleife nicht hinaus. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Onboarding-Flow wandern unverändert in deine Marke.
Gemacht für
- Wenn der Build auf eine einzelne Komponente aufsetzt, übernimm zuerst 100vh hohe Sektionen und Abstände in 24px-Schritten und lass die Palette in Ruhe, bis das Raster steht.
- Die Seite richtet sich an Frontend-Entwickler, die ein Onboarding-Flow-Design für ein KI- oder SaaS-Produkt in eine einzelne Komponente nachbauen und die Zahlen hinter der Optik suchen.
- Entwickler, die das Onboarding-Flow-Design auch bei langsamer Verbindung am Leben halten müssen, planen 1252x864 und die Schriftgrößen-Skala als Gewichtsbudget ein.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #2E1065 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Gemessen statt geschätzt. Schrift und Abstände stammen hier aus einer einzigen Liste: 100vh hohe Sektionen, Abstände in 24px-Schritten und 800ms Übergänge. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System. Tausch die Schrift oder den Text, aber nicht die Skala.
- Ein Medien-Element trägt die Stimmung. Die Medien leisten Atmosphäre statt Erzählung: eine Schleife von 8s in 1252x864 hinter allem anderen. Exportiere in 1252x864 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Zwei Schriften, klare Aufgaben. Die Schrift ist Helvetica Neue an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Ziffern nutzen dieselbe Schrift wie das Interface, Statistiken und Labels gehören damit zu einem System.
Bewegung & Interaktion
Gerendert, nicht illustriert
Ein WebGL-Canvas leistet die visuelle Arbeit auf dem Rahmen mit 1252x864, die Schrift sitzt darüber oder daneben. Weil es ein Rendering und kein Standbild ist, hält das zentrale Element in jeder Größe.
Zustandswechsel mit Zeitwert
Die Bedienelemente reagieren in 800ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Die Reihenfolge im Eintrag Onboarding-Flow
Aufmerksamkeit wird gelenkt und nicht dem Zufall überlassen. Die Seite sagt es selbst: „Turn your ideas into cinematic scenes“. Die Abfolge steht fest: die Navigation, die Überschrift, die Kennzahlen-Zeile und der Hintergrund-Clip, und 100vh hohe Sektionen und Abstände in 24px-Schritten bestimmen die Größe jeder Station, damit nichts in falscher Reihenfolge ankommt. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was der Eintrag Onboarding-Flow richtig macht
Angenommen, deine Medien sind lauter als dein Text. Genau dafür ist diese Komposition gebaut. Das Medium ist eine Schleife von 8s in 1252x864. Der Rahmen bleibt ruhig, und 100vh hohe Sektionen und Abstände in 24px-Schritten halten den Leser am Text. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Die Zeitwerte hinter dem Eintrag Onboarding-Flow
Du könntest eine Preset-Bibliothek über diese Komposition legen, und sie würde geschäftiger wirken, nicht besser. Das Briefing bleibt bei einer kurzen Liste: Übergänge von 800ms, eine Medienschleife von 8s und Hover- und Druckzustände. Nichts in diesem Eintrag Onboarding-Flow animiert um seiner selbst willen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Kova Mobile App kopiere?
Das erfasste Briefing umfasst 3.523 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Warum nennt der Eintrag eine einzelne Komponente überhaupt?
Kova Mobile App wurde in eine einzelne Komponente 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.
Wie ist dieser Eintrag zu Kova Mobile App aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.523 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
