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

28.10.17


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.


Entradas relacionadas

16 comentarios

  1. ¡Hola Minerva! Pues esto que dices parecen obviedades, pero está claro que no lo son porque muchos pecamos de lo mismo. Me encanta lo de dejar que "respiren" las fotografías. Agobia muchísimo verlas apretujadas en medio del texto, y es algo que tiene muy fácil solución. Igual que lo de las parrafadas inmensas... En fin, voy a darle una vueltecita al diseño de mi blog a ver cómo lo puedo mejorar. Un saludo

    ResponderEliminar
  2. Hola.
    Tienes toda la razón en tu post, muchas veces estas cosas tan simples las pasamos por alto y al final nos quedan post desastrosos!
    Yo he llegado a borrar ciertos post después de un tiempo por que al verlos yo misma me horrircé, luego está el coñazo de la versión web y la versión para moviles, tienes muchas veces que hacer filigranas para que quede perfecto en ambas partes.
    Yo anteriormente cometí el error de no dejar respirar a las fotografías y día me dio el cambio de chip, este que me horrizó y lo cambié, desde entonces siempre voy foto por foto para que no quede sobrecargado.
    De todas formas, creo que le tengo que dar un buen repaso a mi blog!
    Gracias por los consejos.
    Saludos.

    ResponderEliminar
  3. Hola me encanta tu post!
    A menudo la gente compra una plantilla y creen que le va a ir a su blog como anillo al dedo... y nada más lejos de la realidad, hay veces que las plantillas son la caña porque te eneseñan una home hecha a posta para esa demo y es muy complicado que tu contenido se adapte a ello.
    A mí me cuesta meter a la gente en la cabeza que si la letra no se lee bien sin tener que pegarte a la pantalla la gente saldrá corriendo, porque si no usas bien el tamaño, el interlineado y el tracking de las tipografías será una tortura leer.
    Muy de acuerdo con lo de las miniaturas, pero ahí estamos en que hay themes que son muy bonitos en la tienda pero luego se vuelven orcos, yo por mi trabajo reviso muchos themes al mes y veo que algunos para blogging no sirven, o dependen de "fotones" que es complicado conseguir o de un contenido muy condicionado por el diseño.
    Con lo de los colores en los CTA coincido contigo y con los contrastes... hay veces que no hay quién lea y menos mal que va muriendo la tendencia de las imágenes de fondo que esa y el color negro eran terribles!!!

    Un saludo!!

    ResponderEliminar
  4. Siempre al grano con tus post Minerva, ¿sabes que agregaría a la lista de tus análisis? Las imágenes de fondo para todo el body, pues la mayoría de las veces que las encuentro son poco favorecedoras. Habrá a quienes les guste para distinción, pero yo pienso (sin tener conocimientos del tema como tú) que al menos sean seamless, ayudarían así con la carga por su poco peso y su patrón de repetición elimina ese efecto runcho de una imagen no adecuada para fondos. ¿Tercera entrega de este post para cuándo?

    ResponderEliminar
  5. Ummm de lo que nos cuentas creo que tengo que tener mas en cuenta el tema del color, las paletas y seleccionar une buen gama cromática, que no es que lo hiciera al tuntún pero podría mejorar! me anoto también lo de las fotos, ostras, yo creo que cuando las añade recurro a las primeras, pero vale, dejare que tomen protagonismo, probare como dices a ver si me gusta y así sigo la tendencia!

    ResponderEliminar
  6. Hola!!! Si que es verdad... A veces entro en algunos blogs a leer una entrada que me ha interesado y veo, párrafos muy extensos, con letras muy pequeñas y una tipología bonita, pero ilegible. Quizás ese sea el error de diseño más común, que me estoy encontrando en los blogs.

    Otro error de diseño que también me he encontrado en algunos blogs, es la mala elección de contrastes de colores en las llamadas de atención o en algún texto que han querido resaltar y me resultan casi hasta molestos a la vista.

    Más de uno, tenía que leer éste post... Saludos!!!

    ResponderEliminar
  7. Artículo muy interesante, gracias por compartir Minerva, lo más aconsejable es tomar todo el tiempo necesario para escoger el theme adecuado, luego jugar un poco con el Code para adaptarlo a nuestro proyecto.

    ResponderEliminar
  8. Eres un descubrimiento para mi, tus textos enganchan, y contenido sin desperdicio alguno.
    Muchas gracias

    ResponderEliminar
  9. Muy ciertos los errores que comentas, muchas veces no nos damos cuenta y hay que prestarles atención. Buen artículo!

    ResponderEliminar
  10. Nice article I was really impressed seeing this article, it was very interesting and it is very useful for me. You might want to check out cashier's check vs money order 

    ResponderEliminar
  11. Has dado en el clavo con todos esos errores!! La verdad que el diseño grafico en web debe cuidarse tanto o más que en cualquier otro medio, ¡super buenos tus consejos!

    ResponderEliminar
  12. I am not certain where you’re getting your information, but great topic. I must spend a while learning more or figuring out more. Thank you for magnificent information I used to be on the lookout for this information for my mission.
    섯다

    ResponderEliminar
  13. Your article is very informative and helpful to me. Thank you for the post, it’s really nice. This is more good! Visit my site. how to raise your credit score 200 points in 30 days

    ResponderEliminar
  14. Buenísimos consejos, me apunto algunos de los tips y frases que nos regalaste en tu post.

    ResponderEliminar