• Contáctanos
  • Tel: 983 00 81 22
¿Cómo diseñar los wireframes de un blog?
Noticias

¿Cómo diseñar los wireframes de un blog?

administrador, 3 junio, 2014

Al igual que ocurre con el lanzamiento de un sitio web, crear un blog también exige una buena planificación a la hora de distribuir sus elementos más relevantes. Y para ello, nada mejor que recurrir a los wireframes, una representación sencilla y esquemática de su estructura.

En el caso de los blogs, se acostumbra a plasmar dos tipos de páginas:

  1. la que corresponde a la página que incluye la lista de los posts publicados, y
  2. la que representa la página que despliega el contenido del post en su totalidad.

En el primer caso, en la página del listado de posts, éstos aparecen en orden cronológico inverso según su fecha de publicación: en otras palabras, los últimos son los primeros. Por lo general, se muestra el enunciado de cada noticia y un extracto con las primeras líneas para captar el interés del usuario. Normalmente, el conjunto se acompaña de una imagen, ilustración o vídeo. A su vez, la lista se ordena en diferentes páginas, con enlaces de acceso a cada una de ellas, de manera que no se convierta en excesivamente larga para no ralentizar la carga de la página.

En el lateral derecho de dicha página, solemos encontrar diferentes módulos de ayuda a la navegación, para que el usuario pueda llegar más rápido al post que le interesa. Los módulos utilizados con más frecuencia son los siguientes:

  • los que clasifican los posts por categorías o por meses. 
  • un formulario de suscripción al boletín de noticias o newsletter.
  • los que enlazan con las redes sociales.
  • algunos banners de publicidad, con las ya conocidas llamadas a la acción (o calls to action).

Sin embargo, estos módulos son siempre optativos, por lo que será el cliente quien decidirá cuáles desea utilizar. En la lista anterior, hemos mencionado únicamente los más habituales.

A su vez, en la segunda tipología, el wireframe representa el prototipo de página donde se despliega todo el artículo. Podría decirse que ésta es la página del post en sí mismo, donde se muestra el contenido íntegro de la noticia. Para acceder a ella, se puede hacer clic sobre una entrada específica desde la página del listado de posts. En muchas ocasiones, contiene material gráfico adicional relacionado con el tema y que contribuye a enriquecer el contenido: por ejemplo, imágenes, gráficos, ilustraciones, vídeos o grabaciones de audio.

06 img6 ¿Cómo diseñar los wireframes de un blog?

Ejemplo de wireframe de la página de listado de posts de un blog.

 

06 img5 ¿Cómo diseñar los wireframes de un blog?

Ejemplo de wireframe de la página de un post desarrollado dentro de un blog.

Por lo general, en esta página del post, se habilitan una serie de botones —al principio o al final de la noticia—, que enlazan con las principales redes sociales, y que dan la posibilidad de compartir el artículo en LinkedIn o Facebook, retuitearlo a través de Twitter o enviarlo por correo electrónico, entre otras opciones. En algunos blogs, además, se pueden realizar comentarios sobre los posts publicados, lo que permiten obtener un feedback muy valioso. Para ello, se habilita un sencillo formulario a través del cual se solicita el nombre de usuario y su dirección de correo electrónico, y se extiende un campo de texto donde el internauta puede escribir su comentario. En el wireframe de esta página, se mantienen también visibles los módulos laterales elegidos por el cliente, del mismo modo que ocurre con la página del listado de posts.

Básicamente, todos los blogs siguen esta estructura y presentan estos dos tipos de páginas que hemos descrito. Los wireframes sirven, por lo tanto, para consensuar con el cliente las funcionalidades y contenidos de estas páginas del blog, y acostumbran a dibujarse con trazos simples en blanco y negro; por enésima vez, menos vuelve a ser más.

Por Xavier Valdés

 



85cab6d4 ad0b 483f 8d1b 0d3eac467646 ¿Cómo diseñar los wireframes de un blog?

 ¿Cómo diseñar los wireframes de un blog?

Fuente: Blog de Inbound Marketing
Ir a la Fuente

Fuente: LANZA IDEAS
Ir a la Fuente>