Über diese Vorlage
Für eine Agentur oder ein Studio löst Taskly das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Die Überschrift der Seite lautet „Work smarter, achieve faster“, und die Komposition ist um genau diese Worte gebaut. Das Farbschema ist blau #60B1FF darunter, tiefes blau #041320 für die Schrift und helles orange #FF801E für die Akzente, und die Seite ist in Inter gesetzt. Der Bau ist eine einzelne Komponente; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Am nützlichsten ist es, wenn beim Eintrag Hero-Bereich für Agenturen & Studios ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Das Hero-Bereich-Design zielt auf Teams, die eine einzelne Komponente schon kennen und nur eine einzelne Komponente schriftlich brauchen.
- Frontend-Entwickler, die das in eine einzelne Komponente nachbauen und die Übergänge spezifiziert statt geraten haben wollen.
- Gemacht für Designer, die in ein Projekt kommen, das schon auf eine einzelne Komponente läuft und nur noch neue Texte braucht.
Was enthalten ist
- Navigation ohne Hintergrund. Wortmarke, Links und die Aktion in #FF801E teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #FF801E ist das einzige Element in der Leiste mit Gewicht.
- Nichts davon ist geerbt. Schrift und Abstände stammen hier aus einer einzigen Liste: Abstände in 16px-Schritten. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Übernimm die genannten Werte mit dem Layout.
- Die Skala fällt steil ab. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Inter in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Die Stufe für Bildunterschriften ist klein genug, um unter einer Abbildung zu sitzen, ohne den Rhythmus der Seite zu ändern.
- Links vor der Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x592, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Sektionen kommen beim Scrollen
Sticky-Positionierung ist das einzige Scroll-Verhalten der Seite, der Effekt hat damit einen festen Platz in der Komposition. Der Effekt ändert nichts an der Lesereihenfolge der Sektionen. Hänge die Texte nie hinter einen Scroll-Trigger.
Interaktion sitzt auf den Bedienelementen
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte und ein Sticky-Element, das seine Position hält, während der Inhalt darunter durchläuft; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen.
Taskly als Spezifikation lesen
Genau das macht die Referenz wiederverwendbar: Abstände in 16px-Schritten. Nichts bleibt einem Standard überlassen, ein Ersatz mit denselben Zahlen behält also die Komposition. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was sich in Taskly bewegt
Das Animationsbudget steht fest: ein Sticky-Element und Hover- und Druckzustände. Nichts im Eintrag Hero-Bereich bewegt sich ohne einen Wert dahinter. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Die Reihenfolge im Eintrag Hero-Bereich
Die Aufmerksamkeit wird gelenkt, nicht verstreut. „Work smarter, achieve faster“ leistet diese Arbeit ab dem ersten Frame. Das Auge landet zuerst auf der Display-Zeile, dann auf der Stützzeile, dann auf der Aktion. Belege bleiben, wo sie auftauchen, ein Streifen oder eine Zeile statt einer Wand aus Testimonials. Diese Abfolge ist das Design. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Taskly?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x592, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von Taskly in einem anderen Stack nachbauen?
Taskly 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.
Woher stammt das Design von Taskly?
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 800x592 erfasst.
