De blog personal a web profesional en Blogger: el blog de Almu Ruiz

Esta entrada podría haberse titulado nuevo rediseño del blog de Almu Ruiz pero hubiera sido muy poco preciso. El trabajo que aquí presento no ha consistido en aplicar nuevos gráficos a un blog, ya con una amplia trayectoria y una imagen definida.  Más bien ha supuesto una redifinición de su estructura  y mejora de su comunicación mediante recursos muy poco usuales en la plataforma Blogger, como la maquetación tipo landing page de sus páginas estáticas y un portfolio  integrado en el mismo blog.

Estudio previo

Como acto previo e imprecindible a un diseño es necesario hacer un análisis de las funciones y necesidades que éste requiere. La comunicación y debate con el cliente es importantísimo para hacer avanzar el proyecto y llegar a buen puerto. En este caso partí con ventaja porque sigo el blog de Almudena Ruiz casi desde sus inicios,  llegando a colaborar en un proyecto común: la Agenda para colorear 2016.

Almudena  lleva más de tres años gestionando un blog  de arte donde nos muestra su gran talento como retratista e ilustradora. En estos años  he visto el blog de Almu evolucionar en diseño y contenido.  

Hace más de un año se puso en manos de Miss Lavanda quien creó para su blog una imagen femenina y elegante.  Eligió un verde pálido como color dominante y una tipografía caligráfica  de resalte, al que añadió apoyos gráficos como ramitas de trazo manual. 

A principios de este curso Almudena  modificó ligeramente  su diseño de acuerdo a una nueva estrategia de comunicación.  Modificó el nombre de su blog, de Almu d’Arte a Almu Ruiz, añadió una cabecera ilustrada y eliminó el menú superior.  Mi trabajo ha consistido en seguir esta dirección iniciada por ella: de un blog personal a una web más profesional.

Analizando Google Analytics descubrimos que un porcentaje muy alto, casi la mitad de visitas, procedían de dispositivos móviles.  Situación que la plantilla simple de Blogger, a pesar de la  customización de Miss Lavanda, no estaba respondiendo bien. La versión móvil de esta plantilla delata su antigüedad: Blogger aplica una nueva estructura pensada para pantallas con muy baja resolución (como lo eran la de los móviles de hace unos años), y que no tienen nada que ver con el profuso diseño que hayamos aplicado en la versión ordenador. En tablets en cambio se muestra esta versión ajustada al ancho de pantalla, achicándose todo , letra incluida, siendo ilegible si la tipografía es demasiado pequeña.

Por otra parte el perfil profesional de Almudena cada vez está más definido como retratista e ilustradora.  Si las seguís en sus redes sociales cada semana nos sorprende con nuevas obras...pero en el blog, a parte de en sus posts, era muy difícil encontrar una visión general de sus obras y de aquello que puede ofrecernos, a pesar de recibir numerosos encargos.

Definimos pues dos objetivos principales: dotar de un nuevo diseño responsive al blog  y crear una estructura semejante a una web/portfolio de creativo. Para ello era necesario crear un nuevo menú donde se incluyera página de sobre mi, página de servicios (encargos) , portfolio, blog y contacto. Debíamos hacerlo más accesible, porque en el diseño anterior estaba situado en el sidebar bajo la foto de bienvenida.  Las páginas debían ofrecer un aspecto moderno y cuidado, donde la imagen fuera protagonista.

Selección de la plantilla, personalización e implementación

El proceso de diseño continuó con la elección de una plantilla premium  responsive que aportara el máximo de funcionalidades y permitiera su personalización. Escogimos la plantilla Minimal de Themexpose por su estructura limpia y el menú superior tan completo, ideal para navegar en móvil . Otro elemento que atrajo a Almu de esta plantilla fue el amplio slider de la home, cuya función es la de destacar algunas entradas . Así este script recoge la primera imagen  de aquellos post que nombremos  mediante una etiqueta a tal fin.

Al ser una personalización completa del blog las decisiones a nivel de diseño se experimentaron en  varias maquetas sin funcionalidades para que pudieran ser revisadas antes de pasar el diseño a código.  En el  diseño no busqué  una ruptura con la anterior imagen sino una modernización, manteniendo un entorno neutro que resaltara todo el potencial de sus obras.  Se eliminó del diseño anterior algunos de los elementos gráficos a favor de un aspecto más limpio,  minimalista y en definitiva más actual.

Una vez aprobado el diseño se implemetó la plantilla con una serie de mejoras que ni si quiera la opción de pago de la plantilla da:

• Traducción de elementos del blog al castellano
• Colocación del sidebar a la derecha Instalación del botón de compartir de Google + tras la entradas
• Instalación y diseño de una página de error personalizada
• Instalación del botón de pin-it al pasar el ratón por las imágenes
• Instalación de un formulario de suscripción a la Newsletter al final de cada post, y presonalización del formulario del sidebar.
• Instalación de un botón de subir flotante ( y no instalado en el pie de la página como trae por defecto la plantilla)
• Personalización del gadget de imágenes de posts populares para dar a las imágenes un ancho mayor
• Personalización del gadget de etiquetas para destacarlas.

Maquetación responsive de páginas estáticas y  portfolio

Las páginas estáticas se maquetaron de manera estratégica y se picaron en código completamente responsive.  De estas cabe destacar la página de encargos y el portfolio.

En la página de encargos experimenté con una maquetación basada en un diseño responsive propio de una landing page, demostrando que algo así es posible en Blogger. En éstas páginas la información se estructura en el ancho completo del blog, leyéndose mediante scroll. La sidebar se elimina para centrar la atención en el mensaje. El texto se va desplegando  haciendo uso de recursos visuales que lo puntualizan, clarifican y hacen más atractivo.  El hecho de ir construyendo las diferentes bloques del discurso sobre fondos de color adaptables a cualquier ancho de dispositivo  permiten romper la estructura tan propia de Blogger( y de las webs antiguas) de un cuerpo central cerrado sobre un fondo único.

Visitar la página de encargos de Almu Ruiz

El portfolio necesitó numerosos scripts para ponerlo en marcha, además de un extenso trabajo de encuadre de las imágenes. Las obras de Almu se muestran aprovechando todo el ancho de la pantalla, adaptándose a cualquier dispositivo. De esta manera  se tiene en seguida una visión general de su trabajo.  El menú superior permite filtrar las obras dentro de varias categorías: retratos, ilustraciones y estampados. Cada obra muestra su título al pasar el ratón y es posible ampliarla para verla con más detalle. Su funcionamiento es independiente a las entradas del blog, y se construye como una página estática sin necesidad de enlazarla  a ningún gestor de contenidos externo.

Visitar el portfolio de Almu Ruiz

Este es uno de los proyectos más ambiciosos en Blogger que he llevado a cabo hasta ahora. Su presentación me pilló en pleno final de curso  y no me fue posible mostrártelo antes. Ahora con las vacaciones por delante me siento capaz de comprometerme con nuevos diseños en la plataforma Blogger. 

En septiembre recibiré mi titulación oficial en Gráfica Interactiva (diseño web), y aunque en ella nos centramos en la plataforma Wordpress.org, siento predilección por Blogger. Supongo que es porque tengo un carácter quijotesco y me rindo ante las almas desvalidas. Y es que ésta plataforma parece el patito feo en comparación con Wordpress, considerada por muchos (sobretodo por los que tienen intereses generados en ella) como una plataforma cutre y amateur. Me extendería mucho rebatiendo los argumentos que suelen dar y no es propósito de esta entrada. Sólo espero que hayas recibido otra visión de Blogger, como una plataforma capaz de generar un blog dentro de las tendencias web actuales.

Anímate a mostrar tu opinión en los comentarios aquí abajo. ¡Me encantará intercambiar opiniones!