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 muchísimo 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 máximo posible.

Ahora si, diseñemos un sitio. Esto es lo que vamos a necesitar: lápiz, 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 edición y empezar a jugar con el, pero no es la mejor forma. Ya lo verán a medida que avancemos.

Vamos a diseñar un site para un ficticio problogger. Esta persona (llamémoslo Pepe) escribe sobre relojes. Gana un par de cientos de dólares al mes de su actual sitio, y quiere subir un poco este número. O incluso la tematica puede ser el seo o ganar el concurso de seovolución

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 atención para capturar más “visitantes por primera vez”, y también 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 permitirá 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 está 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.

lectores del blog

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

La flexibilidad es el secreto aquí. Queremos que Pepe pueda mover la publicidad de aquí para allá sin necesidad de agregar mucho código ni cosas con las que no está familiarizado. También queremos que pueda cambiar el modo en el que se ve el sitio, también fácilmente.

También 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, así los lectores podrán buscar por modelos y marcas específicas. También incluiremos un blogroll, para compartir con la comunidad. Finalmente, queremos mostrar los últimos comentarios, así 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 disposición)

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.

 

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. Estamos estableciendo la jerarquía de los elementos de la página; decidiendo que es mas importante, donde queremos que vaya la atencion de los usuarios.

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

1. movimiento
2. tamaño
3. imágenes
4. color
5. estilo de texto (elección de fuente)
6. posición

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 decisiones 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 más bloques de publicidad de los permitidos por Google, pero no los estaremos 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 imágenes, colores, etc que te dan la sensación que buscas brindar)

Esto es básicamente un documento en Photoshop donde pegamos muchas cosas. Estamos imágenes 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.

diseñar blog

Paso 6: Diseño Visual

Habiendo hecho todo lo anterior, el diseño visual es mucho más manejable que si hubiéramos 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 deberían estar bien metidos en su diseño. Yo los dejare para trabajar en el diseño de Pepe.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>