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.
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.
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.
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!
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.
Tener un blog de Blogger no significa que no se pueda lucir un diseño moderno y profesional, como el de un blog de Wordpress. En este post te muestro el nuevo diseño del blog Pa Monísima: Yo, al que he instalado y personalizado una plantilla premium responsive.
Si me sigues sabrás que a principios de Enero fue mi propio blog el que sufrió esta transformación, instalando la plantilla Voux de Themexpose. Tenía muchas ganas de dar el paso, pero por un motivo u otro lo iba dejando, hasta que un día me planté y lo instalé en una sola noche. Y no puedo estar más contenta del resultado, no sólo por la mejora del aspecto, sino también por una sensible subida en mi posicionamiento.
Es por este motivo que no dudé en partir de una plantilla premium para el rediseño del blog de Débora, Pa Monísima: Yo. Actualmente cualquier web o CMS (gestor de contenido como Blogger o Wordpress) presenta un código sumamente complejo en el que participan varios lenguajes de programación. Diseñar una web desde cero supone un gran trabajo, y es por eso que actualmente se suele partir de plantillas i/o frameworks donde una gran parte del código está ya hecho.
La elección de una buena plantilla de base es fundamental. Y para ello Débora y yo analizamos muy bien qué funcionalidades necesitabamos implementar en su blog.
Evidentemente el nuevo diseño debía ser responsive, es decir que se viera bien en cualquier dispositivo/pantalla. También teníamos claro que mantendríamos el aspecto de blog tradicional, con una columna lateral (sidebar) y una página de inicio sencilla.
El blog de Débora es el escaparate de sus creaciones: detalles y complementos hechos a mano en muy diversos materiales y técnicas, fieltro y ganchillo principalmente. Tiene una tienda en construcción, y un catálogo pendiente. Y es que uno de los puntos débiles de su anterior diseño era la dificultad de hacerse una idea de todas las monerías que crea.
En este sentido le sugerí crear un menú con subcategorías para filtrar sus creaciones según destinatarios: bebé, niños, mujeres y hogar. Y complementarlo con un menú secundario en la sidebar con etiquetas más concretas. Esto exige un trabajo de redefinición de etiquetas, de momento pendiente pero que muy pronto estará completado.
Por otra parte Débora es muy activa en varias redes sociales, y por tanto la presencia de botones y gadgets sociales en la plantilla debía estar asegurada.
Teniendo todo esto en cuenta escogimos la plantilla Minimal de Themexpose. Ésta posee un menú fijo desplegable muy completo, con iconos de redes sociales y buscador. Además de tener un diseño limpio y moderno.
La plantilla en si ya es plenamente funcional y solamente necesita ser instalada y traducir algunos de sus elementos. Aún así añadí directamente una serie de funcionalidades nuevas que pacté con Débora:
- Botones de redes sociales en el footer
- Botón de subir arriba flotante
- Carrousel con las fotos de Instagram en el footer
- Botón de compartir en Google +
- Botón pin-it al pasar por las imágenes del post
- Páginas estáticas sin sidebar
- Tablas responsives en dos, tres y cuatro columnas editables desde el panel de control edición de entradas
- Formulario de contacto responsive
- Aumentar las entradas relacionadas mostradas de 3 a 5
Aunque el trabajo más completo fue su personalización. Constituyó un reto para mi poder borrar el aspecto un tanto frío de blog de moda de la plantilla. En este sentido la aportación de Débora fue esencial. El logo o imagotipo, una simpática monita, es de su creación, y ella aportó también las cintas rosas así como ideas de estilo como el uso de textura téxtil y pespuntes que ya existían en su anterior diseño. A partir de aquí fui configurando la nueva imagen, puliendo y armonizando todos los elementos en juego: tipografías, colores y formas.
Antiguo diseño de Pa Monísima: Yo
Nuevo diseño responsive
- La barra de información de cookies, que se envió al pie de la pantalla y se redujo su tamaño.
- La cabecera anterior se redujo para adaptarla al móvil, optimizar el espacio y permitir mostrar el principio de las entradas.
- Se aportó un toque de estilo a la foto de presentación, retocando el encuadre y exposición, y colocándola sobre un fondo de tela.
- Se creó una guía de estilo para aplicar en las entradas, con cuidado diseño de encabezado y destacados, aplicables de manera automática desde el editor de entradas. Se definió la etiqueta que crea una fina línea de separación, y la decoración de las tablas responsive.
En todos estos cambios se fueron introduciendo las modificaciones necesarias para que se vieran bien en la gran mayoría de dispositivos y pantallas. Una odisea de cambios y pruebas, pero con llegada a buen puerto.
¿Qué opinas? ¿Aún no le has echado un ojo? Pues ve ahora mísmo al blog de Débora! ¡Tus apreciaciones serán muy bienvenidos abajo en los comentarios!
Como personalizar el blog con el Diseñador de plantillas de Blogger
diseñador de plantillas 26.11.14
Para muchos de vosotros, sobretodo los más veteranos, utilizar el Diseñador de plantillas de Blogger es una perogrullada. Pero creo que para iniciar el curso de diseño para bloggers nos puede venir muy bien darle un buen repaso y salpicarlo de algunos consejillos de diseño.
¿Preparados para trabajar la imagen de nuestro blog?
Con esta entrada inicio el mini curso de diseño de Gimp especial para Bloggers. Un curso pensado para que podáis ser autosuficiente gestionando las imágenes y graficos de vuestro blog.
