Verbreiten Sie das Wort: schöne Beispiele für Testimonial-Benutzeroberflächen

Jeder möchte positives Feedback für eine gut gemachte Arbeit erhalten. Dies ist einer der Gründe, warum so viele Unternehmen Testimonials auf ihrer Website veröffentlichen.

Neben warmen und verwirrenden Gefühlen können Testimonials auch dazu beitragen, neue Kunden zu gewinnen. Zu wissen, dass andere gute Erfahrungen gemacht haben, schafft Vertrauen. Insgesamt ist es ein glücklicher kleiner Zyklus, der dazu beiträgt, dass das Geschäft boomt.

In Bezug auf die Implementierung einer Testimonial-Benutzeroberfläche ist die Einfachheit oft besser. Das heißt aber nicht, dass sie langweilig sein müssen. Der geschickte Einsatz von Farbe, Design und Spezialeffekten kann Ihre Testimonials hervorheben.

Schauen wir uns einige Beispiele an, die Ihren Testimonials einen Platz zum Leuchten geben.

Alle an Bord des Karussells

Testimonials werden häufig mit Schiebereglern und Karussells kombiniert, um Interaktivität und Effizienz zu erzielen. Einige Beispiele in unserer Sammlung verwenden sie. Dieses Beispiel ist jedoch in seinem Design einzigartig. Während sich am unteren Rand der Funktion Standardnavigationspfeile befinden, können Sie durch Klicken auf die Kundenfotos auf jeder Seite auch hin und her scrollen.

Sehen Sie das Karussell mit empfänglichen Zeugnissen aus Md Nahidul Islams Feder (@thenahid)

Formen und Regenbogen

Wenn Sie Ihrer Seite einen Testimonial-Bereich hinzufügen möchten, der auffällt, ist dies schwer zu übertreffen. Erstens gibt es den animierten Farbverlauf, der die Farbe im Hintergrund ändert. Zweitens erzeugt die Verwendung des CSS-Clip-Pfads ein atemberaubendes Aussehen der Bilder. Trotz alledem ist die Benutzeroberfläche einfach und elegant.

Siehe hellokatilis Testimonial Pen Responsive-Schieberegler (@hellokatili)

JavaScript ist nicht erforderlich

Für alle CSS-Puristen gibt es hier eine Lösung, die keine einzige Zeile JavaScript benötigt. Während es in Bezug auf das Aussehen nichts Beeindruckendes ist, ist es tatsächlich eine gute Sache. Sie haben viel Platz, sodass Sie es Ihren Anforderungen entsprechend gestalten können. Dies würde auch auf relativ kleinem Raum gut passen.

Siehe den MAHESH AMBURE Slider Pure CSS Testimonial Pen (@ maheshambure21)

Es ist in den Karten

Die Benutzeroberfläche dieser Karte ist einfach und schön. Jede Karte hat ein eigenes Hintergrundfoto, vermutlich um das Foto oder Logo eines Kunden zu verwenden. Die CSS-Deckkraft wird verwendet, um einen ausreichenden Kontrast zu ermöglichen, um weißen Text darüber zu platzieren. Es fördert auch die Verwendung kleiner Mengen an Inhalten, die viel leichter zu verdauen sind als ein längeres Zeugnis.

Siehe Pen # 1574 – LittleSnippets.net Testimonial Card (@littlesnippets)

Ein neuer Blickwinkel

In dieser Demo konzentrieren wir uns auf Design, das nicht funktioniert. Es zeigt, dass Einfachheit wirklich effektiv sein kann. Der leichte Winkel im Hintergrundfoto zieht Ihre Augen an, während die großzügige Polsterung um das Datum ein Gefühl von Geräumigkeit vermittelt.

Weitere Informationen finden Sie im Testimonial-Widget für Stiftstreifen unter Tailwind CSS von Adam Wathan (@adamwathan)

Reise Zitate

Hier ist eine andere Version einer Testimonial-Benutzeroberfläche. Es ist Vollbild und Sie müssen mit der Maus über die Bilder fahren, um den jeweiligen Preis für jede Person zu sehen. Der Look ist unglaublich scharf und die Übergänge sind glatt. Dies könnte eine gute Option für künstlerisch ausgerichtete Websites sein.

Siehe Hover Reveal Testimonial Pen von Dave Knispel (@daveknispel)

Eine andere Einstellung

In diesem Beispiel gibt es viel zu mögen. Das Karussell-Design nebeneinander erzeugt einen interessanten visuellen Effekt. Die Bilder werden nach links verschoben, während sich die Anführungszeichen nach rechts ändern. Apropos Zitatbereich, es bietet viel Leerraum und ist leicht zu lesen. Es ist ein Paket, das alles andere als typisch ist.

Siehe den Testimonial Pen-Schieberegler, Swiper-Schieberegler von md aqil (@ md-aqil)

Farbkarte

Ein weiteres hervorragendes Beispiel für Einfachheit: Dieses Kartendesign verwendet einige CSS-Effekte, um sich zu differenzieren. Zuerst gibt es das leicht gedrehte Zitat unten. Die CSS-Transformation wird verwendet, um die Einheitlichkeit auf gute Weise zu brechen. Auch der bunte Farbverlauf in der Fußzeile macht die ganze Karte, wagen wir zu sagen, "Pop".

Siehe den Stift mdJWryR von bradley (@bradleyham)

Schönes Lob

Die ganze Idee hinter dem Sammeln von Testimonials ist zu zeigen, dass Sie wissen, wie Sie Kunden glücklich machen können. Für verschiedene Unternehmen und Organisationen dienen sie als wichtiges Verkaufsinstrument.

Wenn es darum geht, Testimonials auf einer Website anzuzeigen, gibt es eine Reihe überzeugender Optionen. Die obigen Beispiele zeigen, wie die Verwendung von Farbe, Bewegung, Typografie und Design eine wichtige Rolle beim Aufbau einer auffälligen Benutzeroberfläche spielen kann. Es liegt an Ihnen, zu entscheiden, welcher Ansatz für Ihre Marke am besten geeignet ist.

Möchten Sie noch mehr Testimonial-Benutzeroberflächen sehen? Schauen Sie sich unsere CodePen-Kollektion an und finden Sie heraus, was Designer sonst noch vorhaben.