miércoles, 29 de agosto de 2018

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.
https://fontawesome.com/changelog/latest
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.
https://www.mapbox.com/maki-icons/
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.
https://material.io/tools/icons/
4 Line awesome 
Un divertido experimento que convierte los íconos de font awesome en su versión OUTLINE. Genial para probar conceptos.
https://iconos8.es/line-awesome
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.

https://themify.me/themify-icons
6 Dashicons 
Los iconos del admin de wordpress listos para descarga! Normalmente nefocados en paneles de adimistracón de información y multimedia.

https://octicons.github.com/
7 Octicons 
 Un set de bonitos ícnos hechos con amor por GIT <3

https://octicons.github.com/
8 Genericons 
Genericos y de buen ver para tu website
http://genericons.com/
9 Stroke 7 
Basados en IOS7, listos para complementar cualquier proyecto

http://themes-pixeden.com/font-demos/7-stroke/
10 elegant 
 Una de las más completas librerías de Íconos y es gratis!


https://www.youtube.com/watch?v=aYh7jBBFNcA
Y bueno, eso es todo por hoy. Les dejo el link para que conozca mi pequeño proyecto de IconSet! y tambien es gratis!


https://www.behance.net/gallery/68176689/Layncons-Iconfont

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 

😎

martes, 7 de agosto de 2018

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!


viernes, 3 de agosto de 2018

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


martes, 26 de junio de 2018

Herramientas de color III

¡Hola!

Bueno hoy les traigo nuevas y no tan nuevas herramientas de color para que les den una checada. Me gusta mucho coleccionar cosas y creo que lo mismo con estos productos XD. Aquí les traigo lo último que he estado visitando y que me ha encantdo.

1.- Flat UI COLORS
Expandieron las paletas de colores y ahora encontramos una gama mucho  más extendida y atractiva!
Aquí le sdejo en qué las he estado utilizando


2.-Material UI colors



3.-ColorDot



4.-Eggradients

5.-Colourco

6.-Khroma
 
7.-Material Color Tool
Material design nos ofrece esta hermosa herramienta para crear la paleta de colores de la app.

8.- Colo Suply
Una de is favoritas! color suply, Te ofrece herramientas para visualizar diferentes paletas y aplicaciones de color.


Update!

Navegando por la red, me encontré con dos recursos muy interesantes. Aqui les dejo las ligas.


 UI gradients


Gradients Guru

Una herramienta que te permite crear blends y combinacines sobre imágenes. Me encanta!



 Gracias por llegar hasta esta parte de la lista!

Déjame conocer tus opiniones manifestándoete en los comments.

Hasta la próxima!





miércoles, 6 de junio de 2018

Design feed #2 / Junio 6

Hey cámaras aquí les traigo otro top 10 de cosas hot (De UX y Diseño !!) que me encontré por ahí! Me está gustando mucho este formato para compartir cosas y de antemano le agradezco a los que pasen a leer, y tomarse el tiempo en este blogsillo :) saludos!

1.- Humor en el microcopy!

2.- UX and user research surveys



3.- Prototipado Lo-Fi Vs Hi-Fi  



4.- Cómo organizarse como diseñador



5.- La importancia de las animaciones



6.- Ux se ha convertido en comodidad



7.- La historia de Susan Kare



8.- La importancia del personaje en el Chatbot!



9.- IOs 12 Preview



10.- Rediseño de Creatives of color