coastdigitalgroup/coastai-skills

Sistema de Diseño de Hero

Propósito

El Sistema de Diseño de Hero proporciona una metodología para diseñar el área espacial más crítica de una página web: la sección introductoria. Mientras que hero-section-optimization en la categoría de Crecimiento se enfoca en mensajes y conversión, este sistema de diseño se centra en la anatomía visual, la composición espacial y la superposición en capas del hero. Asegura que el contenido y los elementos visuales trabajen en armonía para establecer la autoridad de la marca, mantener la jerarquía visual y guiar la atención hacia la acción principal en todos los tipos de dispositivos.

Casos de Uso

• Diseñar el punto de entrada principal para páginas de inicio y páginas de aterrizaje.
• Crear introducciones "Sub-Hero" para páginas profundas de productos o servicios.
• Establecer un patrón introductorio consistente en un sitio de múltiples páginas.
• Gestionar la superposición compleja de texto, imágenes y elementos interactivos.
• Diseñar adaptaciones responsivas para introducciones inmersivas con gran cantidad de medios.

Cuándo NO Usarlo

• Navegación Global del Sitio: Utilice site-navigation-system para el encabezado persistente.
• Orientación a Nivel de Página: Utilice page-header-system para introducciones con muchos elementos utilitarios (por ejemplo, paneles de control o configuraciones) que prioricen los metadatos sobre el impacto.
• Artículos de Contenido: Donde el enfoque está en un titular simple y una línea de autor; use tipografía estándar o page-header-system.
• Modales o Superposiciones: Utilice overlay-and-dialog-system para capas de interfaz temporales.

Entradas

1. Prioridad de Contenido: El Titular (H1), el Subtítulo y la CTA Principal.
2. Activos Visuales: Fotografía, ilustraciones, video o patrones abstractos.
3. Modo de Diseño: ¿Es una composición Dividida, Centrada o a Sangre Completa?
4. Sistema de Espaciado Fluido: Para márgenes, rellenos y ritmo vertical consistentes.
5. Paleta de Marca: Para tratamientos de fondo y legibilidad de superposiciones.

Salidas

1. Especificación de Anatomía del Hero: Definición de zonas de contenido (Introducción, Núcleo, Acción, Visual).
2. Plano de Composición: Reglas para la alineación (Izquierda vs. Centrada) y la relación con los medios.
3. Estrategia de Superposición Visual: Reglas para superposiciones de texto, cortinillas y profundidad.
4. Mapa de Transformación Responsiva: Cómo se adapta el hero desde viewports horizontales a verticales.

Flujo de Trabajo

1. Seleccionar un Patrón de Composición

Elija un patrón basado en la relación entre el contenido y los medios:

• La División (50/50): Texto a un lado, visual al otro. Mejor para claridad y productos técnicos.
• La Pila Centrada: Todo el contenido centrado, a menudo con una imagen de fondo o video. Mejor para declaraciones contundentes y de alto impacto.
• El Contenido Insertado: El contenido se sitúa dentro de un cuadro contenido sobre un fondo a sangre completa. Mejor para sensaciones premium o editoriales.
• La Superposición Desplazada: El texto se superpone parcialmente a un elemento visual para crear profundidad.

2. Definir la Jerarquía Espacial (Anatomía)

Aplique visual-hierarchy-system a las zonas del hero:

• Introducción/Cejilla (Opcional): Una pequeña etiqueta o rótulo sobre el H1 para contexto.
• El Titular (H1): El elemento de texto más grande de la página.
• El Subtítulo: Texto de apoyo que proporciona detalle (máx. 2-3 líneas).
• La Zona de Acción: Botones de CTA primario (y opcionalmente secundario).
• El Ancla (Visual): El punto focal que apoya la narrativa.

3. Establecer la Superposición y Legibilidad

Si se utilizan medios de fondo, asegúrese de que el texto sea legible:

• Cortinillas y Degradados: Aplique una Capa de Legibilidad (de imagery-and-media-system) para garantizar un contraste de 4.5:1.
• Tratamientos de Desenfoque: Use backdrop-filter para suavizar fondos ocupados detrás del texto.
• Profundidad: Use sombras o desplazamientos sutiles para distinguir el "plano" del contenido del "plano" del fondo.

4. Aplicar Ritmo Vertical y Espaciado

Use el fluid-spacing-system para definir "espacio para respirar":

• Relleno Superior/Inferior: Asegúrese de que el hero tenga suficiente altura vertical (generalmente 60vh a 90vh en escritorio).
• Espacios Internos: Use un espaciado consistente entre H1, Subtítulo y CTA (generalmente --space-m a --space-xl).

5. Mapear el Punto de Inflexión Responsive

Planifique cómo se transforma el diseño para pantallas más pequeñas:

• Apilamiento: Los diseños divididos generalmente se apilan con el visual arriba (para contexto) o abajo (para priorizar el H1).
• Cambio de Relación de Aspecto: Las imágenes de fondo deben cambiar de horizontal (16:9) a cuadrada o vertical (1:1 o 4:5) para mantener los puntos focales.
• Escalado de Texto: Asegúrese de que el H1 escale hacia abajo correctamente usando fluid-typography-system.

Reglas de Decisión

• La Regla del Único H1: El hero DEBE contener el único H1 de la página.
• Claridad sobre Complejidad: Si el activo visual dificulta incluso ligeramente la lectura del texto, priorice un fondo más simple o una cortinilla más pesada.
• La Zona del "Pulgar": En móvil, asegúrese de que las CTA estén colocadas en los 2/3 inferiores de la pantalla para facilitar el alcance.
• Peso Visual: El H1 y la CTA Principal deben ser los dos elementos visualmente más distintivos en el hero.
• Alineación del Punto Focal: En diseños divididos, el "Sujeto" de la imagen debe mirar hacia el contenido, no alejarse de él.

Restricciones

• Accesibilidad: El texto sobre imágenes debe cumplir con el contraste WCAG AA (4.5:1). Los titulares deben usar etiquetas semánticas <h1>. Si el hero incluye video de fondo o animación en reproducción automática, proporcione un control de pausa visible (WCAG 2.2.2) y respete prefers-reduced-motion.
• Capacidad de Respuesta: El hero nunca debe causar desbordamiento horizontal. Los diseños deben ser fluidos, no de altura fija, para acomodar longitudes de texto variables. Evite bloqueos de 100vh en móvil, que se comportan mal con el chrome dinámico del navegador — prefiera 100dvh o una altura mínima con relleno fluido.
• Rendimiento: Los videos de fondo deben silenciarse y tener una imagen de "póster" de respaldo para conexiones lentas.

Patrones de Falla Comunes

• "Fallo de Contraste": Colocar texto blanco sobre una imagen ocupada o clara sin una cortinilla, haciendo que el titular sea ilegible.
• "Enterramiento de la Acción": Poner la CTA demasiado abajo para que quede cortada "debajo del pliegue" en laptops más pequeñas.
• "Sobrecarga de Medios": Usar un video de fondo que sea demasiado distractivo e impida al usuario leer la propuesta de valor.
• "El Aplastamiento Móvil": Forzar un diseño dividido de escritorio en móvil, resultando en texto diminuto y una imagen apretada.

Criterios de Validación

• El hero contiene un H1 claro que es el elemento de texto más prominente.
• La CTA principal es visualmente distintiva y sigue interactive-state-system.
• Las superposiciones de texto cumplen con los requisitos de contraste WCAG AA (4.5:1).
• La composición espacial (por ejemplo, Dividida, Centrada) es consistente con los objetivos de la marca.
• El espaciado vertical (rellenos/espacios) usa tokens del sistema de espaciado fluido.
• El diseño sigue siendo funcional y legible en viewports móviles.
• Los puntos focales en las imágenes se preservan durante el apilamiento responsive.
• El video/animación en reproducción automática tiene un control de pausa y respeta prefers-reduced-motion.