Lo más importante a la hora de diseñar íconos es que todos se vean con el mismo estilo visual, que no parezca que son de packs diferentes, para crear tu pack toma los siguientes tips:
Busca un estilo visual que combine con tu marca y que sea atractivo a la vista
Que todos tus íconos estén en el mismo contexto, elige si van a ser multicolor o de un solo color, de línea delgada o gruesa, con o sin línea, con o sin relleno.
Cásate con los estilos, utiliza los mismo tamaños de borde y reglas para todos tus elementos.
Haz un marco, de preferencia cuadrado, el cual te servirá de límite para tus íconos, así tendrán coherencia de tamaños.
Define un terminado de línea, en general se ve muy bien el terminado rounded, pero no es el único.
Usa una herramienta que maneje vectores, Ilustrator es muy buena.
:) Muchos iconos están diseñados utilizando un sistema de cuadrícula llamada "Fibonacci". La idea de usar este grid puede hacer que tus íconos se vea mejor ya que las dimensiones parecerá más naturales y agradables para el ojo. Si quieres probar el diseño de íconos, te dejo la plantilla.
También muchos de ellos salen del cuadrado áureo y está relacionado a la serie de fibonacci y golden ratio.
La relación naturaleza y fibonacci la vemos aplicada en toda la naturaleza y con fibonacci la podemos aplicar en lo virtual
Si desean profundizar en el diseño atómico pueden tomar el Curso de Diseño de Prototipos, ahí lo explican muy bien al detalle.
Gracias por todo Rulótico, eres una inspiración, gracias por darnos esos tips, y buenas prácticas para mejorar como diseñador, espero que puedas seguir haciendo más cursos en Platzi, nos vemos en el futuro.
Muchas gracias por tanto, perdón por tan poco.
Yo no dejo de ver ya la boquita abierta :o
Gran detalle el de recortar y formar figuras! Shift + E + ALT (arrastras para generar el recuadro de corte)
Justo acababa de preguntar. ¡Muchas gracias!
Gracias honorable hombre
Cuando en vez de lunas empiezas a ver caras 😱😂
A mi también me paso lo mismo :( jajajaj
Omg, esta clase es como chino para mí, jaja. Cuanta habilidad tiene Rulótico. Eso se aprende con el tiempo, así que ¡A practicar!
También pueden bajar iconos flat de https://www.flaticon.com/ es muy útil para hacer prototipos y maquetas rápidas ^^
Tambien en flaticon ahorran bastante codigo de maquetación!
Cuando trabajamos con figma hay un pluggin** feather icons**, es muy util para buscar iconos que necesitemos
Cuando comenzamos a crear los iconos de nuestra aplicación, deberemos seguir varios consejos:
El principal es que no perdamos la línea grafica de los iconos, siempre debemos tener claro desde un principio cual será esta
Debemos crear un espacio específico para la creación de cada icono, así estos mantendrán una coherencia tanto en la línea grafica como en el tamaño
30. Diseñando íconos flat
Tener todos los íconos con un estilo establecido
Elegir si los íconos son de líneas, relleno b&n, color o flat
Basarse en un cuadro para diseñar
Los íconos deben tener el mismo peso y misma lógica
Los íconos deben tener coherencia
¿Alguien sabe dónde podemos ampliar el tema de diseño de íconos?
Puedes tomar el curso de Ilustrator
@AKAchuk vale gracias por la recomendación. Voy a buscar este tema específico ;)
En caso de trabajar en MacOS se puede usar de manera totalmente gratuita Vectornator, es un programa sencillo y con el que se pueden conseguir los mismos resultados que con la app de Adobe. Otra opción aunque esta si es de pago es Affinity Designer, tienes un pago de alrededor de 50€ pero es para toda la vida.
Gracias por el dato
ILLUSTRATOR O PROGRAMA DE VECTOR.
Importante de los íconos es que guarden su contexto, las líneas del mismo grosor, por ejemplo genera un estílo muy definido.
El orden y coherencia diseñando en vector es la clave para que mis imágenes vectoriales tengan armonía, el vector es muy agradecido para cambiar o re organizar a conveniencia o necesidad de nuestro producto, asi que nos queda fácil probar mucho antes de definir como es que queremos nuestros diseños visuales.
Los diseños en vector suelen ser limpios y definidos, esto ayuda mucho al diseño de apps.
Excelentes tips para crear iconos!
Hola
Hola
Hola
Affinity designer permite trabajar con vectores al igual que Illustrator, y es de un solo pago. No hay que estar pagando como en el caso de la suite de Adobe. =)
Gran clase!!
Esto es muy importante pues hace que se cree una logica en cuanto al diseño.