La historia de la tipografía en un hermoso stop motion

 

La tipografía es todas las letras, palabras y textos que vemos todos los días en todos los medios que existen, desde TV, periódicos, celulares, smartphones, tablets hasta computadores.

Logos, posters, libros, cualquier elemento que tenga texto tiene una historia que se remonta a siglos atrás con los primeras fuentes que fueron creadas, la inclusión de símbolos y caracteres a nuestros lenguajes, historia que ha permitido tener en la actualidad cientas de fuentes de todos los tipos para utilizar libremente.

Antes era más complicado crear una fuente, ahora, gracias al PC es muchísimo más fácil, cualquiera puede crear su propia fuente de forma rápida y utilizar en cualquier dispositivo.

Instalar fuentes de Google Fonts para usar en el escritorio

Google Fonts
Google anunció hoy que ya podemos descargar sus fuentes para usar en el equipo de escritorio como más nos guste. Básicamente todo funciona gracias a SkyFonts, una especie de cliente intermediario que se instala en la computadora y se encarga de instalar y sincronizar fuentes en nuestros equipos.

Una vez que instalamos SkyFonts en el equipo y lo tenemos corriendo podemos comenzar a agregar fuentes de Google Fonts. El programita se encargará de descargarlas e instalarlas en nuestro equipo para que estén disponibles para cualquier aplicación, ya sea Word, Photoshop, o lo que sea.

instalar fuentes skyfonts

La ventaja de utilizar estas fuentes es que hasta el momento tienen una colección de 1109 fuentes, lo cual se convierte en un recurso muy importante para diseñadores. Son más de 1000 fuentes que podemos agregar a nuestra colección de tipografías.

Paleta de colores Flat para proyectos web

4-28-2013 6-49-02 PM

Flat UI Colors es una sencilla pero muy bonita colorida página donde están los 20 colores que utiliza el set para interfaces de usuario Flat UI, un set completo con todo tipo de elementos para interfaces de aplicaciones web como botones, menús, navegación, header, iconos, galerías de imágenes y vídeos, entre otros.

La página posee un diseño Responsive por lo que es posible ponerla en un tamaño pequeño como si fuera un Widget o una paleta de colores pequeña y consultarla cada vez que necesites un color, además de esto permite copiar los colores en dos formatos diferentes: Hexadecima y RGB.

Flat UI Colors

Los 3 mejores generadores de botones CSS3

CSS3 es un lenguaje que nos permite hacer cosas muy originales y elegantes sin tener que adicionar imágenes, hoy en día ya es posible aplicar todo tipo de efectos con solo usar un poco de CSS3.

Una de las bondades de CSS3 es que podemos crear botones con efectos muy originales, todo sin usar nada más que código. A continuación quiero dejarles una selección con los 3 mejores generadores de botones CSS3.

Estas 3 herramientas son muy fáciles de usar y nos ahorran casi al 100% el trabajo, solo hay que tener un poco de buen gusto, un ratito de tiempo para mezclar colores y efectos y listo.

bestcssbuttongenerator.com

bestcssbuttongenerator.com

Con un nombre un poco pretencioso (pero bien puesto), Best CSS Button Generator es una herramienta muy completa que nos permite crear botones CSS3 partiendo de algunas plantillas prearmadas a las cuales podemos ir editando a gusto con los colores y efectos que más nos usten.

Nos permite personalizar los tamaños de fuente, el border radius, el tamaño horizontal y vertical, agregar sombras, blur, posición del texto, y una gran cantidad de opciones que tenemos que dedicarles un ratito para obtener un resultado óptimo.

css3button.net

css3button.net

CSS3 Button Generator es otra de las herramientas que quiero recomendarles, también tiene un «showcase» donde podemos encontrar muchísimos ejemplos de otras personas y que podemos mixear a gusto cambiándoles los colores, fuentes y más.

Nos permite elegir los colores del degradado, agregar sombras interiores y exteriores, agregar sombras a los textos y muchas cosas más. Una vez que terminan con la edición del botón a la derecha pueden copiar el código listo para usar en sus proyectos.

css3buttongenerator.com

css3buttongenerator.com

La última herramienta también es muy recomendable por su simplicidad de uso, vamos paso por paso personalizando fuentes y texto, luego la parte del box, agregando sombras, cambiando colores, modificando bordes, cambiando colores de fondo y por último el hover.

Una vez que hemos terminado con la edición podemos descargar el código listo para usar desde la parte inferior de la página.

Conclusión

Las 3 herramientas son básicamente para lo mismo, por ahí la primera opción es un poco más completa y la que personalmente recomiendo si quieren lograr buenos resultados, pero será cuestión que se tomen un rato y prueben las 3 a ver cuál les gusta más.

ui Faces: El Lorem Ipsum para crear avatares

UiFaces

A veces cuando estamos creando un sitio web o aplicación necesitamos avatares de ejemplo para colocar en la interfaz lo que facilitaría la tarea de mostrarle al cliente o al jefe como se vería el diseño final que se está desarrollando.

UI Faces te permite crear una grilla de avatares con 3 opciones para personalizar, la primera es el tamaño del avatar en pixeles, luego el espacio entre los avatares y por último el radio del borde de los avatares, es decir, si quieres que sean cuadrados o redondeados.

Una vez tengas listo tu grilla de avatares puedes tomarle una captura de pantalla y empezar a utilizarla en tu diseño.

Un recurso muy útil que te ahorrará mucho tiempo en el diseño de esa nueva interfaz.

UI Faces

100 iconos de redes sociales estilo Flat

social-media-flat-icons

 

El estilo flat es un estilo de diseño relativamente nuevo que se caracteriza por ser muy minimalista, utilizar tamaños de texto grandes y fáciles de leer y el uso constante de iconos con diseños sobrios, simples y planos, así como la eliminación por completo de bordes con bisel, degradados y demás elementos eyecandy a los que veníamos acostumbrados desde el auge de la denominada Web 2.0.

Simple Icons es una colección de más de 100 iconos con el característica estilo flat disponibles para descargar completamente gratis para usarlos en tus proyectos web o de diseño, los iconos vienen en 11 tamaños diferentes en formato .PNG.

Además de ofrecer los iconos el sitio web también tiene una recopilación del color usado por las diferentes marcas y sitios web de Internet como Github, Bootstrap, Dropbox y PHP, entre otros.

Descarga: Simple Icons

CSS Matic: generar estilos CSS con degradados, esquinas redondeadas, texturas y sombras online

CSS Matic

CSS Matic es una genial herramienta destinada a diseñadores que nos permite generar estilos CSS con efectos muy avanzados, todo online y gratis.

Editor gradientes: Con esta herramienta podemos crear geniales degradados con CSS, ya sea partiendo de los diseños predefinidos o creando el nuestro. Podemos cambiar los colores, la orientación del degradado, la opacidad, etc.

Radio bordes: Con esta se pueden crear cajas con bordes redondeados, totalmente con CSS y de forma muy sencilla. Podemos elegir el radio del borde, los colores, etc.

Textura suciedad: Nos da la posibilidad de crear texturas con efecto de «suciedad». Permite personalizar el ruido y su densidad, como así también los colores.

Editor sombras: Con esta herramienta se pueden aplicar efectos de sombras muy cool. Podemos personalizar la altura y el ancho de la sombra, el radio, el color, y un par de cosas más.

En fin, es un set de herramientas muy útiles que deberían tener en sus marcadores.

Enlace: CSS Matic

Visto en CodigoGeek

Kit de vectores con elementos para crear infografías

Kit de vectores para infografias
Hoy en día las infografías están muy de moda, y si están interesados en realizarlas les quiero dejar un kit gratuito de vectores con elementos para infografías.

En el kit van a encontrar todo tipo de vectores, desde cintas, gráficos de torta, mapas, símbolos horarios y muchas cosas más que les pueden ser de muchísima utilidad su manejan Photoshop.

Enlace: Free Vector Infographic Kit

Visto en Kabytes

Niice, un buscador de inspiración

2-27-2013 8-31-38 PM

Eres diseñador, desarrollador o UX y tal vez hoy no te sientas con inspiración para continuar con tu trabajo o crear una nueva aplicación, diseño o interfaz Niice es perfecto para ti.

Niice se autodenomina un buscador de inspiración, nació de la necesidad de agregarle un «buen gusto» a las búsquedas de Google y así evitarse la navegación en blogs y sitios web que se dedican a hacer recopilaciones de los mejores diseños que existen en la red.

Actualmente el buscador utiliza a Dribble y Behance como la fuente de la imágenes, estas dos redes son las más grandes de diseño donde Diseñadores y expertos en UX y UI del todo el mundo suben sus trabajos, diseños, sketches y mockups de sus trabajos, algunas veces se pueden descargar los archivos fuente del diseño.

Niice