Como ya hemos visto, el primer paso para crear un sitio web es planificarlo adecuadamente. Sin embargo, también será útil tomar nota de algunas sugerencias para hacerlo no sólo atractivo, sino también accesible. La apariencia de un sitio —el tan mentado “diseño”— siempre quedará a criterio e imaginación de su creador, pero vale recordar algunos procedimientos simples para que la experiencia del visitante al navegarlo sea un trámite ágil y placentero, y no un sacrificio.
Los aspectos básicos para tener en cuenta son:
Contraste y armonía entre fondo y texto
Una página puede contener un artículo sumamente interesante, pero si la lectura se torna dificultosa, el visitante la abandonará sin pensarlo dos veces.
A menudo nos encontramos con sitios que emplean un color de texto muy claro sobre un fondo también claro, o emplean imágenes de fondo en gamas que no contrastan bien con el color de las fuentes. Lo mismo sucede cuando se utilizan fondos con texto (por lo general el nombre y/o logotipo de una empresa) que distraen del contenido.
Es muy importante, para evitar este error, usar fondos y textos que contrasten armoniosamente y que no cansen la vista.
Una lista muy completa sobre herramientas y sitios relacionados con el uso del color:
www.avivadirectory.com/color (en inglés)
Tamaño y tipo de fuentes bien legibles
Para hacer bien visible el texto es necesario manejar las tipografías apropiadamente. Para empezar, se debe ofrecer una familia genérica de fuentes, porque no todos los visitantes pueden tener instaladas las mismas que utilizamos en nuestra página.
Esas familias son:
- Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, mono
También es conveniente usar distintos tamaños y/o estilos (negritas, itálicas, versales) para diferenciar las partes del texto: títulos, subtítulos, enlaces, contenido, datos de contacto, etc.
Tips:
Para textos muy extensos, no conviene usar el negro como color de fondo y colores claros en la fuente (ni qué mencionar los colores fuertes, contrastantes), dado que al cabo de unos minutos la lectura se torna imposible.
Se recomienda un fondo blanco o muy claro, una tipografía oscura, sin serif (las que carecen de terminaciones en los extremos), en tamaño mínimo de 10 puntos, con un alto de línea mínimo también de 10 puntos, y un espaciado entre párrafos mínimo de 5 píxeles.
El texto claro sobre fondo negro es recomendable en menús verticales largos, u horizontales ubicados al pie de la página.
Enlaces resaltados y perfectamente distinguibles del resto del texto
Esto implica diferenciar sustancialmente todo aquello que sea enlace de aquello que forma parte del contenido propiamente dicho. Lo peor que se le puede hacer a un visitante es obligarlo a adivinar dónde están los links.
Lo más común es situarlos en la parte superior de la página, de manera horizontal, aunque también se pueden ubicar a la izquierda o derecha, verticalmente, pero siempre partiendo desde el extremo superior de la pantalla (o inmediatamente debajo del encabezado/logo).
Si los links son imágenes, conviene repetir la lista de enlaces al pie, en formato texto (básicamente para que puedan ser leídos por los robots de los buscadores). Y si la página es muy extensa, por cuestiones de comodidad, es igualmente recomendable.
No se aconseja cambiar el tipo de cursor cuando un visitante posa el puntero del mouse sobre un enlace, ya que la mayoría está habituada a que aparezca la famosa “manito” indicadora de un link. Esta técnica, si bien puede servir propósitos estéticos, lo más probable es que genere confusiones.
Asimismo, se recomienda diferenciar los links visitados de los que no han sido vistos (con otros colores, o con subrayados), en especial cuando se trata de una página con muchos enlaces.
Optimización de imágenes
Las imágenes que forman parte del diseño como complemento, deben ser eso: un detalle agregado que no debe interferir con el contenido. Y principalmente deben estar “tratadas” como corresponde. ¿Cuántas veces nos encontramos páginas llenas de imágenes poco nítidas, o pixeladas, o desproporcionadas? Esto se debe a que se insertan los archivos de imagen en el editor html (FrontPage, Dreamweaver, etc.) sin ser “ajustados” previamente en un editor de imágenes (Photoshop, Paint Shop Pro, etc.).
Para ser claros: si la imagen debe ocupar una porción de la página que mide 250×100 píxeles, el archivo de la imagen debe ser dimensionado y guardado en 250×100 píxeles. Insertar una imagen y redimensionarla desde el editor html es un error imperdonable que aún hoy se sigue cometiendo: no sólo atenta contra la estética del sitio, sino que pone de manifiesto la inexperiencia de quien diseña.
Animaciones: ¿usarlas o no usarlas?
No pocas veces los diseñadores nos encontramos ante la inevitable aunque tímida pregunta de nuestros clientes: “¿Y… no puede tener algo de movimiento?”
Eso que a muchos partidarios de los sitios sencillos, “usables” y basados en estándares nos resulta un verdadero atentado contra nuestros ideales ;-), todavía no está completamente desterrado del inconsciente del usuario común. Aunque parezca mentira, aún persiste la idea de que “cuanto más movimiento, más impacto visual y por ende mayor atracción de consumidores.”
Sin embargo, por muy tonto o ridículo que suene, nunca está de más aclarar: un sitio web no es un arbolito de Navidad.
Todos juntos, una vez más: “Un sitio web no es un arbolito de Navidad.” 😉
Claro está que hay sitios y sitios, y sus objetivos pueden ser muy distintos de acuerdo a lo que se quiera mostrar u ofrecer (como ya hemos visto). Por ejemplo, las animaciones dentro del sitio de una productora cinematográfica, no sólo lo van a enriquecer visualmente, sino que van a ser “esperadas” por quienes lo visitan. Lo mismo para el portfolio de un diseñador multimedia, y para algunos ejemplos más que no hace falta enumerar. Pero la animación por la animación misma (y porque queda “cool”) es innecesaria las más de las veces, y hasta diríamos adversa. ¿Por qué? Porque no sólo implica un mayor peso en la página (un punto en contra en cuanto a la accesibilidad del sitio), sino que, además, usada incorrectamente (o abusada) interfiere con su contenido; desvía la atención del visitante, e incluso, en ocasiones, se torna más una molestia que otra cosa.
La conclusión para este tópico tan discutido, aunque parezca vaga, es:
Hacer un uso inteligente de las animaciones. En sitios en los que la animación no hace al contenido, incluirlas sólo como detalle, lo mínimo indispensable.
Seguramente dejamos muchas cosas en el tintero. Pero no faltarán oportunidades para seguir mejorando y engrosando esta colección de artículos, que esperamos les sean de ayuda. Stay tuned.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
0 comentarios