Über diese Vorlage
DesignPro Academy hält den Entscheidungsweg fest: Hinter dem Eintrag Hero-Bereich stehen 3.038 Zeichen Briefing. Die Palette ist schwarz #000000 darunter, weiß #FFFFFF für die Schrift und petrol #64CEFB für die Akzente, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 800x569, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für eine Bildungs- oder Community-Marke, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für eine Bildungs- oder Community-Marke ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von DesignPro Academy.
- Studios, die ein Hero-Bereich-Design an einen Kunden übergeben und #64CEFB gegen #000000 prüfen müssen, bevor die Marke darübergelegt wird.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #64CEFB, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #64CEFB ist das einzige Element in der Leiste mit Gewicht.
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x569, damit die Medien darunter bis an den Rand durchlaufen.
- Die Schrift trägt den Ton. Die Schrift ist Inter an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Laufweite ist pro Größe gesetzt, Display-Zeile und Bildunterschrift nutzen also nicht denselben Wert. Behalte die Stufen, tausche die Schrift.
- Eine Pille für das eine Neue. Die Ankündigung ist eine Pille in #64CEFB über der Headline, kleiner gesetzt als der Begleittext, damit sie als Label und nicht als zweiter Titel gelesen wird. Das Badge trägt #64CEFB, während die Headline auf der Textfarbe bleibt.
Bewegung & Interaktion
Interaktion bleibt lokal
Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x569-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Was hier für Bildung & Community funktioniert
Dass das für eine Bildungs- oder Community-Marke funktioniert, liegt daran, dass die Referenz dem Leser nie zumutet, die Botschaft selbst zusammenzusetzen. Layout, Schrift und Farbe sind entschieden (schwarz #000000 und petrol #64CEFB, gesetzt in Inter), die erste Bildschirmfläche liest sich also als fertiges Argument und nicht als Haufen von Teilen. DesignPro Academy nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie DesignPro Academy den ersten Blick ordnet
In dieser Reihenfolge: die Navigation, das Ankündigungs-Badge und der Hintergrund-Clip. Jedes Element hat eine Aufgabe, und petrol #64CEFB ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Konkrete Zahlen altern: Ein Wert, der bei 800x569 passt, muss nicht zu deinem Rahmen passen. Das Briefing hält die Werte trotzdem fest: ein 800x569 Rahmen, weil ein genannter Wert leichter zu ändern ist als ein ungenannter. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu DesignPro Academy kopiere?
Das erfasste Briefing umfasst 3.038 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.
Kann ich Hero-Bereich von DesignPro Academy in einem anderen Stack nachbauen?
DesignPro Academy 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.
Kann ich eine aus DesignPro Academy nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 800x569 erfasst.
