Consejos para diseñar un buen icono

Los íconos son un elemento esencial en cualquier interfaz, ya que contienen información en un formato pequeño y visual. Los iconos están diseñados para ser simples, modernos, amigables y, a veces, extravagantes. Para garantizar la coherencia y la legibilidad, su tamaño limitado significa que cada ícono debe cumplir estrictamente con la guía y al mismo tiempo expresar las características esenciales.

Google fonts ha añadido recientemente a su catálogo la posibilidad de descargar más de 2500 iconos. Los símbolos están disponibles en tres estilos y cuatro estilos de fuentes variables ajustables (relleno, grosor, grado y tamaño óptico).

Así Google también nos ofrece una guía para el diseño y la aplicación de lo iconos que nos puede ser muy útil si nos ponemos a diseñar símbolos.

Algunas de las normas y consejos que debemos tener en cuenta a la hora de diseñar un icono son las siguientes.

· Simplifca los iconos para una mayor claridad y legibilidad.

Cuanto más simple sea la representación del icono más fácil y accesible será para la comprensión de todos.

Imagen de Material Design
· Haz que los iconos sean gráficos y llamativos

No uses formas orgánicas delicadas o sueltas. Es recomendable que el diseño del icono sea un conjunto, es decir no dejar elementos sueltos.

Imagen de Material Design
· Utiliza y manten un estilo visual uniforme en todo un conjunto de iconos

Este apartado es muy importante, tanto si diseñamos o utilizamos un conjunto de iconos es importante que para la coherencia tengan el mismo estilo visual.

Imagen de Material Design
· Manten el peso del icono si utilizas diferentes iconos en un diseño. No mezcles diferentes pesos.
Imagen de Material Design
· Símbolos rellenos en estados seleccionados

Para facilitar la comprensión del usuario cuando estamos en un apartado o seleccionamos un icono, diferenciamos del resto mediante el relleno.

Imagen de Material Design

Tamaños ópticos

Los tamaños ópticos varían de 20 dp a 48 dp. Para que la imagen tenga el mismo aspecto en diferentes tamaños, el peso del trazo (grosor) cambia a medida que se escala el tamaño del icono. El tamaño óptico ofrece una forma de ajustar automáticamente el grosor del trazo cuando aumenta o disminuye el tamaño del símbolo.

Utiliza un valor de tamaño óptico de 20 dp para diseños densos en escritorio donde encontramos muchos iconos.

Imagen de Material Design

Utiliza símbolos de 40dp–48dp de mayor tamaño cuando sea necesario resaltar las acciones principales.

Imagen de Material Design

Para aprender más acerca de diseño de interfaz en enero impartimos en nuestra escuela el Máster en creatividad y diseño UXUI donde nos introduciremos en el mundo del diseño de proyectos digitales abarcando diseño de experiencia de usuario (UX) y diseño de interfaces para Apps y Web (UI).

© 2024 Idecrea. Escuela de diseño y creación digital