Degradado de color, un potente elemento en la Interfaz de Usuario

Durante mucho tiempo el uso del degradado de color o gradiente fue el mayor no-no en diseño. Los diseñadores tendíamos a evitar el degradado de color porque creaban una fuerte impresión de diseño de los años 90 —quizá 80s?—.

degradado de color
Gradiente creado en Wordart

Pero ese ya no es más el caso. Si abres Dribbble o Behance en este momento, es muy probable que veas docenas de diseños que usan gradientes. El degradado de color que usan los diseñadores son «ruidosos» y llenos de movimiento.

En este artículo, quiero compartir algunos consejos sobre cómo usar los gradientes en el diseño. Especialmente pensando en el diseño de Interfaz de Usuario (UI).

¿Por qué tendemos a usar degradado de color en el diseño?

Para encontrar la respuesta a esta pregunta, debemos volver al 2014. Fue el año en que el diseño plano —flat design— se hizo popular: Google lanzó Material Design y Apple actualizó sus macOS con un diseño de IU plano. En aquel entonces, el diseño plano era fresco y emocionante, especialmente en comparación con el diseño skeuomorphic.

Pero el diseño plano tiene sus propias limitaciones. Y una de esas limitaciones significativas es en el contexto de los colores y estilos que los diseñadores podemos usar. Es difícil nombrar más de 10–15 colores que se pueden usar para un diseño plano.

Mediante el uso de los gradientes los diseñadores:

  • Conseguimos más libertad creativa. Mientras que los colores planos ahogan el potencial del diseño, el degradado de color abre la puerta a infinitas posibilidades. Al combinar colores, los diseñadores podemos crear diseños visuales llamativos y memorables.
  • Podemos introducir profundidad y dimensión al diseño. Los gradientes resuelven el problema del diseño ultra plano (diseños que parecen «demasiado planos»)

Los gradientes son una herramienta sorprendentemente versátil

Usando gradientes, los diseñadores podemos:

Hacer declaraciones audaces

El degradado de color ayuda a crear algo nuevo e inesperado. Incluso un elemento pequeño como un logotipo, puede ser emocionante si le aplicas un degradado.

logo de instagram
Logo de Instagram: el gradiente le da al icono más profundidad y dimensión.

Enfatizar ciertos elementos

Una gran experiencia de usuario dirige a los usuarios de forma intuitiva a través del producto. El degradado de color bien diseñado subconscientemente lleva a los usuarios hacia el punto focal.

Al hacer que algunas partes de la página sean más intensas, les da más peso visual y las hace más notorias.

Echa un vistazo a la página de inicio de Mixpanel. La ilustración juega un papel vital en este diseño, y el fondo del degradado lo prioriza visualmente.

mixpanel
Los gradientes son perfectos cuando necesitas llamar la atención de la gente hacia un área determinada. Mixpanel usa gradientes para resaltar la ilustración.

6 prácticas para crear un gradiente impresionante

1.- Aprende tipos básicos de degradado de color.

Hay varios tipos de gradientes. Todos implican un punto de partida central donde el color comienza y se mezcla progresivamente en otros colores. Para este artículo, quiero cubrir tres tipos comunes de gradientes:

Lineal

Un degradado lineal crea una banda de colores que progresa en una línea recta. El degradado cambia suavemente de un color a otro.

gradiente lineal
Gradiente lineal. Para crear un degradado lineal, debes especificar dos colores (o dos tintes de un color).

Radial

Los gradientes radiales son similares a los gradientes lineales, excepto que se irradian desde un punto central. Como diseñador, puedes dominar dónde debe estar ese punto central y especificar el tamaño del degradado.

gradiente radial
Gradiente radial

El logo de Instagram que viste arriba fue creado usando un gradiente radial.

Cónico

Un degradado cónico es similar a un degradado radial: ambos son circulares y utilizan el centro del elemento como el punto de origen para las paradas de color. Sin embargo, para un degradado radial, las paradas de color emergen del centro del círculo, mientras que un degradado cónico coloca paradas de color alrededor del círculo.

gradiente cónico
Creando un gradiente cónico en Adobe Illustrator. Imagen: stackexchange

2.- ¡No elijas el color al azar!

No todos los colores funcionan bien entre sí. Por ejemplo, al combinar colores complementarios, es probable que obtengas esa transición de color con mala apariencia.

rueda de color

El degradado de rojo a verde en el siguiente ejemplo se ve sucio:

gradiente sucio
Intenta evitar el uso de colores complementarios al crear un degradado.

Es mejor usar colores análogos (colores que están uno al lado del otro en la rueda de colores):

rueda de color

o sombras del mismo color (es decir, sombras del azul)

gradiente colores analogos
Usando tonos de azul para un degradado.

3.- Crea transiciones suaves

La transición entre colores debe ser muy suave. Idealmente, el usuario no debería notar el lugar donde un color fluye a otro.

Dale un vistazo al siguiente ejemplo. Puedes notar una línea que separa dos colores. Esta línea crea la impresión de una transición abrupta.

gradiente transición abrupta
No crees gradientes con transiciones abruptas de color.

Los ojos del usuario deben relajarse mientras «escanean» la página.

Para crear una transición suave, necesitas pasar más tiempo jugando con las paradas de color.

gradiente transición suave
Crea gradientes con transiciones suaves de color.

4.- Transmite emoción o estado de ánimo.

El color evoca respuestas emocionales. Podemos usar esta propiedad de color para conectar con la audiencia en un nivel más profundo.

Piensa en lo que quieres que tus usuarios sientan cuando interactúan con tu producto.

Por ejemplo, si deseas crear una atmósfera altamente energética, puedes usar el degradado de rojo a naranja.

gradiente colores positivos
Los colores brillantes y audaces despiertan sentimientos positivos.

Pero si deseas crear una atmósfera relajante, probablemente debas usar un degradado de azul a azul oscuro.

gradiente colores calma
Los tonos profundos traen la calma.

5.- No te olvides del contraste de color.

No importa lo hermoso que sea su diseño, no debes olvidarte de la accesibilidad. Comprueba siempre la relación de contraste de color.

gradiente mal constraste
La falta de contraste de color conduce a una mala legibilidad.

WCAG 2 nivel AA requiere una relación de contraste de al menos 4.5: 1 para texto normal y 3: 1 para texto grande, y una relación de contraste de al menos 3: 1 para gráficos y componentes de interfaz de usuario

gradiente buen contraste

6.- Usa las herramientas adecuadas

Es fácil crear gradientes utilizando Adobe Illustrator. Pero también hay muchas herramientas especiales para crear gradientes, aquí puedes encontrar varias.

Bien. Como verás el degradado de color puede que esté más vigente que nunca. Sólo debemos cuidar los detalles y seguro que tendrán un rol muy relevante en el diseño de UI que tenemos por delante.

¡Oferta!

Diseño de sitio web profesional en WordPress + 12 meses de alojamiento especializado (SiteGround) por US $399.

QUIERO LA OFERTA

Colombia: 669.000 COP / México: 7.719 MXN / España: 355 €