Digital

Consejos para crear iconos perfectos

2 Mins de lectura

Los iconos son pequeños elementos de diseño, pero pueden tener un impacto enorme como elemento funcional. Para un diseñador, significa reducir una gran cantidad de información a su mínima expresión, sin duda, un gran reto.

Antes de empezar

Conseguir excelentes resultados a la hora de diseñar va mucho más allá de tu habilidad/experiencia de trabajo. Crear iconos depende de saber plantearse las preguntas correctas antes de considerar dar un solo clic. ¿Cómo? ¿Para qué? ¿Por qué? (¡Concéntrate!)

Estas simples preguntas no sólo te ayudarán a sentar una base para tener claro hasta qué punto quieres llegar; también te trazarán ciertos límites y los límites por naturaleza te ayudarán a encontrar soluciones efectivas.

Y ahora vamos con las claves…

Simplicidad (KISS)

El principio KISS (del inglés Keep It Simple, Stupid!:​ «¡Mantenlo sencillo, estúpido!») es un acrónimo usado como principio de diseño.

Este principio establece que la mayoría de sistemas funcionan mejor si se mantienen simples que si se hacen complejos; por ello, la simplicidad debe ser mantenida como un objetivo clave del diseño, y cualquier complejidad accidental debe ser evitada.

Un icono es una representación estilizada. No te preocupes porque sea realista, elimina los detalles innecesarios, usa formas básicas y deja solo lo esencial para que el icono sea fácilmente comprensible.

 

simplicidad diseño iconos

Consistencia

Tener una consistencia visual permitirá al usuario aprender rápido y tener una mejor experiencia. Es fundamental que todos los iconos de tu sistema tengan el mismo estilo para garantizar una armonía perfecta (mismas formas, relleno, grosor de trazo, tamaño).

 

consistencia iconografía

(Cuando puedas, diséñalos desde cero; no mezcles iconos de librerías con diferentes estilos)

Claridad

Diséñalos bajo el lema «pixel perfect«, especialmente cuando sean muy pequeños. De esta forma siempre serán nítidos y sin bordes borrosos. Ten cuidado con los medios píxeles y evita los decimales.

claridad diseño iconos

(También te ayudará a mantenerlos reconocibles y nítidos si los escalas).

Espacio

Asegúrate de que todas las formas de tus iconos tengan suficiente espacio. Los trazos y espacios demasiado finos harán que el icono sea más difícil de entender.

 

espacio iconografia

(Deja como mínimo 2px de espacio negativo)

Correcciones ópticas

Para asegurarte de que cada icono se vea bien, haz pequeños ajustes para alinear sus elementos ópticamente y crear equilibrio. (No confíes solo en la geometría, usa tus ojos y mueve los elementos un poco si es necesario). 

correcion optica icono

Dimensiones

Crea todos los iconos con el mismo tamaño. Define márgenes y un espacio que los rodee, trata de mantener los elementos dentro de los márgenes que les has asignado.

No debemos olvidar que, el objetivo principal de un icono es comunicar con claridad. En el diseño no existen puntos medios, algo funciona o no funciona. Procura siempre buscar el mejor camino en donde el lenguaje gráfico vaya muy de la mano del estético y procura resolver de forma holística cada uno de los problemas a los que te debas enfrentar, con estos consejos tendrás el camino más fácil.

 

dimensiones diseño iconografia

 

¿Estás trabajando en el diseño de tu nuevo proyecto? ¿Quieres trabajar con nuestro equipo de Experiencia de Usuario y Diseño? Desde Hiberus Digital aseguramos el resultado de tu producto o servicio digital, aplicando metodologías ágiles y Design thinking que permitan definir el roadmap del proyecto. Nuestro equipo analizará tus necesidades y te asesorará en el desarrollo de tu proyecto digital. Ponte en contacto con nosotros y estaremos encantados de ayudarte.

Luis Peiret
2 posts

Sobre el autor
Diseñador UI en Hiberus Digital.
Artículos

USABILIDAD, DISEÑO Y MULTIMEDIA

Reinventa tu negocio conociendo a tus usuarios con nuestro equipo dedicado a User Research, User Experience, User Interface y Video Marketing.

¿Te ayudamos?

Artículos relacionados
Digital

¿Qué es la relación de aspecto en tus fotografías y vídeos y cuáles son las más comunes?

5 Mins de lectura
A la hora de publicar una fotografía o un vídeo en cualquier plataforma no solo es importante la imagen en sí, también…
Digital

Liferay DevCon 2021: las novedades de Liferay DXP 7.3

4 Mins de lectura
El evento anual Liferay DevCon es la reunión más grande de desarrolladores de Liferay a nivel mundial. La edición 2021 en formato…
Digital

Core Web Vitals: Qué son y cómo afrontar la nueva actualización de Google

5 Mins de lectura
La velocidad de carga de una página web siempre ha estado bajo la atenta mirada de Google, el motor de búsqueda por…

1 Comment

  • Avatar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *