La guía súper simple de iconografía

En promedio, ¿cuánto tiempo te lleva diseñar un icono personalizado?

¿Un par de minutos? ¿Diez minutos? ¿Más extenso? ¿Qué pasaría si te mostramos cómo hacer 10 íconos geniales en menos de 10 minutos?

La iconografía es una forma de comunicación que se suma al lenguaje visual de una marca, por lo que un conjunto de iconos personalizados es más significativo y atractivo que uno simple y genérico. La mayoría de los diseñadores nunca se molestan en aprender a crear íconos personalizados, principalmente porque ese es otro curso para agregar a nuestra cola de aprendizaje.

Así que me propuse crear una guía súper simple para ayudarte a aprender los conceptos básicos de la iconografía en menos de 10 minutos (lo digo en serio).

Ser capaz de crear íconos personalizados le abrirá un mundo completamente nuevo para que comience a crear formas intrincadas para sus proyectos, lo que lo distinguirá del resto de la multitud, brindándole una ventaja competitiva como diseñador.

Originalmente, me inspiré para crear esta guía en este GIF de Morgan Allan Knutson que muestra cómo crear un ícono de servicios de ubicación en unos segundos. Lo encontré refrescante, inteligente y rápido. Desmitifica el proceso de creación de iconos personalizados y muestra lo simple que puede ser. Un icono es, de hecho, una forma geométrica que puede resultar de una combinación o deformación de formas básicas, como cuadrados, triángulos o círculos. Una regla general en el diseño de logotipos o iconos es mantener las cosas simples.

El objetivo de este artículo es crear 10 íconos en 10 segundos cada uno, usando solo formas simples.

Nota importante: Usaremos Adobe Illustrator en esta publicación, pero puedes obtener los mismos resultados usando Sketch o incluso Figma. Cada vez que necesitemos agregar o eliminar un punto en una forma, usaremos la "Herramienta Pluma (P)". La selección y el movimiento de puntos se realizará con la "Herramienta de selección directa (A)".

icono de ojo

Alinee al centro cuatro círculos, yendo de mayor a menor con colores alterados, como se muestra. En el círculo más grande, hacia atrás, tire de los puntos izquierdo y derecho para alejarlos del centro. Finalmente, mueva el círculo interior más pequeño hacia el borde del siguiente para crear un efecto de iluminación en el iris.

Sugerencia: en lugar de usar un círculo blanco, simplemente reste (usando el panel Buscatrazos) los dos círculos del círculo debajo de cada uno de ellos. Crea un resultado más limpio en el fondo.

Icono de flecha

Se trata de dónde agrega esos puntos adicionales en los bordes del cuadrado inicial. Sugerencia: como alternativa, simplemente puede dibujar una línea delgada con forma de flecha.

Icono de batería

Usando un cuadrado con trazo y dos con relleno. Simplemente juegue con las proporciones, mientras incluye un cuadrado relleno en la forma del trazo y mantiene el segundo afuera para formar la punta de la batería.

Sugerencia: juegue con el grosor del trazo y el relleno para mantener un buen equilibrio visual.

Icono de lista de viñetas

Comience con un cuadrado simple; duplicarlo una vez a su derecha; y remodelarlo como un rectángulo largo. Seleccione todo y duplíquelo dos veces mientras mantiene un espacio de tamaño cuadrado en el medio.

Consejo: Reemplace el cuadrado con círculos para crear una apariencia más suave.

icono de la nube

Dibuja tres círculos de diferentes tamaños. Alinee hacia abajo los dos círculos más pequeños para tener una base, y coloque el círculo más grande en el medio, en una posición más alta. Crea la base de la nube deformando uno de los círculos pequeños.

Sugerencia: use círculos de diferentes tamaños para obtener una nube con un aspecto más orgánico.

Reenviar icono de reproducción

Dibuja un rectángulo largo. Agregue un punto al centro del borde izquierdo y elimine los puntos superior e inferior. Ahora que tiene un triángulo, simplemente duplique esa forma una vez a la derecha para completar el ícono.

Consejo: para hacer esto aún más rápido, simplemente comience con un triángulo en lugar de un cuadrado.

Icono de embudo

Comience con un rectángulo largo. Agrega un punto al centro de los bordes izquierdo y derecho. Ahora, estira horizontalmente el borde superior y listo.

Consejo: coloque dos cuadrados de borde a borde y simplemente estire el borde superior horizontalmente.

Icono Reproducir/Pausar

Comience con tres rectángulos largos en paralelo. Transforma el rectángulo más ancho en un triángulo.

Consejo: Alternativamente, simplemente dibuje un triángulo, seguido de dos rectángulos paralelos.

Icono de flecha de posición

Este es un remix del ícono del servicio de ubicación de Morgan. Simplemente dibuje un cuadrado, luego tire del punto inferior izquierdo en dirección diagonal, moviéndose hacia arriba hasta que pase el punto opuesto.

Sugerencia: en Illustrator, presionar la tecla Mayús mientras arrastra el punto ayuda a mantener la simetría mientras mantiene el ángulo diagonal correcto.

Icono de pin de posición

Elimine un círculo dentro de uno más grande (usando el panel Buscatrazos). Arrastra el punto más bajo hacia abajo y agudiza el ángulo formado; cambia a la "Herramienta Pluma (P)", luego, mientras mantienes presionada la tecla "Shift", haz clic en el punto.

Sugerencia: use una esquina redondeada en ese punto de inflexión para suavizar el aspecto: ajuste el valor del "radio de la esquina" en el panel de opciones "Transformar" mientras el punto está seleccionado.

Icono de sonido

Al igual que el ícono del embudo pero con una rotación de 90 grados.

Sugerencia: simplemente copie y pegue el icono del embudo y gírelo en el sentido de las agujas del reloj.

Icono de onda

Dibuja una línea recta y agrega puntos a la misma distancia en su longitud. Arrastra hacia abajo los puntos de modificación y redondea cada esquina al máximo, hasta que esté todo suave.

Sugerencia: Redondee las puntas de las líneas para una apariencia aún más suave.

Icono superior

Este es el icono de bonificación.

Dibuja un cuadrado con un trazo lo suficientemente grueso. Usando la herramienta de tijeras, corte los puntos superior derecho e inferior izquierdo. Esto dividirá la forma en dos. Mueva la mitad inferior hacia arriba y gire todo 45 grados en sentido contrario a las agujas del reloj.

Consejo: preste atención al grosor de las líneas y al espacio en blanco que se forma dentro del logotipo.

Un icono vale más que 1000 palabras.

A menudo escuchamos que una imagen vale más que mil palabras. Bueno, esto se aplica mucho a los íconos, que reemplazan oraciones y palabras largas para optimizar el espacio visual, la usabilidad y la estética. Saber cómo crear un conjunto de íconos simples y efectivos puede ser de gran ayuda. Y acabamos de ver lo rápido y fácil que puede ser al observar y utilizar un conjunto básico de formas.

En resumen, las 10 reglas principales de la iconografía son:

• Que sea simbólico y significativo.
• Lo has escuchado: mantenlo simple. El estilo no debe comprometer la legibilidad.
• Sea intencional y reflexivo. Piensa antes de crear.
• Asegúrate de que funcione en diferentes tamaños.
• Tenga en cuenta la uniformidad.
• ¡Solo vectores, por favor!
• Solo use colores cuando sea necesario, y hágalo con cuidado.
• Ayuda a conocer la geometría básica.
• Piense en "asequibilidad" para asegurarse de que el ícono diseñado ayude al diseño general.
• La iconografía es un lenguaje que debería ser universal.
• Bonificación: el alfabeto es solo un conjunto de 26 íconos.

Siga el juego y vea lo que se le ocurre en menos de 10 segundos.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas