Diseño de Sección Hero
Diseña la primera pantalla que los usuarios ven en un sitio web: la sección hero. Tienes de 2 a 4 segundos para comunicar quién eres, qué haces y por qué el visitante debería quedarse. Cada píxel sobre el pliegue es una decisión de conversión.
Puntos de Decisión
Árbol de Decisión de Patrón de Diseño
¿Cuál es el objetivo principal?
├── Conocimiento/memorabilidad de marca → Hero visual a pantalla completa
├── Claridad/demostración del producto → Hero dividido (texto a la izquierda, visual a la derecha)
├── Exhibición/comparación de funciones → Hero centrado con cuadrícula de funciones debajo
└── Construcción de autoridad/credibilidad → Hero editorial/asimétrico
¿Hay un visual de producto fuerte?
├── Sí (capturas de pantalla, panel de control, demo) → Hero dividido
└── No (API, servicio, concepto abstracto) → Hero centrado
¿Cuál es la audiencia objetivo?
├── Desarrolladores/técnicos → Centrado, minimalista (estilo Linear/Vercel)
├── Negocios/empresariales → Dividido con visuales profesionales
├── Consumidor/estilo de vida → A pantalla completa con imágenes de estilo de vida
└── Creativo/diseño → Diseño editorial/asimétrico
¿Complejidad del contenido?
├── Propuesta de valor simple (1 línea) → A pantalla completa o centrado
├── Medio (titular + subtítulo) → Dividido o centrado
└── Complejo (múltiples beneficios) → Dividido con texto estructurado
Árbol de Decisión de Estrategia de CTA
¿Cuál es el modelo de negocio?
├── Freemium/prueba → "Empieza Gratis" + "Ver Demo"
├── Dirigido por ventas → "Habla con Ventas" + "Ver Precios"
├── Compra directa → "Compra Ahora" + "Más Información"
└── Generación de leads → "Solicitar Presupuesto" + "Casos de Éxito"
¿Nivel de intención del usuario?
├── Alta intención (buscó el nombre de la marca) → Solo CTA directa
├── Intención media (consciente del problema) → CTA primaria + secundaria
└── Baja intención (descubrimiento) → CTA suave + texto centrado en valor
Modos de Fallo
1. Confusión de Carrusel
Síntoma: El contenido del hero rota automáticamente, tasa de rebote >70% Diagnóstico: Los usuarios no pueden procesar mensajes rotativos; se produce parálisis de decisión Solución: Reemplazar con un mensaje único más fuerte; usar un hero estático con una propuesta de valor clara
2. CTA Debajo del Pliegue
Síntoma: Baja tasa de conversión a pesar de alto tráfico; la CTA móvil requiere desplazamiento Diagnóstico: La acción principal no es visible en la carga inicial de la página Solución: Reducir la altura del hero o mover la CTA hacia arriba; asegurar visibilidad a 375px de ancho móvil
3. Propuesta de Valor Poco Clara
Síntoma: Alta tasa de rebote, bajo tiempo de interacción, comentarios de usuarios confusos Diagnóstico: El titular describe lo que eres, no lo que haces por los usuarios Solución: Liderar con resultado/beneficio; "Entrega 10x más rápido" no "Plataforma DevOps"
4. Mala Jerarquía Visual
Síntoma: Los usuarios se pierden información clave, bajo clic en CTA (<2%) Diagnóstico: Todos los elementos de texto tienen el mismo peso visual; no hay un orden de lectura claro Solución: Escalar el titular 2-3 veces más grande que el texto del cuerpo; usar color/peso para guiar la vista
5. Cuello de Botella de Rendimiento
Síntoma: Alta tasa de rebote en móvil; puntajes de LCP lentos >3 segundos Diagnóstico: Los activos del hero sobredimensionados bloquean la ruta de renderizado crítica Solución: Optimizar imágenes (WebP/AVIF), carga diferida de activos no críticos, precargar imagen del hero
Ejemplos Prácticos
Ejemplo: Hero de Producto SaaS (Diseño Dividido)
Escenario: Construir un hero para una herramienta de revisión de código dirigida a equipos de desarrolladores
Paso 1: Decisión de Diseño
- Objetivo: Demostración del producto ✓
- Visual fuerte: Sí (capturas de pantalla de diferencias de código) ✓
- Audiencia: Desarrolladores ✓
- Decisión: Hero dividido con visual del producto
Paso 2: Estrategia de Texto
Titular: "Entrega código más rápido con confianza" (centrado en resultados)
Subtítulo: "Revisión de código automatizada que detecta errores antes que tus usuarios" (beneficio específico)
CTA Primaria: "Empieza Prueba Gratuita" (modelo freemium)
CTA Secundaria: "Ver Cómo Funciona" (demo para usuarios indecisos)
Paso 3: Tratamiento Visual
- Izquierda: Texto + CTAs (40% de ancho)
- Derecha: Demo animada de diferencias de código (60% de ancho)
- Fondo: Patrón sutil de puntos para estética de desarrollador
Paso 4: Adaptación Móvil
- Apilar: Texto arriba, visual debajo
- El titular escala de 3rem a 2.25rem
- Los botones CTA se apilan verticalmente con un espacio de 1rem
Experto vs Novato:
- Novato: Usa CTA genérica "Más Información"
- Experto: Usa "Ver Cómo Funciona" (implica demostración visual)
- Novato: Titular "Herramienta de Revisión de Código para Equipos"
- Experto: Titular "Entrega código más rápido con confianza" (resultado para el usuario)
Puertas de Calidad
- CTA primaria visible sin desplazarse en ancho móvil de 375px
- El titular comunica la propuesta de valor en ≤10 palabras
- El hero carga con LCP ≤2.5 segundos (probar con limitación)
- Relación de contraste de texto ≥4.5:1 contra cualquier fondo
- El diseño móvil se apila limpiamente sin desplazamiento horizontal
- Elemento de prueba social presente (logotipos, métricas o testimonio)
- Mensaje claro único (sin contenido rotativo ni múltiples propuestas de valor)
- Tasa de clics en CTA ≥2% (medir después de 1 semana)
- Se respeta prefers-reduced-motion para animaciones
- La imagen del hero usa prioridad de carga adecuada (eager/high)
Límites NO-PARA
NO uses este skill para:
- Arquitectura completa de sitio web → usar web-design-expert
- Estrategia de contenido SEO → usar seo-visibility-expert
- Diseños de publicaciones de blog → usar web-design-expert
- Páginas de productos de e-commerce → usar ecommerce-conversion-expert
- Flujos de incorporación de varios pasos → usar user-experience-expert
- Identidad de marca/diseño de logotipo → usar brand-design-expert
Delegar en su lugar cuando:
- El cliente necesita rediseño completo del sitio → web-design-expert
- El enfoque está en la optimización del ranking de búsqueda → seo-visibility-expert
- El hero es parte de un viaje de usuario complejo → user-experience-expert