Fotos de héroes de la página de destino: 18 ejemplos perspicaces para ayudarlo a guiar el suyo [2022]

En 1911, el Syracuse Advertising Men's Club celebró un banquete para hablar sobre periodismo y publicidad. Uno de sus miembros (Arthur Brisbane) fue citado en el periódico diciendo: “Use una imagen. Vale más que mil palabras.”

No Confuso, el rey Salomón, Einstein o Aristóteles, sino un publicista. (Díselo a tus padres.)

Avance rápido más de 100 años y las palabras proverbiales de Arthur aún suenan verdaderas, especialmente cuando se trata de páginas de destino.

Ingrese: la foto del héroe de la página de destino.

Si su título y subtítulo comunican su propuesta de valor, la imagen principal de su página de destino le da vida de una manera que solo una imagen puede hacerlo. Esta es la razón por la cual una foto de héroe fuerte es un pilar del diseño de la página de destino.

Hágalo mal y observe cómo se desploman sus tasas de conversión.

Hágalo bien (como Arthur sabía por experiencia) y observe cómo se disparan sus tasas de conversión.

En el nombre de hacerlo bien , vamos a enorgullecer a Arthur al explorar los diferentes tipos de imágenes de héroes, los pasos necesarios para crear la suya propia y ejemplos de imágenes buenas, malas y falsas.

Vamos.

La foto principal de su página de destino se refiere a la imagen o video principal que se utiliza para comunicar el valor de su oferta, y es la primera imagen que encontrarán sus visitantes al llegar.

Por ejemplo, observe cómo la imagen destacada de Divvy presenta una tarjeta de crédito y una aplicación móvil, que agregan contexto a su título que dice: "El crédito y el software que su negocio necesita para prosperar".

¿Una imagen de héroe va a seducir a alguien para que compre?

No por sí mismo.

Pero junto con el título, el subtítulo, la oferta y la llamada a la acción (CTA), la foto principal puede proporcionar el contexto, la emoción y la claridad necesarios para impulsar a los visitantes a cruzar la línea de meta.

Eso significa que una toma de héroe de alta calidad no solo llena el espacio; le da vida a su oferta de una manera que las palabras por sí solas nunca podrían, y crea una primera impresión indeleble .

No confundas una toma de héroe con una sección de héroe.

La sección principal de su página de destino se refiere a la sección "en la mitad superior de la página", o la sección de la página de destino que sus visitantes encuentran por primera vez antes de comenzar a desplazarse hacia abajo.

Su sección de héroe incluye su tiro de héroe, título, subtítulo y CTA (como mínimo), pero el tiro de héroe y la sección de héroe se refieren a dos elementos separados de toda su página de destino.

Ya sea una fotografía animada, personalizada, un video o algún otro estilo, las tomas de héroe de la página de destino se dividen en cinco categorías principales:

1. centrado en el producto
2. metáfora
3. "tierra prometida"
4. centrado en el proceso
5. resumen

Exploremos ejemplos de cada uno.

Las páginas de destino centradas en el producto destacan el producto en acción. Sorpresa sorpresa.

Para un producto nuevo o complicado, una foto de héroe centrada en el producto puede ayudar a desmitificar su oferta al hacer que lo abstracto se sienta concreto.

Por ejemplo, la toma del héroe del Editor X presenta su interfaz de editor visual real:

Las tomas de héroes metafóricos usan imágenes que representan o simbolizan el valor de la oferta, pero no en un sentido literal.

Por ejemplo, la foto del héroe en nuestra página de destino del plan de marketing gratuito presenta los emojis de nuestra marca en forma de billetes de dólar y cerebros sonrientes:

Las tomas de héroes de la tierra prometida retratan el resultado deseado del uso de su producto o servicio, ya sea destacando a un cliente exitoso o un estado futuro deseable.

Por ejemplo, el medicamento anticaída del cabello por suscripción de Keeps muestra a un cliente satisfecho y sonriente, presumiblemente después de usar su medicamento anticaída del cabello:

Por lo general, verá tomas de héroe centradas en el proceso para servicios o software donde ilustrar el producto podría no ser posible. En su lugar, visualiza el proceso responsable del valor o la eficacia del servicio.

Por ejemplo, GatherContent usa un gráfico personalizado para ilustrar el proceso de administración de contenido de su software:

Nuestra toma de héroe menos favorita: imágenes de héroe abstractas (o imágenes de héroe compuestas de elementos visuales como formas o patrones).

¿Por qué son nuestros menos favoritos? Porque solo llenan el espacio. No mucho más.

Por ejemplo, Semrush presenta dos formas abstractas como elemento visual principal, nada más. Oportunidad perdida.

Una toma de héroe de alta calidad no solo llena el espacio; agrega contexto, comunica relevancia, evoca emociones y enriquece la experiencia del usuario. Y lo hace mediante una combinación de

• concreción
• Relevancia
• contexto
• emoción
• personalización
• alineación

Exploremos cada uno.

Las tomas abstractas de héroes hacen bien dos cosas: 1) absolutamente nada, y 2) aumentan la carga cognitiva (el tiempo que tardan los visitantes en comprender su oferta).

Eso es todo.

Las tomas de héroe de la página de destino de alta calidad deben representar su producto, servicio, resultado deseado o propuesta de valor en acción, en el mundo real o lo más cerca posible de la realidad. Sencillo.

No haga que sus visitantes piensen demasiado. Evite el arte por el bien del arte. Y mantén tus imágenes concretas.

Por ejemplo, Dollar Shave Club usa su imagen de héroe para ilustrar los productos incluidos en su Razor Starter Set de $5. Simple pero efectivo.

Una foto del héroe de la página de destino de alta calidad debe resonar de inmediato con su público objetivo y, al mismo tiempo, señalar "Esto no es para mí" a nadie más.

Sus visitantes toman decisiones en una fracción de segundo influenciados principalmente por sus mentes inconscientes. Si tu foto de héroe no aclara de inmediato para quién es y para quién no , inténtalo de nuevo.

Eso también significa hacer coincidir la toma del héroe de la página de destino con el mensaje y la creatividad que envió a las personas allí (es decir, la coincidencia del mensaje).

Por ejemplo, cuando miras la foto del héroe Beauty Box de Allure, ¿hay alguna duda de que es para personas específicamente interesadas en la belleza?

El héroe de su página de destino disparó vidas para respaldar su título y subtítulo. Período.

Mejor aún, considérelo como la representación visual de su propuesta de valor.

Eso significa que tu foto de héroe debe dar vida a la promesa que haces en tu titular, no a una promesa que haces en otra parte de la página.

Por ejemplo, Canva agrega contexto a su título de "creatividad y productividad" con una imagen de héroe centrada en el producto que ilustra la colaboración, las plantillas y el diseño sobre la marcha (aplicación móvil):

Cuando decimos emotivo, no nos referimos a conmover a alguien hasta las lágrimas; nos referimos a crear un sentimiento positivo acerca de su marca y oferta.

Gran parte se reduce a la calidad de su diseño gráfico: el diseño web de calidad genera confianza y establece credibilidad.

Pero puede evocar sentimientos positivos como confianza, seguridad, felicidad y confianza directamente desde su imagen de héroe mediante el uso de imágenes de elección.

Por ejemplo, Namogoo presenta una variedad de "compradores" felices y despreocupados, como diciendo: "Así es como se sentirán sus clientes después de que comience a usar Namogoo".

Al reflejar las emociones positivas asociadas con la "tierra prometida" de su propuesta de valor, Namogoo suscita emociones positivas de sus clientes potenciales.

O puede presentar pruebas sociales, como testimonios de clientes, calificaciones de estrellas o premios, directamente dentro de su imagen de héroe para evocar sentimientos de confianza.

No hay stock. Fotografía.

Mantenga las fotos de héroes de su página de destino personalizadas para su marca.

Si necesita ayuda de la fotografía de archivo debido a los recursos, al menos, trabaje la fotografía de archivo en un gráfico personalizado para que se ajuste al estilo y la sensación de su marca.

Por ejemplo, Monday.com utiliza varias fotografías de archivo de personas, pero las edita en la toma de héroe de su página de destino de una manera que se siente original y única.

Por último, las mejores imágenes de héroes de la página de destino no distraen la atención de la copia; se alinean con buen gusto alrededor de los titulares y CTA de una manera que llama la atención (no se aleja de) ellos.

Por ejemplo, observe cómo Apostrophe presenta a un dermatólogo mirando hacia el titular y el CTA.

Dirigir su cuerpo y su mirada hacia la derecha crea una señal visual sutil que atrae la atención del visitante en la misma dirección, hacia el título y el CTA.

Ahora yuxtaponga eso con la toma del héroe de la página de inicio de VanMoof. No hace que el titular y el CTA se destaquen; los entierra.

Ahora viene la parte divertida: ejemplos de capturas de héroes en la página de aterrizaje.

Dividimos esta sección en tres categorías distintas:

1. Lo bueno (10 ejemplos)
2. Lo malo (4 ejemplos)
3. El falso (4 ejemplos)

¿Por qué?

Porque no todas las tomas de héroes son superhéroes, y aprender qué no hacer es tan importante como aprender qué hacer.

Marcarlos. Agréguelos a su archivo de deslizamiento. Dile a todos tus amigos.

1. CanvaPro
2. Doo
3. Público
4. Adobe Creative Cloud
5. KlientBoost
6. espacio cuadrado
7. Ranura
8. SnapCall
9. tipo de letra
10. Armadillo

Lo que nos encanta: la foto de héroe centrada en el producto que agrega contexto al titular, no distrae la atención de la llamada a la acción y evoca emociones positivas.

Lo que nos encanta: Doo muestra capturas de pantalla reales de su aplicación de recordatorios. Sencillo, concreto, contextual, personalizado, efectivo.

Lo que nos encanta: Public presenta un video en bucle que muestra capturas de pantalla de su aplicación junto con usuarios reales y auténticos. Este video combina el enfoque en el producto con la tierra prometida para capturar ingeniosamente su facilidad de uso, mercado objetivo y compatibilidad con dispositivos móviles.

Lo que amamos: No hay mejor manera de demostrar el poder de su software de diseño que mostrando los diseños reales que facilitó. Bueno, tal vez de una manera: haciendo que su logotipo sea el tema del diseño. Bravo, Adobe.

Lo que amamos: AMAMOS las tomas de héroe metafóricas de la página de destino en KlientBoost. Principalmente porque hemos creado una familia completa de mascotas de marca que necesitan sus 15 minutos de fama, pero también porque ilustran nuestras propuestas de valor de una manera diferente y divertida. ¿A quién no le gustan las páginas de destino sonrientes y la lluvia de dinero?

Lo que amamos : Squarespace prioriza el diseño, siempre. Así que no sorprende que las imágenes de héroe de su página de inicio se parezcan más al arte moderno que a la mayoría del arte moderno. Pero como mencionamos anteriormente, el arte por el arte no es suficiente cuando se trata de fotos de héroes de la página de destino. No a menos que hayas capturado tu producto en la vida real dentro de ese arte. Y eso es exactamente lo que hace Squarespace aquí.

Lo que nos encanta: es un poco difícil distinguirlo de esta imagen (te sugiero que visites su página web), pero la toma del héroe en 3D de Spline se mueve cuando haces clic y arrastras el mouse sobre ella. Bastante bueno, considerando que venden herramientas de diseño 3D colaborativo.

Lo que nos encanta: SnapCall usa su foto de héroe para ilustrar un caso de uso común (o punto débil) que su mercado objetivo podría encontrar valioso (como interactuar con sus clientes de forma remota). Tiene sentido, considerando que su subtítulo promete "brindar una experiencia de cliente innovadora con videollamadas con un solo clic".

Lo que nos encanta: Hablar de productos enfocados. Typeform utiliza un formulario Typeform incrustado de la vida real como su imagen principal. Los visitantes pueden hacer clic en el botón "Pruébame" y experimentar el formulario por sí mismos. Brillante.

Lo que amamos: Alerta de metáfora. Un armadillo envolviendo su cuerpo alrededor de una casa como si la estuviera protegiendo como si fuera su propio bebé. ¿Es posible comunicar su promesa de marca y propuesta de valor de una mejor manera? Ninguna posibilidad.

Hemos visto cosas peores, pero estas fotos de héroes de la página de destino todavía no están a la altura.

1. Semrush
2. InVision
3. MURAL
4. Guardia de bolsillo

Lo que no nos gusta: esto es lo que sucede cuando fallan las metáforas. Semrush usa una caja de herramientas, presumiblemente para resaltar su propuesta de valor "Herramientas para cualquier desafío de SEO". Solo la caja de herramientas se llena con una regla, una lupa y un engranaje. ¿Vendes herramientas de fontanería? ¿O herramientas SEO?

Lo que no nos gusta: Y esto es lo que pasa cuando falla lo abstracto . Sin embargo, lo entendemos, ya que esta página de destino promociona el nuevo software "Freehand" de InVision. Pero, ¿por qué simplemente mostrar a una mujer "a mano alzada" en una pared? Si no. Oportunidad perdida. La gente quiere ver el software en la vida real, especialmente cuando se trata de un nuevo tipo de software.

Lo que no nos gusta: Está sobrecargado. ¿En qué nos enfocamos? MURAL intenta utilizar una toma de héroe centrada en el producto, pero la han exprimido demasiado, lo que dificulta discernir lo que hace cada característica. Puedo verlo ahora: demasiadas personas quieren que se representen demasiadas funciones, por lo que el diseñador dijo: "Eff, las pondremos todas allí".

Lo que no nos gusta: lo más perturbador de este diseño abstracto es que parece una especie de onda de sonido. Pero PocketGuard es una aplicación de finanzas personales. ¿La leccion? Asegúrese de que su tiro de héroe no parezca un servicio diferente a primera vista, incluso si es por accidente.

Sí, no podemos olvidarnos de lo falso. Estas tomas de héroe desperdician la parte más valiosa de las propiedades inmobiliarias de la página de destino.

1. Intercomunicador
2. Mono encuesta
3. Actuar
4. ZoomInfo

Lo que odiamos: ¿ Una mujer que infla un globo? ¿Así es como va a ilustrar su propuesta de valor "Convertir más visitantes del sitio web en clientes de pago"? Swing y una señorita.

Lo que odiamos: las páginas de destino no siempre necesitan imágenes destacadas para generar conversiones. Así que no los exprima solo porque "necesita algo visual". Di no a los rellenos de espacios (ejem, SurveyMonkey).

Lo que odiamos: es un embudo, supongo. Pero se parece más a una bombilla. En una página de destino con mucho texto que podría beneficiarse de una imagen fuerte, Act-On pierde el punto. Sin mencionar que ni siquiera incluyen su logotipo en esta página de destino.

Lo que odiamos: ¿Es un dron de Amazon que entrega mi nuevo cable de extensión? ¡Ay! Sin mencionar que la ubicación (arriba a la derecha) desvía tu atención de la CTA en la parte inferior, no hacia ella.

¿Línea de fondo?

Aunque las tomas de héroe de la página de destino vienen en todas las formas y tipos, las mejores incorporan una combinación de

• concreción
• Relevancia
• contexto
• emoción
• personalización
• alineación

Ya sea que sea una pequeña empresa o una organización global, priorice estos elementos para lograr su imagen de héroe en la página de destino.

¿Quieres saber si tu tiro de héroe da en el blanco?

Prueba la prueba del disparo del héroe.

Encuentre a un amigo o colega (preferiblemente alguien que nunca haya encontrado el producto que promociona su página de destino), cargue la página de destino y déles de cinco a diez segundos para revisar la foto del héroe.

Si no pueden describir con precisión su propuesta de valor y el héroe que la acompaña en dos oraciones, es hora de comenzar a probar diferentes variaciones.

Ahora ve y enorgullece a Arthur (y a nosotros).

Simplemente no olvide dominar los títulos de su página de destino mientras lo hace. Lea todo sobre cómo hacerlo en nuestro próximo blog aquí.