Como personalizar el blog con el Diseñador de plantillas de Blogger

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.



Para acceder al Diseñador de plantillas haced clic en la opción Plantilla del menú de Blogger y después en el boton Personalizar.  Desde esta opción puedes escoger una serie de plantillas prediseñadas para después modificarlas. Exceptuando la plantilla Vistas dinámicas, que incorpora un diseño algo más flexible, el resto tienen un ancho fijo y  un estilo bastante desfasado: colores degradados y fondos oscuros, o peor aún, fotográficos.

Pero todo esto podemos modificarlo a través del Diseñador de plantillas, de forma cómoda y sencilla, ya que permite ver en vivo los cambios introducidos. Evidentemente las opciones de personalización son limitadas, y para muchas de vosotras insuficientes. Para realizar más cambios será necesario editar el código CSS de la plantilla, con la dificultad que eso comporta. Pero no os preocupéis, existen muchos artículos en Internet que nos lo dan hecho, y solo necesitaremos “copiar y pegar”.

En esta entrada nos ceñiremos a los cambios que podemos hacer a través del Diseñador de plantillas. Vamos allá punto por punto.

La opción Plantillas

Como nuestra intención es personalizar el aspecto de nuestro blog escoged la plantilla Simple. Su diseño es sencillo y permite bastantes modificaciones. Tanto la de fondo azul como naranja nos puede servir como inicio.

La opción Diseño

A través de la opción “Diseño” podemos cambiar la estructura del blog adaptándola  a nuestras necesidades.

En la maquetación básica de una página web aparecen cinco elementos:

• la cabecera: nos dice dónde estamos, contiene el nombre del sitio / logotipo.
• menús de navegación en barra o en una columna lateral: permite el acceso a las diferentes secciones del sitio.
• el contenido.
• zona/s anexa/s: alberga publicidad y información secundaria.
• el pie de página: informa de la autoria, indicaciones legales, mapa del sitio...

En un blog encontramos estos mismos elementos. Una distribución tradicional sería la que podeis encontrar en el mío, con una columna lateral a la derecha. Con el Diseñador podeís eliminarla, situarla a la izquierda o tener dos columnas.

Las web corporativas suelen colocar la columna a la izquierda. Ésta es una zona de mayor visibilidad, adecuada para un menú de navegación secundario que permita al visitante acceder a otros contenidos del sitio. En un blog esto talvez no se considere tan necesario, y al desplazarla a la derecha damos más importancia al contenido de las entradas, que se actualizan periódicamente. Pensad que la disposición a la derecha es la más  habitual en un blog, y lo que un lector habituado esperará encontrar.

Otro motivo para tener en cuenta es que esta plantilla es posible que en algún momento no muestre la página al completo. Esto puede pasar si se tiene una resolución de pantalla menor, por ejemplo si se accede desde una tablet o un notebook. Pero también si se ajusta la ventana del navegador para seguir un tutorial  en el que se necesite tener abiertas más ventanas. En este caso debemos saber que deberemos hacer scroll horizontal para acceder al lateral derecho, que quedará oculto. Por tanto para tutoriales será más práctico tener la columna a la derecha.

La elección entre columna a la izquierda o derecha dependerá de vuestro criterio, no hay una opción universalmente válida. Ahora, yo no aconsejaría una doble columna porque cuantos más elementos se añade a un diseño más complicado será gestionarlo.  Recordad además que la tendencia en diseño web manda simplificar y trabajar con espacios muy limpios.

Ajustar ancho del blog

A través de la opción “Ajustar ancho” Blogger nos permite determinar el ancho total del blog y el de la columna lateral .

Escoger el ancho del blog es una decisión bastante peliaguda. Actualmente se puede acceder a un blog a través de una multitud de tamaños, formatos y resoluciones de pantalla.

El ancho por defecto de una plantilla de Blogger es de 960 px. Este es el ancho fijo del cuerpo, que queda centrado en un fondo. El fondo se adapta a la anchura variable de la ventana del navegador y se estira si la pantalla tiene una mayor resolución.

Este valor de 960 px está pensado para ocupar pantallas de 1024 px de resolución y hasta hace poco era considerado un standard en diseño web. Si teneis la certeza que una grandísima mayoría de vuestros seguidores os leen desde pantallas de 1280 px o superior podéis aumentar este ancho. Tomad un valor máximo de 1200 px, y pensad que la mayoría de blogs no supera los 1100 px. de ancho.

El ancho por defecto de la columna lateral es de 310 px para pemitir insertar banners de 250px de ancho. Esto es especialmente importante si deseais colocar publicidad. En el caso que pongais otro valor,  para conocer el ancho efectivo de la columna debeis restar 60px. Estos corresponden a los márgenes laterales que añade esta plantilla.

La imagen de fondo y la gama cromática del blog

La opción “Fondo” del Diseñador de plantillas os permite escoger una imagen para el fondo y una gama de colores que podreis aplicar al blog en la opción “Avanzado”.

Os aconsejo que el fondo sea discreto, tanto por el motivo escogido como por el color. El contenido de nuestro blog no puede quedar en segundo plano: debe ser el protagonista. Además, si vuestro blog se apoya mucho en fotografías pensad que un color de fondo intenso puede modificar la percepción del color. A este fenómeno se le llama contraste simultaneo.

Escoged colores claros o neutros (gris, beige, marrón). Los colores oscuros no son tendencia pero para temáticas concretas pueden funcionar muy bien, por ejemplo si vuestro blog esta relacionado con el cine.

Pocos fondos de Blogger son aprovechables. Descartad las fotografías y todos los motivos enormes o de colores brillantes. Los únicos más llevables son los que se encuentran en el apartado “patrones”.  Éste término es una traducción del inglés pattern, que designa un motivo de repetición.

A efectos prácticos -en este caso- un pattern es una imagen (gif, png o jpg) que al repetirse genera un mosaico capaz de ocupar el fondo independientemente del tamaño que este tenga. Como son imágenes pequeñas la carga del blog será mucho más rápida. Los motivos que tienen zonas transparentes son especialmente interesantes, ya que dejan ver el color de fondo escogido en el blog, lo que puede daros mucho juego.

En Internet abundan las páginas donde puedes descargar gratuitamente patterns, o incluso generarlos. Os dejo el enlace de algunas de mis favoritas:

• http://bg.siteorigin.com Os permite generar sobretodo texturas sutiles y elegantes a partir de unos parámetros definibles por uno mismo.
• http://www.colourlovers.com/patterns Un clásico, permite acceder a muchísmos motivos, con la posibilidad de colorearlos al gusto. También encontrareis un generador de patrones, que permite crearlos de manera muy sencilla a través de formas simples predefinidas. puedes crear a partir de formas predifinidas tu propio pattern.
•  http://subtlepatterns.com/ Interesante web, podeis encontrar motivos muy sutiles y elegantes.

Opción “Avanzada”: colores

En la opción “Avanzada” del Diseñador podemos dar color y determinar las tipografías de muchos de los elementos del blog. 

El color es una poderosa herramienta de comunicación. Existen multitud de escritos sobre ello. ¿Qué conjunto de colores debes escoger para tu blog? Pues dependerá de lo que quieras transmitir a un público en cuestión. Por ejemplo, los colores rosas y pasteles son del agrado de muchas mujeres, pero no tanto de los hombres. Y de la misma manera los niños se sienten atraidos por colores vivos.

¿Cuantos colores escoger? Pocos, y bien  coordinados. En este caso puedes mantenerte fiel a un mismo color usando diferentes matices, o bien escoger colores semejantes como por ejemplo verde y azul, o naranja y amarillo. De esta manera conseguiras sin gran esfuerzo generar una armonía. Por otra parte, utilizar colores que contrasten aportaran más dinamismo y permitiran destacar aquellos elementos importantes. Colores que contrastan són el amarillo con el azul/violeta, el rojo/naranja con el azul, y el magenta/rojo con el verde.  Y recuerda: siempre puedes introducir como comodines colores neutros: marrones y grises.

Otra opción que teneis es recurrir a paletas de color ya definidas. Las puedes encontrar en webs como
http://www.colourlovers.com/
http://design-seeds.com/
https://color.adobe.com/

Para el cuerpo de texto escoge el clásico “letra oscura sobre fondo claro”, es lo más legible. Si quereis que destaquen los títulos no usad colores muy claros como el amarillo. Y tampoco abuseis de los colores pasteles (claros). Pensad que no todos los monitores representaran el color de la misma manera: pude ser que el color claro que veais en vuestro monitor, en el mío sea casi imperceptible.

Opciones “Avanzada”: tipografías

Una parte muy importante y divertida del diseño es escoger entre la gran variedad de tipografías disponibles. Y es también en la que se pueden comenter errores imperdonables. Recordad la función de un texto: ser leído. Primad la funcionalidad, al menos en lo que al cuerpo de texto se refiere. Si quereís letras distintivas y estilosas reservadlas a los títulos.

Para el texto del post una opción muy práctica consiste en utilizar las fuentes del sistema que són las primeras del listado del Diseñador anteriores al título “Fuentes web”. El blog tardará menos en cargarse y podreis utilizar negritas y cursivas sin problemas. Si escogeis entre las tipografías web que ofrece Blogger seguid mis consejos. Evitad: letras caligráficas, gruesas, muy finas, o con rasgos particulares. Cuanto más “normal” nos parezca mejor: más nos centraremos en la lectura del contenido del post.

Conozcamos un poco las clases de fuentes tipográficas, sintetizando podríamos agruparlas en fuentes serif (con remates) y fuentes sans serif (de palo seco).  Las primeras connotan tradición y pueden ir bien en blogs de literatura y cocina tradicional. Prueba por ejemplo Merriweather, Tinos, Droid serif, o Crimson. Las de palo seco, sin remates, son más modernas y tienen la fama de leerse mejor en pantalla. Recomiendo un clásico del flat design: la Open sans. También son interesantes Arimo, Josefin sans, y Cousine. Esta última es similar a la Courier, tiene un aire mecánico.

En cuanto al tamaño: entre 13px - 15px para fuentes como Arial y Times New Roman. La longitud de línea es importante, sobretodo si en vuestro blog hay mucho texto. Generalmente se peca de líneas muy largas: con más de 12 palabras. La lectura se hace difícil y pesada ya que el lector debe esforzarse para encontrar la nueva línea. La combinación de ancho de blog generoso más letra pequeña desemboca normalmente en este problema.

Un error mucho más grave a efectos de legibilidad es centrar párrafos largos. Es muy incómodo para leer, por más que parezca elegante. Si deseais un aspecto tradicional justificad el párrafo y dejad centrado solo el título. Aunque si la longitud de línea es corta debereis alinear a la izquierda, de lo contrario generareis espacios vacios muy feos en la línea .

Para los títulos de la entrada cread contraste. Se puede hacer de muchas maneras, combinadas o por separado: aumentando el tamaño de la tipografía, su grosor, el color o utilizando una fuente totalmente diferente, por ejemplo una serif con una sans serif. Aquí podeis ser más atrevidos y utilizar fuentes “display”, aquellas reservadas a títulos y carteles.

De momento no os preocupeis mucho de las tipografías y colores de la cabecera, porque es mucho más facil diseñarla como imagen y después colgarla. En cuanto a la fecha del post y los títulos de los gadgets utilizad una letra legible pero mucho más discretas que los títulos de la entrada. Sobretodo si la fecha de publicación no es un dato relevante en vuestro blog. Para conseguir esto evitad que destaquen más que el título:  no pueden verse mucho más grandes, oscuras, gruesas y llamativas que éste.

Las opciones texto y fondo de las pestañas se refieren al menú de navegación, en el caso que lo tengais. Para escoger tipografía seguid los mismos criterios anteriores.

Otro término poco claro en el Diseñador es “Acentos”.  Con él se refiere a la línea separadora entre post y columna lateral, y también al contorno de los botones del menú de navegación.  El diseño de estos elementos dependerá de la éstetica global del blog.

Y hasta aquí llegamos en esta segunda lección de curso. Hemos dado un rápido repaso a las muchas elecciones que un diseñador debe tomar acerca de un diseño. Así en cada diseño que emprendamos retomaremos estas preguntas ¿Qué tipografía escojo? ¿De qué color? ¿Cuál es el tamaño de mi columna lateral? Pero entonces la respuesta surgirá de manera más directa y meditada.

Espero que os haya sido aprovechable tanto si sois novatas como veteranas. Los siguientes tutoriales intentaré que no sean tan extensos. 

Si me habeís seguido hasta aquí y alguna cosa no ha quedado clara no dudeis en preguntar, aquí mismo en los comentarios, o contactar conmigo por mail.

Si os ha gustado compartidlo: os estaré muy agradecida y no tendré la horrible sensación de haver perdido el tiempo.

En la próxima clase aprenderemos a preparar y insertar una imagen en el blog. Utilizaré Gimp, pero muchos conceptos los podréis llevar a otros programas de edición fotográfica.

Un saludo, y hasta el siguiente post.