Nuevo diseño responsive del blog Mon petit Crochet

Este post podría bien subtitularse: transformación estratégica, con muy poco presupuesto,  de un blog de artesanía. En el rediseño de este blog no ha primado el aspecto puramente visual, sino que se ha aplicado una serie de cambios que sin duda repercutirán en una mejora de su usabilidad y posicionamiento. Sigue leyendo y conoce el caso, porque si tienes un blog tal vez te interese aplicar algunos de las opciones tomadas.

Hace unas semanas Amaya Verdini se puso en contacto conmigo para darle un giro a su blog. Lo encontraba con una estética poco actual y quería darle un impulso renovado. Como muchas pequeñas artesanas muestra sus creaciones de crochet en su blog, que en sus inicios bautizó como El baúl de Amaya. Con el tiempo se ha convertido en escaparate de su trabajo y le ha permitido realizar ventas y encargos. Como parte de esta evolución Amaya se encontró que debía dar un nombre al blog más afin a sus creaciones, a modo de marca artesana, y es aquí cuando surgió Mon petit Crochet.

Amaya me comentó también su ideal de poder integrar una tienda en el blog. Ideal fallido al considerar que todas las posibilidades exigían de una inversión no sólo económica sino de una envergadura desproporcionada para llevarlo ella sola. Por eso acordamos algunas mejoras en el blog que afectarían no solo a su estética  sino sobretodo a su funcionalidad.

Estudio inicial 

 

Primero analizamos el antiguo diseño.  El blog de Amaya tenía instalada la plantilla simple de Blogger con un diseño a nivel visual no muy estridente pero falto de personalidad. El mayor trabajo a realizar estaba en mejorar su navegabilidad. Poseía un simple menú de barra  con solo dos categorías, uno de ellos apuntaba a  inicio y otro a un enlace exterior. En el sidebar mostraba el gadget de etiquetas como una nube interminable de términos. Y a éste se le sumaba no uno sino dos gadgets “blogroll”, es decir enlaces a otros blogs amigos.

A pesar de tener cuenta y ser activa en la mayoría de redes sociales no tenía enlaces visibles en su blog. Amaya pinea cuidadosamente en su tablero de Pinterest cada una de sus creaciones, pero no tenía instalado el cómodo botón de pin-it en las imágenes del blog. Y también desconocía que tiene un número considerable de seguidores en feedburner y bloglovin.

Cambios a aplicar

Para mejorar la comunicación con sus seguidores y potenciar nuevos pedidos estructuramos un nuevo menú con las páginas de rigor: sobre mi y contacto al que añadimos una especial de pedidos. En ésta mostraríamos las piezas que mejor acogida tenía a modo de catálogo.  Tanto a la página de contacto como a la de pedidos se instaló un formulario.  

Un blog sin seguidores no tiene sentido así que nos aseguramos de integrar enlaces a sus redes sociales como al lector de feeds de preferencia de muchas de sus seguidoras: bloglovin. Aparecen en el menú fijo superior como al pie de su imagen de bienvenida. Al gadget de suscripción por email (feedburner ) se le ha dado una posición destacable  en  el medio de la sidebar.

La sencillez en la que Amaya ha ido etiquetando sus posts desde sus origenes (2011) ha sido un gran acierto. Ha permitido configurar un menú secundario en el sidebar con las categorías más importantes de su blog. De las más de 30 etiquetas se ha seleccionado 14, bien visibles tras el gadget  de sus redes sociales. 

Selección e implementación de la plantilla

Como en mi anterior diseño del blog Pa Monísima: Yo partimos de la instalación de una plantilla responsive. Éstas permiten un diseño adaptable a diferentes dispositivos (tablets, móviles, notebooks, ordenadores con pantallas de diferente tamaño...)

Escogimos la plantilla Elegant de Themexposed, primero por su menú superior fijo con enlaces a redes sociales y buscador, que facilita enormemente la navegación incluso en móviles. El diseño es muy limpio y actual, haciendo honor a su nombre, Elegant. Nada tiene que envidiar a los themes de Wordpress para blogs de temática femenina.

Como elemento particular de esta plantilla hay que destacar su “gadget” de entradas relacionadas, que muestra 6 posts relacionados a modo de carrousel (y no tres como en la mayoría de plantillas semejantes a ésta).  También muestra una home con posts resumidos automáticamente, una ventaja si tenemos en cuenta que Amaya no hacía uso de “los saltos de página” que permite introducir los conocidos botones de “leer más”.

El único problema que esta plantilla nos generó estaba relacionada con el slider que muestra las fotos de cada post. El pase de fotos es automático y si éstas son de diferente altura genera saltos molestosos en la página. Por fortuna este slider se desactiva al insertar un salto de página antes de la segunda imagen. Y con ello también se ayuda a aligerar la carga de la página de inicio ya que no se muestran tantas imágenes.

El menú superior se configura mediante el gadget de menú propio de Blogger, de manera que permitirá a Amaya actualizarlo en cualquier momento.

La plantilla posee una versión gratuita que puedes descargar al momento y que es plenamente operativa. En la instalación incluí: su traducción (viene en inglés), integración de las redes sociales, configuración de gadgets, personalización de las metaetiquetas necesarias para posicionar el blog y compartir en redes.

La plantilla en si mejora muchos aspectos de la anterior, pero añadí una serie de funcionalidades  que consideré fundamentales en la estrategia del blog:

• situar el mensaje de cookies al pie del post y reducir su tamaño.
• añadir una página de error personalizada (la plantilla no la implementa).
• añadir  botón de compartir en  Google + tras el post.
• instalación del botón pin-it que sale al pasar el ratón por encima de las imágenes del post.
• instalación de un botón flotante y discreto de subir para arriba.
• personalización del gadget de imágenes de posts populares para dar a las imágenes un ancho mayor personalización del gadget suscripción por email para hacerlo más llamativo.
• personalización del gadget de etiquetas para destacarlas.
• personalización del gadget de bienvenida (fotografía “sobre mi”)

Identidad visual de la marca

El presupuesto impidió crear una elaborada imagen de marca. Hay una frase que resume la actual tendencia de diseño minimalista: menos es más. Partiendo de lo esencial conseguimos dotar al blog de un nuevo aire que define muy bien las creaciones de Amaya.

Tomamos el color dorado de la plantilla que gustó desde el primer momento a Amaya y seleccionamos una tipografía de carácter marcado y que comunicara bien la marca. Rouge Script de Google font  se reveló como una opción acertada. Se trata de una tipo caligráfica que connota delicadeza, pulcritud y elegancia con cierto toque retro,  y define muy bien un trabajo hecho a mano: laborioso y tradicional. La podemos encontrar en la cabecera y en la firma de post.

El favicon es uno de los elementos en el que debemos mostrar la marca de manera más sintética. Para crearlo me inspiré en el grácil dibujo de la C mayúscula de Rouge Script,  que recuerda bastante una hebra de lana. 

La foto de bienvenida es muy necesaria para generar confianza y empatía. La fotografía que seleccionó Amaya me pareció muy acertada, la expresión es abierta y agradable. Además muestra una de sus creaciones, ese chal rosa tan bonito.  Sólo necesité encuadrarla  y retocarla a nivel de tonalidades para que armonizara con el resto del blog.

Página de pedidos a modo de tienda

Todo lo que nos ahorramos en crear gráficos “para poner bonito” el blog lo dedicamos a crear una página de pedidos que mostrara de manera rápida y efectiva los artículos que más demandan a Amaya. La primera acción a tomar fué eliminar el sidebar de las páginas estáticas, para aumentar su ancho y evitar distracciones que desvíen la atención del contenido.

La página de pedidos se estructura en tres secciones  donde para cada artículo muestra a modo de “ficha” una foto y características con un enlace al blog ( en el que se muestran más imágenes). Estas fichas son totalmente responsive, basándose en un diseño de columnas, que se adapta a los diferentes anchos de pantalla. Las fotos se optimizaron para evitar aumentar el peso de la página y que tardara mucho en cargar.

Amaya gestiona también el blog de su hija Bailarina con Síndrome de Down. Ambas estamos impacientes en comenzar ya su transformación y podértelo enseñar. De momento el cambio de look y funcionalidades de Mon petit Crochet están en el aire. Ve a visitarlo y no dudes en comentarnos que te ha parecido, son bienvenidos tanto las críticas constructivas como los halagos.

Visitar Mon Petit Crochet

SUSCRÍBETE A MI NEWSLETTER Y RECIBE GRATIS:
guía para escoger y usar tipografías
catálogo de las mejores familias tipográficas de Google Font