Über diese Vorlage
Alumica ist die Referenz (Hero-Bereich) für dieses Publikum, also für ein Fintech-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Sie beginnt mit „Automation & Fintech“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Farbe bleibt auf tiefes indigo #080210 darunter und helles orange #FF8A00 für die Akzente begrenzt, gesetzt in Inter. Es kommt als eine einzelne Komponente, damit sich der ganze Hero-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung ist Übergänge von 0.3s und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Diese Referenz ist für ein Fintech-Produkt gedacht, wenn der erste Screen vor dem Build feststehen soll.
Gemacht für
- Product Manager, die den Aufwand schätzen müssen, lesen eine einzelne Komponente als Umfang der Arbeit.
- Externe Teams, die ein Hero-Bereich-Design übernehmen und ein 2056x1396 Rahmen im Repository festhalten müssen, bevor der erste Commit läuft.
- Schreib deine eigene Headline und baue dieses Hero-Bereich-Design dann in eine einzelne Komponente mit unveränderten Maßen nach.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #FF8A00, knapp genug, um neben dem Rest der Seite leise zu bleiben. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #FF8A00 ist das einzige Element in der Leiste mit Gewicht.
- Werte zum Nachmessen. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: Abstände in 10px-Schritten und 0.3s Übergänge. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Ein randloses Video hinter der Schrift. Die Medien leisten Atmosphäre statt Erzählung: eine Schleife von 5,8s in 2056x1396 hinter allem anderen. Exportiere in 2056x1396 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Zurückhaltende Navigation. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 2056x1396, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Kurze, benannte Zeiten
Zustandswechsel sind mit 0.3s angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Das Easing steht zusammen mit der Dauer im Briefing (0.3s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Rückmeldung an den Bedienelementen
Zustände werden pro Komponente behandelt (Hover-Zustände auf Buttons und Links statt auf jeder Karte) und nicht von einer globalen Animationsschicht. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar. Halte die interaktive Ebene klein.
Alumica als Spezifikation lesen
Wenn du das an die Entwicklung übergibst, ist das Briefing das nützliche Artefakt: Abstände in 10px-Schritten und 0.3s Übergänge stehen darin, und ihr müsst nichts interpretieren. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
So wird der Eintrag Hero-Bereich deiner
Du musst den Eintrag Hero-Bereich nicht neu bauen, um ihn zu deinem zu machen. Ersetz die Zeile und die Medien, behalt die Skala (Abstände in 10px-Schritten und 0.3s Übergänge), und das Layout liest weiterhin wie entworfen. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Die Reihenfolge im Eintrag Hero-Bereich
Setz deinen eigenen Text in diesen Eintrag Hero-Bereich, und die Abfolge hält, weil die Elemente nicht austauschbar sind: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip tragen jeweils eine Aufgabe. Ein Leser im Bereich Fintech bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Alumica?
Das erfasste Briefing umfasst 2.424 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.
Wie viel von Alumica hängt von eine einzelne Komponente ab?
Alumica 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.
Ist das Briefing zu Alumica dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.424 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
