Iconografía

La biblioteca de íconos es un componente vital y estratégico en el sistema de diseño, sirviendo como un lenguaje visual unificado que optimiza la usabilidad y accesibilidad.

Los íconos no son solo elementos estéticos; son herramientas funcionales que facilitan la navegación intuitiva, reducen la carga cognitiva y garantizan que la información sea comprensible para una audiencia diversa.

Recursos

Para asegurar una coherencia visual y una experiencia de usuario óptima, el sistema de diseño integra la biblioteca de íconos de Material Design, los cuales estarán almacenados en el CDN de Quipux.

Este conjunto de íconos, ampliamente reconocido y familiar para los usuarios, mejora la intuición y reduce la curva de aprendizaje. Su naturaleza escalable y su disponibilidad multiplataforma facilitan una implementación eficiente y consistente, asegurando una comunicación visual clara y unificada en todos los productos y servicios digitales.

Material Symbols Rounded

Los íconos se implementarán específicamente en su variante outlined para todos los portales de front office y back office.

Esta elección de estilo, compatible con el framework Angular 19, asegura una estética moderna y limpia, garantizando la eficiencia y la legibilidad en las interfaces, con los siguientes atributos:

Weight: 400
Grade: 0
Optical Size: 24 px

Imagen de referencia tomada de Material Symbols

Tamaños

El sistema de diseño define cuatro tamaños estándar para los iconos, lo que garantiza consistencia visual y correcta legibilidad en diferentes contextos de la interfaz.

Size 16 (Default)
Size 24
Size 32
Size 48

Nota

Todos los tamaños mantienen la misma proporción y estilo visual para asegurar coherencia dentro del sistema.

Área de reserva

Es el espacio mínimo que debe mantenerse libre alrededor de un ícono para garantizar su correcta visibilidad, legibilidad y reconocimiento dentro de la interfaz. Este espacio evita que otros elementos gráficos, botones o contenedores interfieran visualmente con el ícono.

El área de reserva varía proporcionalmente según el tamaño del ícono, con el fin de mantener una separación adecuada y consistente en cada escala.

El ícono se mantiene centrado dentro de su contenedor y respeta el área de reserva.

Ninguna parte del ícono debe extenderse fuera del área de reserva.

Uso del color en iconos

Los iconos adoptan el color principal de la operación cuando se utilizan como apoyo gráfico dentro de la interfaz. Esto permite mantener coherencia visual con el contexto o módulo en el que se encuentran.

En algunos casos, los iconos pueden utilizar colores informativos cuando su función es comunicar un estado específico o llamar la atención del usuario.

Apoyo gráfico

El icono utiliza el color primario de la operación para reforzar visualmente el contexto o la sección.

Uso informativo

El icono adopta colores semánticos (por ejemplo, danger, warning o success) cuando su propósito es comunicar un estado o alertar al usuario.

Iconografía

Recursos

Material Symbols Rounded

Tamaños

Nota

Área de reserva

Uso del color en iconos

Apoyo gráfico

Uso informativo

Artículos vistos recientemente