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

17.10.17


Conoce los errores más frecuentes que puedes estar cometiendo en el diseño de tu blog, y que arruinan no sólo su aspecto sino su legibilidad y usabilidad. Muchas veces responden a la buena voluntad de personalizar una plantilla o theme, y es que nadie nace sabiendo todo, ni el bueno gusto por si nos convierte en diseñador.


La  intención de este post no es generarte culpabilidad por querer dar un carácter único a tu espacio. En  realidad los errores pueden venir de la elección de una plantilla/theme inadecuada, obsoleta o que da fallos. Por eso esta entrada te puede servir tanto si deseas replantearte la personalización de tu plantilla, como si deseas escoger una nueva, independientemente de la plataforma de blogging que uses.

Es muy curioso como el prestigio de una marca nos lleva a afirmaciones no del todo justas. En el mundo del blogging Blogger encarna al patito feo de las plataformas,  y se tiende a pensar que  Wordpress es sinónimo de un blog bonito y moderno. Pero no es así ni mucho menos, en las dos plataformas encontramos diseños horrendos y diseños maravillosos.

Lo que suele pasar es que la mayor demanda y cotización de Wordpress hace que la oferta en themes sea también mayor, en número y en algunas ocasiones también en calidad y por supuesto precio.  Aún así los errores que comento no son patrimonio de Blogger, de hecho aparecen en cualquier blog que se sustente mediante plantillas mínimamente personalizables.

A veces me gusta comparar el diseño de moda con el diseño Web.  La gran mayoría compramos nuestra ropa en tiendas prêt-à-porter, hechas en serie siguiendo los dictados de la moda en esa temporada.  Las capacidades de elección están limitadas: colores, tallas y algún ajuste especial. Si alguien quiere un modelito hecho a medida con diseño exclusivo, y que sea de calidad, le toca desembolsar mucho dinero.

En diseño web pasa algo similar,  si se quiere algo asequible nos toca tirar  del prêt-à-porter de las plantillas/themes.  Escojemos aquella que sea de “nuestro estilo” y nos sienta bien... y aún así siempre necesitará retoques... como hacer los bajos del pantalón. También necesitaremos diferenciarnos del resto, véase el chiste de los que se encuentran en la misma fiesta con el mismo vestido.

La necesidad legítima de personalización de nuestro blog hace que las plantillas se puedan modificar por el usuario dentro de ciertos límites. Pero a veces esa personalización puede ir en contra de nuestros buenos propósitos, sea por el poco conocimiento en diseño que se tenga, sea porque la plantilla no esté preparada para ello o no haya previsto las funestas consecuencias.  Lo bueno del tema es que hay errores muy fáciles de evitar si se conocen. Sigue leyendo para conocer aquellos más comunes, puede que sin saberlo tu blog los cometa.

1. Diseñar los gráficos del blog sin pensar cómo responderan en responsive

El diseño responsive de tu theme o plantilla procura que el contenido se adapte a cualquier pantalla y dispositivo móvil. Los textos e imágenes han de fluir en diferentes anchos y resoluciones de pantalla y esto supone un gran reto para los diseñadores web. Puede pasar que lo que en la pantalla de tu ordenador quede magnífico, en un móvil, o en una tablet, sea un desastre. Por eso revisa cómo queda en varios dispositivos cualquier elemento gráfico que añadas en el blog: banners, logo o cabecera. 

El error más típico que me encuentro es mantener en la vista móvil una cabecera muy ilustrada, con detalles pequeños y delicados. Dependiendo del buen hacer de la plantilla esta imagen se reducirá, y no se cortará o desplazará, pero su pequeño tamaño impedirá que se lea bien. Una solución es diseñar una imagen específicamente para móvil, pero dependiendo de tu theme/plantilla es posible que para ello necesites trabajar con código.




Si optamos por sustituir la cabecera por un logotipo el riesgo se reduce, teniendo en cuenta que un diseño profesional garantiza que sea legible perfectamente a tamaños pequeños.  De hecho una de las tendecias actuales en branding es crear diferentes versiones de un logo, respondiendo a los diferentes soportes y tamaños donde aparezca. La revista de diseño Gráffica  dedica una entrada de logos responsive,  muy ilustrativa sobre el tema.

Estas diferentes versiones de la marca son muy necesarias en tamaños extremos. Un favicon mide comúnmente 16x16 o 32x32 píxeles, para que pueda ser legible se necesita diseñarlo pixel a pixel. Y aquí nos encontramos con otro gran error que se suele cometer: subir el logo tal cual y cruzar los dedos para que se vea bien. En lugar de eso deberíamos escojer aquello más representativo de la marca y adecuarlo a ese pequeño espacio cuadrado. Puede ser una simplificación de su imagen o una letra distintiva de su logo, fíjate por ejemplo cómo lo hace Guinness o Disney.


Imágenes extraídas de responsivelogos.co.uk


2. Usos inapropiados de tipografías script

Artes como la caligrafía o el lettering están renovándose con fuerza, en muchos sectores hacer uso de una tipografía que imita un trazado manual parece ser lo más idóneo. El problema es cuando la continua oferta de estas tipografías nos desborda y hace muy difícil seleccionarlas o utilizarlas con criterio profesional.

El mejor consejo que se podría dar al respecto es evitarlas, sobretodo en los textos de lectura. Aún así si decides utilizarlas en títulos no cometas estos errores:

Tipografías caligráficas en mayúscula

Muchas de las tipografías que se inspiran en la tradición caligráfica poseen letras mayúsculas muy trabajadas, diseñadas como complemento decorativo de las minúsculas. Componer una palabra sólo en mayúsculas la hará ridículamente ornamentada y difícil de leer.



Espaciado anormal en letras de diseño ligado

Como norma general no es bueno alterar el espaciado natural con el que se sirven las tipografías. Es cierto que en el caso de letras en mayúscula añadir cierto espacio le dará un carácter más suntuoso pero con las minúsculas el efecto se hace extraño. Si las tipografías son caligráficas la alerta debe ser mayor, si los caracteres imitan las naturales ligaduras de un trazado manual alterar esa separación será terrible.



Caligrafías en menús o elementos de navegación

Las scripts pueden ser muy vistosas y expresivas pero en general no suelen ser muy legibles ni economizan espacio. Por este motivo evita su uso en elementos de navegación de tu blog, o en cualquier texto dónde la función comunicativa sea mayor que lo expresiva, por ejemplo en menús y títulos de sidebar. Reserva estas tipografías para aquellos elementos a los que quieras aportar un toque distintivo.



3. Interlineado de títulos no ajustado

Es uno de los errores más frecuentes, tanto en blogs de Blogger como en Wordpress. Esto es debido a la peculiar singularidad de las tipografías. Un espaciado entre líneas puede ser ideal para una tipografía pero el mismo para otra será insuficiente o excesivo. En la mayoría de plataformas se suele trabajar con plantillas personalizables y este aspecto no siempre se contempla: se permite cambiar la tipografía pero no da opción para alterar este valor de interlineado. La solución suele pasar por usar código para ello. Este es uno de los motivos por los que debes ser muy prudente cuando selecciones tipografías para tu blog, en especial en los títulos. Comprueba que pasa cuando son muy largos y pasan a la siguiente línea.




Y hasta aquí la primera parte de este compendio de pequeños errores, bastante comunes en cualquier plataforma que permita un mínimo de personalización. He intentado escoger errores concretos y poco pregonados por la web. No hay nada que más me moleste que leer posts que prometen trucos infalibles y encontrarte las cuatro generalidades vagas e inoperantes.  En el próximo post compartiré otra tanda de "malas costumbres",  cosas que me sacan un poco de quicio y que puedes encontrar incluso en plantillas prediseñadas. ¿Compartes conmigo tus manías en cuanto a diseño de blog? Te espero abajo en los comentarios.

Entradas relacionadas

23 comentarios

  1. Ey! Muchísimas gracias por este post. Me encanta leerte cuando comentas los blogs y nos ayudas con tus críticas constructivas. Siempre vas al grano. Gracias mil

    ResponderEliminar
    Respuestas
    1. Jaja de nada. A veces soy dura, pero si yo estuviera pidiendo consejo me gustaría que fueran sinceros. Decir vaguedades no ayuda y si veo algo claro pues lo expongo. Un saludo y gracias por comentar.

      Eliminar
    2. Buenas noches, Minerva Aurora, mi respeto y admiración, eres extraordinaria con el código web.Estoy presentando problemas para visualizar el menú desplegable con redes sociales desde un móvil. este es el blog donde aplique tu código. Saludos desde La Rep. Dominicana

      Eliminar
  2. Me ha encantado el post es muy completo y entra en detalles en los que no había caído como la separación de las letras en las tipografías!!

    ResponderEliminar
    Respuestas
    1. mi idea era hacer un post de aspectos concretos que me parecen un poco aberraciones de diseño...y se me hizo un poco largo, así que esta solo es la primera parte. ¡Atención a la segunda!

      Eliminar
  3. Leer tu artículo sobre errores de diseño que se deben evitar me ha recordado que tengo que arreglar alguno en mi plantilla. Los errores que muestras no los tengo, pero sí tengo alguno de diseño que me gustaría mejorar. Por ejemplo, tengo un texto configurado para que aparezca a partir de cierta resolución de pantalla, pero resulta que en pantallas de protráctil no sale, así que debo reajustarlo. Pero son cosas que voy arreglando poco a poco. ¡Un beso!

    ResponderEliminar
    Respuestas
    1. Aight pues sí, con las plantillas siempre nos toca reajustar cosillas, pero es bueno tenerlo en cuenta e ir arreglándolas pero sin obsesionarse. Un saludo.

      Eliminar
  4. Hola guapa
    Me parece un post muy interesante porque mucha gente se centra el contenido como único requisito para que triunfe un blog y el diseño es realmente importante.
    A veces me pasa que entro en algunos con una tipografía imposible o colores muy claros que me hacen imposible leer la entrada con normalidad
    Y tambien es esencial como bien dices que se adapten a los diferentes formatos como son pc, tablet, movil...
    Un besazo

    ResponderEliminar
    Respuestas
    1. Exacto, se suele pensar que un buen diseño solo es una cuestión estética...pero en realidad puede mejorar, facilitar, e incluso hacer posible la comunicación. Gracias por comentar ;)

      Eliminar
  5. Tienes toda la razón, muchas veces abro blogs que me cuesta mucho leer y no se como es posible que los mantengan así; probablemente ni se dan cuentan de que es imposible leer esa fuente o ese color...
    Besos desde JustForRealGirls

    ResponderEliminar
    Respuestas
    1. Tal vez nos cegamos en nuestras propias ideas, aunque a veces pienso que realmente tienen mal calibrado el monitor o tienen una vista estupenda. Un saludo.

      Eliminar
  6. Tus escritos siempre son muy puntuales y objetivos, es lo que me encanta de leerte, vas al grano, sin adornos. Estoy esperando el próximo post, porque es cierto que el tema da tela, cuando se tienen nociones de diseño y usabilidad.

    ResponderEliminar
    Respuestas
    1. Jaja sí uno de mis "defectos" como bloguera es que me cuesta estirar temas o dar rodeos para mejorar el SEO. Cuando escribo sólo pienso en qué información me gustaría encontrar si yo fuera la lectora. Odio esas entradas sensacionalistas que te prometen métodos infalibles y luego después de leerte parrafadas del copón lo que te queda son tres consejitos trillados y generalistas, nada útiles.

      Eliminar
  7. Hola hermosa, mil gracias por estos consejos y sobre todo por darnos las claves para solucionarlos. La verdad que a mi blog le vendría bien un cambio pero estoy tan liada que no doy a más y no me doy cuenta que son pequeños detalles que podrían mejorar, mucho, mi posicionamiento, así que lo dicho, mil gracias porque al menos me has hecho reflexionar y ser más consciente de ello. Muaks

    ResponderEliminar
    Respuestas
    1. De nada, espero haber transmitido al menos que tomemos la decisión que tomemos de diseño lo hagamos de forma consciente y con criterio acertado. Un saludo y gracias por comentar.

      Eliminar
  8. Hola! Que buen 'post', muy completo y preciso, me cae genial en estos momentos que acabo de renovar mi blog, estos temas son muy difíciles cuando no eres diseñadora jaja (como en mi caso) gracias por los consejos tan buenos, revisaré muy bien los puntos en mi blog, espero no estar tan mal, saludos!

    ResponderEliminar
    Respuestas
    1. Claro, no te pierdas la siguiente parte, que son errores incluso más frecuentes ( y a mi personalmente me molestan un montón)Un beso

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola Minerva,

    Me ha encantado el post. Claro, directo, útil y al grano. Sin paja ni info de relleno. Me gusta tu estilo. Disfruto mucho leyendo tus comentarios en los grupos de FB.

    Yo contraté el diseño de mi web, pero luego le he ido metiendo mano y a veces el resultado no ha sido el esperado. No puedo evitarlo, me gusta cambiar cosas. Suerte que tengo a Eva que me ayuda cuando hay efectos colaterales.

    Te sigo y me suscribo a tu NL.

    Un saludo. Sònia.

    ResponderEliminar
    Respuestas
    1. Hola Sònia,
      Jaja me encanta que te encante mi estilo. Lo hago inconscientemente, no sé escribir por escribir y rellenar líneas para que las lean los robots de Google. En serio a mi me molesta mucho los posts vacios y por eso intento no hacer lo mismo.

      Es normal que modifiquemos las plantillas...y necesario...sino sería un aburrimiento todas iguales. Aunque sí, a veces nos cargamos cosillas, pero ya veo que tienes soporte técnico ;)

      Hace tiempo que suspendí mi NL, pero puedes recibir mis post en el correo en cuanto publique gracias a feedburner.

      ¡Gracias por tus palabras!

      Eliminar
  11. hola, me gusta tu blog, me gustaria saber que tema usas. ¿es de pago? Gracias

    ResponderEliminar
    Respuestas
    1. Es una plantilla de Themexpose : Rosemary Clean & Responsive Blogger Template. Tienes una versión gratuita y otra de pago. He ido arreglando e implementando el código pero siento que está algo desfasada. Estoy trabajando en una nueva plantilla creada prácticamente desde cero. Un saludo.

      Eliminar
  12. Your blog has nice information; I got good ideas from this amazing blog. You might find this interesting Hardship Grants For Single Mothers

    ResponderEliminar