5 tipos de hero images para mejorar tus landing pages

Normalmente se necesita poco tiempo para causar impactos en los usuarios con tus landing pages. Un vistazo a primera vista por su parte determinará la potencia de tus creatividades. Si gustan, impactan y transmiten. Y aunque parezca difícil conseguir esos efectos con una sola creatividad, hay un elemento que es el protagonista. Se trata de las hero images para landing pages, que son las que dominan los diseños web punteros.

Una hero image es la foto principal o el primer gráfico que se ve de una landing page. Suele situarse, de hecho, above the fold, es decir, en la zona que se ve nada más llegar a la página sin necesidad de realizar scroll. Y su inclusión en esa parte de la pantalla no es pura coincidencia.

El objetivo de las hero images para landing pages es atraer de inmediato a los usuarios y mostrarles de qué trata tu sitio web y su contenido. Y sí, una imagen debe conseguir todo eso.

¿Tan importante es el diseño?

La parte superior al pliegue es crucial para marcar un compromiso inicial y conseguir conversiones. Después de todo es lo primero que los usuarios ven cuando aterrizan en tu página. Además, según un estudio de Nielsen Norman Group sobre el scroll y la atención del usuario, un 80,3% de la atención se concentra, precisamente, en esa zona.

Si eres de los que descuida los detalles del aspecto de tu web, es probable que con los siguientes argumentos cambies de opinión. Tus usuarios no solo juzgan su experiencia en tu web, sino que tu diseño es, para ellos, un indicador de confianza y calidad. Un 94% de las razones que hace que los usuarios desconfíen de un sitio web se están relacionadas con su diseño.

Todo esto requiere un planteamiento de la utilidad que damos a las hero images para landing pages. En lugar de centrarte en escoger imágenes que aporten un toque bonito y agradable, preocúpate más por elegir las que logran crear compromiso. Aquellas que consigan persuadir y mover a los usuarios.

De hecho, dado que las hero images son las que dominan la parte superior de tus landing pages, es fundamental que apoyes en ellas toda la fuerza para lograr conversiones.

Hero images para diseños web

Aunque muy pocos han cuidado este aspecto hasta el momento, las hero images se están haciendo cada vez más populares. Son llamativas y sus diseños son cuidados al detalle, ya que trabajan para aumentar el engagement con los usuarios.

No obstante no son todas iguales. Ni siquiera siguen unos mismos patrones. Pueden adoptar diferentes formas y tamaños. Pueden ser desde encabezados grandes hasta banners de pantalla completa y contenido destacado. De hecho, desde los progresos de los sitios web de pasar de HTML a JavaScript, Flash o HTML 5, estas creatividades son una de las opciones preferidas para lanzar contenido más visual.

Y es que, como ya sabes, dependiendo del mensaje que quieras transmitir deberás escoger un tipo de contenido u otro. Y en este sentido, para impactar y darte a conocer en un simple vistazo, los gráficos o imágenes son los que mayor fuerza tienen. Crean mayores recuerdos y consiguen generar conexiones emocionales.

Imágenes coherentes con la marca

Si todavía no consigues imaginarte lo que es una hero image piensa en las imágenes destacadas de Facebook o Twitter. O las fotos «de portada«.

Son creatividades que pueden dotar a tu sitio web de un toque de personalidad de marca. De hecho si lo que quieres es resultar creativo, puedes plantearte incorporar una hero image en cada sección. No tienen por qué ser iguales pero tampoco idénticas. Simplemente intenta que sean coherentes con la imagen corporativa de tu marca. Así romperás con la monotonía de tu sitio web y cada sección será distinguida con mayor facilidad.

Aun así, no es necesario ni obligatorio que utilices fotografías de gran calidad. Algunos optan por ilustraciones. E, incluso, vídeos. No obstante, las fotos suelen ser más descriptivas en estos casos para conectarte con tu audiencia durante el primer vistazo.

Como podrás comprobar no existe ningún tipo de imagen que resulte mejor o peor. Simplemente debes centrarte en aquella que creas que resolverá mejor tus necesidades. Y que, además, se ajuste mejor a tu tipo de negocio y tu imagen corporativa.

Todo dependerá de tu creatividad. Para que veas la variedad de hero images que hay y consigas algo de inspiración te mostramos los 5 tipos de hero images para landing pages más habituales:

1.- Beneficio del producto

En lugar de mostrar cómo funciona un producto, este tipo de imagen se centra en mostrar sus beneficios. Pero no en un sentido personal, sino a nivel de producto. Es decir, no pretende mostrarte lo feliz que serás tras utilizar, como en este caso, un champú de Pantene.

Lo que tratan de transmitirte es cómo de bonito y fuerte lucirá tu pelo si utilizas sus productos. De hecho, puede que hayas encontrado algún ejemplo de hero images de beneficio en forma de «el antes y el después«.

2.- Vídeos que suscitan interés

Este tipo de imágenes se centran en captar la atención del usuario mediante capturas impactantes. No tienen por qué decir nada del producto o servicio que ofreces. Ni siquiera de ti. Simplemente procura que no desentone. Es decir, que no esté fuera de lugar o vaya en una línea opuesta a tu imagen corporativa.

Es una buena táctica para llamar la atención a través de un pequeño vídeo. Pon a prueba tu creatividad y haz que tus clientes permanezcan sentados mirando lo que tienes que mostrarles. Si quieres recibir inspiración, visita LSProductions. Verás el clip completo.

3.- Hero image de producto

Uno de los ejemplos de hero images para landing pages de producto más eficaces es la de la imagen superior, que corresponde a Apple. Como bien sabes el punto fuerte de la marca es su diseño. Sencillo pero impactante. De esta manera, haciendo un uso adecuado de las hero images consigue destacar cada uno de sus productos en cada landing page.

Este tipo de imágenes te funcionarán para mostrar productos de manera llamativa y darles algo más de poder. Para sectores como los electrodomésticos o los dispositivos móviles, por ejemplo, son una buena opción. Resalta la belleza de tus productos y conviértelos en interesantes.

4.- Imágenes de contexto

Ni te contará sus beneficios ni se ceñirá en sus funcionalidades. Las hero images para landing pages de contexto son aquellas que te mostrarán cómo trabaja el producto. Cómo funciona en un entorno real. De hecho puedes utilizar esta técnica si tus productos son complicados de entender o si crees que explicar su funcionamiento te requerirá una larga explicación.

Puedes crear vídeos que muestren tu producto estrella siendo utilizado por una persona. De esta manera no solo darás a conocer el aspecto de tu producto. Tus usuarios también podrán ver cómo se desenvuelve y sus opciones habituales de uso.

5.- O también puedes tirar de emociones

Una técnica muy útil para crear recuerdos en el usuario y conseguir su atención es conseguir causar emociones. Por ello, es una buena estrategia para aquellos negocios que no se ciñan a vender productos. Sino que ofrezcan servicios o experiencias.

En este caso tenemos el ejemplo más claro que podíamos encontrar: Unicef. Si accedes directamente a su página podrás comprobar que no solo utiliza las emociones. Sino que además las combina con uno de los tipos de hero images para landing pages más potentes: los vídeos.

Una muy buena elección. Los vídeos son los que más recuerdos crean en los usuarios y los que mayor capacidad de emocionar tienen.

Usos de las hero images para landing pages

Ahora que sabes los tipos de hero images para landing pages más habituales es necesario que identifiques los diferentes usos y posiciones que pueden adoptar:

• Como cabecera. Como te hemos dicho, son perfectas para dar un toque de personalidad a cada landing page.
• Crea un diseño de una sola página. Son aquellos que ocupan casi todo el ancho y largo de la página. En los sitios de una sola página se suelen intercalar imágenes y texto.
• Hero images como fondos de pantalla. Aunque el punto anterior y éste puedan parecerte lo mismo no lo son. La diferencia principal es que un diseño de una sola página aparecerá bajo el menú de tu sitio web. Mientras que si lo utilizas como fondo de pantalla la cubrirá por completo. De esta manera no se verá ningún menú. Únicamente tu diseño.
• Contenidos destacados. Son los tipos de hero images para landing pages más comunes si se trata de blogs y revistas online. Normalmente son imágenes estáticas que se destacan para fijar la atención en un punto en concreto. Ya sea un producto o un servicio.
• Sliders y galerías de imágenes. Consiste en cambiar de imagen al pasar un lapso de tiempo concreto. Pero puedes incluir flechas laterales u otros símbolos de navegación para que los usuarios puedan ir a la siguiente cuando lo decidan.

¿No sabes dónde encontrar la imagen perfecta para tu landing page? Existen varias plataformas donde podrás encontrarlas libres de derechos y gratuitas. Asimismo, es importante que una vez que tengas dos opciones lances tests A/B para probar cuál funcionará mejor con tu audiencia.

Para poner en práctica una combinación de hero images para tus páginas de aterrizaje es necesario que utilices una plataforma profesional de landing pages como Landing Optimizer que permita modificar las plantillas según tus necesidades. Regístrate ya y podrás comenzar a crear landing pages optimizadas en cuestión de minutos.