Diseño de Blogs para principiantes (parte I)

Hoy me gustaría mostrarles un post de Peter Flaschner, creador de The Blog Studio, que publico en ProBlogger, sobre el diseño de un blog. Muy interesante. Dejen sus comentarios.

Nos dice que el diseño puede agregarle muchisimo valor a nuestro blog. Cuando se trata de ganar dinero con un weblog, un diseño web adecuado puede causar un gran impacto.

Antes de meternos en esto, hay que desestimar un viejo mito: diseño no se trata de hacer que las cosas se vean bien. Se trata de hacer que las cosas funcionen al maximo posible.

Ahora si, diseñemos un sitio. Esto es lo que vamos a necesitar: lapiz, papel y un editor gráfico (como Photoshop, Illustrator, o Gimp)

Primero necesitaremos recolectar cierta información. Es verdad que el primer impulso nos lleva a querer ir directamente al programa de edicion y empezar a jugar con el, pero no es la mejor forma. Ya lo veran a medida que avancemos.

Vamos a diseñar un site para un ficticio problogger. Esta persona (llamemoslo Pepe) escribe sobre relojes. Gana un par de cientos de dolares al mes de su actual sitio, y quiere subir un poco este umero.

Paso 1: Identifique las metas del sitio (¿Qué está tratando de hacer? ¿Cómo lo va a conseguir?)

Estamos diseñando este sitio para el beneficio de Pepe. Vamos a hacer esto diseñando un entorno flexible para que Pepe pueda experimentar con el posicionamiento de publicidad, intentando atraer la atencion para capturar mas “visitantes por primera vez”, y tambien buscando que los usuarios actuales se vean llamados a seguir en el blog, incrementando las posibilidades de que hagan click en publicidad.

Mientras, vamos a usar un plugin que permitira a Pepe tener control sobre los colores de los diferentes elementos de su sitio. Asi, podra mantener sus cosas llamativas.

Paso 2: Identifica a tu audiencia (quiénes son, de dónde vienen)

La audiencia de Pepe esta dividida en dos grupos:los que leen el sitio por las noticias y reviews de los relojes; y personas que buscan comprar un reloj, que llegaron al site a través de búsquedas de modelos específicos.

Paso 3: Identifique necesidades específicas (¿Cómo tiene que ser el sitio para llegar a cumplir sus metas?)

La flexibilidad es el secreto aqui. Queremos que Pepe pueda mover la publicidad de aquí para alla sin necesidad de agregar mucho código ni cosas con las que no esta familiarizado. Tambien queremos que pueda cambiar el modo en el que se ve el sitio, tambien fácilmente.

Tambien queremos que el site desarrolle la capacidad de mantener usuarios por un buen tiempo. Esto lo haremos incluyendo una lista de “Posts Favoritos” y links relacionados al pie del post.

Mostraremos una lista de categorías, para permitir a los lectores explorar el sitio a su placer, y una barra de búsqueda, asi los lectores podran buscar por modelos y marcas específicas. Tambien incluiremos un blogroll, para compartir con la comunidad. Finalmente, queremos mostrar los ultimos comentarios, asi los visitantes regulares de Pepe pueden mantenerse al tanto de la conversación global.

Paso 4: A dibujar (bosquejos para experimentar con el posicionamiento de elementos y la disposicion)

Ahora a la parte divertida. Intenten no saltar a la parte visual todavía, ya que terminarán perdiéndose.
Lo que haremos es construir el terreno sobre el que pondremos los elementos. Saltearse este paso es sencillamente el mayor error que comenten los bloggers principiantes.

Aquí un ejemplo de el sitio de Pepe en sus primeras etapas de desarrollo:

Como podrán ver, no hay “diseño” en sí presente. En realidad lo que estamos haciendo es deduciendo cual va a ser el óptimo posicionamiento de los varios bloques que forman nuestro sitio. Estmos estableciendo la jerarquía de los elementos de la página; decidiendo que es mas importante, donde queremos que vaya la atencion de los usurios.

Esta es una importante area de estudio.En esencia, realizamos dos acciones cuando entramos en un sitio: buscar y escanear. La parte de buscar es nuestro ojo buscando atraido por lo siguiente (en orden descendente):

1. movimiento
2. tamaño
3. imagenes
4. color
5. estilo de texto (eleccion de fuente)
6. posicion

Una vez determinado donde podemos empezar a leer, determinamos QUE leer escaneando la página. Miramos un grupo de objetos, y la proximidad de los objetos individuales para decidir que post es mas importante de leer primero.

Sabiendo esto, podemos tomar deisiones en cuanto a la disposición y estilo de nuestras páginas para incrementar las oportunidades de generar las respuesta esperada (p.e. hacer click en una publicidad).

Quizá haya notado que tenemos mas bloques de publicidad de los permitidos por Google, pero no los estaresmo usando todos al mismo tiempo, los incluimos para que Pepe pueda mover los bloques a su gusto.

Paso 5: Hacer un “mood board” (un grupo de imagenes, colores, etc que te dan la sensacion que buscas brindar)

Esto es basicamente un documento en Photoshop donde pegamos muchas cosas. Estamos imagenes se convierten el punto de partida para crear una barra de color, explorar la textura y la forma, y generalmente actuar de inspiración.

Crear una de estas cosas no lleva mucho tiempo – adelante, hagan el intento, se sorprenderán de cuanto ayuda.

Aquí un ejemplo:

Paso 6: Diseño Visual

Habiendo hecho todo lo anterior, el diseño visual es mucho mas manejable que si hubieramos saltado directamente a este paso. Ahora nos podemos concentrar en el balance del sitio, su energía y su estilo.

Un gran error que cometen los principiantes es no dejar suficiente espacio para los elementos individuales. Esto es llamado “espacio en blanco”. Noten que no necesariamente tiene que ser blanco! Se refiere simplemente a un espacio vacío.

Por este punto, ya deberian estar bien metidos en su diseño. Yo los dejare para trabajar en el diseño de Pepe.

Este es el sitio de Pepe hasta ahora:

Esperen por la parte 2!