10 iconfonts gratuitas para usar en tus proyectos

Hola Amigos!
Hace algo de tiempo que no me paso a compartir algo con ustedes. Hoy quiero mostrarles una lista de 10 iconfonts para usar en sus proyectos

Un Iconfont, es precisamente eso, un archivo de tipografía, que contiene pictogramas. La principal ventaja es la capacidad de estilizar los íconos de la misma forma que lo hacemos con texto normal, obteniendo grandes ventajas de ello.

Hace algunos años, tuve la suerte de leer un muy buen libro de iconografía, "Rockstar Icon designer" de Rockeable press. Me llama mucho la atención que en aquel entonces este formato no estaba considerado dentro de la muy amplia gama de formatos.

Por aquel entonces se manejaban muchos estilos y diferentes formatos, supongo que la razón era que el flat design aún no era la super tendencia que conocemos hoy en día y y se encontraba mas frecuentemente esfuerzos Esqueumorfistas.

Como sea y ya hoy en pleno 2018, es muy común encontrar muchas librerías como font awesome que nos permiten el acceso a cientos de símbolos listos para importar en los proyectos. Un gran avance en cuanto a las dificultades que agregar imágenes a una aplicación/website/proyecto se refería.

Ventajas

👌 Cientos de iconos consistentes al alcance de tu mano.

👌 Fáciles de estilizar y animar 

👌 Fáciles de escalar, sin perder resolución.

👌 Técnicamente una solución a importar archivos de imagen que cuestan ancho de banda.

Desventajas

👎Principalmente el tamaño, muchos Iconfonts están diseñados especialmente para medidas especificas y a veces salirse de dicha medida afecta a la resolución.

👎 No pueden ser multicolor 

 

Pero bueno, sentadas estas bases veamos estas 10 iconfonts para usar en nuestros proyectos

1 Font awesome 

Probablemente una de la sicon fonts mas populares en el mercado, font awesome ofrece una version PRO y una versión limitada gratuita.

2 Maki icon 

Descubrí esta font mientras investigaba para el diseño de mi propio iconfont. Especial para mapas, mapbox ofrece una guia para crear tus íconos y un iconset especial para aplicaciones de mapas.

3 Material icons 

Con el auge de material design y los desing systems, google nos ofrece cientos de pictogramas listos para utilizar y con el respaldo de la marca y las ventajas que eso conlleva.

4 Line awesome 

Un divertido experimento que convierte los íconos de font awesome en su versión OUTLINE. Genial para probar conceptos.

5 Themify icons 

Una de las creadoras de temas más populares nos ofrece esta herramienta para desarrolladores y diseñadores, con más de 300 íconos inspirados en IOS7.

6 Dashicons 

Los iconos del admin de wordpress listos para descarga! Normalmente nefocados en paneles de adimistracón de información y multimedia.

7 Octicons 

 Un set de bonitos ícnos hechos con amor por GIT <3

8 Genericons 

Genericos y de buen ver para tu website

9 Stroke 7 

Basados en IOS7, listos para complementar cualquier proyecto

10 elegant 

 Una de las más completas librerías de Íconos y es gratis!

Y bueno, eso es todo por hoy. Les dejo el link para que conozca mi pequeño proyecto de IconSet! y tambien es gratis!

Si tienes dudas de como usar un icon fon en sketch, te dejo este árticulo que escribí hace poco. A llenar nuestras colecciones!

Felices trazos 

😎

Read More

Como utilizar layn en Sketch App

Hola!

Como sabrán algunos, he trabajado en esta colección de iconos  desde hace algún tiempo.

Ahora les enseño la forma en la que utlizar estos íconos y este excelente plugin  me han facilidato la vida.

Bueno empecemos.

Esto lo he probado en la sketch 50.2. así que alguna version superior debe funcionar. La verdad es que casi nunca estoy al pendiente del versionamiento de sketch, pero bueno, prosigamos.



1.-Descargar el plugin. Solo después de instalar el plugin  y de ver sus opciones, podremos agregar la tipografia.

2.- Descargar LAYN

3.- Instalar Layn!

4.- Nos vamos  a sketch y abrimos el plugin. Lo curioso e interesante de esta monería es que pudes tener todas las icon font que quieras y administrarlas. Para ello Vamos Instal a font [SVG] que es uno de los archivos que viene en el descargable.

5.- En este punto podemos agregar el codigo para insertar el font, como las clases en css por ejemplo, y agregar shortcuts.

6.-Una vez esto y con la type ya agregada, existen diferentes maneras de insertar la tipografía, pero a mi modo la más fácil es la de agregar utilizando el grid.

Y listo, ya los puedes usar :)
 
Prometo de verdad probar con las otras opciones que tiene el plugin para manejo de fuentes, hasta ahorita solo  me ha ido bien con los de font awesome y estoy tratando con los material.


Bueno, por ahora esos es todo, pero en los comentarios me puedes dejar tu opinion :)

Descarguen layn!

Saludos!

Read More

Layncons Font!

Hola!

Les comparto un proyecto que he desarrollado en los últimos meses y que al fin he podido aterrizar de alguna manera.

Se trata de una versión demo de la fuente de iconos (50).

Espero de verdad les sirva y  la integren en sus proyectos.

Cualquier duda deja un comnetario y checa mis otros proyectos en behance

Saludos!

Formato: EOT,TTF

DOWNLOAD FONTS

Read More

Cómo hago mi Iconset!

Hace ya mucho que no escribo nada por aquí, pero espero pronto ya estar de regreso. La verdad es que he estado muy ocupado, entre proyectos personales y de la oficina, que no me han dejado continuar con el blog como debería. Pero bueno, haciendo un poco de trabajo extra y esfuerzo aquí estoy compartiéndoles cosas nuevas.

Hace un par de años empecé con el diseño de iconografía, luego de leer un libro especializado en ello y que me amplió mucho el panorama sobre ello. La verdad es que no me considero un experto, ya que hay muchas cosas que se deben considerar al momento de planear un iconset: estilo, branding, originalidad, funcionalidad y por supuesto escalabilidad.

En aquel tiempo aún dependíamos mucho de imágenes y había una gran variedad de formatos a considerar. Afortunadamente hoy en día es más fácil implementar los diseños, pero muchas reglas para diseño continuan siendo importantes.

Hoy me voy a concentrar en el iconset que he desarrollado y el proceso que utilizo. Es un proyecto personal que me mantiene ocupado los fines de semana y que disfruto mucho de hacer. Bueno empecemos

EL proyecto se llama MYCONS y es un icon set de más de 140 elementos que incluyo en mis proyectos personales.

La idea para crear un set de iconos es muy sencilla. Buscas un tema que te llame la atención, o piensas en una situación en la que aplicarlos y las ideas llegan solas. A mi en lo personal me gusta más hacer grupos de íconos en lugar de elementos separados.

1. EL plan

Pensar en el iconset antes de empezar, como debe ser. 

En esto no puedo decir que me tome demasiado tiempo. El tipo y la usabilidad de los íconos la decidí hace mucho. Pensaba en algo que funcionara bien en tamaños pequeños pero que tambien sirva en impresos y otros medios. Lo que más me llama la atención no es crear el hilo negro con los íconos, sino buscar formas alternas de representación de ideas que funcionen en diferentes medios. Cuándo se planea un iconset es muy importante tener en mente la plataforma, el público y la funcionalidad de los iconos. La misma idea puede tener diferentes significados en diferentes países o depender del lenguaje y cultura. 

Algunos consejos:

Campos semánticos
Piensa en conceptos que estén relacionados y has una lista de ellos. Por ejemplo, frutas, vehículos, etc.

Contar historias:
También puedes llegar a diferentes conceptos  partiendo de una idea en general, por ejemplo, tu rutina diaria o el proceso que se lleva para hacer algo.

2.- Bocetos

Normalmente utilizo postits o cuadernos para plasmar las ideas en general, esto me da una vision de lo que quiero lograr sin ir a tanto detalle. Algunas ideas se ven bien en papel pero fallan al momento de dibujarse en el software o a escalas mínimas.

3.- Diseño 

Para Digitalizar los iconos utilizo sketch (PROS y CONTRAS aquí) porque se me hace mucho más sencillo que Illustrator para exportar cosas y trabajar rápido. No me agradan mucho algunos gaps que hay al momento de hacer merge en las formas pero ya puedo vivir con ello. 

Ahora bien, les platico algunos tips que me encantan y me han salvado la vida como icon designer.

Primero que nada, utilizo un grid de 32px o puntos, con ello puedo trabajar una medida bastante flexible y fácil de escalar a otros tamaños, Recuerden que la escala binaria de  8, 16, 24, 32, 48, 64... nos ayuda proponer tamaños razonables y que se pueden renderear bien para los dispositivos. 

El diseñar a 32, nos ayuda a escalar bien a tamaños menores, que normalmente es el problema. Para mi iconset, creo que no estoy considerando estos temas, ya que trabajo con cierto nivel de detalle y por consistencia y estilo no funcionan bien en tamaños pequeños.

He definido el living área de 28px aunque no lo tengo como regla formal, el tamaño final del icono es 32 px, y de esta manera mantenemos la integridad de los trazos y grosores.

4.-Exportar y Formatos

Debo decir que antes era bastante complicado el manejo de iconografía, se debía pensar en diferentes aspectos como la plataforma, el tamaño, el estilo, la calidad (render y pérdida de detalle) y por supuesto el tamaño de los archivos de imagen (PNG, JPG, SPRITES, SVG.. y tantos otros ) Recientemente y por las ventajas que ofrece, únicamente utilizo iconos en formato SVG (Scalable Vectors Graphic).

5.- Administrar

Hasta ahora tengo un iconset de 140 elementos, y diferentes familias. Todos estos los administro en esta maravillosa herramienta llamada núcleo.  

Me permite administrar los icon sets, categorías, nombres, etiquetas y exportar en varios formatos y lo mejor de todo convertirlos en Icon-font! Muy recomendable. En otro episodio explicaré más a detalle esto.

Por ahora estoy en dos plataformas the noun project y en icon finderAhí pueden ver todo lo que he diseñado hasta ahora!

Por ahora es todo y espero esto les sirva también!

No olviden dejar sus comentarios y dudas que aquí estoy para atenderlas.

Y también visita nuestros Nuevos Perfiles. 

Saludos!

Read More