Diseñar para el Ojo

En el diseño de páginas Web, entendiendo a estas como un símil de una página de un medio impreso, es conveniente tomar en cuenta una serie de consejos básicos para facilitar la tarea, así como recordar una regla central: “Todo es valido, mientras se vea bien y funcione como se espera”
Lo primero que se necesita es establecer el concepto y orientación del sitio, es decir, por una parte plantearse si es una página informativa, de recursos para navegantes u otro tipo y por otra a que está destinada.

Ya establecido lo anterior se tiene que preguntar por los colores distintivos o base de croma para el diseño, en la mayoría de los casos las páginas responden en este aspecto a lo que se establece dentro del concepto visual del sitio donde se insertan, tomando a sitio web como un equivalente a un libro u otro objeto compuesto de páginas.

Empleando un ejemplo, partamos de que se desea crear una página de inicio para una tienda de música juvenil, como parte del lanzamiento de un sitio que se encuentra en desarrollo, se inicia definiendo que estamos ante una página temporal, pero que debe ser lo suficientemente atractiva para despertar el interés de los navegante para volver. La página es informativa, divulga un acontecimiento que está sucediendo o por suceder, y esta destinada a atraer visitantes para cuando el sitio este disponible. Un buen consejo es no tomar este ejemplo muy en serio, lo mejor es lanzar un sitio operativo que crezca con el tiempo, en ves de dar anuncios de lo que aún no se termina, pero puede pasar que se necesite en algún momento hacerlo (por causas de presiones por el cliente, efecto publicitario, etc.), en fin los consejos generales que se brindan son aplicables a muchas otras situaciones más comunes.

La combinación de colores está definida por la imagen del cliente, hay que ver que para una biblioteca no es sensato emplear colores contrastantes y estridentes desmesuradamente, así como a nuestro sitio no le iría muy bien el empleo de colores pasteles y difuminados suaves (bueno, puede funcionar en una sección de música romántica, pero es ya es aparte), partiendo de los colores blanco, negro y rojo puro se abren posibilidades para el empleo de pequeñas porciones en amarillo oro y uno que otro gris para efectos de sombras. Hay que cuidar en no desbordar de colores, una inundación cromática puede ser la sentencia de un diseño.

Pasemos a lo que sigue, establecer el diseño o disposición de los elementos, lo esencial es que todo este al alcance de la vista sin llegar a recargar, a veces menos es más, si cuatro enlaces bastan en la barra de navegación inicial para acceder a las páginas de nivel inferior y continuar navegando, nada justifica agregar más (exceptuando algún servicio especial que se le ofrezca al visitante).

El asunto de los enlaces y creación de botoneras puede causar más de una disputa, algunos los prefieren en marcos apartes, lo frame, y otros los quieren dentro de la página para evitar errores de “Su navegador no soporta frame, lo sentimos” que pueden parecer improbables en la actualidad pero es mejor no confiarse mucho de que los usuarios estén constantemente actualizándose.

Lo ideal es diseñar varios sitios y establecer un redireccionador que pueda enviar al usuario a la versión de la página que mejor se ajusta a sus características por medio de un proceso que le resulta transparente o invisible al operador humano, eso es el centro de discusión de otro papel de trabajo, concentremonos de nuevo en o que toca a este.

Los botones de navegación deben disponerse preferiblemente arriba o a la izquierda, esto no es por capricho, responde a la forma en que solemos dirigir nuestros ojos en un objeto plano. Partimos de la esquina superior izquierda, pasamos por el borde superior, al llegar a la esquina derecha nos detenemos brevemente, vemos un poco por arriba del medio de la página, nos pasamos a la izquierda y nos mantenemos allí un breve tiempo antes de ver el centro, la derecha y el final de la página.

Este recorrido es parecido al que se aplica al leer en un medio impreso, con la condición de que el texto suele ser el hilo que nos conduce. Si se aplica un logo o varios, el de mayor peso o importancia debe estar en la esquina superior derecha, los titulares o encabezados se prefieren centrados, aunque estando a la izquierda con una sangría no quedan nada mal.

Los botones de navegación deben visibles (sin exagerar) y es mejor colocarlos en los sitios que se ha mencionado, puesto que allí los buscaríamos normalmente, en el caso de que se opte por colocar los botones dentro de la página y en el borde izquierdo, se le puede colocar un gráfico relativo al tema del que se habla a modo de letra inicial del párrafo o un material con su pie de imagen que brinde información adicional y posiblemente un enlace para saber más.

El texto es preferible que sea corto y remita a otras páginas para ampliar la información, si se necesita se emplean barras de deslizamiento. En cuanto a tipografía, es importante mencionar que no se debería trabajar con tipos de fuentes que no sean estándares en la mayoría de los sistemas operativos y navegadores empleados, es preferible ajustarse a la familia Times para encabezados o titulares, Arial para párrafos y tal vez Courier u otra monoespaciada para textos cortos. Los efectos de fuentes y la selección de los tamaños pueden variar los aspectos lo suficiente como para que basten definir dos o tres para un sitio completo, los carnavales de fuentes solo son agradables en los sitios de recursos en donde se pueden descargar estos recursos para emplearlas en diseños propios.

Al pie de la página se suele aprovechar para dar información del diseñador, webmaster, registro de derechos, fecha de creación y última actualización, todo esto en una fuente de menor tamaño que el resto del documento.

Bueno, tenemos la idea, los colores, los elementos básicos y hemos decidido como disponerlos, todo esto según los requerimientos y necesidades del cliente, pero no se ha hecho más que una breve referencia a los contenidos y sus formatos. Todo el texto de una web es texto plano con indicaciones de formato (o al menos solía serlo), que puede combinarse con otros recursos para crear efectos, complementarse o enriquecerse. Las imágenes que se empleen no deben distraer la atención de lo que se quiere transmitir, a menos que ellas sean el mensaje en sí. El uso de animaciones que sólo agregan eso muerto es fatal y una falta de cortesía con los navegantes, el usuario usualmente no es paciente con las descargas de un sitio o página, hay que considerar esto antes de arriesgar la velocidad de transferencia, lo que se haga no sólo ha de verse bien, debe ser funcional. Los parpadeos de una imagen pueden desconcentrar a un visitante y suelen cansar después de un tiempo. Si se aplican animaciones, es deseable que no sean de ciclo continuo sino que se repitan cada cierto tiempo y resulte suave o agradable (cuando menos que se vea bien)

El empleo de viñetas de imágenes que parpadean no es muy elegante, es preferible el empleo de una imagen fija que contraste con el fondo y mejor aún si es un dibujo original que sirva de recurso nemotécnico para fijar nuestro diseño en la memoria. Esto puede aplicarse incluso a los parpadeantes símbolos de novedades.

El diseño que nos planteamos puede quedar en desastre cuando se le vea en diferentes resoluciones y navegadores, ya se mencionó que el HTML no es un sistema de maquetación, sino un texto con indicaciones de formatos. Para paliar parte de esto se pueden emplear tablas dentro de cuyas celdas trabajamos todo lo dicho, no garantiza que salga todo bien a la primera, pero es probable que nos ahorre un par de problemas.

Para entrar en el problema del uso del color haría falta un escrito aparte, baste con señalar que es bueno preparar variaciones de las combinaciones de croma que se estén trabajando y darle al cliente un cierto rango para elegir, aquí el empleo de hojas de estilo puede ahorrar tiempo, ya veo que tendré que escribir varios papeles de trabajo más para cubrir todo esto que digo.

Pasando al empleo de Mapas de Imágenes, Botones y elementos en Flash, ActiveX y otras cosillas similares, por misericordia, cuiden que sea justificable su empleo y que no haya manera de lograr lo que se quiere de otra manera, pues el peso que pueden tener retrasan las transferencias y son todo un suplicio (más aún cuando descubrimos que nuestra paciente espera se realizó para ver a un estúpido elemento que no aporta nada a lo que buscábamos). El potencial de estos recursos rebasa el interés del escrito presente, ya los hablaremos luego.

Si ha llegado usted hasta este punto de la lectura, debe estar interesado en el tema, así que le daré un par de consejos finales que son la esencia de todo lo que puedo enseñarle en este tema:

1- Piense primero, dibuje o esquematice en papel sólo entonces haga un borrador en la computadora, la mayor parte de las sandeces de los diseños que han pasado por mis manos nacen de una idea que no alcanza a madurar, la premura de terminar algo que ni yo mismo sé como se va a ver o la carencia de un tiempo para establecer el esquema de trabajo.

2- Recuerde: Todo es valido, mientras se vea bien y funcione como se espera. Aprenda de los demás sitios que se relacionen al tema que trata para su cliente, atrevase a innovar, asuma retos y construya.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s