Über diese Vorlage
Aurelion Blog ist die Referenz (Blog-Bereich) für dieses Publikum, also für ein KI- oder SaaS-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Die ganze Seite baut auf weiß #F3F4F4 darunter, schwarz #1A1A1A für die Schrift und gelb #F3DE58 für die Akzente auf. Es kommt als React und Tailwind CSS, damit sich der ganze Blog-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung kommt über Übergänge von 700ms und eine Videospur in Schleife nicht hinaus. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Blog-Bereich wandern unverändert in deine Marke.
Gemacht für
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein 1400x1080 Rahmen behalten und den Rest des Blog-Bereich-Designs neu bauen.
- Produktmarketer, die brauchen, dass die Komposition (Blog-Bereich) auch mit 6,5s Video in Schleife hinter dem Text lesbar bleibt.
- Produktteams, die die Blog-Bereich-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
Was enthalten ist
- Navigation ohne Hintergrund. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #F3DE58, während Wortmarke und Links auf der Textfarbe zurücktreten. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #F3DE58 ist das einzige Element in der Leiste mit Gewicht.
- Größen im Briefing fixiert. Die Werte sind die Spezifikation: Abstände in 30px-Schritten und 700ms Übergänge, aufgenommen bei 1400x1080 und nicht aus einem Screenshot abgeleitet. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird. Prüfe einen Nachbau gegen dieselben Zahlen.
- Schmale Navigationsleiste. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1400x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Werte bis in den Build. Die Abstände sind genauso zitiert (Abstände in 30px-Schritten und 700ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 6,5s-Schleife in 1400x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Die Zeiten stehen im Briefing
Das Animationsbudget ist klein und ausdrücklich benannt: 700ms, eingesetzt für Zustandswechsel und nicht für Auftritte. Ein Wert wird für alle Bedienelemente wiederverwendet, ihr Timing kann also nicht auseinanderlaufen.
Die Zeitwerte hinter dem Eintrag Blog-Bereich
Die Bewegung ist begrenzt: Übergänge von 700ms, eine Medienschleife von 6,5s und eine Überschrift Wort für Wort. Nichts im Eintrag Blog-Bereich animiert länger, als das Briefing erlaubt. Nichts in diesem Eintrag Blog-Bereich animiert um seiner selbst willen.
Was du in Aurelion Blog zuerst änderst
Die Palette zuerst neu zu belegen ist der übliche Fehler. Sie ändert die Stimmung, ohne die Komposition anzufassen, und Abstände in 30px-Schritten und 700ms Übergänge tragen das Layout weiterhin; mach Text und Medien zuerst und die Palette zuletzt. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Wie der Eintrag Blog-Bereich umbricht
Eine feste Desktop-Skala wäre einfacher gewesen. Das Briefing nimmt dafür eine andere Entscheidung auf: eine Größe zwischen 56px und 30px, und genau das hält die Display-Zeile zwischen den Breiten proportional. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Häufige Fragen
Wie ist dieser Eintrag zu Aurelion Blog aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.024 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Aurelion Blog?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1400x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Blog-Bereich von Aurelion Blog in einem anderen Stack nachbauen?
Aurelion Blog 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.
