Notas sobre el rediseño de Buenos Aires Jazz 13

23noviembre
2013

Desde hace tiempo, Buenos Aires Jazz es el festival en el cual nos proponemos modernizar la plataforma que luego emplearemos como base para los festivales del año siguiente, especialmente el frontend.

Homepage del festival Buenos Aires Jazz 13

Este año nos encontramos con un problema: comenzamos las tareas de rediseño antes de tener la propuesta del cliente en mano, pensando en crear una plantilla genérica que se pudiera aplicar en la mayoría de los trabajos, pero cuando la gráfica y los elementos de diseño finales llegaron a nuestras manos, nos dimos cuenta que no sólo nuestro trabajo era inadecuado, sinó que además todos los intentos por conciliar ambos diseños no  hacían otra cosa que evidenciar el desarrollo en paralelo de ambas ideas.
Pero no todo fue en vano. Gracias a esto llegamos a la idea de separar ambos elementos como si de dos planos se tratasen, lo cual facilitó enormemente la aplicación final.

Una muestra de Font Awesome (izquierda) y Typicons (derecha)

Una muestra de Font Awesome (izquierda) y Typicons (derecha)

Adicionalmente, el año pasado -en este mismo festival- comenzamos a experimentar con iconos vectoriales en reemplazo a los tradicionales GIF/PNG. Específicamente comenzamos a emplear Font Awesome, e inmediatamente notamos una mejora en el aspecto de la página en dispositivos de alta resolución. La cantidad de variantes en los iconos, lo completo de su CSS -como la sobreposición de iconos o efectos de rotación- y la calidad de las herramientas ofrecidas, resultaron sumamente útiles. Lamentablemente, la premisa de diseño es su simplicidad y visibilidad en tamaños pequeños, esto significa que a escalas medianas o grandes los iconos se ven sumamente simplistas y poco vistosos. Por esta razón decidimos empezar a experimentar con otros sets, y luego de algunas pruebas nos decantamos por Typicons.

Typicons es una colección un poco más pequeña que FA, con un CSS bastante más básico -al cual tuvimos que hacerle modificaciones para conseguir una relación de escala tipografía-icono adecuada- pero con un diseño muy agradable y vistoso. Los vectores son de buena calidad, y si bien se extrañan algunas de las opciones de FA, constituye una buena base de diseño. Además del archivo de fuentes en varios formatos, se incluye el set de iconos en formato PNG y SVG, la que facilita su empleo en mockups y pruebas de concepto.

Darío Ruellan

Desarrollador front-end y web-developer desde hace más de 10 años. "Me encanta diseñar y programar, y la web me permite trabajar en ambos". Actualmente se desempeña como programador principal front-end en EcimTech.

More Posts - Twitter