Blog Ilunabar

Hero Image ¿Qué tipo de imágenes son esas?

Hero image es un término que se utiliza en diseño web para describir una imagen o banner de gran tamaño situada en la parte superior de la página de inicio de un sitio web y que generalmente ocupa todo en ancho. Su principal función es captar rápidamente la atención de los y las visitantes y mostrarles de qué trata tu sitio web y cuál es su contenido. Este tipo de imagen está orientada a transmitir una historia o mensaje, por lo que suele contener noticias destacadas, información relevante sobre la empresa, artículos más vendidos o características destacadas de productos, personas, eventos o servicios.

Actualmente es algo tan normal de ver en muchas páginas web que ni siquiera nos damos cuenta de lo importante que es en el conjunto del diseño de nuestra página web. Pero, ¿por qué es tan importante una hero image?.

Una hero image sirve para muchos propósitos en un sitio web, pero, como ya hemos dicho anteriormente, su mayor beneficio es que capta inmediatamente la atención de la persona que visita el sitio web. Dado que las personas respondemos positivamente al contenido visual, tener una buena imagen en tu sitio web es una buena manera de atraer a los y las visitantes y hacer que se animen a explorar más. Actualmente, un buen diseño es una necesidad prioritaria para un sitio web. Es el factor que más influye en la opinión que tienen los y las visitante sobre tu empresa y juega un papel importante en el aumento de las conversiones, y la hero image, como parte de ese diseño, es un elemento clave. La imagen correcta puede generar confianza entre los y las visitantes y hacer que se interesen en lo que ofreces, mientras que una incorrecta puede ahuyentarlos. Las imágenes destacadas son extremadamente útiles para atraer directamente a los y las visitantes a tu sitio web; puedes mostrar el USP (Unique Selling Proposition) de tu empresa, atraer a los y las visitantes para que realicen una acción en particular usando un botón CTA (Call To Action) o pedirles que se registren para una prueba de servicio.

¿Cómo seleccionar la mejor hero image?

Seleccionar la imagen principal perfecta para tu sitio web es una tarea compleja. La imagen que uses variará dependiendo de si estás ofreciendo un producto, un servicio o simplemente contenidos. Pero, independientemente de lo que quieras lograr, la hero image siempre debe estar en alta resolución y optimizada para asegurarte de que el tiempo de carga de tu sitio no se vea afectado, ya que puede disuadir a los y las visitantes que tienen una conexión a internet lenta. Por supuesto, es imposible saber con certeza cuál funcionará mejor, pero reducir las opciones y luego probar para ver cuál es la más efectiva es la mejor manera de hacerlo. También puedes usar un control deslizante (slider) para mostrar varias imágenes a la vez o vídeo. Aquí hemos recopilado algunos ejemplos de los diferentes tipos de hero image para que te hagas una idea de lo que puedes hacer con ellas:

Centrarse en el producto

Presentar una hero image de alta resolución de tu producto junto con un texto corto y un botón de más información es a veces la mejor opción para la imagen destacada. El sitio web de Creative es un excelente ejemplo del uso de imágenes de productos para atraer a los visitantes. También hacen uso de un control deslizante para mostrar sus productos desdtacados.

Mostrar los beneficios

Una hero image que se enfoca en una USP (Unique Selling Proposition) o propuesta de valor es una buena opción para las empresas orientadas al servicio. El sitio web de Netflix superpone su USP sobre una hero image de fondo y brinda a los y las visitantes la opción de comenzar a usar su servicio al instante, sin más preámbulos.

Una sencilla ilustración

El uso de una ilustración simple y minimalista se puede usar para informar a los y las visitantes sobre la oferta de tu empresa sin abrumarlos con información. Combínalo con un texto claro y un botón CTA (Call To Action) y tendrás una estrategia ganadora. Echa un vistazo a la página de inicio de Figma para entender lo que queremos decir.

Generar confianza

Si tienes un blog, puede ser bastante difícil atraer a los y las visitantes para que lean tus artículos. Debes darles una razón para hacerlo, y una hero image puede influir positivamente a que esto suceda. A list Apart es un destacado blog cuyo sitio web funciona de maravilla para generar credibilidad, confianza y curiosidad a través de la hero image.

El factor humano

No es ningún secreto que el uso de personas reales en tu contenido visual proporciona cercanía y confianza a los y las visitantes. Sin embargo, asegúrate en la medida de lo posible de no utilizar imágenes de archivo, ya que tienden a tener exactamente el efecto contrario. La web de Coca Cola es un buen ejemplo de esta práctica.

Evocar emociones

Si puedes usar tu hero image para hacer sentir a tus visitantes, entonces hay una mayor probabilidad de que cumplan con tu solicitud de realizar una acción en particular. La web de Unicef es un buen ejemplo del uso de las emociones.

Para finalizar, una vez que hayas preseleccionado un par de opciones para tu imagen principal, puedes concentrarte en la perfecta para tu sitio web mediante pruebas A/B. Y recuerda, tu imagen debe combinarse a la perfección con el resto del diseño de tu página web y también debe optimizarse para diferentes tamaños de pantalla móviles y de escritorio.