Vamos a diseccionar las tendencias actuales del diseño digital, en primer lugar los Gradientes, uno de los temas más mencionados en los resultados de nuestra encuesta de tendencias, realizada gracias a la colaboración de los usuarios y el Jurado de los Awwwards. Consulta los resultados completos de la encuesta en nuestro libro NOW. Un paisaje contemporáneo para pensadores digitales.

Los degradados están de moda desde hace tiempo, inicialmente volvieron a aparecer de forma convencional en fondos e imágenes. Spotify los volvió a popularizar aplicando degradados duotono sobre fotos como elemento característico de la marca en sus campañas y micrositios. Puedes encontrar un pequeño tutorial aquí sobre cómo crear degradados duotono en photoshop.

Este año hemos visto varios degradados multicolor con paletas de colores vibrantes y formas irregulares con efectos de desenfoque y distorsión. Los degradados se utilizan actualmente de muchas maneras pero lo más característico, en cuanto a tendencias, es que su uso se extiende a elementos secundarios dentro de la composición, como hovers, títulos, elementos 3D, iconos y más.

• 

El iPhone X representa el paradigma de las tendencias de 2018. En su landing page, en los anuncios y en muchos de los elementos de sus campañas promocionales se utilizan degradados de varios tonos por encima de los títulos, los textos o incluso el isotipo. Sin embargo, en los fondos y sobre todo en el diseño en la pantalla de inicio del iPhone X, los degradados NO son uniformes como los tradicionales degradados lineales o radiales, sino multicolores con mezclas irregulares.

Gradientes en 3D? Estilo Vertex color y colormap

Parece obvio hablar de degradados en 3D, ya que la iluminación de la escena genera una gradación de luz sobre la superficie del objeto, pero lo inherente a esta tendencia es precisamente el uso de degradados como textura del objeto, imitando en ocasiones las técnicas de color vertex y colormap gradient. Ambas técnicas cumplen algo más que una función puramente decorativa, ya que se utilizan para representar datos o mapear objetos 3D.

Tipos de degradados

Podemos mezclar colores de múltiples maneras, siendo las más comunes los degradados lineales o radiales con diferentes parámetros como el radio, la orientación, la opacidad o los puntos de color. Lo que está de moda ahora, como hemos visto en el caso del iPhoneX, es el uso de mezclas no uniformes que utilizan mallas de degradado u otras técnicas. Con las mallas de gradiente distorsionamos la superficie del gradiente para generar una forma libre. Podemos encontrar muchos tipos de degradados como monotono, duotono, multicolor, rampas de degradado, etc, como se demuestra en el siguiente gráfico.

Herramientas útiles para degradados CSS

Para recrear estos efectos en CSS hay un montón de herramientas disponibles que permiten crearlos a través de editores visuales, simplemente copiando y pegando el código CSS, como puedes ver aquí: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Matiz

  

• Gradientes de suavizado

  

• Gradientes UI

  

¡Descargue el archivo fuente de gradientes!

Entrégate a los degradados, descarga gratis el archivo fuente en formato vectorial .ai o pdf para hacer tus propios experimentos de diseño con los degradados del cartel.

DESCARGA AQUÍ

Colección de degradados de Awwwards

Como siempre hemos hecho una selección de SOTDs y nominados para que puedas ver estos efectos en uso, esperamos que puedas encontrar algo de inspiración en las Colecciones Awwwards o en nuestro libro, NOW. A Contemporary Landscape for Digital Thinkers que analiza las principales tendencias de diseño web del año.

• 
• 
• Modelo 3D en WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Página de inicio en Parallax