El color es un elemento muy importante a la hora de diseñar una web y ¡los degradados vuelven a estar de moda! Pero la forma de utilizarlos es clave para que nuestro diseño mantenga la funcionalidad y estética que buscamos.

En la actualidad nos encontramos con una tendencia bastante minimalista en el área del diseño web con corrientes como el flat design; sin embargo, en este 2018 también estamos comprobando cómo es posible continuar en esta línea sin ceñirnos estrictamente al uso de colores planos. Y es que, ¿por qué no aprovecharlas ventajas que aportan los efectos multitono? Eso sí, siempre aplicándolos de forma sutil.

Ya hablamos recientemente sobre el cambio del logotipo de Instagram y su evolución hacia el flat design, pero esta renovación no se realizó centrándose en un único color; de hecho, este logo marcó de alguna manera el camino hacia una nueva tendencia en el uso de los degradados, aportando un mayor equilibrio visual a los diseños sin perder su funcionalidad y simplicidad.

Logo Instagram

¿Dónde usar los degradados en diseño web?

  • Como fondo o background de una página: Uno de los principales usos de los degradados es aplicarlo como elemento de fondo o background. Utilizado de forma correcta puede ser un gran apoyo visual y estético sin restar importancia a los elementos que realmente queremos destacar. Lo más aconsejable es que se utilice como fondo para páginas que no tengan demasiados elementos y que permita al usuario localizar rápidamente la información que busca:

Degradado fitbithttps://www.fitbit.com/es/app

  • Sobre una imagen: Otro de los usos que podemos hacer con los degradados es colocarlos como un elemento semitransparente encima de una imagen modificando su opacidad. Esta una técnica muy utilizada para páginas de inicio, banners de gran tamaño (las conocidas hero images):

Degradados-nycpridehttps://www.nycpride.org/

  • En logos, botones y tipografías: Sí, ahí también podemos usar degradados (siempre que se cumplan ciertas pautas) siendo un recurso muy útil para los diseñadores a la hora de destacar elementos.

Degradados gogorohttps://www.gogoro.com/

Pautas para usar los degradados en diseño web

  • Elección de la paleta de color: Otro factor a tener en cuenta es la paleta de color. El uso de degradados aporta cierto realismo (recordemos que en el mundo real no encontramos colores planos) pero es importante elegir colores que permitan realizar transiciones naturales, ya que no todos los colores combinan bien entre sí (no es lo mismo pasar de un rojo a un naranja que a un verde). Además, buscamos regirnos por la simplicidad, por lo que un par de colores (tres a lo sumo) sería lo adecuado, ya que se trata de dar equilibrio, no de recargar nuestro diseño haciendo uso de toda la gama cromática.

Degradados HCEhttps://www.hce.it/

  • Propiedades de los colores: Utilizar colores con los mismos valores, por ejemplo de saturación, puede ser contraproducente. Y es que mezclar dos colores con las mismas propiedades podría resultar “agresivo” visualmente, llegando a afectar a la experiencia de usuario. De hecho, si utilizamos la paleta correcta jugando adecuadamente con las propiedades de nuestros colores, modificando su opacidad y combinándolos de manera sutil,  podemos crear un efecto de amplitud y espacio entre los elementos de nuestra página, lo que nos permitirá resaltar aquello que más nos interesa.

Degradados Spotifyhttps://www.spotify.com/es/

Además, hoy en día existen muchas herramientas que pueden ser muy útiles a la hora de buscar la gama cromática más adecuada para vuestros diseños, como webgradients o paletton.

¿Os animáis a probar los degradados en vuestra web? ?