Pioneros gráficos

11/02/2013 por lostium en Diseño

Pioneros Gráficos

La semana pasada recibimos uno de esos correos que te alegra el día y cuyo contenido nos ha enriquecido la vista y hemos disfrutado durante el resto de la semana. El remitente, era Emilio Gil (fundador de Tau Diseño) y el mensaje, acerca del blog Pioneros Gráficos, que acaba de cumplir un año recientemente y que nos gustaría compartir aquí porque realmente merece la pena conocerlo.

En este blog se publica cada dos semanas una colección de imágenes en torno a una temática relacionada con el diseño gráfico en España, desde el año 1939 hasta 1975. Hasta la fecha lleva publicadas una veintena de entradas, que recorren una época muy concreta y no suficientemente conocida (ni reconocida) del diseño gráfico patrio, desde el final de la Guerra Civil Española, hasta la muerte de Franco.

×
Kartolino de Joan Pedragosa
Aunque el blog se centra en la obra realizada entre 1939 y 1975, en ocasiones se contextualizan y muestran obras posteriores, como en el caso de los “Kartolinos“: relojes montados sobre cartón y diseñados por Joan Pedragosa en 1.997.

En el blog de Pioneros Gráficos se han publicado colecciones interesantísimas, como la dedicada a Las plaquetas de Ricard Giralt Miracle, que recoge las felicitaciones que el taller de artes gráficas Filograf envió durante casi 4 décadas (desde el año 1953) en Navidades y en verano, o el dedicado a las populares cajas de fósforos de Cruz Novillo o a la vanguardista revista CAU de Enric Satue en la que publicaban sus artículos gente como Vázquez Montalbán, con números especiales que se han convertido en objeto de deseo para muchos amantes del diseño.

Además de estas entradas, Emilio ha construido una línea de tiempo en la que se puede recorrer, año a año, algunos de los principales acontecimientos nacionales e internacionales en torno al diseño gráfico.

Timeline diseño gráfico

×Para todos aquellos interesados en el tema, Emilio Gil publicó en 2007 el libro Pioneros Gráficos (Indexbook) que recoge la obra de 15 de los más importantes grafistas españoles de la época acompañados de más de 1.000 imágenes que ilustran la obra de estos grandes maestros. Con ganas de incorporarlo a nuestra biblioteca.

Etiquetas:

Tecnologías que utilizamos: Bootstrap (Parte I)

04/02/2013 por lostium en Herramientas

Resulta complicado hablar de desarrollo front-end hoy en día, y no hablar de los sistemas de grid, (o rejilla en castellano, aunque suena muy raro). Básicamente consisten en sistemas con convenciones sobre número de columnas, ancho de las mismas, distribución vertical, tipografía etc. básandonos en los cuales, podremos diseñar de forma más clara, coherente y estructurada. Esto no quiere decir que resulte obligatorio su uso en todos los proyectos. Pero diríamos que casi.

Nosotros comenzamos nuestros desarrollos basados en grids con un espartano 960.gs. En aquel momento (hace 4 años como máximo), o eras de 960.gs o eras de Blueprint, no conocíamos muchas más alternativas. Bueno, también llegamos a probar 1140 CSS Grid, pero creo recordar que nunca se puso nada en producción.

Nuevas plataformas de desarrollo rápido

En la actualidad, existen frameworks mucho más completos que incorporan, además de sistemas de grid adaptables, muchas otras funcionalidades: elementos de UI, convenciones tipográficas, preprocesadores e incluso componentes Javascript como modales, alertas o entrada de datos con typeahead.

×La “biblia” sobre sistemas de grid en diseño gráfico, es “Grid Systems in Graphic Design“, escrita por Josef Müller-Brockmann, y cuya versión física sale por un pico. De modo que si lo encuentras de segunda mano, no lo dudes:
Grid systems in graphic design

Hace un año, cuando pensamos que deberíamos probar alguna de las nuevas herramientas de desarrollo rápido para front-end, existían ya un buen número de opciones con bastante buena pinta. Nosotros empezamos probando Bootstrap de Twitter en nuestros desarrollos, y aunque la versión 1.0 era algo limitada, con la versión 2.0 y la inclusión de un layout responsive de 12 columnas acabó convenciéndonos y lo hemos incorporado en prácticamente todos nuestros últimos proyectos. No existen más razones por las que preferimos Bootstrap respecto al resto. Simplemente, no llegamos a probar el resto porque rápidamente nos sentimos lo suficientemente cómodos con Bootstrap. Además, nos permitía hacer cosas que antes ni nos planteábamos.

En nuestro caso partimos siempre de maquetas en Photoshop, por lo que en la mayoría de las ocasiones prescindimos directamente de los interfaces y elementos preconstruidos, o simplemente nos apoyamos en ellos para personalizarlos según nuestras necesidades. Sin pretender convencer a nadie, lo que es innegable es que ahora contamos con interacciones mucho más robustas, y con una serie de fundamentos de partida que nos permiten ser mucho más ágiles a la hora de prototipar y pensar en la interacción con el usuario. Los tiempos de desarrollo son mucho más cortos y los resultados más sólidos y coherentes, por lo que es claro que, al menos a nosotros, nos funciona.

Alternativas a Bootstrap

Otras opciones distintas a Bootstrap, y que no descartamos probar en alguno de los próximos proyectos (a pesar de la pereza que da cuando ya limas todas las asperezas iniciales con este tipo de herramientas), sin orden de preferencia serían HTML5 Boilerplate, Foundation de Zurb y Skeleton. Cada uno tiene sus particularidades:

– De Foundation nos gusta: Los off-canvas layouts, elementos UI mucho más agnósticos y reconfigurables que los de Bootstrap y buena documentación. No nos encaja tanto el que use Sass (aunque se oyen cosas buenas de Compass, nosotros usamos LESS, y otra vez pereza) y que esté orientado a Rails (por aquí principalmente se le da al PHP).

– HTML5Boilerplate es bastante más “nerdy”. Esto es una ventaja, porque para cosas muy específicas, y que no necesiten de una UI muy compleja en el prototipado, se puede personalizar de manera manual sin la sobrecarga adicional que suponen Bootstrap o Foundation. Como inconvenientes, el no usar preprocesador y quizás la documentación y que aparentemente, tiene mayor curva de aprendizaje.

– Y Skeleton por último es quizás el más simple y limpio de todos, lo cual hace que se plantee más fácil pegarle un repaso en algún proyecto básico, porque tiene buena pinta. Sobre todo si, como es nuestro caso, todo el interfaz y el UI suele diseñarse a medida (bueno, está bien, alguna vez estamos más vaguetes o nos entra la prisa y dejamos algún formulario tal cual viene de serie, pero no suele ser lo habitual).

Haciendo un poco de investigación nos hemos encontrado con muchos más frameworks de desarrollo front que van más allá del sistema de grid. Lo más curioso de este listado es que todos los frameworks que aparecen, son ya responsive, lo cual son muy buenas noticias. Después de echar un vistazo, no tienen mala pinta Base, Less Framework y Kube de Imperavi.

×
Mientras nos poníamos un poco al día, hemos descubierto también este framework tan chulo, con una tipografía base y configuración inicial de aspecto quasi editorial y con una orientación clara a grandes pantallas (1200 px), que puede ser un buen punto de partida para proyectos muy concretos:

Amazium framework

Ventajas e inconvenientes

Las ventajas derivadas del uso de estas herramientas en conjunción con un buen preprocesador, resultan evidentes tan pronto como empiezas a utilizarlos: tiempos de prototipado y desarrollo mucho más cortos, maquetas funcionales más pulidas e interacciones más sólidas (aunque al final se acaben “tuneando”), mucha mayor coherencia en los estilos (esto en equipos grandes es fundamental)… Pero lo que destacaría por encima de todo: agilidad.

Como inconvenientes, la sobrecarga de recursos que puede suponer si no hacemos un uso razonable de todos los add-ons que se suelen incorporar a estos entornos, UIs muy reconocibles dependiendo del framework utilizado (aunque ya digo que esto no debería ser un condicionante) y la mayor o menor curva de aprendizaje, dependiendo de nuestra elección.

En la próxima entrega, que esto se nos ha ido de las manos, veremos ya un poco más a fondo Bootstrap + LESS como preprocesador y cómo los usamos nosotros para generar el front-end responsive de nuestras aplicaciones.

×
Si has probado Bootstrap antes y ahora usas algún otro framework, estaremos encantados de que nos comentes las ventajas. No somos nada talibanes de nuestras herramientas. Si algo es mejor, simplemente cambiamos.

Etiquetas: