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.

Botón volver arriba