El contraste en el diseño web

El contraste en el diseño web puede ser usado para destacar los elementos que más nos interesa que el usuario perciba con claridad.

Se llama contraste a las diferencias que existen entre dos elementos relacionados y es uno de los principios de diseño web. El contraste puede ser mayor o menor en la medida que mayores o menores sean las diferencias de estos elementos. Esto quiere decir que dos elementos que tienen pocas diferencias entre sus atributos tienen un contraste bajo, mientras que dos elementos cuyos atributos se diferencias mucho, tienen un alto contraste.

El empleo del contraste en el diseño web resulta muy importante para atraer la atención del usuario. Una página web cuyos elementos tienen poco contraste no atraerá la atención de los posibles usuarios, mientras que una web que emplea un  contraste evidente para destacar sus elementos más importantes, atraerá fácilmente la atención. El contraste es uno de los métodos empleados para dirigir la atención del usuario de la página hacia determinados elementos. En el siguiente ejemplo, una misma imagen se muestra con dos contrastes diferentes. Es fácil determinar que, a pesar de ser la misma imagen y tener el mismo tamaño y color, la primera en llamar la atención es la imagen de la derecha, cuyo contraste es más marcado que el de la imagen de la izquierda.

Si en una página web se desea resaltar un objeto contrastándolo con los demás elementos que lo circundan, no necesariamente hay que oscurecerlo, agrandarlo, deformarlo o cambiar su color. El contraste, tal como ya lo definimos, es la diferencia entre los distintos elementos, por lo que también es posible cambiar los atributos de los elementos circundantes, de forma que a pesar de no haber realizado cambios en el objeto logramos destacarlo por contraste.

Tipos de contraste

Existen cuatro tipos de contraste:

• Contraste de tono
• Contraste de color
• Contraste de contorno
• Contraste de alineación
• Contraste de escala o tamaño
  

Contraste de tono

De todas las propiedades de color (tono, matiz y croma), el tono es el que brinda mayores posibilidades de empleo para manejar el contraste entre diferentes elementos, por lo que también resulta el más usado. Un ejemplo notable de la utilización de variaciones de tono para destacar los diferentes elementos podemos verlo en la siguiente imagen:

En la imagen anterior puede apreciarse que el menú se encuentra distribuido por toda la página y tienen la misma forma y tamaño que el resto de los cuadros en que se encuentra dividida la misma. La diferenciación de los elementos del menú está basada en variaciones de tono. Si posamos el puntero en alguno de estos elementos, podremos ver que para destacar el elemento que se está por seleccionar, también los diseñadores han empleado variaciones tonales.

Contraste de color

Relacionado con el anterior tipo de contraste, pero diferente, está el contraste de color. Mientras que el contraste de tono juega con variaciones dentro del mismo color para lograr ese impacto visual deseado, el contraste de color produce variaciones precisamente en color.

Como decíamos, el contraste en color es otra de las posibilidades de contrastar objetos es a través del empleo de diferentes colores. Este tipo de contraste, bien empleado, da muy buenos resultados, pero también puede dar lugar a resultados desagradables si no se emplea con buen criterio.

La combinación de colores en diferentes elementos en una web no solo tiene la finalidad de embellecer el conjunto, sino que además posibilita destacar elementos. La combinación de elementos con colores fríos y cálidos es la forma más corriente de lograr el mencionado destaque.

Mientras que los colores fríos (verdes y azules) tienden a dar pasividad y dan un aspecto regresivo al objeto, los colores cálidos (rojos y amarillos) son más agresivos y brindan a los objetos un aspecto expansivo. Esto quiere decir que si empleamos adecuadamente la combinación de colores fríos y cálidos, podemos lograr que un objeto se destaque sobre los demás.

En el siguiente ejemplo podemos apreciar una página web que se encuentra diseñada sobre un fondo de color neutro, cuyo logotipo no presenta grandes diferencias de tamaño ni de tono respecto de los demás elementos de la página. Los diseñadores han logrado resaltar el logotipo de la página web mediante el empleo del contraste de color.

Contraste de contorno

Una forma sencilla de destacar los elementos entre sí, es el empleo de variaciones en el contorno. Las formas irregulares o abstractas atraen más la atención visual que las figuras sencillas y geométricas.

Si colocáramos algunas imágenes con un contorno geométrico (cuadrado, círculo, rectángulo, etc.) junto a una imagen cuyo contorno es irregular y sin otro tipo de diferencias entre ellas, lograremos que la vista de quien observe el conjunto se pose en primer lugar en el elemento irregular.

El siguiente es un ejemplo notable del empleo del contraste de contorno. En la imagen aparece una página web en cuyo diseño aparecen varios elementos con colores llamativos, alto contraste y tamaños similares. Sin embargo, el logotipo es lo primero que llama la atención, debido a su forma irregular que contrasta claramente con el resto de la página que tiene trazados marcadamente geométricos.

Contraste de alineación

Lograr una correcta alineación de los elementos de una página web es una de las cosas más importantes que debemos tener en cuenta en su diseño. Las cosas lucen mejor cuando están correctamente alineadas, y el impacto visual de ver algo “en su sitio” a verlo descolocado es notablemente mejor.

En el siguiente ejemplo vemos una alineación pareada, basada en dos cajas iguales alineadas, cuyos elementos interiores también se encuentran alienados. A pesar de que el tamaño de letra de los encabezados no es muy superior al del resto del texto, debido a su estructura resulta un elemento claramente diferenciado e importante.

Contraste de escala o tamaño

La utilización de escala o tamaño diferente para resaltar determinados elementos es una de las formas más conocidas y sencillas de conseguir el contraste. Es lógico que si colocamos un elemento de mayor tamaño que otros, aún cuando sean similares en otros atributos, éste elemento se destacará del resto, y que cuanto mayor sea la diferencia de escala, mayor será el contraste.

En el siguiente ejemplo, vemos la imagen de una página web en la que el nombre del juego promocionado logra destacarse (con algunos peros) del resto, debido a que se encuentra a una escala mayor que el resto de los elementos que componen esta página.

Un mal uso (o abuso) del contraste

Si volvemos al ejemplo anterior, vemos un uso excesivo del contraste en su diseño, demasiado contraste de color y contorno entre los elementos, lo que en conjunto vuelve al diseño en algo caótico e incluso agobiante. De la intención inicial de crear una página útil y agradable, el resultado final acaba siendo un sitio desorganizado y con sobre carga de información.

Así, se ve que aunque el contraste es un recurso muy potente que debemos tener en cuenta a la hroa de diseñar una página web, hay que tener el suficiente conocimiento como para saber aplicarlo adecuadamente y en su justa medida.

Conclusión

Los ejemplos anteriores muestran la aplicación de un tipo de contraste para diferenciar elementos entre sí. Sin embargo, lo más frecuente es que el realce de los elementos más importantes se haga a través del empleo de más de un tipo de contraste combinados.

Pero hay que destacar, como vimos en el anterior apartado, que es muy fácil emplear incorrectamente el contraste. Uno de los errores más frecuentes es el ya comentado de emplear contrastes excesivos, desfavoreciendo la estética general de la página. Otro error frecuente es que, por desconocimiento de estos conceptos, terminan destacándose elementos que no son los más importantes de la página. El uso del contraste, como cualquier otra técnica, debe ser practicado para conseguir buenos resultados.