Hero section

Hero section y above the fold

No son lo mismo. Above the fold es todo lo que se ve sin hacer scroll, y depende del dispositivo. La hero section es un bloque de diseño concreto: puede ocupar toda la primera pantalla, solo una parte o, en móvil, extenderse por debajo.

Elementos habituales

• Titular: qué resuelve el producto, con las palabras del cliente. Mejor concreto que ingenioso.
• Subtítulo: para quién es, cómo funciona o el beneficio principal, en una o dos frases.
• CTA principal y, si hace falta, una secundaria de menos compromiso.
• Visual del producto: una captura real, un vídeo corto o una demo interactiva. En software, enseñar el producto suele explicar más que una ilustración abstracta.
• Prueba social breve: logos de clientes o una valoración, justo debajo.

Patrones frecuentes en webs de software

• Texto a la izquierda, producto a la derecha: el más común en escritorio.
• Centrado, con captura debajo: bueno para mensajes cortos.
• Demo interactiva o vídeo: útil cuando el producto es difícil de explicar con una imagen.

Errores frecuentes

• Titulares genéricos que valdrían para cualquier empresa: «La plataforma todo en uno para hacer crecer tu negocio».
• Fotos de archivo de personas sonriendo frente a un portátil.
• Vídeos de fondo pesados que retrasan la carga y empeoran el LCP.
• Dos o tres CTA con el mismo peso.
• Esconder qué es el producto hasta el tercer bloque.

Una prueba rápida

Enseña la hero section durante cinco segundos a alguien que no conozca la empresa y pregúntale qué vende y a quién. Si no sabe responder, el problema es el mensaje, no el diseño.

Términos relacionados

• Above the fold
• CTA (llamada a la acción)
• Prueba social
• Landing page