3 min de lectura
Cómo elegir iconos y gráficos sin que un sitio web parezca genérico
Los íconos ayudan a escanear cuando su significado es familiar y su estilo es consistente. Se convierten en decoración cuando cada sección recibe un símbolo sin función informativa o cuando las bibliotecas mixtas crean una inconsistencia visible.
Utilice iconos para una tarea definida
Un icono puede identificar una acción familiar, distinguir categorías repetidas o reforzar una etiqueta breve. Un símbolo abstracto único al lado de cada párrafo añade trabajo de interpretación sin ayudar a la navegación.
Retire el icono y compruebe si se pierde el significado; consérvelo sólo cuando mejore el reconocimiento o la comparación.
Comience con los trabajos que los iconos necesitan realizar. Símbolos de navegación, indicadores de estado, ilustraciones de características y marcas decorativas tienen diferentes requisitos. Use formas familiares para acciones comunes y agregue texto cuando el significado podría ser ambiguo. Un icono debe reducir el esfuerzo de lectura, no crear un pequeño rompecabezas. Pruébelo sin color y en el tamaño final; detalles finos que se ven refinados en un archivo de diseño pueden desaparecer en un teléfono.
Mantenga la geometría y el peso consistentes
El ancho del trazo, la forma de las esquinas, la perspectiva y las áreas rellenas crean un parecido familiar. La combinación de íconos de contorno delgado con símbolos rellenos pesados hace que una cuadrícula de servicios parezca ensamblada a partir de kits no relacionados.
Compare los iconos en su tamaño de visualización real y defina reglas de corrección óptica, de trazo y de cuadrícula.
La coherencia proviene de un sistema de dibujo controlado. Definir la cuadrícula, trazo, tratamiento de esquinas, tamaño óptico y estilo lleno o delineado. Revisar los iconos uno al lado del otro en el tamaño utilizado en botones y listas. Mezclar varias bibliotecas a menudo produce un peso y proporciones desiguales. Si una biblioteca cubre la mayoría de las necesidades, redibuje los pocos símbolos que faltan para coincidir en lugar de añadir un segundo lenguaje visual no relacionado.
No confíes únicamente en los iconos
Los símbolos desconocidos necesitan etiquetas visibles y los controles interactivos necesitan nombres accesibles. Un menú móvil de íconos ambiguos puede bloquear a los visitantes que no comparten la interpretación del diseñador.
Prueba con etiquetas, estados de enfoque, contraste y semántica de tecnologías de asistencia.
Un diagrama de flujo de trabajo puede mostrar secuencia y responsabilidad; un gráfico de comparación puede exponer diferencias; un detalle del producto puede centrar la atención en una característica. Las formas flotantes genéricas añaden peso al archivo sin ayudar a la comprensión. Escriba el documento que se pretende llevar antes de crear el activo, luego elimine las etiquetas o la decoración que no contribuyen a esa explicación.
Planificar la propiedad y la entrega de archivos
Un sistema de iconos utilizable incluye archivos fuente, tamaños de exportación y reglas para agregar nuevos símbolos. Sin un propietario, las adiciones posteriores varían en estilo o se copian de bibliotecas incompatibles.
Comprobaciones prácticas
- Registre los términos de la licencia, las fuentes SVG, los nombres y dónde se utiliza cada recurso.
Los iconos decorativos deben permanecer ocultos de la tecnología de asistencia, mientras que los controles interactivos necesitan etiquetas que describan la acción. Suministre SVG donde sea apropiado, pero inspeccione el código y el cuadro de vista antes de publicar. Mantenga archivos de origen editables y un índice de uso para que las adiciones posteriores sigan el mismo sistema en lugar de reiniciar el estilo de icono en cada página.
Análisis relacionados
Servicio relacionado