Diseño de un weblog

En los comentarios de otro post, preguntaban cuáles serían los lineamientos básicos que un no-diseñador debía tener en cuenta al diseñar un weblog. Markelo preguntaba cuáles son esos elementos técnicos básicos de diseño que nadie que quiera armar una página debería ignorar.

Les voy a decir cuáles son las variables básicas que yo considero se aplican a un diseño de un weblog, pero los valores que en cada caso hay que poner, pienso que cada uno tiene que evaluarlos por sí mismo.

Texto
Las primeras cosas en las que hay que pensar es para qué se usa el weblog: para leer textos más o menos cortos.
Entonces tenemos que tener en cuenta la legibilidad, la tipografía para ser leída; no como título solamente, sino para ser pensado.
Entonces la letra es protagonista.
Lo primero es que se lea. Parece una pavada, pero resulta que no todos reparan en esto. Hay que observar el tamaño de la letra, que no sea muy chica, ni muy grande. El contraste con el fondo es esencial. Las situaciones indeseables son: poco contraste, colores que vibran (verde con rojo por ejemplo, o casi cualquier par de colores que tenga la misma luminosidad, como amarillo con gris claro), fondo complejo, fondo con movimiento. Cuanto más largo y/o complejo sea el texto, y por lo tanto, cuanta mayor atención exijamos del lector, más legibilidad tenemos que exigir a nuestro diseño.
Un caso típico que se repite mucho en los blogs, es el del texto blanco con fondo negro. Recuerdo que hace unos cuantos años yo tenía la teoría de que esa combinación en pantalla era la mejor porque la emisión de luz era mínima y por lo tanto el cansancio visual menor. Pero nada mejor que comprobarlo en la realidad. Y no, es una combinación terrible. Es agotador tratar de leer un texto en esas condiciones.
También hay que recordar que la web es un medio que depende del hardware del usuario. Y si el usuario tiene un monitor malo, por ejemplo puede que el bajo contraste no le permita diferenciar el texto del fondo.

Área
Como en cualquier sitio web, hay que tener en cuenta que actualmente la mayoría de las personas usan 800 x 600 px de resolución. Por lo tanto, y como la estructura de los blogs es esencialmente vertical, hay que tener en cuenta que el ancho no exceda los 760 px (al área de 800 x 600 px se le restan las barras de los navegadores y más o menos quedan 760 x 420 px).

Estructura
Hay una estructura básica en el blog que queremos que se vea. Nombre del blog, posts, menú. Es importante jerarquizar estos elementos para que se diferencien y cada uno tenga la importancia que debe tener.
¿Cómo jerarquizarlos? Bueno, hay varias maneras: por tamaño, color (de letra y de fondo), posición, tipografía (peso: bold/normal; variables: black/light; familia: georgia/verdana).

Sistema
El weblog, como cualquier sitio, es un sistema de páginas.
Tengo que poder acceder a este sistema a través de una navegación clara.
Los sistemas existentes, como el MT, ya tienen una navegación que suele ser bastante simple y comprensible, que es parte de la estructura del blog. Recomiendo que no la cambien.
Como todo sistema, hay un elemento principal (home) y otros subsidiarios de ése (comentarios, trackbacks, páginas individuales, por tema, etc.). Se puede marcar más o menos las diferencias, pero lo importante es que la página principal nos dé un panorama de qué es ese sitio y a dónde puedo ir.
Las páginas de comentarios o las individuales tienen que respetar y estar acorde con el estilo que elegimos en la principal. A través de la navegación debemos poder acceder a la principal. Otra cosa, debemos recordar que en Internet no hay garantías de que el lector llegue desde nuestra página principal, por lo que todas las páginas “interiores” deben contemplar este hecho y presentarse “prolijas” y entendibles ante estos casos.

Muchas veces la dificultad al diseñar está en dar identidad pero sin faltar a las características que describí antes.
Es siempre una tentación romper las reglas para ser diferente y así destacarse.
Creo que no es necesario hacerlo. Hay muchísimos caminos que no han sido recorridos. Es preferible copiar partes de un buen trabajo, y así aprender de las decisiones que otro tomó. Por ejemplo, se puede aprender del diseño editorial, porque las revistas tienen una estructura similar.

Sobre la identidad hay muchísimo más para decir, claro.
También hicieron otras preguntas sobre el color, las formas y los espacios pero los dejo para abordarlos en otro post.

Etiquetas:

7 comentarios

  • Markelo says:

    Hey! Gracias.

    Y si hay continuación, me gustaría leerla

  • Horacio says:

    Muy bueno, che. Yo soy uno de los que creía que el blanco sobre fondo negro era más fácil de leer 🙂
    De todas maneras, me pueden las páginas negras. No se que tienen, pero me llaman la atención más que las blancas.

  • first tango says:

    me gustaría un diseño absolutamente minimalista, pero, mi escaso dominio del html & stuff a duras penas me ha dejado hacerla algùn cambio al template por default que tomé de blogger

    me gusta la letra lucida console (me siento phillip marlow, escribiendo con esa letra)

  • pattyce says:

    EXCELENTE.
    siemrpe me pareció q el fondo amarillo descansaba mas la lectura, de por sí en la facu utilizaba lso blocks amarillos por lo mismo.
    un placer leerte.

  • HighToro says:

    ¡lindo artículo! 😉

  • Saverio says:

    Hola! muy buena tu página. Te quería, en la medida de lo posible, haer una pregunta… ¿Cómo hago para cambiar los colores y el tipo de letra que Blogger me dio por default?. Te pregunto porque no tengo idea de programación y si no es molestia, me enseñes.

    Un saludo

    Sav

  • Anónimo says:

    Hola! muy buena tu página. Te quería, en la medida de lo posible, haer una pregunta… ¿Cómo hago para cambiar los colores y el tipo de letra que Blogger me dio por default?. Te pregunto porque no tengo idea de programación y si no es molestia, me enseñes.

    Un saludo