martes, 29 de mayo de 2018

💖 Favoritos de Dribbble Mayo 29

Design Feed / Mayo 29

Hola amikos!

Aquí estoy empezando una nueva sección para recolectar noticias y artículos de la web. Ahora si prometo ponerme al día con esto y viene muuuchos planes para este año! Saludos!


1.- 8 Tips Para motivarse como freelancer




2.- Contruyendo Sistemas de Diseño



3.- Cómo diseñar una saludable Home Office



4.- Relaciones de Diseño


5.- Caso de estudio: LunnScape. Identity for a Landscape Company



6.- Lo que está mal del A/B Testing



7.- Entrevista con Sebastien Gabriel de Google



8.- Marvel Platform API (marvelapp.com)



9.- Demasiado Feedback es Tóxico


10 .-  Formas de identificar Font sin un sitio web.



lunes, 28 de mayo de 2018

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!