Über diese Vorlage
Für eine Agentur oder ein Studio löst Cliently Testimonials das Thema Testimonials-Bereich mit einem einzigen erfassten Briefing. „Here's what they shared about their experience working with our team“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist schwarz #18181B darunter und weiß #F4F4F5 für die Schrift. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1392, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 1500ms und eine Videospur in Schleife aus. Nimm es zur Hand, wenn im Fall Testimonials-Bereich die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Wenn drei Leute an einem Testimonials-Bereich-Design arbeiten, gib Content-Leads Schrift von 14px bis 56px und Abstände in 46px-Schritten statt eines Screenshots.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Testimonials-Bereich-Design als Muster, das jede weitere Seite kopiert.
- Dieses Testimonials-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 10,4s Video in Schleife tragen kann.
Was enthalten ist
- Leiste im Raster der Seite. Eine kurze Reihe Links und eine einzelne Aktion liegen in Testimonials-Bereich, auf Schrift von 14px bis 56px und Abstände in 46px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1392, damit die Medien darunter bis an den Rand durchlaufen.
- Obere Zeile: Wortmarke, Links, eine Aktion. Der aktive Abschnitt ist über das Schriftgewicht markiert, nicht über eine Pille oder eine Unterstreichung. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Am Viewport gemessen. Die Größen wurden am Render in 1920x1392 abgelesen: Schrift von 14px bis 56px, Abstände in 46px-Schritten und 1500ms Übergänge. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern. Übernimm die Werte zusammen mit dem Layout.
- Das Video ist Hintergrund, keine Fläche. Der Hintergrund ist eine einzelne Schleife von 10,4s bei 1920x1392, auf Cover zugeschnitten und ohne Tönung. Alles andere schwebt darüber auf einer höheren Ebene. Die Schleife ist kurz genug (10,4s), dass das Auge sie als Textur liest und nicht als Zeitachse.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 1500ms. Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation. Eine Dauer pro Verhalten.
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 10,4s in 1920x1392 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt. Dreh oder exportiere in 1920x1392 oder breiter.
Wie der Eintrag Testimonials-Bereich umbricht
Die Schrift ist hier geklemmt und nicht gestuft (eine Größe zwischen 14px und 56px); die Display-Zeile springt deshalb nicht zwischen Breiten. Beide Zustände sind im selben Briefing beschrieben.
Die Reihenfolge im Eintrag Testimonials-Bereich
Vergleich den Seitenkopf mit einem typischen Landing-Screen im Bereich Agentur. Beide tragen eine Zeile und eine Handlung; hier stehen die Navigation, die Überschrift, die Kundenzeile und das Kartenraster in fester Reihenfolge, statt mit gleichem Gewicht zu konkurrieren. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
So wird der Eintrag Testimonials-Bereich deiner
Ändere zuerst den Inhalt und prüf danach den Rahmen. Schrift von 14px bis 56px, Abstände in 46px-Schritten und 1500ms Übergänge sind die Werte, die du beim Tauschen des Textes schützt. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Häufige Fragen
Warum steht der Prompt von Cliently Testimonials hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 4.333 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter Cliently Testimonials?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1392, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Cliently Testimonials nachzubauen?
Cliently Testimonials 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.
