El hero es la sección más cara de tu web. No por lo que cuesta diseñarla — por lo que cuesta perderla. Es el espacio donde tu visitante decide, en menos de cinco segundos, si te merece su tiempo o si cierra la pestaña.

La buena noticia: hay una anatomía que funciona. La mala: el 80% de las webs la ignoran. Veamos los componentes uno por uno y cómo armarlos.

1. Eyebrow (opcional pero útil)

Una pequeña línea sobre el headline que da contexto inmediato. Tres a cinco palabras. Funciona como categorización mental: "ah, esto es de X tipo de empresa".

Ejemplo: Estudio digital · Panamá 2026

Cuándo usarlo: cuando tu marca es nueva o tu nicho no es obvio. Cuándo evitarlo: cuando ya eres reconocida y el headline solo se basta.

2. Headline (el rey)

El elemento más crítico de toda la web. En una sola frase debe responder: ¿qué haces, para quién y por qué deberían quedarse?

Las fórmulas que funcionan:

  • Resultado tangible: "Triplica tus ventas online en 90 días"
  • Promesa emocional: "Identidad digital magnética para marcas con alma"
  • Antes/después: "Pasa de Instagram con plantillas a marca con personalidad"
  • Diferenciador único: "La única agencia panameña con neuromarketing aplicado"

Lo que NO funciona: "Bienvenido a nuestro sitio", "Soluciones creativas para tu negocio", "Transformamos el futuro del marketing". Cero información, cero diferenciación, cero razón para quedarse.

"Si tu headline lo puede usar tu competencia sin cambiar una sola palabra — no es tu headline."

3. Subheadline (la prueba)

Aquí amplías el headline con el "cómo" o el "por qué deberían creerte". Una a dos frases máximo. Su función es bajar la fricción cognitiva entre la promesa y la acción.

Ejemplo:

  • Headline: "Identidad digital magnética para marcas con alma"
  • Subheadline: "Diseño web, branding y marketing impulsados por neuromarketing — cada pixel orientado a convertir."

4. CTA primario

Una sola acción primaria. Repito: una. El cerebro humano entra en parálisis con más de tres opciones, y entra en duda con dos. Una CTA clara, contundente y específica.

Lo que funciona:

  • Verbos de acción: "Agenda", "Descarga", "Empieza", "Cotiza"
  • Específico: "Agenda tu auditoría gratis" > "Contacto"
  • Sin fricción: "Sin compromiso · 15 minutos"

Lo que NO: "Saber más", "Click aquí", "Enviar". Genéricos, débiles, sin promesa.

5. CTA secundario (sutil)

Para los que aún no están listos para la primaria. Debe verse claramente menos importante: estilo ghost/outline, sin sombras, sin colores fuertes. "Ver portafolio" o "Ver servicios" son típicos.

6. Prueba social inmediata

Logos de clientes, métricas, testimonios cortos, número de proyectos. Un pequeño elemento que dice "otros ya confiaron y les fue bien". Activa el sesgo de validación social y reduce la sensación de riesgo.

7. Visual (lo último)

Sí, lo último. Tu visual del hero solo debería elegirse después de tener todo lo anterior claro. ¿Foto de producto? ¿Mockup? ¿Ilustración? ¿Video? ¿Solo gradiente abstracto? Depende del rubro y el mensaje.

Reglas básicas:

  • Si tu producto es físico, muéstralo.
  • Si vendes servicios profesionales, una foto del equipo o un mockup del entregable.
  • Si vendes algo intangible (software, agencia), prefiere abstracciones que tu cerebro pueda completar.
  • Evita stock genérico. El cerebro lo reconoce y descuenta credibilidad.

Test rápido

Pídele a alguien que abra tu hero por 5 segundos. Cierra el laptop. Pregúntale tres cosas:

  1. ¿Qué hace esta empresa?
  2. ¿Para quién es?
  3. ¿Qué querían que hicieras?

Si responde las tres correctamente, tu hero funciona. Si falla en una, revisa esa pieza. Si falla en las tres, vuelve al pizarrón.

Cierre

Un buen hero no es magia — es disciplina. Es decir lo importante con menos palabras posibles, en el orden correcto, con jerarquía visual clara. Si quieres que auditemos el tuyo, conversemos 30 minutos. Sin compromiso.