¿Cómo tener el mejor Hero para tu Web?

Hola amigos desarrolladores, quería conversar un poco acerca de la importancia de un buen Hero. Se conoce como el Hero a la sección de gran tamaño que aparece como el elemento visualmente más destacado de tu página web.  En este caso, específicamente hablaré del Hero Image. Yo suelo usar bastante el Hero Image porque me ayuda a transmitir el mensaje rápido y la web carga rápido. Pero también no está mal usar los Sliders o Videos. Muchas veces los uso porque quieren transmitir varios mensajes en la sección más importante de la web.

 

Según un estudio de Nielsen Norman Group, el 80.3% de la atención del usuario se concentra en esta zona. Woooow. Así que de ahora en adelante, el Hero es lo más importante en dar una buena primera impresión. Entonces. para tener un buen Hero, les voy a compartir mis consejos.

  1. Un buen mensaje: Características de tu producto, el valor que genera tu servicio, promociones, valores y personalidad de tu marca, el nuevo lanzamiento de un producto, etc etc. No pongas cosas genéricas, trata de destacar. Si tu tasa de rebote es alta, probablemente sea porque tu Hero no es llamativo.
  2. Calidad primero gente!!!: Sólo tienes una oportunidad para generar una buena impresión. Usa una foto especialmente tomada por un fotógrafo profesional pensada que irá en el Banner de tu web. No tratemos de usar una del banco de imágenes, porque la gente se da cuenta. Editen su foto, que parezca profesional. Si no hay otra, usar fondos genéricos o una de algún banco de imágenes.
  3. Ubica bien los elementos. Me refiero al título, subtítulos y tu Botón de acción. Estos no deberían de tapar parte importante de la foto.
  4. Integrar bien con el texto: Tu foto debe tener un contraste muy obvio con tus textos. Lo puedes lograr aplicando un fondo opuesto y el tamaño de la letra ayudará a resolverlo. También puedes aplicar sombra en los textos para que ayude a resaltar un poco más.
  5. Optimiza tu imagen o video: Esto es fundamental. Ya lo debes de saber. Pero te lo comento nuevamente. Si tu imagen no carga o se demora mucho, el usuario se va a ir. Es así de sencillo. Para solucionar esto, hay que bajarle las dimensiones y su peso. Tratando de no perder calidad en la imágen.

    Para ello te recomiendo estos dos links: VideoSmaller para comprimir Videos y TinyPng para imágenes.  Tratemos que las imágenes ronden alrededor de los 100 KB (si se puede), y los videos lo más bajo posible. Si elijen usar video, no vayan a subir videos de más de 15 segundos de duración y además, déjenlo en Loop. Súbanlo a su servidor propio, no metan un enlace de Youtube como video de fondo. 

  6. Probar en diferentes pantallas/resoluciones: Recuerden que ahora el tráfico proveniente de los Mobile es mayor, que tablet y Desktop. Por ello, tu Hero debe verse bien especialmente en tu celular. Si tu Hero de desktop no se acopla bien a tu Mobile, puedes cambiar de foto. No te preocupes. Adáptate.
Estoy seguro que si sigues todas estas recomendaciones, podrás retener mayor tiempo a tu audiencia y con ello, generar conversiones.

¿Qué otras recomendaciones sugieres? ¡Comenta aquí abajo, ayudémonos entre todos! Saludos amigos!

– Robin Ganaja

Síganme en instagram como @robinganaja y a @nahadigital para Tips de Diseño Web, Marketing y Emprendimiento

Comparte este POST

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Robin Ganaja

Diseñador Web - Empresario

Compartiré temas sobre Marketing Digital, Diseño Web y Emprendimiento. Además tengo una sección de Tutoriales para diseñar webs con Wordpress.

Robin Ganaja

Mis favoritos
Tutorial