Errores de diseño a evitar en tu blog (parte II)

Si te preguntas porqué tu plantilla /theme del blog se veía tan bonita en la demo y al personalizarla ha perdido la gracia aquí te doy algunas claves. Porque muchas veces el error de fondo reside en un theme no muy preparado a la idea, a veces equivocada, de lo que queremos para nuestro contenido.

La gran oferta en plantillas y maquetadores visuales suponen una ayuda para aquellos que sin ser diseñador desean personalizar su blog, darle una imagen única y representativa. El problema aparece cuando se sobrepasan algunos límites de lo que los diseñadores consideramos un buen diseño.

El diseño siempre se debate entorno a dos ejes: belleza y funcionalidad. El diseño de la interfaz de un blog no se aleja del cometido de un libro o una revista: comunicar y/o persuadir. Si las decisiones de diseño implican que ese objetivo no se cumpla...  siento decir que no lo estamos haciendo bien. En esta entrada "denuncio" algunos de los errores que con más frecuencia veo que se cometen en webs/ blogs de plataformas diversas.

Esta recopilación la he fraccionado en dos partes, de lo contrario me quedaba un post larguísimo y pesado.  En la primera parte de errores de diseño a evitar en tu blog  vimos los tres primeros puntos que resumidos son:

1. Gráficos no adaptados a una plantilla responsive: cabeceras que no se leen en móvil y logos ridículamente reducidos en favicon.

2. Usos de la tipografía script estética y funcionalmente no adecuados.

3. Títulos con una interlinea no adecuada ( líneas amontonadas o excesivamente separadas)

Veamos los siguientes cinco puntos no menos frecuentes.

4. Textos arduos de leer por la excesiva longitud de línea y el tamaño de letra

No hay nada que me de más pereza que ver un texto con letrita diminuta recorrer línea a línea todo lo ancho de la pantalla del ordenador. En más de una ocasión he necesitado reducir la ventana del navegador (si la plantilla era responsie) o directamente he renunciado a la lectura. Aquí la culpa, como la de los tacones altos en los zapatos, la suele tener la moda y los diseñadores.
 

La moda nos habla de prescindir del sidebar (barra lateral) ya que puede distraer al lector del texto, claro... — y aquí añado yo en tono sarcástico— el lector necesita concentración para llegar a la siguiente línea. Una buena plantilla o theme sin sidebar debería tener esto en cuenta, pero no suelen hacerlo, simplemente apretamos a un botón y voilà ancho completo y línea kilométrica.

El diseñador aporta su granito de arena al desastre. Las tipografías pequeñas suelen verse más elegantes y bonitas, los bloques de texto se hacen más uniformes, todo el diseño fluye y armoniza mejor. Son como esos zapatos de tacón tan elegantes del escaparate... pero tan incómodos al usar.

Cuando seleccionamos una plantilla no solemos leer los textos de las demos, nos fijamos en las imágenes y en lo bonito u ordenado que está todo. No nos paramos a pensar lo que pueden dificultar la lectura estas letritas, sobretodo a pantalla completa, y en según que dispositivos y pantallas. De hecho la nueva generación de pantallas de alta resolución ha hecho crecer el tamaño medio de lo que se consideraba standard hace unos años (de 13px a 16px). Si encuentro plantillas con letras diminutas empiezo a sospechar que pueden estar algo desfasadas.

5. Aplicar una paleta de colores al tuntún

El color es uno de los elementos de diseño que aporta un valor más emocional y es capaz por si mismo de sugerir un cierto ambiente y tono. Por eso se ha de tener mucho cuidado al seleccionar una gama cromática para el blog. Es importante que pienses más en sus necesidades de comunicación que en tus gustos personales.

Imagen via Design Seeds

Combinar colores acertadamente es un arte y necesita práctica y buen criterio. No es mala idea apoyarse en paletas predefinidas pero siempre teniendo en cuenta que se deberá renunciar a algunos colores, con dos suele ser suficiente si no se domina bien el tema. Intentar “pintar” el blog con tantos colores, así al tuntún, sin tener clara la jerarquía y el papel que se le quiere dar a cada elemento solo puede llevar al desastre.


Por ejemplo, un menú de color vivo en la home es adecuado en tanto sea carta de presentación de la web, pero si llegamos a una página donde la navegación es secundaria debería mantenerse neutro y no llamar la atención, cediendo el protagonismo al contenido. Y esto es sobretodo aplicable a esos menús fijos, ya que los tenemos continuamente a la vista y distraen la lectura.

6. Usar colores poco o muy constrastados en texto/fondo

Especial prudencia se tiene que tener cuando se escojan colores para el texto. Sobre fondo blanco colores muy claros, como el amarillo o los colores pastel, no aportan apenas contraste y dificultan mucho la lectura. Es posible usarlos sobre un fondo oscuro, con precaución, en textos cortos. En esas condiciones las letras suelen adelgazarse y un excesivo contraste cansa la vista.

También debemos evitar poner en contacto colores muy contrastados, que generan un efecto de vibración muy desagradable en pantalla. Así como el blanco es el opuesto del negro,  los colores también tienen sus colores opuestos,  sus complementarios. Por ejemplo el azul cian y el rojo usados en su máxima saturación provocan un efecto de contraste desagradable, y en pantalla (color luz) se acentúa.

Tenlo muy en cuenta cuando diseñes llamadas a la acción, botones y otras presentaciones con fondos de color que premiten los maquetadores visuales. Esta norma también es aplicable cuando diseñes otros elementos gráficos, como la cabecera.  A veces nos sentimos tentados de "jugar" con los colores de la paleta escogida, añadiendo detalles o usando formas contenedoras sin tener en cuenta esto.

6. No cuidar el formato de las fotografías

Y con formato me refiero tanto a tamaño como a forma de las imágenes que ilustran el post. Si buscamos la armonía y coherencia el tamaño y formato debería repetirse. La tendencia actual usa imágenes grandes, ocupando todo el ancho del post, e incluso de la pantalla. Cuida también la separación del texto para que las imágenes respiren y tomen su protagonismo.

7. Usar una plantilla/theme que recorta o deforma las imágenes

En un blog es muy habitual que se presente un sumario con los últimos post publicados. El cómo se muestran esas imágenes depende de la plantilla y theme escogido. Lo más frecuente en Blogger es que se trate de la primera imagen del post, y en Wordpress las imágenes de portada escogidas. Para tener un sumario atractivo debemos seleccionar y editar primorosamente estas imágenes.

Me encuentro muy a menudo sumarios de post con fotos recortadas. Esto sería comprensible si se usase un formato cuadrado para dar salida a fotos horizontales y verticales indistintamente, pero no lo es tanto cuando la relación de aspecto en todas las fotos es la misma. Y con esto último me refiero a la relación entre los lados del rectágulo, si son fotos más anchas o panorámicas. Seguramente la plantilla está programada para trabajar con otro formato. Esto el usuario no suele tenerlo muy en cuenta, o incluso lo ignora cuando elige plantilla. Y una vez instalada comprueba con impotencia que sus fotos se recortan demasiado. Se puede solucionar adaptando la plantilla, pero es posible que se necesite trabajar con código.

Hay imágenes que aceptan mejor un recorte, especialmente si no hay texto, pero lo que no es admisible es que se muestren deformadas. Esto puede ocurrir si usas una plantilla de mala calidad y/o muy antigua. El blog se verá beneficiado si cambias a otra mejor.

---

Y hasta aquí mi selección. Seguramente me dejo muchos pequeños errores por el camino, pero creo que estos son lo bastante comunes como para tenerlos en cuenta. Espero que ahora tengas otra mirada sobre qué es un "buen" diseño de blog. Piensa en qué deseas comunicar a tu lector y analiza fríamente si el espacio que has construido en tu blog es un entorno adecuado: ¿Se siente cómodo al leer? ¿Sigue fácilmente la estructura de tu discurso? ¿Le es fácil participar en tu propuesta?, etc

Si hace mucho tiempo que estás en este mundillo blogger, sabrás  que las fórmulas de éxito venden, y que no hay que rascar mucho para encontrarte un gurú de turno que tenga la piedra filosofal para tus problemas. Siento decirte que en diseño yo al menos desconozco algo así.

Los problemas gráficos que se pueden plantear son tan plurales que las respuestas son obligatoriamente diversas. Como en  muchas otras disciplinas el conocimiento y la experiencia es la clave para resolverlas, y la mejor opción siempre es delegar en un profesional. Como sé que no siempre podemos/estamos dispuesto a invertir en ello, creo que la mejor opción está en determinar buenos criterios para seleccionar y personalizar plantillas prediseñadas. ¿Qué opinas tu al respecto? ¿Te cuesta lograr que tu blog tenga el aspecto que quieres? Nos leemos en los comentarios.