Über diese Vorlage
Digital Epoch: Hero-Bereich für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Das Farbschema ist weiß #F9FAFB darunter, tiefes blau #0A152D für die Schrift und tiefes blau #0A1B33 für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 800x589, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Lass es beim Schreiben offen: Die 4.594 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Inhouse-Teams, die ein Hero-Bereich-Design erweitern und Schrift von 12px bis 56px und Abstände in 12px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Digital Epoch.
- Dieses Hero-Bereich-Layout dient Marketingverantwortlichen, die die Entscheidung für #0A1B33 vor der Markenleitung im Raum verteidigen müssen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #0A1B33 und kommt über Schrift von 12px bis 56px und Abstände in 12px-Schritten nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0A1B33 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Panels mit gleichem Gewicht. Wo ein Textblock stehen könnte, setzt diese Seite eine Reihe Panels, das hält Hero-Bereich scanbar. Die Panels teilen sich die Interface-Schrift in einer Größe, dadurch wird das Raster nicht zu einem zweiten Layout. Eine Idee pro Panel.
- Der Aufbau passt in einen Screen. Die Komposition ist bei 800x589 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 800x589, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Schmale Navigationsleiste. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x589, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Durchgehende horizontale Bewegung
Ein Laufband zieht in einer Endlosschleife durch die Komposition, gesetzt in Inter. Der aktive Eintrag ist mit #0A1B33 markiert und nicht mit einer Größenänderung.
Hover nur, wo er etwas bedeutet
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte, der Rest des Layouts ist eine feste Komposition. Nichts auf der Seite öffnet ein Modal oder kapert das Scrollen; die Interaktionen bleiben am Element. Prüfe die Zustände auf einem Touch-Gerät.
Das Argument des Eintrags Hero-Bereich
Die meisten Agentur-Seiten scheitern am Hinzufügen: mehr Sektionen, mehr Verläufe, mehr Behauptungen. Digital Epoch macht es umgekehrt. Die Komposition bleibt auf weiß #F9FAFB und nutzt tiefes blau #0A1B33 nur für Aktionen, und das reicht, um bewusst zu wirken. Digital Epoch nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was du in Digital Epoch zuerst änderst
Wiederverwendbar ist die Komposition, das Thema gehört dir. Tausche die Headline, behalte die Schriftgrößen-Skala (Schrift von 12px bis 56px) und prüfe den Akzent #0A1B33 erneut über deinen eigenen Medien. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold. Das Thema ist der Teil, der sich ändern sollte.
Die Zahlen hinter dem Eintrag Hero-Bereich
Vergleich das mit einem Template, das seine Abstände eine Vorliebe nennt. Hier sind dieselben Werte benannt (Schrift von 12px bis 56px und Abstände in 12px-Schritten), und eine Änderung behält sie entweder oder bricht die Komposition sichtbar. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Digital Epoch kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x589, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Digital Epoch nachzubauen?
Digital Epoch 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.
Woher stammt das Design von Digital Epoch?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x589 erfasst.
