Über diese Vorlage
Averra Testimonials wurde bei 1920x1208 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Sie beginnt mit „A truly collaborative process from start to finish. The results completely exceeded our initial expectations“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist weiß #EBEFE5 darunter, schwarz #111111 für die Schrift und helles limette #A5E038 für die Akzente. Es kommt als React und Tailwind CSS, damit sich der ganze Testimonials-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.04s, cubic-bezier(0.22, 1, 0.36, 1) und eine Videospur in Schleife aus. Starte beim erfassten Briefing und bearbeite dann den Eintrag Testimonials-Bereich, statt von Grund auf neu zu bauen.
Gemacht für
- Gemacht für Product Manager, die ein Testimonials-Bereich-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Produktmarketer, die brauchen, dass die Komposition (Testimonials-Bereich) auch mit 4,6s Video in Schleife hinter dem Text lesbar bleibt.
- Produktteams, die die Testimonials-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
Was enthalten ist
- Ein Breakpoint für die Links. Wortmarke, Links und die Aktion in #A5E038 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 #A5E038 ist das einzige Element in der Leiste mit Gewicht.
- Werte bis in den Build. Die Liste bleibt kurz (Abstände in 28px-Schritten, 0.04s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1)), deshalb lässt sich das ganze System von Hand prüfen. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Die Schleife als Hintergrund. Der Rahmen 1920x1208 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Die Schleife ist kurz genug (4,6s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Eine Leiste ohne Beiwerk. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1208, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 4,6s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Kurze, benannte Zeiten
Eine Dauer deckt alle Interaktionen ab (0.04s auf cubic-bezier(0.22, 1, 0.36, 1)); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (0.04s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Das Argument des Eintrags Testimonials-Bereich
Eine Tönung über den Medien wäre die billige Lösung gewesen. Das Briefing lässt sie weg. Das Medium ist eine Schleife von 4,6s in 1920x1208. Der Text hält trotzdem, weil Abstände in 28px-Schritten und 0.04s Übergänge den Rahmen ruhig halten. Averra Testimonials nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Averra Testimonials als Spezifikation lesen
Wenn du das an die Entwicklung übergibst, ist das Briefing das nützliche Artefakt: Abstände in 28px-Schritten, 0.04s Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1) stehen darin, und ihr müsst nichts interpretieren. Nichts in diesem Eintrag Testimonials-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Testimonials-Bereich
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation und die Kennzahlen-Zeile bleiben an ihrem Platz, und Abstände in 28px-Schritten und 0.04s Übergänge werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Averra Testimonials kopiere?
Das erfasste Briefing umfasst 3.584 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.
Ist das Briefing zu Averra Testimonials dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.584 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Kann ich Testimonials-Bereich von Averra Testimonials in einem anderen Stack nachbauen?
Averra 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.
