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

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.