El color en la web (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.

MAQUETACIÓN CON COLORES

Partes de una página.-

Vamos ahora a aplicar un poco todo lo visto a la maquetación de una página web mediante una gama de colores. Ya hemos visto antes qué gama podíamos utilizar segón el tipo de páginas. Vamos ahora a ver cómo podemos usar los colores para diferenciar las distintas partes de una página y para remarcar la importancia relativa de los diferentes elementos que las forman.

En los casos de páginas más complejas, y desde el punto de vista de lo que observa el usuario, podemos dividir estas en cabecera o sección de título, menó, pié de página y cuerpo o sección principal.

Sin duda alguna la parte más importante de las mencionadas es el cuerpo de la página, ya que en él va a figurar la información que queremos transmitir al visitante. Por esto, los colores dominantes en ella deben permitir una lectura de contenidos clara y amena, sin que se produzcan enmascaramientos del mismo. Para ello debemos usar un color para el texto que destaque adecuadamente sobre el del fondo de la página, y si queremos la máxima legibilidad deberemos usar un fondo blanco o de color claro con baja saturación  y un texto muy oscuro o negro, o por el contrario, un fondo oscuro bastante saturado con textos en colores claros y brillantes. 

Los enlaces que figuren en esta sección deben ser claramente diferenciados por el usuario, sobre todo si la página va dirigida a un póblico muy general; si no usamos los colores de enlace estándares (azules vivos con texto subrayado) sí que deberemos usar un color que destaque claramente del texto informativo y del fondo.

El cabecero o sección de título se localiza por costumbre en la parte superior de la página, y en él suele (y casi debe) figurar el logotipo de nuestra página, asociación o empresa. Es importante la presencia de un logotipo, ya que crea un signo de continuidad y de identidad en nuestras páginas, mostrando a los visitante rápidamente dónde se encuentran. El color de este debe ser tal que destaque claramente sobre el fondo, que sea lo primero que el usuario vea al entrar en la página.

En los idiomas occidentales se leen las páginas de arriba abajo y de izquierda a derecha, motivo por el cual el logo se sitóa casi siempre en la esquina superior izquierda. Si el color de nuestro logo es parecido al que vamos a dar al fondo de la página podemos crear un entorno alrededor del mismo que permita su correcta visión, lo que se suele conseguir situando una banda en la zona superior de la página, con un color de fondo diferente al del cuerpo de la misma y tal que el logo destaque adecuadamente sobre él.

También es normal situar en esta zona, a la derecha del logo un mensaje claro y directo sobre la identidad y contenido de la página, y asímismo es corriente usar la parte baja de la cabecera para insertar en ella un menó de navegación general, en el que estarán las secciones más importantes del sitio web. El color de esta sección no debe destacar en exceso sobre el del cabecero, debiendo buscar siempre la plena integración visual entre ambos.

El menú de navegación es una parte muy importante de la página, ya que debe ser el elemento más interactivo de la misma, facililtando al visitante una rápida navegación por todo el contenido del sitio web. Sus enlaces deben aunar el ser fácilmente visibles con el no ser demasiado impactantes, ya que no deben quitarle la importancia relativa ni al cabecero ni al texto del cuerpo. Podemos crear para esta zona una banda vertical de un color diferente al del cuerpo, que puede ser igual al del cabecero o no, pero siempre de tal forma que sea la tercera sección más visible, por lo que sus textos deben fundirse un poco con el fondo, dando una sensación de continuidad.

Muchos diseñadores se basan el los enlaces y menós por medio de imágenes para conseguir esto, pués les permiten tener un mayor control sobre el resultado final. En contrapartida, tardarán más en cargar. Una buena solución es el uso de textos o imágenes que inicialmente no destacan demasiado sobre el fondo, pero que al situar el cursor sobre ellas se iluminan o cambian de color, produciéndose un efecto positivo con ello.

Por ólimo, el pie de página es el elemento menos importante de la página, de tal forma que muchos autores ni siquiera lo consideran. Caso de usarse, no conviene que su color cambie respecto al del fondo del cuerpo, y si lo hace debe ser muy ligéramente, ya que si no podemos distraer la atención del usuario y crear un cuerpo de página encajonado. En el pie de página se suelen colocar enlaces de tipo terciario, enlaces de correo o accesos a servicios secundarios que proporcione nuestro sitio web.

Proceso de elección de la gama.-

A la hora construir una página lo primero que tenemos que tener claro es la gama de colores que vamos a emplear en sus distintas partes, y para ello debemos comenzar siempre con seleccionar un color o colores base, que será el que de un espíritu propio a nuestro sitio. Es importante la elección de esta gama, ya que, por regla general, será conveniente mantener esta gama en todas las páginas del sitio, logrando con ello establecer una identidad propia y una continuidad entre todas las páginas que lo forman.

Si tenemos elegido o impuesto un logotipo, sus colores van a ser los que marquen la guía para el resto de la página. Ya que sus colores deben figurar por fuerza, deberemos conseguir que el resto sean equilibrados con estos, con el objetivo de lograr una buena armonía de colores.

Es conveniente que nos basemos en una de las gamas de colores estudiadas en el capítulo 6, sobre todo si no tenemos grán experiencia en el diseño con colores. Tomando como base dichas gamas y el logotipo de esta página (de color verde claro con reflejos brillantes), vamos a construir diferentes modalidades de una misma página:

• gama de colores complementarios: el complementario del verde claro es el rojo-morado. Usando esta base vamos a crear un cabecero de fondo morado, que incluye el logo verde y un texto rojizo, un menó de fondo morado más clarito, con enlaces en verde y un cuerpo con fondo verde muy claro y texto en negro, para que veáis bien los contrastes. El resultado lo podéis ver en la siguiente ventana.
  
  
• colores complementarios cercanos: tomando como base el verde claro, sus complementarios cercanos son el rojo anaranjado y el azul oscuro, un poco morado. El resultado aquí
  
  
• dobles complementarios: que en nuestro caso van a ser las parejas verde-morado y amarillo-azul. Su efecto es el siguiente.
  
  
• tríada complementaria: formada en este caso por el verde, el azul oscuro y el rojo. El resultado es el siguiente.
  
  
• gama móltiple: y para ello vamos a tomar una gama de verdes de diferentes tonalidades. Es una gama de colores análogos, cuyo efecto es el siguiente.
  
  
• gama brillante-tenue: que en nuestro caso será el verde con un morado muy apagado. El resultado en esta ventana.
  
  

Estas son sólo una serie de combinaciones básicas, que ni son una guía estricta de uso ni está formada por todas las ótiles o posibles. Ensayo y experiencia son la base de la gama adecuada para cada sitio web.