Corra la voz: hermosos ejemplos de IU testimoniales

Todos quieren recibir comentarios positivos por un trabajo bien hecho. Esa es una razón por la cual tantas empresas incluyen testimonios en su sitio web.

M√°s all√° de los sentimientos c√°lidos y confusos, los testimonios tambi√©n pueden ayudar a reclutar nuevos clientes. Saber que otros han tenido una buena experiencia inspira confianza. En general, es un peque√Īo ciclo feliz que ayuda a mantener el negocio en auge.

En t√©rminos de implementar una IU testimonial, lo simple es a menudo mejor. Sin embargo, eso no significa que tengan que ser aburridos. El uso inteligente del color, el dise√Īo y los efectos especiales pueden convertir sus testimonios en algo que se destaque.

Echemos un vistazo a algunos ejemplos que dar√°n a sus testimonios un lugar para brillar.

Todos a bordo del carrusel

Los testimonios a menudo se combinan con controles deslizantes y carruseles para interactividad y eficiencia. Una serie de ejemplos en nuestra colecci√≥n los utilizan. Sin embargo, este ejemplo es √ļnico en su dise√Īo. Si bien hay flechas de navegaci√≥n est√°ndar en la parte inferior de la funci√≥n, hacer clic en las fotos del cliente a cada lado tambi√©n le permitir√° deslizarse hacia adelante y hacia atr√°s.

Vea el carrusel de testimonios receptivos de Pen de Md Nahidul Islam (@thenahid)

Formas y arcoiris

Si está buscando agregar una sección de testimonios a su página que se destaque, sería difícil superar esto. Primero, está el degradado animado que cambia de color en el fondo. En segundo lugar, el uso de la ruta de clip CSS crea un aspecto impresionante en las imágenes. Incluso con todo eso, la interfaz de usuario sigue siendo simple y elegante.

Vea el control deslizante Testimonial Pen Responsive de hellokatili (@hellokatili)

No se requiere JavaScript

Para todos los puristas de CSS, aqu√≠ hay una soluci√≥n que no necesita una sola l√≠nea de JavaScript. Si bien no es nada impactante en t√©rminos de apariencia, en realidad es algo bueno. Le deja mucho espacio para que pueda dise√Īarlo para que coincida con sus necesidades. Adem√°s, esto encajar√≠a bien en un espacio relativamente peque√Īo.

Vea el Pen Testimonial Slider Pure CSS de MAHESH AMBURE (@ maheshambure21)

Est√° en las cartas

La interfaz de usuario de esta tarjeta es simple y hermosa. Cada tarjeta tiene su propia foto de fondo, presumiblemente para usar la foto o el logotipo de un cliente. La opacidad CSS se usa para permitir suficiente contraste para colocar texto blanco en la parte superior. Tambi√©n alienta el uso de peque√Īas cantidades de contenido, que es mucho m√°s f√°cil de digerir que un testimonio m√°s largo.

Vea la Pluma # 1574 – Tarjeta de testimonios de LittleSnippets.net (@littlesnippets)

Un nuevo √°ngulo

El dise√Īo es en lo que nos centramos en esta demostraci√≥n que no funciona. Demuestra que la simplicidad puede ser realmente efectiva. El ligero √°ngulo en la foto de fondo atrae sus ojos, mientras que el generoso relleno alrededor de la cita emite una sensaci√≥n de amplitud.

Vea el widget de testimonios de Pen Stripe en Tailwind CSS por Adam Wathan (@adamwathan)

Cotizaciones de desplazamiento

Aquí hay una versión diferente de una IU testimonial. Es de pantalla completa, y tienes que pasar el cursor sobre las imágenes para ver la cotización respectiva de cada persona. El aspecto es increíblemente nítido y las transiciones son suaves. Esta podría ser una buena opción para sitios web más centrados artísticamente.

Ver el Pen Testimonial Hover Reveal por Dave Knispel (@daveknispel)

Una toma diferente

Hay mucho que gustar en este ejemplo. El dise√Īo de carrusel de lado a lado crea un efecto visual interesante. Las im√°genes se mueven hacia la izquierda a medida que las comillas cambian a la derecha. Hablando del √°rea de cotizaci√≥n, ofrece mucho espacio en blanco y es f√°cil de leer. Es un paquete que es todo menos t√≠pico.

Vea el control deslizante Testimonial Pen, control deslizante swiper por md aqil (@ md-aqil)

Carta de colores

Otro excelente ejemplo de simplicidad, este dise√Īo de tarjeta utiliza un par de efectos CSS para diferenciarse. Primero est√° la comilla ligeramente rotada en el fondo. La transformaci√≥n CSS se usa para romper la uniformidad, en el buen sentido. Adem√°s, el degradado colorido en el pie de p√°gina hace que toda la tarjeta, nos atrevamos a decir, "pop".

Vea el Pen mdJWryR por bradley (@bradleyham)

Hermosa alabanza

Toda la idea detrás de la recopilación de testimonios es demostrar que sabes cómo hacer felices a los clientes. Para varias empresas y organizaciones diferentes, sirven como una herramienta clave de venta.

Cuando se trata de mostrar testimonios en un sitio web, hay una serie de opciones convincentes. Los ejemplos anteriores muestran c√≥mo el uso del color, el movimiento, la tipograf√≠a y el dise√Īo pueden desempe√Īar un papel importante en la construcci√≥n de una IU que llame la atenci√≥n. Depende de usted decidir qu√© enfoque funciona mejor para su marca.

¬ŅQuieres ver a√ļn m√°s IU testimoniales? Eche un vistazo a nuestra colecci√≥n CodePen y descubra qu√© m√°s est√°n haciendo los dise√Īadores.