Guía Definitiva de Degradados Web. Parte II

Recuerdo alguna vez que escuché una plática donde el diseñador Jason Santa María expresaba que en el mundo del diseño no existen reglas, sino que hay buenas prácticas que nos ayudarán a producir un resultado adecuado.

Yo no podría estar más de acuerdo. A pesar de que son muchos los que han querido encontrar una receta que le permita diseñar a cualquiera, para fortuna de los diseñadores de profesión, la verdad es que no hay un reglamento escrito en piedra que dicte qué colores elegir, cómo combinarlos, qué tipografía usar o de qué manera balancear elementos. Todo depende de nuestros objetivos, experiencia y de las buenas prácticas.

En esta segunda parte de nuestra guía, veremos cuáles son las buenas prácticas a la hora de crear degradados en diseño web.

Parte II. Buenas Prácticas en la Utilización de Degradados:

Las buenas prácticas son una serie de métodos y acciones que han probado dar los mejores resultados a través del tiempo. Las buenas prácticas no son una realidad absoluta, pues pueden cambiar o seguir mejorando conforme siga habiendo descubrimientos en el área.

Utiliza degradados con un propósito:

Al utilizar degradados en un sitio web, es importante que sea con un propósito mayor al de sólo querer “embellecer” un área, o porque no sabemos qué hacer con los espacios vacíos. Justificar la utilización de un elemento en un diseño diciendo que es “porque se ve bonito” causa desconfianza a los clientes e implica novatez por parte del diseñador. No estoy diciendo que las razones por estética no sean válidas, pero no debemos sustentar una decisión solamente en el cómo se ve algo.

¿Cuáles son los propósitos por los cuales pueda usar degradados?
Los degradados nos pueden ayudar a enfatizar un área o producto que consideremos importante en un sitio web. O tal vez, notamos que nuestro diseño se ve un poco apagado y necesitamos agregar un poco de luz. Quizá notamos que la gente no está reconociendo apropiadamente cuáles son los botones que queremos que pulse, en este caso, a través de degradados podemos generar una sensación de volumen que guiará a nuestros usuarios hacia la información que queremos que vea y los elementos con los que queremos que interactúe.

Ejemplo de cómo dar énfasis con degradados
En esta imagen se ejemplifica cómo se puede resaltar algo por medio de degradados. El degradado radial verde quiere dar la sensación de iluminación, que enfoca y guía nuestra vista hacia la cámara.

 

Evita utilizar demasiados degradados:

Al utilizar muchos degradados corremos el riesgo de empalagar visualmente a nuestro visitante y terminar distrayéndolo. Otra de las repercusiones es en el desempeño del sitio, sobre todo si estamos aplicando degradados por medio de imágenes, ya que la página tardará más tiempo en cargar.

El siguiente ejemplo corresponde a la firma de abogados Thomas & Paulk.

Ejemplo de un sobreuso de degradados
Este sitio no sólo abusa de los degradados, sino también de las texturas.

Aparte de que este sitio tardó muchíiiiiisimo en cargar (ZZZzz), me la paso enfocándome más en los “efectitos” que en el contenido. Esta página tiene tanto nivel de detalle, que parece más una ilustración que página web. Más bien debería estar enmarcada y colgada en una pared, entreteniendo a clientes que se encuentran en la sala de espera del abogado.

Recuerden, tratamos de diseñar para web, no de ilustrar en web.

El diseño no debe depender de los degradados

Una buena práctica es la utilización de degradados o sombras sutiles por medio de CSS en vez de imágenes. De esta manera ahorramos la petición de imágenes al servidor y mejoramos el desempeño de una página web.
A pesar de que ya son más los navegadores que soportan degradados, siempre hay que tomar en cuenta aquellos navegadores que todavía no lo hacen. Debemos diseñar de tal manera de que el sitio siga manteniendo su esencia a pesar de que se le remuevan algunos degradados. Si el navegador no soporta degradados, entonces cargará el color de fondo y si el degradado es sutil no será un cambio muy drástico.

Degradado sutil y comparación con un browser que no soporta degradados con CSS
El lado izquierdo muestra cómo se vería nuestra área en un browser que no soporta degradados. Si el degradado no es sutil, el cambio se verá muy drástico.

Sin embargo, si el degradado resulta ser una parte crítica del diseño, tendremos que utilizar imágenes para no arriesgarnos a que el sitio se descomponga por culpa de un browser. Y el uso de imágenes siempre viene a un alto precio cuando se trata de desempeño.

Por dar un ejemplo de cómo un diseño depende mucho de un degradado, podemos ver a la aerolínea Interjet. El fondo de la página web de Interjet consiste en un degradado de azul a blanco, sin embargo, si removiéramos ese degradado, esto es lo que veríamos:

La imagen de la derecha muestra cómo el diseño de interjet depende de su imagen de fondo.
El sitio de Interjet sin su imagen de fondo cambia radicalmente. El logotipo ni siquiera se sigue viendo (Ooops!).

Eso quiere decir que tratándose de la página web de Interjet, el fondo es un elemento crítico en el área visual. La funcionalidad del sitio no se ve afectada e Interjet puede seguir vendiendo boletos; pero la apariencia, la marca y las emociones que transmitían se pierden. Los elementos del sitio web parecen flotando en la nada, sin coherencia y el logotipo ya ni siquiera puede verse.

No es necesario que pensemos en aplicar todos los degradados con CSS, pero sí tratar de que sean la mayoría de ellos. Además es una buena idea hacer que el diseño no sea tan dependiente de imágenes o degradados.

Texto sobre degradados

Cuando aplicamos un degradado en el fondo de un área que llevará texto, hay que cuidar que éste no pierda legibilidad en cualquier parte del degradado.
Texto sobre degradados

Para áreas que llevarán una mayor cantidad de texto, es preferible alejarse de colores brillantes, pues eso puede resultar muy cansado para el lector.

El sitio The Verge utiliza interesantes degradados con imágenes en el fondo donde se aplica texto. Como pueden ver, cuidan muy bien la selección de colores para que no se pierda la legibilidad, lo cual es de suma importancia para ellos porque son una revista digital.

Sutileza:

Erik Spiekerman, un gran diseñador de nuestros tiempos, expresa que el buen diseño es “invisible”. Los elementos de un diseño deben estar tan integrados que la gente no debe darse cuenta de que existen. Él lo expresaba más sobre el contexto tipográfico, pero este concepto se aplica a cualquier faceta del diseño.

A la hora de degradar colores, debemos buscar la naturalidad que sólo puede lograrse con sutileza.

Cuando un degradado no es sutil, se ve anti-natural. Cuando nuestro cerebro se topa con cosas anti-naturales las rechaza y provoca la sensación de desconfort. Los degradados poco sutiles también generan efectos involuntarios que no son agradables a la vista, como sensación de agresividad, deslavado o suciedad.

Sensación de agresividad

Los efectos pocos sutiles dan una sensación de agresión.
En la primer imagen se está utilizando una sombra demasiado dura. Esto no sólo hace que el efecto se vea demasiado agresivo, sino que de cierta manera, también ensucie el área.

En la segunda imagen se nota que se quiere dar el efecto de volumen, en este caso hace parecer un “pico”. Hay que tener cuidado cuando se quiere utilizar el efecto de “pico”, pues puede denotar agresión. Si estilizamos muchos elementos de esa manera, entonces tendremos muchos “picos” en nuestra página (X_x).

Creative Bloq es un blog de diseño que también utiliza ese efecto de pico, pero de una forma más sutil haciéndolo ver menos “filoso”. Además, los elementos que tienen ese efecto son menos y están distribuidos a lo largo de toda la página.

Sensación de deslavado

El efecto de deslavado generalmente aparece cuando degradamos un color a blanco. Cuanto más saturado sea el color más parecerá que el blanco carcome toda su vivacidad, como una ropa deslavada.
El efecto de deslavado mata la vistosidad del color y del sitio web.

La segunda imagen corresponde a la página de Magnicharters. Como pueden observar, a los botones se les quiso dar una especie de brillo para generar volumen o para resaltarlos. El problema, es que ese brillo blanco se ve demasiado raro  y apaga la vivacidad del color amarillo.

Sensación de suciedad

La sensación de suciedad ocurre cuando se aplica negro a un color. Cuando trabajamos con negro, debemos tener mucho cuidado, pues es muy poca la cantidad de éste que se requiere para dominar por completo al otro color. Los colores más claros y más saturados son los más susceptibles a “ensuciarse”.
09_gdII_suciedad

Volumen

Cuando queremos aplicar algo de volumen a nuestro sitio, hay que hacerlo con responsabilidad, no quisiéramos darle un look como el que tenían las páginas web a finales de los 90’s.

Tal vez, los siguientes ejemplos en efecto sean páginas que hayan sido diseñadas a finales de los 90’s, pero me pareció buena idea incluirlas como un claro ejemplo de lo que no se debe hacer con el volumen.

En este primer ejemplo, se le da la sensación de “tubo” al footer. Tal vez, en 1999, uno habría dicho, “WOW, ese footer se ve taaan 3D”, pero hoy en día, mejor no lo hagan, por favor. Además, qué ¿tiene que ver un tubo con una página de salud?
Efecto de volumen de mal gusto

En este segundo ejemplo, que pertenece a la misma página, los tabs se ven demasiado extraños. Parece que forman una onda como cuando frotas tiras de papel con el filo de una tijera, en este caso no entiendo la razón de por qué un tab deba hacerse con papel o estar doblado.
10_gdII_volumen


Una vez que ya tenemos la idea de para qué utilizar degradados y qué debemos evitar, ya estamos listos para empezar a experimentar con ellos. La tercera parte de esta guía se enfocará en cómo hacer degradados en un programa gráfico o con CSS, así como consejos para elegir colores.