Über diese Vorlage
Aethera Studio: Hero-Bereich für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. „Beyond silence, we build the eternal“ ist die Zeile, auf die das Layout gebaut ist. Die Palette umfasst weiß #FFFFFF darunter und schwarz #000000 für die Schrift, die Schrift ist Instrument Serif. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung beschränkt sich auf Übergänge von 100ms. Lass es beim Schreiben offen: Die 3.169 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Hero-Bereich-Design ist für Agenturen gebaut, die den 800x582-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Aethera Studio.
- Wenn deine Schrift nicht Instrument Serif ist, sollten Frontend-Entwickler die Headline neu ausmessen, bevor sie den Einstieg neu takten.
Was enthalten ist
- Navigation ohne Hintergrund. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf Abstände in 75px-Schritten und 100ms Übergänge gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x582, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Links vor der Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 75px-Schritten und 100ms Übergänge bemessen, damit sie als Streifen wirkt und nicht als Band.
- Größen stehen im Briefing. Das Briefing legt Abstände in 75px-Schritten und 100ms Übergänge fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
- Eine Schrift, diszipliniert eingesetzt. Die Display-Zeile steht in Instrument Serif in einer vom Briefing festgelegten Größe, dadurch ist die Headline ein Kompositionselement und kein Absatz. Die Laufweite ist pro Größe gesetzt, Display-Zeile und Bildunterschrift nutzen also nicht denselben Wert. Füge keine Größe ohne Aufgabe hinzu.
Bewegung & Interaktion
Kurze, benannte Zeiten
Die Bedienelemente reagieren in 100ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation.
Rückmeldung an den Bedienelementen
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek. Halte die interaktive Ebene klein.
So wird der Eintrag Hero-Bereich deiner
Angenommen, du hast nur einen Nachmittag. Ändere die Zeile und das Label der Handlung; Abstände in 75px-Schritten und 100ms Übergänge bleiben unangetastet, und du hast eine Seite, die beabsichtigt aussieht. Behalt den Medienzuschnitt; er leistet so viel wie die Schrift.
Was eine Agentur oder ein Studio hier gewinnt
Wo ein Template den Fold mit Modulen füllt, ist die Liste im Eintrag Hero-Bereich kurz: die Navigation, die Überschrift und der Hintergrund-Clip, und dann ist Schluss. Nichts wird aufgebläht, um Fläche zu füllen; genau das belegen Abstände in 75px-Schritten und 100ms Übergänge. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Wie der Eintrag Hero-Bereich umbricht
Einen schmalen Screen kann man nicht durch Verkleinern reparieren. Dieses Briefing behandelt die Änderung in Schrift und Navigation: die Skala ist fließend statt gestuft. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Häufige Fragen
Wie lang ist der Prompt hinter Aethera Studio?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x582, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von Aethera Studio in einem anderen Stack nachbauen?
Aethera Studio 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.
Was steuert die Bewegung in Aethera Studio?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 100ms angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
