Bajo el título de The Designer’s Toolkit, la gente de BestVendor ha realizado una infografía con los softwares que usan los diseñadores para realizar diferentes tareas. La información la extrajeron de una encuesta propia que realizaron entre casi 200 diseñadores y profesionales creativos de todo el mundo.

Como se puede ver en la primera parte de la infografía, los diseñadores suelen usar aplicaciones en la nube para casi todo, excepto para su propio trabajo como puede ser edición de imagen y video. Mientras en Documentos Google Docs lidera por lejos, tres cuartos (150) de los consultados usan Dropbox (en la nube) para Almacenamiento y Evernote para Toma de Notas.

En la segunda parte de la infografía podemos ver, entre otras cosas, aplicaciones desconocidas pero interesantes para diseñadores, como LookWork (un lector de feed especializado en posts visuales como Tumblr), o XScope (varias aplicaciones).

Un poco más de la mitad de los consultados son de Estados Unidos, mientras que se completa con un 28% de Europa y un 10% de América.

Ver infografía en tamaño completo

Infografía: Qué programas usan los diseñadores por Patricio para Codigo Geek
Permalink | 2 Comentarios | Add to del.icio.us
Post tags: infografia

Si hay un sitio web que tiene un diseño que me encante, es Vimeo. Los colores, las ilustraciones, los detalles, todo lo hace un lugar muy agradable para la vista y navegar. Sin embargo, se viene un lavado de cara para el sitio de los videos indies.

Tal como confirma su CEO Dan Mellecamp, Vimeo no tenía un cambio visual “desde el 2007, lo cual en tiempos de internet, es como toda una vida”. Entre los cambios principales que veremos, se encuentra la nueva ubicación de los videos: ahora ocupan un lugar principal en el centro de la pantalla y son el doble de anchos, dejando todos los demás elementos en un segundo lugar. Los videos relacionados aparecen en la parte superior. El siguiente video creado por el staff de Vimeo muestra las novedades que se vienen:

Open Your Eyes to the New Vimeo from Vimeo Staff on Vimeo.

Los cambios no son solo de diseño, como se puede ver, ya que también habrá nuevas features como la posibilidad de subir varios videos al mismo tiempo, y nuevas opciones de búsqueda y exploración de videos. También ya no hay más contactos ya que se rediseñó toda la estructura social, cambiándolo por algo más sencillo: followers.

Las novedades están disponibles para un grupo reducido de usuarios a partir de hoy y el grupo de tests se irá agrandando con el tiempo. Si querés ser parte de las pruebas, registrate acá.

Enlace: The new Vimeo

Vimeo cambia de diseño por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: Vimeo

El video de arriba es bastante explicativo de por sí (y sorprendente). La agencia McCann Worldgroup Thailand debió planificar una campaña online para WMF, una empresa que fabrica cuchillos de cocina.

Para esto aprovechó las nuevas tecnología e hizo uso de HTML5. Según ellos, crearon el primer banner HTML5 y el resultado es sorprendente. Permiten cortar el navegador y así experimentar lo filoso de estos cuchillos. El resultado visual es muy bueno, y al parecer no es la única consecuencia positiva: los clicks en él banner fueron un 500% de los standards para el mercado, y las ventas crecieron un 15%.

Fuente: Creativity Online vía Genes Conectados

McCann usa HTML5 para crear un banner “filoso” por Patricio para Codigo Geek
Permalink | 1 Comentario | Add to del.icio.us
Post tags: Banner, HTML5

Últimamente se ha estado hablando de Path, la app social para Android y iOS que ha estado empezando a tomar vuelo. Más allá de su funcionalidad, una de las cosas que se le destaca es su diseño bonito y funcional (la he probado y doy fe de ello).

Hoy traeremos un plugin para jQuery que permite copiar elegantemente la navegación que utiliza Path en muchas de sus pantallas. Como todos los plugins de este framework, su utilización es muy sencilla. Basta con bajar el archivo, e incluirlo junto a tu versión de jQuery. Luego, para implementarlo, los códigos son los siguientes:

HTML:

1
2
3
4
5
6
7
8

<ul>
  <li><a href="#">+</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

La lista UL encerrará la navegación, mientras que el primer ítem li será el que represente al centro del círculo que abrirá o cerrará la navegación. El código Javascript para inicializarlo es muy sencillo:

1
2
3
4
5

$('ul').circleMenu({
  item_diameter: 40,
  circle_radius: 100,
  direction: 'bottom-right'
});

El plugin trae muchas opciones que se pueden personalizar al momento de inicializarlo.

Si no conocés la navegación de Path, aquí hay ejemplos de este plugin para que veas su funcionamiento. Como se ve, hay siete formas de mostrarlo, lo que lo hace muy customizable, entre otras opciones.

Página de Circle Menu

Menú circular como el de Path con jQuery y Circle Menu por Patricio para Codigo Geek
Permalink | 2 Comentarios | Add to del.icio.us
Post tags: jQuery, Path

Initializr es una herramienta online que permite descargar templates perfectamente compatibles con HTML5, la tecnología que usarán los nuevos navegadores y que permitirá maquetados más robustos y standarizados.

Initializr nos dea elegir tres diferentes descargas, que se diferencian en la personalización que le podemos seleccionar. El featured template nos descargará un template listo para modificar y usar, que consta de una página con la estructura predefinida, más los archivos javascript y css necesarios. El simple custom nos dejará elegir opciones básicas, como qué archivos css queremos incluirle, y si queremos descargar un .htaccess ya configurado, entre otras cosas. Por último, el advanced custom nos deja muchísimas más opciones, como si queremos incluir el archivo robots.txt, configurarlo para trabajar con crossdomain de Adobe, el config file de Nginx, Analytics y más.

Cabe destacar que está basado en HTML5 Boilerplate, un sitio web que promueve una base para el uso de HTML5 mediante técnicas y consejos para sacarle el mayor provecho.

Initializr: Generador de templates de HTML5 instantáneo por Patricio para Codigo Geek
Permalink | 2 Comentarios | Add to del.icio.us
Post tags: HTML5

Como habrán leído esta semana Facebook habilito el Timeline para todo el mundo, si un no tienes el tuyo ingresa aqui, y al igual que con el cambio anterior de perfiles la creatividad no falto al momento de crearlos.

En Creadictos hacen un top de los 10 mejores timeline de Facebook y la verdad que uno esta mejor que el otro, si algún día se me ocurre una de estas ideas, o la mitad de lo buena que estan ya estaría feliz.

Mazcue tambien recolecto algunos timeline creativos.

Ejemplos creativos de los nuevos timeline de Facebook por Hernan para Codigo Geek
Permalink | 2 Comentarios | Add to del.icio.us
Post tags: Facebook, Facebook Timeline

Si lo tuyo es el diseño web, el iPhone puede convertirse en una pieza muy importante para el trabajo de tu día a día, y es que es un elemento lleno de posibilidades, que te puede ayudar mucho cuando no te encuentres en tu lugar de trabajo habitual. Así que toma buena nota de las siguientes aplicaciones, y cuando resulte un inconveniente llevarte tu portátil, seguirás estando bien equipado sin importar el lugar en el que te encuentres.

1. OmniFocus: No te dejes vencer por tu apretada agenda. Esta aplicación te permitirá almacenar, gestionar y procesar tus pensamientos y luego traducirlos a tareas.

2. iTimesheet: Lleva un registro del tiempo que inviertes en cada proyecto. Este seguimiento te ayudará a crear informes de actividad para tus clientes.

3. Ruler Plus: Muchos diseñadores se obsesionan con el tamaño. Tomar medidas ya nunca será un problema con Ruler Plus. ¡Y sorprendentemente, incluso es posible extender la regla!

4. What the Font: Una aplicación espectacular con la que podrás identificar el tipo de letra en carteles, anuncios, revistas, etc. con sólo tomar una foto desde tu iPhone. Perfecto cuando ves algo que te gusta y quieres usarlo en busca de inspiración.

5. Palettes: Crea paletas de color en cualquier lugar. Puedes coger los colores de fotografías y sitios web o añadirlos directamente tú mismo.

6. PhotoBucket: Aplicación de almacenamiento online para tus fotos, imágenes y diseños.

7. Layers: Es una aplicación que se puede utilizar para producir imágenes únicas utilizando algunas herramientas ya existentes, como las de retoque, pinceles, pintura, borrar y varias otras.

8. HTML Cheat Sheet: Esta aplicación sirve para optimizar el código de tus diseños. ¡Imprescindible!

9. PixelPipe: Es una aplicación con la cual podrás compartir todo tipo de fotos e imágenes en las distintas redes sociales.

10. Dexigner: Ponte al día con las últimas noticias de diseño, eventos y charlas de todo el mundo. Aplicación ideal para cuando necesitas un respiro o inspiración.

Las últimas Apps iPhone para diseñadores por Hernan para Codigo Geek
Permalink | 3 Comentarios | Add to del.icio.us
Post tags: Diseñadores, iPhone Apps

Todos los que de una u otra forma diseñamos webs, tenemos la tendencia de realizar nuestro diseño en vivo por así decirlo, creamos nuestra imagen directamente en un software especializado, pasamos a maquetar, y armamos nuestro sitio sin ni siquiera tener un diseño en papel. Para dar a entender lo que esto significa podemos imaginar a un arquitecto que inicia un edificio sin tener planos. Sé que muchos van a decir esto es básico la pregunta es en serio debe tomarse como algo básico, este artículo mostrara que es un wireframe y la manera correcta de hacerlos.

¿Qué son wireframes?  Son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, por ejemplo podemos crear la página principal y definir en donde ira nuestro menú sin necesidad de saber de una vez como va quedar, solo tenemos su ubicación y orden.

Entonces para colocarlo en nuestras palabras es la forma gráfica previa al diseño en la cual sabemos dónde van a estar puestos los elementos, la manera más práctica de plasmar lo que tenemos en nuestra cabeza cuando imaginamos un diseño web.

¿Qué elementos deben incluirse en nuestro wireframe?

• Elementos de navegación: menús, enlaces.
• Elementos de información: contenidos de texto e imágenes.
• Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar, slides, banners, widgets.
• Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
• Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.

Wireframe la manera correcta de diseñar por Hernan para Codigo Geek
Permalink | 4 Comentarios | Add to del.icio.us
Post tags: Tecnicas Diseño, Wireframe

Un pack muy interesante de 50 fuentes gratuitas “frescas” que podrás usar en tus trabajos. Hay algunas realmente muy lindas que ya guarde para mis proximos trabajos.

Link | Fanextra

50 nuevas fuentes gratuita por Hernan para Codigo Geek
Permalink | 1 Comentario | Add to del.icio.us
Post tags: Fonts, Fuentes, Fuentes gratis

Link | Hongkiat

40 increibles Templates PSD gratuitos por Hernan para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: PSD GRatis, Templates PSD