coastdigitalgroup/coastai-skills

Sistema de Iconografía

Propósito

La skill de Sistema de Iconografía proporciona una metodología para seleccionar, dimensionar e implementar iconos como elementos funcionales de la interfaz. Va más allá de "elegir imágenes bonitas" para establecer un sistema estructurado que garantice que los iconos se utilicen de forma coherente, reduciendo la carga cognitiva, reforzando la identidad de marca y siendo completamente accesibles para todos los usuarios. Un sistema robusto de iconografía asegura que los iconos actúen como señales claras en lugar de desorden visual.

Casos de Uso

• Definir el estilo de icono (contorno, relleno, dos tonos) para un nuevo sitio web.
• Establecer escalas estándar de tamaño y espaciado para iconos en diferentes contextos (botones, navegación, cuadrículas de características).
• Auditar un sitio web en busca de "hinchazón de iconos" o metáforas visuales inconsistentes.
• Implementar un flujo de trabajo accesible con SVG o fuentes de iconos para desarrolladores.
• Seleccionar iconos que se alineen con atributos específicos de la marca (por ejemplo, iconos redondeados "amigables" frente a iconos de bordes afilados "técnicos").

Cuándo NO Usar

• Ilustraciones y Gráficos Hero: Imágenes narrativas grandes y complejas que cuentan una historia en lugar de un único concepto funcional. En su lugar, use habilidades generales de diseño o optimización de héroe.
• Logotipos y Marca: La identidad de marca principal suele tener sus propias reglas innegociables; los iconos apoyan la interfaz, no reemplazan el logotipo de la marca.
• Patrones Decorativos de Fondo: Cuando los iconos se usan como papel tapiz sin significado semántico.

Entradas

1. Voz y Estilo de Marca: ¿La marca es minimalista, técnica, divertida o corporativa?
2. Entorno Técnico: ¿El sitio está construido con un framework que prefiere componentes SVG, sprites o fuentes de iconos?
3. Contextos de Uso: ¿Dónde aparecerán los iconos? (por ejemplo, navegación principal, botones CTA, listas de características, estado del panel de control).
4. Tokens de Diseño Existentes: Sistemas de espaciado y color fluidos para garantizar la alineación.

Salidas

1. Guía de Estilo de Iconos: Reglas definidas para el grosor de trazo, radio de esquina y tipos de relleno.
2. Escala de Tamaños de Iconos: Un conjunto de tokens (por ejemplo, icon-sm, icon-md, icon-lg) mapeados a valores específicos en píxeles o rem.
3. Biblioteca Semántica: Un conjunto curado de iconos mapeados a acciones o conceptos específicos (por ejemplo, "Chevron-down" para menús desplegables).
4. Especificación de Accesibilidad: Reglas para etiquetas ARIA, role="img" y atributos aria-hidden.

Flujo de Trabajo

1. Establecer la Metáfora Visual

Elegir iconos que usen símbolos universalmente comprendidos.

• Búsqueda: Lupa.
• Configuración: Engranaje o Deslizadores.
• Usuario: Silueta o Círculo-usuario. Evite metáforas "ingeniosas" que obliguen a los usuarios a adivinar el significado del icono.

2. Definir el Estilo Visual

Asegurar que todos los iconos del sistema compartan el mismo ADN:

• Grosor de Trazo: Usar un grosor de línea consistente (ej., 2px para todos los iconos de 24px).
• Tratamiento de Esquinas: Las esquinas redondeadas se sienten más accesibles; las esquinas afiladas se sienten más técnicas/precisas.
• Nivel de Detalle: Simplificar los iconos a medida que se hacen más pequeños para mantener la legibilidad.

3. Construir una Escala de Tamaño y Espaciado

Aplicar el sistema-de-espaciado-fluido a los contenedores de iconos:

• Pequeño (16px): En línea con texto, migas de pan.
• Mediano (24px): Botones estándar, navegación principal.
• Grande (48px+): Tarjetas de características, destacados del héroe.
• Centrado Óptico: Ajustar manualmente los iconos que parecen descentrados debido a su forma (ej., un triángulo de "Reproducir").

4. Implementar Lógica de Color y Estado

Vincular los iconos al sistema-de-estado-interactivo:

• Activo/Hover: Los iconos deben cambiar de color o peso junto con su elemento padre.
• Color Semántico: Usar Rojo para iconos de eliminar/error, Verde para éxito.
• Contraste: Los iconos deben cumplir con WCAG AA (3:1 para objetos gráficos).

5. Entrega Técnica y Accesibilidad

• SVG vs. Fuente de Iconos: Preferir SVGs para mejor rendimiento, accesibilidad y calidad de renderizado.
• Roles Aria:
  • Si es decorativo: Usar aria-hidden="true".
  • Si es funcional (ej., un botón solo de icono): Usar role="img" y un aria-label claro.

Reglas de Decisión

• La Regla de "Etiqueta Primero": Los iconos casi siempre deben ir acompañados de etiquetas de texto. Solo use iconos "independientes" para acciones universalmente reconocidas (Buscar, Cerrar, Menú) y solo si tienen etiquetas accesibles.
• Consistencia sobre Variedad: Use una única biblioteca de iconos (ej., Lucide, Heroicons) en lugar de mezclar estilos de múltiples fuentes.
• Escalado de Grosor de Trazo: Si un icono se escala hacia arriba, su grosor de trazo debe mantenerse idealmente proporcional a su tamaño para mantener el "peso" visual en todo el diseño.
• Equilibrio Óptico: No todos los iconos son iguales. Un icono cuadrado parece más grande que uno circular del mismo ancho. Use un enfoque de "caja delimitadora" pero ajuste manualmente el tamaño visual para lograr equilibrio.

Restricciones

• Accesibilidad: Los iconos usados como enlaces o botones DEBEN tener una alternativa textual para lectores de pantalla.
• Objetivos Táctiles: Los iconos dentro de botones no deben reducir el área de interacción por debajo de 24x24px (WCAG 2.2 SC 2.5.8 mínimo); se prefiere 44x44px para acciones principales solo de icono.
• Capacidad de Respuesta: En pantallas pequeñas, los iconos pueden necesitar simplificarse o eliminarse si saturan el texto, aunque a menudo ayudan al escaneo móvil.

Patrones de Falla Comunes

• El Icono "Carne Misteriosa": Usar un icono sin etiqueta que los usuarios no reconocen.
• Grosores Inconsistentes: Mezclar un icono de contorno de 1px con un icono grueso de 3px en la misma fila.
• Sobrecomplejidad: Usar iconos con demasiadas líneas finas que se "desenfocan" o desaparecen en pantallas de baja resolución o tamaños pequeños.
• Falta de Accesibilidad: Usar iconos SVG sin títulos o etiquetas ARIA, dejando a los usuarios de lectores de pantalla ciegos a la acción.
• Alineación Óptica Rota: Un botón de "Reproducir" que parece deslizarse hacia el lado izquierdo de su círculo porque está centrado matemáticamente pero no ópticamente.

Criterios de Validación

• Todos los iconos pertenecen a un único estilo visual cohesivo.
• Los iconos tienen una escala de tamaños definida (ej., 16, 24, 32, 48).
• Los iconos independientes (si los hay) tienen aria-label o alternativas textuales equivalentes.
• Los iconos decorativos están marcados con aria-hidden="true".
• Los iconos mantienen una relación de contraste de 3:1 contra su fondo.
• Los elementos interactivos solo de icono cumplen con el objetivo táctil mínimo de 24x24px de WCAG 2.2 (44x44px preferido).
• Las metáforas visuales son claras y estándar (sin "adivinanzas").