Hoy en día en el universo de Internet, tener un blog no es novedad para nadie. Si bien hay muchos sitios o proveedores que brindan el servicio de blogs gratuitos, lo más interesante de la experiencia de tener uno, no es sólo poder compartir notas y artículos que me parecen interesantes, sino también hablar con su diseño. Para mi la experiencia de tener un blog es completa cuando más personal es el diseño de la interface de dicho sitio.

Claro está que todo este planeamiento es posible, siempre y cuando contemos con algunos conocimientos para llevar a cabo el diseño de la interfase:

1. Limitaciones Técnicas: es fundamental tener conocimiento en manejo de software para diseño web, tratamiento de imagen y armado de sitios. De esto surge la primer limitación, acaso la más fácil de resolver, que es la parte técnica y de aprendizaje de manejo de herramientas. Yo utilizo para armar un blog: Fireworks, Dreamweaver y algún programa de ftp.
2. Limitaciones Teórico/Conceptuales: a toda la cosmética y funcionalidad, es necesario sostenerla con una buena idea, que a su vez debe ser traducida a una buena idea gráfica. Este tipo de planteo es más teórico y supone conocimientos de diseño gráfico, interfases en la web y navegación

Cabe aclarar que este artículo presupone que el punto 1 está resuelto. Lo que propongo aquí es contarles como abordo el proceso de diseño de un blog, no en cuanto al detalle técnico, sino al proceso y la evolución de la idea, en torno a la plataforma Wordpress.

 1. Elegir la plataforma de publicación.

Elijo Wordpress porque es la mejor plataforma que conozco para llevar adelante un blog con muy poco esfuerzo, y es altamente personalizable. Es gratuito, y la instalación no nos llevará más de 5 minutos, y con conocimientos mínimos.

2. Entender y visualizar la estructura.

Hablando sintéticamente, la estructura de un típico blog de Wordpress está organizada en pocas y autodescriptivas partes:

• HEADER (Encabezado): que se repite en todas las páginas.
• CONTENT (Contenido): generalmente donde se ubicarán los posts. Es la sucesión de los mismos.
• SIDEBAR (Barra lateral): es la barra de navegación que se presenta en la homepage sobre el lado derecho, y que podemos configurar de manera que aparezca en todas las páginas.
• FOOTER (pie): una especie de colofón donde ubicaremos copyright y demás.

Entendiendo a grandes rasgos como se estructura un blog, se puede empezar el plenamiento del diseño con este simpole esquema, teniendo en cuenta que los contenidos (texto, imágenes, videos, etc) estarán "contenidos" en estos bloques. Si propongo un fondo que continúa en varias partes, hay que prestar particular atención a los empalmes del mismo, los colores, etc, para que la experiencia visual sea armónica.

3. Boceto, boceto, y más boceto…

Creo que en mi epitafio van a poner "Muerto bocetando…". Es fundamental para llegar a un buen diseño, plasmarlo antes en papel. Las primeras imágenes mentales aparecen siempre como deslumbrantes en nuestro cerebro, pero es un grave error ir de nuestra imaginación creadora directamente a la computadora. Seguramente el resultado será tosco y desalentador.

4. Dar vida al boceto en fireworks.

El paso siguiente es ubicar dentro del material creado en papel, el que más me guste y sienta que va con mi idea, y la imagen mental que tengo. Con el archivo original a un tamaño representativo de la realidad promedio de navegantes (digamos 1024 x 1024 píxeles), monto en una capa (layer) el boceto, y la bloqueo. Luego trabajo en capas adicionales, cada detalle, desde colores de fondo, texturas, tipografía y bullets.

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco" 

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados. 

5. Dejar que el diseño crezca hasta el prototipo final.

Lo más probable es que la imagen mental y el resultado en pantalla difieran. Es bueno poder amalgamar elementos o recursos que provengan de otros bocetos. Muchas veces fluyen conceptos gráficos a través de la serie de dibujos y bocetos que se hicieron.

6. Codificar las hojas de estilo (CSS).

Para cada sección de la estructura que describí en el punto 2, así como para el documento en general, podemos definir tipografía, colores, fondos, espaciados, etc. Ponerme a detallar tags y modificadores de CCS, escapa a la idea de este artículo. Lo importante es entender que cada zonificación del diseño, tanto a grandes rasgos, como en el más mínimo detalle, puede ser personalizado y diseñado mediante Cascade Style Sheets.

7. Grabar, subir, testear.

Mi método se fundamentea en diseñar las hojas de estilo, subirlas al servidor e ir refrescando continuamente la página, al menos en Explorer y Mozilla, para ver "en vivo" los resultados del diseño. Dado que Wordpress reagrupa los "bloques" de la estructura, en principio puede resultar difícil editar cada pedacito de código (el header, content, sidebar y footer son "pedazos" de codigo, que se ensamblan al momento de mostrar el blog). Una técnica que uso es hacer el preview en el browser, y el documento HTML a la carpeta local donde estoy trabajando con el blog. Se puede editar esa hoja de estilos y aplicarla al archivo descargado, para ver el "todo" de la página del blog de forma más organizada.

El proceso de diseño descripto es el que uso habitualmente a la hora de diseñar un blog, aunque en general, puede ser trasladado a unas cuantas piezas más. En este caso particular, las imágenes que ilustran el artículo corresponden al diseño del blog de sobreexpuestos , completamente dedicado a la fotografía.

Espero encuentren este artículo de utilidad, me gustaría escuchar comentarios sobre que les pareció.

Eduardo Cesario

Entry Information
Entry posted on Lunes, Julio 30th, 2007 at 12:40
Filed under Diseño Web y Usabilidad, Diseño Gráfico, Filosofía y Teorías
RSS for comments RSS 2.0
If you are leaving a comment here, you're greatly encourage to apply a gravatar, and within a few seconds, you'll have an icon next to the comment! Have fun!