coastdigitalgroup/coastai-skills

Sistema de Composición de Secciones

Propósito

El Sistema de Composición de Secciones proporciona una metodología para diseñar la "parte media" de la página: la secuencia de secciones que se sitúan entre el encabezado y el pie de página globales. Mientras que los componentes atómicos (tarjetas, botones) viven dentro de las secciones, este sistema se centra en el ritmo espacial, los patrones de diseño y las transiciones entre esas secciones. Garantiza que el contenido se agrupe de forma lógica, que la fatiga visual se minimice mediante la variación del diseño y que el usuario sea guiado a través de una narrativa o flujo de tareas coherente.

Casos de Uso

• Diseño de páginas de aterrizaje extensas con múltiples secciones de características y beneficios.
• Estructuración de páginas de detalle de producto (PDP) que requieren especificaciones técnicas, pruebas sociales y guías de uso.
• Organización de páginas "Sobre Nosotros" o "Cómo Funciona" en bloques de contenido digeribles.
• Establecimiento de un ritmo coherente del "Cuerpo de la Página" en un sitio web de varias páginas.
• Gestión del espaciado vertical y los cambios de fondo para indicar cambios de tema o prioridad.

Cuándo NO Usarlo

• Vistas de una sola sección: Cuando toda la experiencia cabe dentro del hero o una única ventana gráfica (por ejemplo, una página de inicio de sesión simple o una pantalla de presentación).
• Navegación/Pie de página global: Utilice site-navigation-system o site-footer-system para el marco persistente del sitio.
• Micro-interacciones: Para comportamientos de elementos individuales dentro de una sección; utilice interactive-state-system.
• Visualizaciones de datos puras: Cuando el contenido es un flujo continuo de elementos uniformes (por ejemplo, una tabla de datos grande o un feed infinito).

Entradas

1. Secuencia de contenido: La lista priorizada de secciones de la página (de la Arquitectura de la Información).
2. Prioridad de la sección: Qué secciones son de "Alto Impacto" (impulsadas por beneficios) frente a "De Apoyo" (especificaciones técnicas/Prueba social).
3. Paleta de marca: Para definir patrones alternos de fondo.
4. Sistema de espaciado fluido: Para márgenes verticales y relleno de sección consistentes.
5. Sistema de cuadrícula adaptable: Para definir el ancho máximo del contenido y el comportamiento de las columnas.

Salidas

1. Mapa de secuencia de secciones: Un plano que muestra el orden y el patrón de diseño de cada sección.
2. Estrategia de transición: Reglas definidas para los cambios de fondo (por ejemplo, Claro -> Oscuro -> Claro) y el espaciado vertical.
3. Planos de diseño: Esquemas anotados para patrones de sección comunes (Zig-zag, Cuadrículas, Divisiones 50/50).
4. Reglas de apilamiento adaptable: Cómo colapsan los diseños de secciones complejas en móvil.

Flujo de trabajo

1. Mapear el flujo narrativo

Organice el contenido en una secuencia lógica basada en la intención del usuario. Un flujo común de página de aterrizaje incluye:

• Conciencia: Héroe / Declaración del problema.
• Educación: Cómo funciona / Funciones principales.
• Validación: Prueba social / Casos de éxito.
• Detalle: Funciones secundarias / Precios / Preguntas frecuentes.
• Conversión: Llamada a la acción final.

2. Seleccionar patrones de diseño de sección

Evite la repetición alternando entre patrones de diseño:

• La División (50/50): Contenido en un lado, visual en el otro. Ideal para beneficios de alto impacto.
• El Zig-Zag: Alterna el patrón "División" (por ejemplo, Visual a la izquierda, luego Visual a la derecha). Ideal para contar historias y reducir la fatiga de escaneo.
• La Cuadrícula de Funciones: 3 o 4 columnas de tarjetas/iconos. Ideal para funciones o servicios secundarios.
• La Pila Centrada: Todo el contenido centrado vertical y horizontalmente. Ideal para declaraciones contundentes o CTA finales.

3. Diseñar el sistema de transición

Utilice señales visuales para indicar un cambio de tema:

• Alternancia de fondo: Cambie entre Blanco, Gris Claro o colores de la marca para "agrupar" secciones. Derive fondos teñidos de un único token de marca con color-mix() (por ejemplo, color-mix(in oklch, var(--brand) 6%, white)) en lugar de seleccionar manualmente un gris/tono diferente por sección, para que la paleta se mantenga consistente a medida que cambia el color de la marca.
• Espaciado vertical: Use relleno superior/inferior consistente (del fluid-spacing-system), idealmente con clamp() para que el relleno de la sección escale suavemente entre móvil y escritorio en lugar de saltar en los puntos de ruptura.
• Divisores: Use líneas sutiles o transiciones SVG anguladas para una sensación más moderna o dinámica.

4. Establecer "pausas" de contenido

Introduzca "secciones de pausa" para evitar que el usuario se desplace demasiado rápido:

• Citas/Testimonios: Secciones centradas con texto grande.
• Imágenes a ancho completo: Visuales inmersivos que proporcionan un reinicio mental.
• Estadísticas/Impacto: Bloques de alto contraste con números grandes.

5. Definir el apilamiento adaptable

Planifique cómo colapsan las secciones:

• Pila natural: Los diseños divididos suelen apilarse con el visual arriba o abajo (generalmente arriba para dar contexto).
• Inversión de Zig-Zag: Asegúrese de que en un diseño en zig-zag, el "Media" no termine apilado secuencialmente en móvil (por ejemplo, Texto-Media-Media-Texto). Ajuste el orden para que sea consistente (por ejemplo, Media-Texto-Media-Texto).

Reglas de Decisión

• La regla de "Fatiga": Nunca use el mismo patrón de diseño para tres secciones consecutivas. Alterne entre diseños Dividido, Cuadrícula y Centrado.
• La regla del "Ancla Visual": Cada sección de alto impacto debe tener un ancla visual (Imagen, Video o Icono) que respalde el texto.
• Contraste para el enfoque: Use una sección con fondo oscuro para el mensaje más importante o la CTA final para crear un alto contraste con el resto de la página.
• Restricción de ancho de texto: Limite el ancho de los bloques de texto (generalmente max-width: 60ch) para garantizar la legibilidad, incluso si el contenedor de la sección es más ancho.

Restricciones

• Accesibilidad: Los cambios de color de fondo deben mantener las relaciones de contraste WCAG AA para todo el texto dentro de esa sección.
• Jerarquía de encabezados: Cada sección principal debe comenzar con un <h2-h6> que siga el esquema lógico del documento.
• Capacidad de respuesta: El relleno de la sección debe reducirse en móvil (por ejemplo, --space-3xl en escritorio se convierte en --space-xl en móvil); prefiera una expresión clamp() en lugar de anulaciones de punto de ruptura discretas.
• Consistencia del espaciado: El espacio entre secciones debe ser consistente a menos que un cambio de tema requiera una "pausa" más grande.

Patrones de Fallo Comunes

• El "Muro de Texto": Secciones con demasiado texto y sin descansos visuales o subtítulos.
• Repetición de patrón: Usar el mismo diseño de división 50/50 para 5 secciones seguidas, haciendo que la página se sienta monótona.
• El "Sándwich Móvil": En un diseño en zig-zag, no ajustar el orden de apilamiento en móvil, lo que resulta en dos imágenes o dos bloques de texto directamente uno encima del otro.
• Falta de espacio en blanco: Amontonar las secciones sin suficiente relleno vertical, haciendo que el contenido se sienta sofocante.
• Alineación inconsistente: Mezclar titulares centrados con titulares alineados a la izquierda en la misma secuencia sin una lógica clara.

Criterios de Validación

• El diseño de la página alterna entre al menos dos patrones diferentes (por ejemplo, Dividido y Cuadrícula).
• Las transiciones de sección (cambios de fondo) se utilizan para agrupar contenido relacionado.
• El espaciado vertical (relleno) es consistente entre tipos de sección similares.
• Todas las secciones siguen la jerarquía de encabezados correcta (h2 para secciones principales).
• El orden de apilamiento móvil para diseños en zig-zag está definido lógicamente.
• Las secciones con mucho texto mantienen una longitud de línea legible (max-width: 60-80ch).
• Las relaciones de contraste para las secciones con fondo de color cumplen con WCAG AA.