¿A que tú también te has dado con páginas web cuyo diseño gráfico no tiene nada que ver con sus contenidos o con lo que quiere transmitir? Se da una disonancia entre los contenidos y la presentación, que sin dudas repercute (para mal) en la experiencia del visitante, y en definitiva conspira contra la finalidad que la propia página web tiene (que suele ser ventas o difusión de información).

Sucede muy a menudo con las páginas sobre temáticas formales o serias, como podría ser una institución, una ONG, un estudio de abogacía o hasta un sitio de venta de diamantes online que pretenda garantizar seriedad y trato justo.

Si al ingresar el visitante se sorprende con colores estridentes, múltiples y mal combinados; si tropieza con tipografías diversas, en tonos variados o movedizas; si durante su navegación aterriza en páginas con fondos distintos o con texturas de lenta carga, la experiencia puede ser desastrosa, y lo más probable, no podremos esperar que se transmita la sensación de seriedad o formalidad que pretende comunicar el dueño del sitio.

 

CSS, el ADN estético de nuestra web

Por todas estas razones, desde la propia definición del sitio web habrá que tener en consideración criterios sobrios, estables y consistentes sobre el diseño. Lo bueno de todo esto es que se lo puede hacer a partir del recurso de las hojas de estilo en cascada de la web, las famosas CSS, mediante las cuales podemos definir la estética general que tendrá el sitio. Es como una especie de definición de código ADN de nuestra web, que repercutirá en todos y cada uno de los contenidos. Pero con la ventaja de que si no nos gusta, bastará que modifiquemos las CSS para que todo cambie de manera automática.

 

Criterios de diseño

No es nuestro propósito darte aquí un listado de las tipografías que podrás usar ni de los colores o fondos permitidos. Son cosas que dependerán más bien de las definiciones de imagen corporativa. Mejor hablaremos de criterios.

La primera recomendación será no combinar demasiados estilos de letras. En principio, no más de dos. Una tercera podría restringirse sólo a la utilizada en el logotipo general.

Convendrá escoger tipografías más bien clásicas, aunque no está mal arriesgar un poco con una con algo de fantasía, preferentemente entre las que ofrece Google Fonts. Eso sí: para textos generales, subtítulos, epígrafes, tablas, etc., usa tipografías sencillas y comunes. Arial, Calibri, Georgia, Times News Roman. No les compliques la lectura a tus visitantes.

Luego puedes usar algo más osado en títulos de sección o de páginas, en títulos de widgets en barras laterales o pies de páginas, en banners, call to action y demás sectores.

Criterio similar aplicamos para la utilización de colores. Convendrá definir dos colores corporativos del sitio, que se “lleven bien” y se complementen. Preferentemente uno oscuro y uno más vívido. Ejemplos: gris oscuro y anaranjado, bordó y azul francia, verde y azul marino, rojo y negro, anaranjado y marrón oscuro, y podríamos seguir con muchos más. Como consejo, convendrá buscar un color que complemente el color del logotipo; mejor incluso si es el mismo.

Luego deberemos definir en qué elementos usaremos estos colores. Otra vez el mismo criterio para los textos generales, donde se halla el grueso de la lectura. No te salgas del negro. Usa mejor los colores en los mismos elementos especiales de los que hablamos para las tipografías. Aunque hay una excepción: los hipervínculos. Usa con ellos tu color corporativo o el color complementario.

En materia de fondos y texturas convendrá ser prudentes si queremos mantener la seriedad y formalidad. Como regla general, descartar todo aquello que pueda molestar la lectura. Usarlos en los sectores periféricos: cabezales, barras laterales, pies de página.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!