Diseño Web

La explosión de contenidos para el marketing [infografía]

Sebastián Thüer · 17.02.2012 ·

Ni sorteos, promociones, descuentos o anuncios. La gran vedette del marketing digital actual es el contenido. El content marketing es uno de los segmentos que más está creciendo a partir de estrategias que se basan en llegar al público con información especializada. Esto incluye acciones como escribir artículos en medios, crear comunidades en redes sociales, desarrollar blogs de nicho, enviar newsletters, realizar estudios de casos o crear eventos presenciales en torno de un tema.

Hoy estamos saturados de mensajes de todo tipo. Sin embargo, todavía guardamos algo de tiempo para consumir noticias sobre nuestro sector. Esta infografía ilustra bastante bien el valor que está tomando el contenido como el eje de acciones de marketing.

Vía: Unbounce

ZeroBundle, completo paquete de recursos gratis para el diseño web

Sebastián Thüer · 14.02.2012 ·

Iconos, texturas, elementos de interfaz, menús de navegación, botones, tablas, pinceles y más en Zero Bundle. Este paquete tiene varios elementos interesantes para los diseñadores web que seguramente te ayudarán la labor diaria.

Generalmente estos paquete gratuitos no suelen ofrecer recrusos de calidad. Sin embargo, esta es la exepción. Va la pena dejar el mail para descargar varios megas de recursos que podemos necesitar en algún momento. El sitio es de los creadores de Mighty Deals.

Atención: El paquete es gratis por las próximas 36 horas… ¡apurate!

Comprendiendo la semántica del HTML5 a través de un diagrama de flujo

Sebastián Thüer · 13.02.2012 ·

Una de las principales características de HTML5 son sus posibilidades semánticas. Si antes usábamos DIV para dividir las diferentes unidades de información sin importarnos muchos sobre el tipo de contenido que había dentro, HTML5 nos ofrece un abanicio bastante más amplio: NAV, ARTICLE, ASIDE, SECTION, FIGURE y más.

La semántica es importantes porque ayuda a definir la naturaleza del contenido que se está mostrando. Si bien visualmente no hay grandes diferencias -podemos usar DIVs y modelarlo con CSS- desde el punto de vista lógico es mucho mejor que un intérprete como el el navegador pueda detrminar si lo que estamos mostrando es un menú para acceder a diferentes secciones, el artículo principal de una nota, una información complementaria o la sección de una monografía. En el futuro, seguramente los diferentes dispositivos harán uso intensivo de la semántica.

El problema para los diseñadores web es que a veces no está demasiado claro qué etiqueta utilizar en función del contenido que irá dentro. ¿Si es una noticia tengo que utilizar ARTICLE? ¿Si es la segunda parte de una nota en serie tengo que utilizar SECTION? ¿FIGURE se utiliza para tablas, ilustraciones, fotos o para todo?

Para ayudar a comprender mejor el funcionamiento de cada etiqueta el sitio HTML5 Doctor ha elaborado un diagrama de flujo bastante clarificador. Para quienes no sepa cómo funciona esto es bastante simple: Se comienza en Start y hay que ir respondiendo las preguntas para deterinar qué etiqueta conviene utilizar. Ojo, si el contenido no tiene ningun valor semántico seguimos utilizando el viejo y conocido DIV.

Color Thief, obtener paletas de color a partir de una imagen

Sebastián Thüer · 06.02.2012 ·

La elección y construcción de una paleta de color para el diseño web probablemente sea una de las tareas más delicadas e importantes para determinar el look & fell de una aplicación. Definir el color dominante, sus variaciones tonales y uso de complementarios es una tarea que suele llevar bastante tiempo y donde tenemos el auxilio de varias herramientas como Adobe Kuler y aplicaciones como Website Color Schemer que a pesar del tiempo sigue siendo un de mis favoritas.

Pero la popularización de los móviles con cámara y los smart phones ha hecho que muchos diseñadores comencemos a tomar fotos solamente cuando vemos un paisaje, detalle o ambiente que nos resulte «inspirador». De estas imágenes casuales suelen derivar composiciones y, como no, paletas de colores que luego utilizamos en nuestras creaciones.

Por eso me ha sorprendido gratamente saber que existe una bibioteca de JavaScript que permite analizar los colores predominantes de una imagen como Color Thief. Esta aplicación, analizar las imágenes y puede obtener con bastante buen criterio una paleta de colores. Pensemos que con esto podemos crear una galería de fotos para buscar por colores. Podemos hacerlo para nuestra propia bibioteca de imágenes o incluso con imágenes de stock que hayamos adquirido.

Otra posibilidad de este librería: hacer que la tonalidad de una interfaz se adapte a una determinada imagen de forma automática. En definitiva, un excelente ejemplo de intersección entre diseño y programación.

Cómo se crea un Doodle

Sebastián Thüer · 02.02.2012 ·

Google decidió homenajear a Atahualpa Yupanqui con un doodle -una modificación alusiva del logotipo de Google- hace un par de días donde se podía ver una enorme guitarra que atravesaba las letras con el nombre del buscador, unas montañanas en el fondo, vaquitas y un sol: algunos de los elementos más iconónicos en la obra del folclorista argentino.

Lo interesante es que el blog de Google AdWords -realmente no sé qué tiene que ver este contenido aquí- ha entrevistado a Jennifer Hom, la diseñadora que lo creó donde habla sobre su trabajo en Google. Es sabido que Google tiene un extremo celo sobre el trabajo de sus empleados, así que no hay datos reveladores pero si algunas pistas y cuestiones bastantes curiosas.

Aquí van algunos de los puntos, a mi juicio, más interesantes de la entrevista:

Desde hace relataviamente poco tiempo existe un equipo exclusivo para diseñar los doodles.
No son más de 5 diseñadores los que crean los Doodles para todo el mundo.
Parce ser que todos los Doodles, de eventos internacionales y locales, se diseñan desde las oficinas de Google en Mountain View.
Los Doodles más complejos -como el de Gibson Les Paul’s o Freddie Mercury pueden llevar varios meses de trabajo en equipo.
Jennifer consiguió su trabajo en Google de una forma bastante clásica: cuando estaba terminando sus estudios de Bellas Artes mostró su portfolio y la llamaron a una entrevista.