Dirección de Arte para Entradas de Blog: Bloguear, con Estilo

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

¿Has leído en alguna ocasión la revista Time Magazine o Wired? ¿Lo has hecho? Entonces te resultará familiar el hecho de que cada artículo de estas revistas muestre una composición de página distinta, una edición y un diseño gráfico que se adapta al contenido de una forma muy atractiva. Es brillante, ¿no? No sólo envía el mensaje del artículo de manera clara, sino que también le proporciona al lector ayudas visuales para comprenderlo mejor.

Si te resulta familiar lo que estoy comentando, deberías saber que este estilo también está presente en el diseño web. Los blogazines (un término un tanto incómodo) trasladan el estilo de los artículos de las revistas impresas a los blogs tradicionales de la web. Esta forma de diseñar las entradas de un blog (también conocido por el popular, y con frecuencia mal empleado término, dirección de arte) proporciona a cada artículo una apariencia propia, a diferencia de los habituales diseños homogéneos y típicos presentes en muchos artículos de los blogs de hoy en día.

No sólo consigue que cada blog tenga un aspecto único (y en ocasiones incluso, despierte comentarios por parte de la comunidad durante un tiempo), también le proporciona al escritor del artículo la posibilidad de diseñar y jugar con el contenido, e incluso practicar y mejorar sus habilidades para contextualizarlo a través del diseño (el producto final).

Las entradas de blogs con estilo similar a las revistas impresas como el de Jason Santa María han estado rondando por la web desde hace ya algún tiempo. Aunque existen relativamente pocas comparables a sus creaciones, nunca es tarde para empezar.

Dirección de Arte, con Estilo

Ahora que estás preparado para empezar a diseñar de forma individual y de forma singular cada una de las entradas de tu blog, deberías saber que el objetivo principal de un blogzine no es sólo 'personalizar y cambiar los colores' de una entrada, sino aportar significados a través del diseño o el arte.

"Las revistas no se maquetan sólo para decorar historias de forma individual. Su objetivo es combinar la imaginería visual y el lenguaje para realzar el significado de la historia." — Dan Mall, Director de Arte y Diseño en A List Apart.

Como muchos usamos el término inadecuadamente (yo incluído, lamentablemente) el concepto de dirección de arte, se diluye y por desgracia, se malinterpreta. La dirección de arte, es simplemente una práctica consistente en reforzar el significado de algo. En este contexto, la dirección de arte es sinónimo de diseño (tal y como apunta Dan Mall) ni tampoco es válido para referirse a la personalización del aspecto de un blog, su función es potenciar el mensaje que este intenta transmitir, a través del diseño.

La entrada de blog 'Where to Start', cuya dirección de arte ha estado a cargo de Trent Walton, no sólo muestra un bello diseño, también ofrece un significado bien reflexionado y vehiculado a través de su diseño. De hecho, todos los artículos de Trent denotan una atención individual y cuidado en los detalles.

Cuando estés diseñando el aspecto de las entradas de tu blog, es siempre de suma importancia que aquello que hagas tenga realmente un sentido. Un diseño personalizado debería ayudarnos a comprender el contenido, al vincular la lógica (su dirección de arte) con el instinto (su diseño). Y debería además ser satisfactorio desde el punto de vista emocional.

"El diseño de la experiencia de lectura debería permitir que las palabras pinten imágenes en mi mente, no que interrumpan el hilo de mi pensamiento." @jontangerine #aeaatl

— Jeffrey Zeldman (@zeldman) 18 de febrero de 2013

Asimismo, en relación a la calidad, la personalización de cada entrada de un blog es un trabajo duro y de gran envergadura. A menos que cuentes con un equipo de directores de arte y diseñadores visuales para trabajar y mantener el blog, no deberías sentirte obligado a personalizar cada una de las entradas. La calidad es una prioridad, y está por encima de la cantidad.

¿Reconoces esto? Es Smashing Magazine.

Codificar, con Estilo

Aparte de mejorar la intuición que transmite tu diseño, el diseño blogazine también mejora la forma en la que trabajas con código, o con CSS en general. Porque en esencia, estas trabajando con y sobreescribiendo un diseño que construiste anteriormente (a menos que estés creando un nuevo tema desde cero, e implementando la dirección de arte en él) la forma en la que trabajas con código será mucho más eficiente.

Tal y como he aprendido al trabajar en mi propio blog, es útil usar selectores eficientes, optimizar el HTML y hacerlo funcionar en ciertos escenarios. Si alcanzas suficiente práctica, podrías incluso ser capaz de hacer que tu dirección de arte cambie responsivamente, y se adapte a casi cualquier tamaño de pantalla.

Esto podría, sin embargo, percibirse como un inconveniente. Para llevar a cabo trabajos de diseño a medida en entradas individuales, necesitas tener conocimientos de diseño de front-end y trabajar con código.

También tendrás que asegurarte de que lo estás haciendo bien. Asegúrate de que los usuarios que visitan asiduamente tu blog, sepan quién eres y que la fortaleza de tu presencia online no se debilite como resultado de los cambios realizados.

Dicho esto, eres un diseñador, así que flexionar tus músculos de diseñador en la arena pública, si lo haces bien, siempre te reportará dividendos.

Hacer que Funcione, con Estilo

Aunque muchos de los que estáis leyendo esto ya sabéis cómo empezar a trabajar directamente en la dirección de arte de la entrada de un blogazine, puede que algunos todavía os estéis preguntando cómo empezar con todo esto. Existen varias formas de implementarlo en tu actual blog, y los ejemplos que enumero a continuación deberían servir en cualquier situación.

Trabajar Con WordPress

El sistema de gestión de contenidos más popular de todos, WordPress, es compatible con algunos plugins que facilitan la personalización directa de entradas de blog. Un plugin llamado 'Art Direction' (ver imagen inferior) permite aplicar estilos de forma independiente a cada entrada, y facilita la tarea de sobreescribir los elementos HTML dentro de un artículo. De hecho, es el plugin que Trent Walton usa para su weblog personal.

Trabajar Con Tumblr (o cualquier plataforma que no acepte la utilización de plugins)

Yo uso Tumblr para mi weblog personal. A pesar de su diseño maravilloso y su facilidad de uso, no puedes instalar plugins avanzados en la plataforma.

Dicho esto, el servicio ofrece la opción de personalizar el HTML y el CSS mediante temas personalizados para el blog. Si estás familiarizado con HTML, construir tu propio tema usando la sintaxis para creación de temas de Tumblr debería resultarte relativamente fácil. Para implementar la dirección de arte, todo lo que necesitas es un bloque de javascript para insertar el CSS dinámicamente dentro de la página de artículo de la entrada.

<!-- the separate body tag wrapped in Tumblr Syntax... -->
<!-- ...makes sure the code works *only* on the post permalink page -->
{block:permalinkpage}<body onload="art();">{/block:permalinkpage}

<!-- and the original body tag here -->
{block:indexpage}<body>{/block:indexpage}

<!-- finally, when writing posts, insert this code snippet in the Tumblr post editor for each post -->
<script type="text/javascript">
function art() {
var css = ' #your-css-here { color: #000; }';
if ('\v' == 'v') {
    document.createStyleSheet().cssText = css;
}
else {
    var style = document.createElement('STYLE');
    style.type = 'text/css';
    style.innerHTML = css;
    document.getElementsByTagName('HEAD')[0].appendChild(style);
}
}
</script>

Si estás usando cualquier otro servicio que funcione con temas personalizados, el código de arriba debería funcionar igualmente tras algunas modificaciones.

Crea Tu Propia Plataforma

Por supuesto, la publicación de un blog no está limitada a los Sistemas de Gestión de Contenidos más conocidos, existen bastantes otros por ahí que funcionan tan bien como los que acabamos de mencionar. De hecho, algunos podrían incluso permitir tanto la dirección de arte como su implementación. Anchor CMS, (diseñado por Visual Idiot) es uno de ellos, se trata de una plataforma centrada totalmente en la implementación de la dirección de arte. Y además está increíblemente bien diseñada.

Conclusión, con Estilo

Ahora que ya estás preparado, diseñar y ocuparte de la dirección de arte de las entradas de tu blog debería ser una excelente forma de pulir tus habilidades de diseño con código, mientras al mismo tiempo mejoras la capacidad comunicativa de tu diseño.

Por tanto, empieza y ponte a bloguear, con estilo.