Cerrar Notificaciones

¡No te pierdas más nada!

¡Activa las notificaciones del blog para avisarte cuando hay un nuevo contenido!

Cerrar Newsletter

¡ÚNETE A MILES DE EMPRENDEDORES DIGITALES!

Recibe los mejores contenidos para hacer crecer tu negocio online

Cerrar Seminarios online y gratuitos del 21 al 25 de octubre

Seminarios online y gratuitos del 21 al 25 de octubre

¡Regístrate!

Logra una Landing Page que convierta más con 5 ejemplos de estrategias visuales.

Logra una Landing Page que convierta más con 5 ejemplos de estrategias visuales.

Aprende cómo aplicar 5 estrategias visuales para hacer y optimizar tus landing page con estos ejemplos.

Crear imágenes para una landing page (página de aterrizaje) es como prepararte para seducir en una primera cita. Lo primero que verá tu audiencia será lo que determine si desea continuar. Aquí te traemos varios ejemplos de landing page para que te inspires.

Así como te dedicas a elegir un atuendo encantador que muestre tu personalidad, debes esforzarte de la misma manera para que tu landing page luzca atractiva y provoque leerla de principio a fin. Es importante que refleje la personalidad de tu marca junto con las características de tus productos o servicios de una forma llamativa para lograr que tus visitantes decidan permanecer en ella y realizar una acción.

Antes de entrar en el tema, debo señalar que, al igual que te pruebas un par de camisas diferentes antes de decidirte por alguna de ellas, deberás probar diferentes formas visuales para identificar cuál se adapta mejor a tus necesidades.

No se trata únicamente de elegir un diseño que siga las últimas tendencias de contenido visual, aunque eso sin duda podría ayudar. La clave para convertir se reduce a que puedas ganar la confianza de tus clientes potenciales a través del uso de señales emocionales.

Los elementos visuales proporcionan señales sutiles que actúan en el subconsciente para motivar a que tus visitantes tomen una acción. 

No importa si tu página de aterrizaje es de contenido corto o extenso, debes usar también, imágenes sólidas para persuadir a los visitantes a completar una acción.

En las páginas de aterrizaje largas, utilizar diferentes tipos de imágenes, como fotografías de productos, diagramas y fotos de testimonios contribuye a convencer a tu target de lo que estás vendiendo. En las páginas de aterrizaje cortas, las imágenes visuales pueden reemplazar al texto y complementar descripciones fuertes y concisas.

Estos son cinco ejemplos de landing page con tácticas y tipos de gráficos visuales realmente probados para hacer que tu propia landing page convierta:

1. Utiliza fotografías de productos en tu landing page que demuestren el valor real

Quizás podrías incluir en tu landing page, simplemente una foto de tu producto. Pero existe una fuerte posibilidad de que no logres convencer a las personas acerca de por qué elegirte a ti en lugar de la competencia.

Como te imaginas, debe haber algo más para convencer a las personas de dar un segundo vistazo a tu producto:

Usa una imagen de producto que refleje la propuesta de valor de tu marca.

Muchas marcas creen que es suficiente con una foto genérica de su producto. Pero las marcas muy exitosas usan planos que realmente muestran el valor de sus productos.

Mira este ejemplo de landing page:

ejemplo de landing page

Si te encuentras familiarizado con la marca Casper, sabrás que son fans de las temáticas surrealistas. Como puedes apreciar en su página de inicio que mezcla imágenes surrealistas y oníricas. En este ejemplo muestran la mirada genuina de una chica que anticipa a los compradores a la experiencia que podrán disfrutar con su producto:

Casper se especializa en vender: un colchón, un juego de sábanas y una almohada. Elementos que están juntos en la misma foto de producto. De esta manera logra que sus visitantes no sólo vean lo que ofrecen, sino también cómo funcionan dichos productos entre sí.

Pero eso no es todo. Además de exhibir las imágenes de sus productos, también refleja el valor de sus productos con una foto de ensueño que habla de: ayudarles a dormir mejor (y soñar al mismo tiempo).

Los suaves colores pastel de la imagen transmiten una sensación de paz. Ten presente que los colores evocan respuestas emocionales de los espectadores y ayudan a establecer el tono de la marca. De hecho, de acuerdo con la investigación de Kissmetrics, el 85% de los compradores identificaron el color como la razón principal por la que compran un producto.

Incluso si tu landing page ofrece productos intangibles como un ebook, aún puedes mostrar una imagen del producto para dar la sensación a quienes están interesados en él, de que realmente están recibiendo algo. En pocas palabras:

Muestra un objeto intangible en términos tangibles.

Es cierto que existe una dulce satisfacción en el solo acto de desenvolver un producto y sostenerlo en las manos. Pero no todas las empresas ofrecen productos físicos.

Es por eso que las empresas SaaS y los sitios de comercio electrónico que ofrecen productos intangibles a menudo buscan formas de aproximar a sus compradores a la experiencia de recibir un objeto.

Usar una imagen de producto que presente un producto virtual como un producto tangible puede crear la sensación de que los clientes van a recibir algo.

En Venngage, realizamos un estudio para descubrir qué imágenes convertían mejor en los anuncios de Facebook y hallamos que la segunda variación de mejor rendimiento del anuncio incluía una representación física del producto y para nuestra sorpresa la primera variación de mejor rendimiento incluía ¡Un meme!

ejemplo de landing page

Y no sólo eso, el botón rojo de llamada a la acción (CTA) funcionó mejor que otros colores que probamos. Más tarde tocaré este tema.

Esto no quiere decir que los botones rojos de CTA necesariamente funcionen mejor. La efectividad de un color de botón CTA sobre otro es un tema de debate continuo sin una respuesta definitiva (hablaré de esto con más detalle más adelante).

Echa un vistazo a la página de aterrizaje de HubSpot en donde verás un ebook en el que colaboramos con ellos:

ejemplo de landing page

Este ejemplo de landing page ofrece una imagen del producto en términos tangibles (en la tablet), lo que da a los visitantes la agradable sensación de que están recibiendo algo a cambio de su esfuerzo. En resumen:

Ofrece una demostración interactiva de tu producto en acción. 

Podrías decirle a tus visitantes que tu producto es genial, pero es posible que no estén dispuestos a creer en tu palabra.

Una forma de ganar su confianza es mostrar tu producto en acción.

Como lo hace Monotype en este ejemplo de landing page:

ejemplo de landing page

Como puedes apreciar, ellos muestran en su landing page muy inteligentemente de qué se trata su negocio, tan solo con permitirles a sus visitantes cambiar la fuente de su misión de empresa directamente en la página.

De este modo, sus visitantes se hacen una idea de lo que pueden obtener de Monotype antes de que siquiera se les pida que se comprometan con algo.

Después de todo, te sentirías mejor comprando una camisa si te la probaras primero, ¿verdad?

Puntos Claves:

  • Utiliza fotografías de producto que reflejen la propuesta de valor de tu marca.
  • Muestra tu producto en términos tangibles, incluso si tu producto está basado en la web.
  • Si deseas ganar la confianza de tus clientes potenciales, ofrece una demostración de tu producto.
  • Usa colores que reflejen el sentimiento que deseas transmitir con tu producto.

2. Emplea íconos e ilustraciones no sólo para atraer a los clientes, sino también para añadir valor

Los íconos e ilustraciones dibujados a mano se han vuelto de las tendencias más populares últimamente.

Digamos que quieres transmitir un proceso pero que no quieres ocupar tanto espacio en tu página. O tal vez, deseas reforzar en tus clientes un particular e impresionante resultado de tu producto o servicio.

En ambos casos, los íconos e ilustraciones pueden añadir un elemento funcional y artístico a tu landing page.

Usa ilustraciones para contar una historia.

Muchas empresas hoy, emplean ilustraciones personalizadas en sus sitios, en lugar de imágenes de archivo. No sé tú, pero a mí me encanta.

Las buenas ilustraciones pueden mantener a tus visitantes interesados en tu página de destino.

¡Las ilustraciones divertidas cautivan al niño que todos tenemos dentro y tienen más posibilidades de captar la atención que una foto de stock estándar!

Es más, las ilustraciones te brindan la oportunidad de contar historias de tu marca de forma creativa.

De hecho, deberías contar algunas historias en tu landing page. Después de todo, se ha demostrado que las historias ayudan en las conversiones.

Mira el entretenido ejemplo de landing page de Intercom:

ejemplo de landing page

Las ilustraciones refuerzan increíblemente la idea de “diversión” (lo cual nos da una brillante idea). Pero también cuentan una historia.

En la primera ilustración, vemos como un grupo de “personas” intentan comunicarse efectivamente. Lo cual se muestra a través de confusas flechas entrecruzadas y  expresiones faciales que reflejan frustración.

Sin embargo, la segunda ilustración es mucho más simple al mostrar una línea de comunicación limpia entre sólo dos personas: tú y tu cliente.

Otro ejemplo de landing page es la que usa la experta en marketing de Pinterest Melyssa Griffin para su Curso de Crecimiento Pinfinite en donde emplea ilustraciones para ayudar a contar la historia de cómo utilizó Pinterest para hacer crecer su marca, como puedes observar aquí:

ejemplo de landing page

Su estilo es simple y moderno. Las ilustraciones, aunque no son gráficos reales, ilustran su historia de crecimiento y hacen que el contenido luzca más atractivo. El color pastel también refleja las paletas de colores de muchas de las imágenes que se encuentran en Pinterest.

Recuerda al crear imágenes para tus landing pages: tener en cuenta el estilo y la estética que tenga más popularidad en tu público objetivo.

Vale la pena señalar que la página de destino de Melyssa Griffin combina un montón de diferentes tipos de imágenes de landing pages, incluyendo fotos de productos, fotos de personas que promocionan su producto, y videos también. Este es un fiel ejemplo de una larga página de aterrizaje que contiene una tonelada de información para convencer a los visitantes de que compren su curso.

Emplea íconos para complementar el texto.

Los íconos son particularmente útiles porque pueden comunicar una idea en un gráfico simple.

De hecho, cuando el significado de un ícono es obvio, puedes usarlo para reemplazar el texto. Por ejemplo, cuando usas un ícono que representa el logo de Twitter, el cual es casi universalmente reconocido.

Aunque a menudo, el significado de un ícono no es lo suficientemente obvio sin algo de contexto. En estos casos, podrías emplear íconos para reforzar las ideas expresadas en tu texto.

Si deseas que tu landing page sea corta y concisa, podrías hacer algo similar a lo que WordStream hizo en su landing page de ebooks. Ellos usaron un ícono de “Trofeo AdWords” para reforzar la idea de que esta guía les ayudará a “triunfar” en AdWords.

ejemplo de landing page

Definitivamente, el ícono llamativo atrae la atención hacia él para luego centrarnos en el texto persuasivo. (“Los anunciantes de todo el mundo compiten por la atención, los clics, el tráfico, las conversiones….”). Y, ¿a quién no le gusta ganar?

Puntos Claves:

  • Cuenta una historia con tus ilustraciones.
  • Emplea íconos e ilustraciones que reflejen el estilo de tu público objetivo.
  • En la mayoría de los casos, usa íconos para reforzar las ideas, no para reemplazar el texto.

3. Usa los colores para dirigir la visión e inspirar a la acción dentro de tus landing pages

Si has estado leyendo diferentes artículos sobre cómo elegir los colores para tus landing pages, puede que te topes con varios artículos que hablen de cómo los colores afectan las emociones de tus visitantes.

Aunque es cierto que algunos colores se asocian a ciertas emociones (azul = triste, amarillo = feliz, verde = calmado); estas asociaciones están culturalmente influenciadas, o dependen de la experiencia única de una persona. Así que es muy complicado y poco confiable tomarlas únicamente de referencia para el diseño de tu landing page.

Es mejor que te concentres en combinar colores que resalten la información que deseas destacar. Por lo tanto:

Usa una plantilla tricolor.

De acuerdo a un estudio de la Universidad de Toronto, las personas tendemos a preferir las plantillas con uno o dos colores predominantes, en lugar esquemas de colores más complejos.

Instapage recomienda usar una plantilla con un color de fondo, base y acento. Este modelo sigue una regla “60-30-10” (60% color de fondo, 30% color base y 10% color de acento).

Debido a que el fondo cubre el área más grande de la landing page, el color dominante deberá ser este.

Por otro lado, la base, sería el segundo color más frecuente en la página, el cual debería complementar el color de fondo.

Finalmente, puedes usar el color de acento en tu botón CTA. El cual debe contrastar con el color de fondo para que los visitantes no se pierdan.

¿Recuerdas algo sobre la rueda de colores que te enseñaron en la escuela primaria?

Puedes apoyarte en esta rueda de colores sin problema. Y créeme que es muy útil para ayudarte a seleccionar los colores para tu landing page.

Los colores opuestos en la rueda de colores son complementarios; como el azul y el naranja, o el púrpura y el amarillo. Cuando unes estos colores, simplemente estallan a la vista.

landing page. círculo de colores. Fuente: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

Instapage recomienda usar en tu landing page: colores complementarios divididos.

Estos son colores que aunque no están directamente enfrentados; aún así contrastan.

El resultado es una combinación de colores, mucho menos estridente que la que resulta de los colores complementarios estrictos.

landing page, círculo de colores. Fuente de la imagen: https://colorswatches.info/split-complementary-colors/ 

 

La página de inicio de Venngage emplea una combinación de colores complementarios:

ejemplo de landing page

Usa colores que hagan resaltar tu botón CTA.

¿Sabes? Hay diversas opiniones que se contradicen cuando se trata de saber cuáles son los colores óptimos para conseguir conversiones. Y no entraremos en debate por ahora.

Sin embargo, existe cierta evidencia que lo respalda: Los botones CTA son más efectivos si su color contrasta con los otros colores de la página.

Y estos mismos conceptos se aplican a las fotos de productos en las landing page.

Por cierto, este ejemplo de landing page de Unbounce creada para ofrecer su curso, es un buen ejemplo de cómo usar un color en el botón CTA que contraste con el color de fondo:

ejemplo de landing page

Por lo tanto, cuando elijas el color para el botón CTA, elige un color que sea opuesto en la rueda de colores al color dominante en tu landing page.

Puntos Claves: 

  • Las personas tienden a preferir esquemas de colores simples con uno, dos o tres colores.
  • Sigue la regla “60-30-10” al elegir los colores para tu landing page.
  • Utiliza colores complementarios divididos para que tu información destaque.
  • Aplica un color que contraste con el fondo de tu botón CTA.

4. Utiliza imágenes que dicten indicaciones direccionales

Señala y apunta en la dirección correcta en donde deben hacer clic tus visitantes. A veces sólo se necesita de un pequeño empujón para ir en la camino correcto.

Las señales visuales son señales sensoriales que el ojo procesa. En el equivalente a la optimización de una landing page: son indicadores deliberados de hacia dónde los visitantes deben dirigir su mirada.

Hay dos tipos de señales direccionales: implícitas y explícitas. Probablemente puedas adivinar cómo sería cualquiera de los dos.

Una señal direccional implícita podría ser algo así como una imagen de una persona que mira en la dirección del botón CTA. Por otro lado, una señal direccional explícita, sería una flecha apuntando directamente a su CTA.

Ahora, entremos en más de detalle sobre cada una de estas señales.

Usa señales direccionales implícitas. 

El principio detrás de las señales visuales es lo que Malcolm Gladwell llama “microexpresiones”. Estas son básicamente pequeñas indicaciones faciales o “miradas fugaces” que reconocemos en otras personas y que influyen en cómo interpretamos las emociones.

Un ejemplo de esto es cuando ves una foto de alguien que observa favorablemente a un producto o un formulario, lo cual contribuye a que respondas positivamente ante él.

Por cierto, los estudios de seguimiento de los ojos han encontrado que los rasgos faciales son lo primero que la gente mira cuando ven a alguien nuevo. De modo, que si tienes una idea bastante buena para hacer que tus visitantes miren la cara de una persona primero, puedes usar esta idea para dirigirlos a donde quieras.

Las señales faciales suelen ser bastante sutiles. Echa un vistazo a este ejemplo de landing page de Copy Hackers:

ejemplo de landing page

La imagen se posiciona de manera que la experta en redacción Joanna Wiebe se encuentre de frente al texto y sus manos queden cerca del CTA.

Incluso, sin apuntar directamente al botón, la imagen sigue guiando los ojos de los visitantes hacia donde necesitan hacer clic.

Una señal visual implícita y efectiva hará que el clic parezca el siguiente paso natural.

Usa señales direccionales explícitas.

Las señales visuales implícitas pueden parecer un poco arriesgadas. Después de todo, lo que más quieres es asegurarte de que tus visitantes lleguen directamente a tu CTA.

Es por eso que muchos sitios optan por señales direccionales más explícitas como flechas o ilustraciones donde un personaje apunta a un botón CTA.

Mira por ejemplo esta linda página de aterrizaje de Bear CSS:

ejemplo de landing page

Toda la página es divertida y caricaturesca, pero el oso sigue apuntando a los visitantes hacia el botón CTA. Las personas no siempre confiamos en los demás, pero puede que estemos mucho más dispuestos a confiar en este simpático oso.

Aunque no en todos los casos se necesita recurrir a algo tan particular, de hecho, una flecha simple también es muy efectiva para dirigir los ojos a tu CTA. La página de aterrizaje del ebook de IMPACT es un gran ejemplo de esto:

ejemplo de landing page

La flecha es animada para que aparezca después de que se cargue el resto de la página y así los visitantes no se la pierdan. El mensaje es claro: si quieres este ebook gratis, haz clic en este botón.

Recuerda, aunque siempre es un buen ejercicio pensar fuera de la caja con el diseño de tu página de aterrizaje, practica un poco de contención saludable. Las imágenes que están demasiado presentes podrían terminar confundiendo a los visitantes más que incitarlos a hacer una acción en particular.

A menudo, los diseños más simples son los más efectivos.

Puntos Claves:

  • Las señales emocionales implícitas (o sugestivas) son indicadores que usan la imagen de alguien que mira en la dirección de su CTA.
  • Las señales emocionales explícitas son indicadores que emplean flechas o personas que apuntan hacia su CTA.
  • Mantén el diseño de tu landing page simple para que tus señales direccionales sean obvias.

5. Usa fotos originales en tus landing page siempre que puedas

Este consejo es un poco polémico.

Después de todo, a muchas pequeñas empresas y emprendedores independientes les gustaría utilizar todas las fotos originales, pero su ajustado presupuesto les obliga a recurrir al uso de fotos de stock. Sin duda, comprendo su difícil situación.

Pero vale la pena invertir en tomar una foto de buena calidad de ti mismo y de tu equipo, como mínimo.

Usa una foto tuya.

Tal vez te sientas incómodo en las fotos. Sé lo que se siente. Pero deberías considerar hacer una excepción en tus landing pages, especialmente si diriges tu propia empresa o agencia.

Está comprobado que las fotos de personas reales funcionan bien en las páginas de aterrizaje. Austin McCraw realizó un estudio en el que comparó una landing page con una foto estándar de una “mujer sonriente” con otra que mostraba una foto del fundador de la compañía.

Antes:

ejemplo de landing page

Después:

ejemplo de landing page

¿Los resultados? Los visitantes fueron 35% más propensos a llenar el formulario de CTA.

Además, incluir tu propia foto en tu página de destino no sólo ayuda a transmitirle confianza a tus visitantes, sino que también te ayuda a aumentar el reconocimiento de tu marca.

Muchas personas del mundo del marketing digital probablemente reconozcan al experto en marketing de contenidos Sujan Patel. Ya sea que lo conozcas o no, su foto aparece varias veces en su página de destino:

ejemplo de landing page

Incluso si no lo conocías cuando aterrizaste en su página por primera vez, ahora estás obligado(a) a reconocerlo la próxima vez que aparezca frente a ti. No es ningún secreto que mucha gente es mejor con las caras que con los nombres.

Muestra fotografías de personas que respaldan tu producto.

La prueba social es una herramienta poderosa. Después de todo, ¿No es más probable que busques un producto si un amigo te lo recomienda (a menos que sepas que tu amigo tiene mal gusto)? ¿Qué pasa si ese producto está avalado por alguien en quien confías, como una autoridad o influencer?

Siempre que puedas, obtén un par de excelentes testimonios de personas influyentes en tu industria y/o de clientes que usaron tu producto o servicio para ayudarles a resolver un problema específico. Luego enseña a todos una foto de esas personas felices con tu producto.

Por ejemplo, Foundr Magazine presentó tres testimonios de fundadores de empresas en este ejmplo de landing page:

ejemplo de landing page

Dado que su público son emprendedores, los brillantes testimonios de personas influyentes en el mundo empresarial posicionan a su revista como una fuente de información fidedigna.

Puntos Claves:

  • Una o más fotos de ti mismo(a) inspiran confianza y ayudan a aumentar el reconocimiento de tu marca.
  • Usa fotos de personas que usan tu producto como pruebas sociales que avalen tus servicios.

Crea landing pages impactantes

Una landing page puede ser tu única oportunidad de causar una buena impresión. Así que

elige imágenes con el propósito específico de cautivar a tus visitantes e impulsarlos hacia una acción.

Sé que hallar las imágenes correctas para lograr esto, implicará que antes realices algunas pruebas A/B cuidadosamente planificadas.

Algunas cosas que debes tener en cuenta a la hora de elegir las imágenes para tus landing pages:

Aunque puede ser tentador usar una imagen visual sólo porque luce linda y encantadora, es importante que no pierdas de vista tu estrategia. Las imágenes son herramientas poderosas que pueden provocar fuertes reacciones emocionales en las personas.

Ahora que conoces estas tácticas y que estás equipado(a) con efectivos ejemplos, usa con cuidado tus armas ¡Emplea imágenes que seduzcan a tus visitantes y dejen la mejor impresión de tu negocio!

Aquí te dejo nuestro post para que aprendas a crear landing pages desde cero.

*Este post fue escrito por el equipo de Venngage.

Nuestro sitio utiliza cookies para mejorar tu experiencia de navegación.