Cómo Diseñar Un Hero Llamativo Para Tu Página de Inicio (+25 Ejemplos)

enero 26, 2023 by Ian Hernandez

Si quieres que los nuevos visitantes sigan llegando a tu sitio web y navegándolo, necesitas llamar su atención rápidamente. Sin contenido atractivo en la primera o above the fold, los usuarios se aburrirán antes de leer las publicaciones de tu blog o de comprar tus productos.

Afortunadamente, puedes usar una imagen hero como el primer elemento visual de tu sitio web. Cuando usas una fotografía de alta calidad o un diseño gráfico llamativo, puedes dejar una muy buena primera impresión en tus visitantes.

Aquí te explicaremos qué es una imagen hero y cómo podrás diseñar una para tu sitio web. Luego, te mostraremos 25 ejemplos para inspirarte. ¡Comencemos!

¿Qué Es un Hero?

Un hero es un banner un poco más grande, desplegado en el encabezado de un sitio web; el primer elemento que verán los visitantes. Para “engancharlos”, lleva fotos, videos, gráficos o ilustraciones, junto a algún enunciado o Llamado a La Acción (CTA).

Las imágenes hero son una gran manera para llamar la atención. Cuando alguien entra en tu sitio web, sus primeros segundos allí serán críticos, para saber si se quedarán o no en él. Pero, podrás engancharlos con diseño web de alta calidad y aquí aparecen estos heroes, que darán de inmediato esa buena primera impresión de tu negocio o blog.

Como aparecen en el encabezado de tu página de inicio, las secciones hero generan un gran impacto en tu sitio web. Usadas correctamente, pueden comunicar todo lo que tus visitantes necesitan saber sobre tu marca, sin saturarlos con demasiada información al ingresar.

En una sección hero, puedes incluir un llamado a la acción (CTA) para motivar a tus usuarios a visitar otra página de tu sitio. Los heroes interactivos además pueden incluir carruseles, deslizadores de imágenes y otras animaciones. Por último, las imágenes hero deben procurar ser atractivas, llamativas al ojo y enganchar.

Cómo Diseñar Un Hero Llamativo Para Tu Página de Inicio

Ahora que ya sabes qué son las imágenes hero, veamos algunas buenas prácticas para crearlas. Así podrás diseñar encabezados hero que atraigan más visitantes a tu sitio web.

1. Encuentra Imágenes De Alta Calidad

La imagen hero será lo primero que los visitantes verán en tu página de inicio, así que debe ser una foto de alta calidad. Si la imagen está muy granulada o no está comprimida para una carga rápida, podrá perjudicar la experiencia de usuario (UX) de tu sitio.

Para buscar imágenes, puedes usar fotos de tu inventario, o buscar en sitios web como Unsplash. Aquí encontrarás fotografías de alta resolución, sin derechos protegidos de autor:

Ten presente que también puedes usar diseños gráficos, animaciones o videos, en lugar de fotos estáticas. Así tu sitio web destacará entre sus competidores.

Junto con imágenes de stock, Pexels tiene múltiples videos gratuitos que puedes navegar. Así como con las imágenes, podrás personalizar los tamaños de los videos y fotos que te gusten, antes de descargarlos:

Para hacer tus propios diseños gráficos, te recomendamos Canva, una herramienta simple y flexible. Trae miles de plantillas básicas para elaborar imágenes hero:

Por último, WordPress te proveerá encabezados prediseñados en su Biblioteca de Patrones de Bloque. Al diseñar tu página de inicio podrás insertar secciones hero de ancho completo. O, si quieres crearlas manualmente, usa, en su lugar, contenedores HTML:

Ten en mente el no dejar de lado el estilo de marca de tu sitio web, al buscar imágenes. Aun si buscas una imagen de alta calidad, busca que esta sea relevante para tu nicho.

Piensa en qué quieres lograr: Despertar una emoción, promover un producto o lograr algún otro objetivo. Además, si es apropiado y tu presupuesto lo permite, contratar un fotógrafo profesional para que inmortalice tus productos o servicios, puede ser una gran idea.

2. Añade Texto Convincente e Informativo

Muchos sitios web no se quedan con tan solo presentar una imagen en la sección hero. Para generar más ventas y conversiones, superponen un texto. Y es que si quieres incluir promociones y CTAs, un hero puede lograr lo mismo que una página de destino.

Aunque el texto de tu hero debería variar según tus objetivos, hay algunos aspectos a considerar cuando lo redactes:

Hazlo corto: No sobrecargues a tus visitantes con información en una sección hero.
Usa fuentes legibles: Aunque quieras usar tipografías que llamen la atención, asegúrate de que estas sean de fácil lectura.
Considera tu público objetivo: Evalúa qué buscan los visitantes nuevos de tu sitio.
No uses muchas palabras “de moda”: Cuidado con los clichés de la publicidad. Cosas como “actúa YA” bajarán tu fiabilidad y harán que tus visitantes se vayan.

Añade llamados a la acción (CTA). Tus heroes pueden ayudarte a aumentar conversiones, si van de la mano con botones CTA y formularios para generar nuevos contactos.

3. Optimiza Tu Imagen Hero

Luego de descargar la imagen que deseas para tu hero, es bueno optimizarla para tu sitio web. Entonces, como con toda imagen de tu sitio, comprímela. Si no, puede que pese mucho y ocasione largos tiempos de carga.

Generalmente, tus imágenes deberían pesar menos de 1 MB. Para reducirlas, sin perder calidad, puedes comprimirlas en una herramienta como TinyPNG. Esto reducirá el tamaño de tus archivos WebP, PNG, o JPEG, empleando un sistema de compresión con pérdida:

El tamaño es otro factor importante al optimizar una imagen hero. Normalmente, es mejor que las imágenes tengan al menos 1,200 píxeles y una relación de aspecto de 16:9. Pero las imágenes de banner hero deberían ser de 1600 x 500 píxeles, o hasta de 1,800 píxeles, si quieres que se adapten a pantallas grandes.

25 Imágenes Hero en Páginas de Inicio que te Inspirarán

Si todavía necesitas ayuda para diseñar tu primera imagen hero, no te preocupes. ¡Recopilamos algunas de las mejores imágenes hero de diferentes sitios web para inspirarte!