coastdigitalgroup/coastai-skills - Sistema de Imágenes y Medios

Sistema de Imágenes y Medios

Propósito

El Sistema de Imágenes y Medios proporciona una metodología para gestionar cómo se integran los activos visuales en el diseño de un sitio web. Garantiza que las imágenes, ilustraciones y videos no sean meras "decoraciones", sino partes funcionales de la experiencia de usuario. Este sistema establece reglas para relaciones de aspecto, dirección de arte responsiva y legibilidad del texto (superposiciones), asegurando que los medios sigan siendo impactantes y accesibles independientemente del tamaño de pantalla o la complejidad del contenido.

Casos de Uso

• Establecer estándares de dirección de arte y estilo visual para un nuevo sitio web.
• Definir una matriz de relaciones de aspecto coherente para una biblioteca de componentes UI (por ejemplo, tarjetas, héroes).
• Diseñar superposiciones de texto de alto contraste para imágenes y videos de fondo.
• Gestionar el recorte responsivo y la preservación del punto focal para medios con "dirección de arte".
• Estandarizar la composición de secciones con muchos medios, como galerías, destacados de características y estudios de caso.

Cuándo NO Usar

• Optimización Técnica de Activos: Usa responsive-images en website-development para aspectos técnicos como compresión, formatos de archivo y carga diferida.
• Diseño de Logotipos y Marca: Para el diseño de la identidad de marca principal en sí (logotipos, marcas), que generalmente se establece fuera del diseño web.
• Iconografía: Usa iconography-system para símbolos UI pequeños y funcionales.
• Patrones Meramente Decorativos: Para texturas de fondo puramente abstractas y no semánticas que no interactúan con el contenido.

Entradas

1. Dirección de Arte de la Marca: La "voz" visual prevista (por ejemplo, Cándida, Técnica, Alto Contraste, Minimalista).
2. Inventario de Contenido: Los tipos de medios necesarios (por ejemplo, fotos de producto, retratos, fondos abstractos).
3. Sistema de Cuadrícula Responsiva: El contexto de diseño donde vivirán los medios.
4. Sistema Tipográfico: Los estilos de texto que interactuarán con los medios o se colocarán sobre ellos.

Salidas

1. Matriz de Relaciones de Aspecto: Un conjunto definido de relaciones (por ejemplo, 16:9, 1:1, 4:3) asignadas a tipos de componentes específicos.
2. Especificación de Legibilidad de Superposiciones: Estándares para scrims, degradados y tratamientos de desenfoque para garantizar el contraste del texto.
3. Mapa de Dirección de Arte: Reglas definidas de punto focal y estrategias de recorte para móvil, tableta y escritorio.
4. Planos de Composición: Reglas sobre cómo los medios se relacionan con el contenido adyacente (por ejemplo, divisiones 50/50, medios insertados, a sangría completa).

Flujo de Trabajo

1. Definir el Lenguaje Visual

Establecer un "filtro" o estilo coherente para todos los medios a fin de garantizar la cohesión:

• Tratamiento: Definir reglas para saturación, temperatura y contraste.
• Densidad: Determinar si las imágenes deben ser recargadas/detalladas o minimalistas/espaciosas.
• Composición: Establecer estándares para el "espacio en blanco" dentro de las imágenes (por ejemplo, "Todas las fotos de producto deben tener un margen del 10% de espacio negativo").

2. Establecer Estándares de Relación de Aspecto

Usar un conjunto coherente de relaciones para evitar "saltos" en el diseño y mantener el ritmo:

• Cinematográfica (16:9 / 21:9): Ideal para secciones Héroe y video inmersivo.
• Estándar (4:3 / 3:2): Ideal para vistas previas de artículos y fotografía general.
• Cuadrada (1:1): Ideal para listados de productos, avatares y cuadrículas sociales.
• Retrato (3:4 / 9:16): Ideal para contenido móvil primero y destacados de características verticales.

3. Diseñar para la Legibilidad del Texto (Superposiciones)

Al colocar texto sobre medios, usar una "Capa de Legibilidad":

• El Scrim: Una superposición sutil, semitransparente, negra o blanca (generalmente 10-40% de opacidad).
• El Degradado: Un desvanecimiento direccional (por ejemplo, de abajo hacia arriba) que oscurece el área detrás del texto mientras mantiene el resto de la imagen clara.
• El Desenfoque: Aplicar un desenfoque de filtro de fondo al área detrás del texto para reducir el ruido visual.
• Ubicación del Texto: Alinear el texto en la parte "más tranquila" de la imagen.

4. Configurar la Dirección de Arte Responsiva

Las imágenes deben cambiar su "recorte" para adaptarse a diferentes formas de pantalla:

• Preservación del Punto Focal: Identificar el "Sujeto" de la imagen y asegurarse de que permanezca visible a medida que el contenedor cambia de forma (por ejemplo, ajustes de object-position).
• El Giro Móvil: Cambiar de un recorte horizontal de escritorio (16:9) a un recorte cuadrado o vertical (1:1 o 4:5) en móvil para maximizar el uso del viewport.
• Escalar sobre Estirar: Nunca permitir que una imagen pierda su relación de aspecto; usar object-fit: cover para mantener las proporciones mientras se llena el contenedor, y reservar espacio con la propiedad CSS aspect-ratio para que el diseño no se desplace antes de que se cargue el activo.
• Recortes con Dirección de Arte: Usar el elemento <picture> con múltiples <source> y puntos de interrupción cuando se necesite un recorte diferente (no solo un tamaño diferente) por viewport; usar srcset/sizes en un solo <img> cuando solo cambie la resolución, no la composición.

5. Definir Patrones de Composición

Determinar cómo los medios interactúan con el diseño circundante:

• A Sangría Completa: Los medios se extienden hasta los bordes del viewport. Ideal para secciones de introducción de alto impacto.
• Insertado / Contenido: Los medios permanecen dentro de las columnas de la cuadrícula. Ideal para imágenes de apoyo.
• El Efecto de Capas: Los medios se superponen con otros elementos (como tarjetas o texto) para crear profundidad.

Reglas de Decisión

• La Regla de Legibilidad: Si se coloca texto sobre una imagen, DEBE cumplir con el contraste WCAG AA (4.5:1). Si no es así, aplicar un scrim más oscuro o mover el texto.
• Consistencia de Relación: Todas las tarjetas en una misma fila o cuadrícula DEBEN usar la misma relación de aspecto para garantizar la alineación.
• Recorte Priorizando el Sujeto: Priorizar siempre el sujeto de la imagen (por ejemplo, el rostro de una persona o un producto) cuando la relación de aspecto cambie para móvil.
• Respaldo para Estado Vacío: Definir un "Estilo de Marcador de Posición" para cuando una imagen no se carga o no se proporciona, utilizando un gráfico neutro con colores de marca.
• Interacción de Video: Proporcionar siempre un control de "Reproducir/Pausar" y nunca reproducir video automáticamente con sonido.
• Reservar Espacio: Cada contenedor de medios debe tener una aspect-ratio definida o un width/height explícito para que el navegador pueda reservar espacio de diseño antes de que se descargue el activo.

Restricciones

• Accesibilidad: El texto sobre imágenes debe ser legible por lectores de pantalla (no aplanado dentro de la imagen). Todas las imágenes semánticas deben tener texto alt.
• Rendimiento (Lado del Diseño): Evitar requerir resolución ultra alta para elementos que siempre serán pequeños (como avatares).
• Capacidad de Respuesta: Los medios nunca deben causar desplazamiento horizontal. La relación de aspecto debe permanecer estable para evitar el Desplazamiento de Diseño (CLS).

Patrones de Falla Comunes

• El "Fallo de Contraste": Texto blanco sobre una imagen clara/recargada sin scrim, haciendo que el texto sea ilegible.
• La "Decapitación": Recorte responsivo inadecuado que corta cabezas o sujetos principales en móvil.
• Sopa de Relaciones: Usar 5 relaciones de aspecto diferentes en la misma página, creando un ritmo visual fragmentado y desordenado.
• Desajuste de Activos: Mezclar fotografía de alta calidad con ilustraciones de "clip-art", rompiendo la cohesión de la marca.
• El "Estiramiento": Forzar una imagen en un contenedor que no coincide con sus proporciones, lo que genera distorsión.

Criterios de Validación

• Cada imagen con superposición de texto cumple con el contraste WCAG AA (4.5:1).
• Las relaciones de aspecto son consistentes dentro de tipos de componentes similares (por ejemplo, todas las tarjetas de blog son 4:3).
• Los puntos focales se preservan en todos los viewports: Móvil, Tableta y Escritorio.
• Todas las imágenes semánticas tienen texto alt descriptivo definido.
• Los medios no causan desbordamiento horizontal ni distorsión del diseño.
• Se mantiene un estilo visual claro (dirección de arte) en todos los activos.
• Cada contenedor de medios reserva espacio mediante aspect-ratio o dimensiones explícitas para prevenir el Desplazamiento Acumulativo de Diseño (CLS).